neko-ui 2.9.2 → 2.9.4

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 (415) hide show
  1. package/es/avatar/favicon.svg +0 -0
  2. package/es/avatar/group.js +17 -18
  3. package/es/avatar/group.js.map +1 -1
  4. package/es/avatar/index.js +1 -2
  5. package/es/avatar/index.js.map +1 -1
  6. package/es/avatar/style.js +1 -2
  7. package/es/avatar/style.js.map +1 -1
  8. package/es/back-top/index.js +1 -2
  9. package/es/back-top/index.js.map +1 -1
  10. package/es/back-top/style.js +1 -2
  11. package/es/back-top/style.js.map +1 -1
  12. package/es/basic-config/index.js +1 -2
  13. package/es/basic-config/index.js.map +1 -1
  14. package/es/button/index.js +1 -2
  15. package/es/button/index.js.map +1 -1
  16. package/es/button/style.js +1 -2
  17. package/es/button/style.js.map +1 -1
  18. package/es/capture-screen/index.js +1 -2
  19. package/es/capture-screen/index.js.map +1 -1
  20. package/es/capture-screen/style.js +1 -2
  21. package/es/capture-screen/style.js.map +1 -1
  22. package/es/carousel/index.js +1 -2
  23. package/es/carousel/index.js.map +1 -1
  24. package/es/carousel/style.js +1 -2
  25. package/es/carousel/style.js.map +1 -1
  26. package/es/checkbox/index.js +1 -2
  27. package/es/checkbox/index.js.map +1 -1
  28. package/es/checkbox/style.js +1 -2
  29. package/es/checkbox/style.js.map +1 -1
  30. package/es/code/index.d.ts +6 -2
  31. package/es/code/index.js +1 -2
  32. package/es/code/index.js.map +1 -1
  33. package/es/code/style.js +25 -26
  34. package/es/code/style.js.map +1 -1
  35. package/es/code/worker.js +1 -2
  36. package/es/code/worker.js.map +1 -1
  37. package/es/color-palette/index.js +1 -2
  38. package/es/color-palette/index.js.map +1 -1
  39. package/es/color-palette/style.js +1 -2
  40. package/es/color-palette/style.js.map +1 -1
  41. package/es/color-picker/index.js +1 -2
  42. package/es/color-picker/index.js.map +1 -1
  43. package/es/color-picker/style.js +1 -2
  44. package/es/color-picker/style.js.map +1 -1
  45. package/es/cron/begin-interval.js +1 -2
  46. package/es/cron/begin-interval.js.map +1 -1
  47. package/es/cron/day.js +1 -2
  48. package/es/cron/day.js.map +1 -1
  49. package/es/cron/hour.js +1 -2
  50. package/es/cron/hour.js.map +1 -1
  51. package/es/cron/index.js +1 -2
  52. package/es/cron/index.js.map +1 -1
  53. package/es/cron/item.js +1 -2
  54. package/es/cron/item.js.map +1 -1
  55. package/es/cron/minute.js +1 -2
  56. package/es/cron/minute.js.map +1 -1
  57. package/es/cron/month.js +1 -2
  58. package/es/cron/month.js.map +1 -1
  59. package/es/cron/period.js +1 -2
  60. package/es/cron/period.js.map +1 -1
  61. package/es/cron/second.js +1 -2
  62. package/es/cron/second.js.map +1 -1
  63. package/es/cron/some.js +1 -2
  64. package/es/cron/some.js.map +1 -1
  65. package/es/cron/style.js +1 -2
  66. package/es/cron/style.js.map +1 -1
  67. package/es/cron/week.js +1 -2
  68. package/es/cron/week.js.map +1 -1
  69. package/es/cron/year.js +1 -2
  70. package/es/cron/year.js.map +1 -1
  71. package/es/date-picker/date.js +1 -2
  72. package/es/date-picker/date.js.map +1 -1
  73. package/es/date-picker/dayjs.js +1 -2
  74. package/es/date-picker/dayjs.js.map +1 -1
  75. package/es/date-picker/index.js +1 -2
  76. package/es/date-picker/index.js.map +1 -1
  77. package/es/date-picker/month.js +1 -2
  78. package/es/date-picker/month.js.map +1 -1
  79. package/es/date-picker/panel.js +1 -2
  80. package/es/date-picker/panel.js.map +1 -1
  81. package/es/date-picker/style.js +1 -2
  82. package/es/date-picker/style.js.map +1 -1
  83. package/es/date-picker/time.js +1 -2
  84. package/es/date-picker/time.js.map +1 -1
  85. package/es/date-picker/year.js +1 -2
  86. package/es/date-picker/year.js.map +1 -1
  87. package/es/dropdown/index.js +1 -2
  88. package/es/dropdown/index.js.map +1 -1
  89. package/es/empty/index.js +1 -2
  90. package/es/empty/index.js.map +1 -1
  91. package/es/from-schema/index.js +1 -2
  92. package/es/from-schema/index.js.map +1 -1
  93. package/es/get-options/index.js +1 -2
  94. package/es/get-options/index.js.map +1 -1
  95. package/es/highlight-text/index.js +1 -2
  96. package/es/highlight-text/index.js.map +1 -1
  97. package/es/img/index.js +1 -2
  98. package/es/img/index.js.map +1 -1
  99. package/es/img/lazy.js +1 -2
  100. package/es/img/lazy.js.map +1 -1
  101. package/es/img/style.js +1 -2
  102. package/es/img/style.js.map +1 -1
  103. package/es/index.js +1 -2
  104. package/es/index.js.map +1 -1
  105. package/es/input/index.js +1 -2
  106. package/es/input/index.js.map +1 -1
  107. package/es/input/style.js +1 -2
  108. package/es/input/style.js.map +1 -1
  109. package/es/input-number/index.js +1 -2
  110. package/es/input-number/index.js.map +1 -1
  111. package/es/katex/index.js +1 -2
  112. package/es/katex/index.js.map +1 -1
  113. package/es/md/common.d.ts +4 -0
  114. package/es/md/common.js +1 -0
  115. package/es/md/common.js.map +1 -0
  116. package/es/md/index.d.ts +1 -0
  117. package/es/md/index.js +1 -2
  118. package/es/md/index.js.map +1 -1
  119. package/es/md/worker.d.ts +9 -1
  120. package/es/md/worker.js +1 -2
  121. package/es/md/worker.js.map +1 -1
  122. package/es/md-style/index.js +1 -2
  123. package/es/md-style/index.js.map +1 -1
  124. package/es/menu/index.js +1 -2
  125. package/es/menu/index.js.map +1 -1
  126. package/es/menu/style.js +1 -2
  127. package/es/menu/style.js.map +1 -1
  128. package/es/modal/hooks.js +1 -2
  129. package/es/modal/hooks.js.map +1 -1
  130. package/es/modal/index.js +1 -2
  131. package/es/modal/index.js.map +1 -1
  132. package/es/modal/store.js +1 -2
  133. package/es/modal/store.js.map +1 -1
  134. package/es/modal/style.js +1 -2
  135. package/es/modal/style.js.map +1 -1
  136. package/es/notification/index.js +1 -2
  137. package/es/notification/index.js.map +1 -1
  138. package/es/notification/notification.js +1 -2
  139. package/es/notification/notification.js.map +1 -1
  140. package/es/notification/queque.js +1 -2
  141. package/es/notification/queque.js.map +1 -1
  142. package/es/notification/styles.js +1 -2
  143. package/es/notification/styles.js.map +1 -1
  144. package/es/pagination/index.js +1 -2
  145. package/es/pagination/index.js.map +1 -1
  146. package/es/pagination/styles.js +1 -2
  147. package/es/pagination/styles.js.map +1 -1
  148. package/es/popover/index.js +1 -2
  149. package/es/popover/index.js.map +1 -1
  150. package/es/popover/style.js +1 -2
  151. package/es/popover/style.js.map +1 -1
  152. package/es/prism/index.d.ts +0 -1
  153. package/es/prism/index.js +1 -2
  154. package/es/prism/index.js.map +1 -1
  155. package/es/provider/index.js +1 -2
  156. package/es/provider/index.js.map +1 -1
  157. package/es/qrcode/index.js +1 -2
  158. package/es/qrcode/index.js.map +1 -1
  159. package/es/qrcode/qrcode.js +1 -2
  160. package/es/qrcode/qrcode.js.map +1 -1
  161. package/es/radio/index.js +1 -2
  162. package/es/radio/index.js.map +1 -1
  163. package/es/radio/style.js +1 -2
  164. package/es/radio/style.js.map +1 -1
  165. package/es/segmented/index.js +1 -12
  166. package/es/segmented/index.js.map +1 -1
  167. package/es/segmented/style.js +1 -2
  168. package/es/segmented/style.js.map +1 -1
  169. package/es/select/index.js +1 -2
  170. package/es/select/index.js.map +1 -1
  171. package/es/select/style.js +1 -2
  172. package/es/select/style.js.map +1 -1
  173. package/es/skeleton/index.js +2 -25
  174. package/es/skeleton/index.js.map +1 -1
  175. package/es/spin/index.js +1 -2
  176. package/es/spin/index.js.map +1 -1
  177. package/es/switch/index.js +1 -2
  178. package/es/switch/index.js.map +1 -1
  179. package/es/switch/style.js +1 -2
  180. package/es/switch/style.js.map +1 -1
  181. package/es/table/index.js +1 -2
  182. package/es/table/index.js.map +1 -1
  183. package/es/table/styles.js +1 -2
  184. package/es/table/styles.js.map +1 -1
  185. package/es/tabs/index.js +1 -12
  186. package/es/tabs/index.js.map +1 -1
  187. package/es/tabs/style.d.ts +2 -2
  188. package/es/tabs/style.js +32 -33
  189. package/es/tabs/style.js.map +1 -1
  190. package/es/tag/index.js +1 -2
  191. package/es/tag/index.js.map +1 -1
  192. package/es/tag/style.js +1 -2
  193. package/es/tag/style.js.map +1 -1
  194. package/es/theme/index.js +1 -2
  195. package/es/theme/index.js.map +1 -1
  196. package/es/tree/index.js +1 -2
  197. package/es/tree/index.js.map +1 -1
  198. package/es/tree/register.js +1 -2
  199. package/es/tree/register.js.map +1 -1
  200. package/es/tree/style.js +1 -2
  201. package/es/tree/style.js.map +1 -1
  202. package/es/tree/type.js +1 -2
  203. package/es/tree/type.js.map +1 -1
  204. package/es/typography/index.js +1 -2
  205. package/es/typography/index.js.map +1 -1
  206. package/lib/avatar/favicon.svg +0 -0
  207. package/lib/avatar/group.js +18 -19
  208. package/lib/avatar/group.js.map +1 -1
  209. package/lib/avatar/index.js +3 -4
  210. package/lib/avatar/index.js.map +1 -1
  211. package/lib/avatar/style.js +3 -4
  212. package/lib/avatar/style.js.map +1 -1
  213. package/lib/back-top/index.js +1 -2
  214. package/lib/back-top/index.js.map +1 -1
  215. package/lib/back-top/style.js +1 -2
  216. package/lib/back-top/style.js.map +1 -1
  217. package/lib/basic-config/index.js +1 -2
  218. package/lib/basic-config/index.js.map +1 -1
  219. package/lib/button/index.js +1 -2
  220. package/lib/button/index.js.map +1 -1
  221. package/lib/button/style.js +1 -2
  222. package/lib/button/style.js.map +1 -1
  223. package/lib/capture-screen/index.js +1 -2
  224. package/lib/capture-screen/index.js.map +1 -1
  225. package/lib/capture-screen/style.js +1 -2
  226. package/lib/capture-screen/style.js.map +1 -1
  227. package/lib/carousel/index.js +1 -2
  228. package/lib/carousel/index.js.map +1 -1
  229. package/lib/carousel/style.js +1 -2
  230. package/lib/carousel/style.js.map +1 -1
  231. package/lib/checkbox/index.js +1 -2
  232. package/lib/checkbox/index.js.map +1 -1
  233. package/lib/checkbox/style.js +1 -2
  234. package/lib/checkbox/style.js.map +1 -1
  235. package/lib/code/index.d.ts +6 -2
  236. package/lib/code/index.js +1 -2
  237. package/lib/code/index.js.map +1 -1
  238. package/lib/code/style.js +26 -27
  239. package/lib/code/style.js.map +1 -1
  240. package/lib/code/worker.js +2 -3
  241. package/lib/code/worker.js.map +1 -1
  242. package/lib/color-palette/index.js +1 -2
  243. package/lib/color-palette/index.js.map +1 -1
  244. package/lib/color-palette/style.js +3 -4
  245. package/lib/color-palette/style.js.map +1 -1
  246. package/lib/color-picker/index.js +1 -2
  247. package/lib/color-picker/index.js.map +1 -1
  248. package/lib/color-picker/style.js +1 -2
  249. package/lib/color-picker/style.js.map +1 -1
  250. package/lib/cron/begin-interval.js +1 -2
  251. package/lib/cron/begin-interval.js.map +1 -1
  252. package/lib/cron/day.js +1 -2
  253. package/lib/cron/day.js.map +1 -1
  254. package/lib/cron/hour.js +1 -2
  255. package/lib/cron/hour.js.map +1 -1
  256. package/lib/cron/index.js +1 -2
  257. package/lib/cron/index.js.map +1 -1
  258. package/lib/cron/item.js +1 -2
  259. package/lib/cron/item.js.map +1 -1
  260. package/lib/cron/minute.js +1 -2
  261. package/lib/cron/minute.js.map +1 -1
  262. package/lib/cron/month.js +1 -2
  263. package/lib/cron/month.js.map +1 -1
  264. package/lib/cron/period.js +1 -2
  265. package/lib/cron/period.js.map +1 -1
  266. package/lib/cron/second.js +1 -2
  267. package/lib/cron/second.js.map +1 -1
  268. package/lib/cron/some.js +1 -2
  269. package/lib/cron/some.js.map +1 -1
  270. package/lib/cron/style.js +4 -5
  271. package/lib/cron/style.js.map +1 -1
  272. package/lib/cron/week.js +1 -2
  273. package/lib/cron/week.js.map +1 -1
  274. package/lib/cron/year.js +1 -2
  275. package/lib/cron/year.js.map +1 -1
  276. package/lib/date-picker/date.js +1 -2
  277. package/lib/date-picker/date.js.map +1 -1
  278. package/lib/date-picker/dayjs.js +1 -2
  279. package/lib/date-picker/dayjs.js.map +1 -1
  280. package/lib/date-picker/index.js +1 -2
  281. package/lib/date-picker/index.js.map +1 -1
  282. package/lib/date-picker/month.js +1 -2
  283. package/lib/date-picker/month.js.map +1 -1
  284. package/lib/date-picker/panel.js +1 -2
  285. package/lib/date-picker/panel.js.map +1 -1
  286. package/lib/date-picker/style.js +1 -2
  287. package/lib/date-picker/style.js.map +1 -1
  288. package/lib/date-picker/time.js +1 -2
  289. package/lib/date-picker/time.js.map +1 -1
  290. package/lib/date-picker/year.js +1 -2
  291. package/lib/date-picker/year.js.map +1 -1
  292. package/lib/dropdown/index.js +1 -2
  293. package/lib/dropdown/index.js.map +1 -1
  294. package/lib/empty/index.js +1 -2
  295. package/lib/empty/index.js.map +1 -1
  296. package/lib/from-schema/index.js +1 -2
  297. package/lib/from-schema/index.js.map +1 -1
  298. package/lib/get-options/index.js +1 -2
  299. package/lib/get-options/index.js.map +1 -1
  300. package/lib/highlight-text/index.js +2 -3
  301. package/lib/highlight-text/index.js.map +1 -1
  302. package/lib/img/index.js +1 -2
  303. package/lib/img/index.js.map +1 -1
  304. package/lib/img/lazy.js +1 -2
  305. package/lib/img/lazy.js.map +1 -1
  306. package/lib/img/style.js +3 -4
  307. package/lib/img/style.js.map +1 -1
  308. package/lib/index.js +1 -2
  309. package/lib/index.js.map +1 -1
  310. package/lib/input/index.js +1 -2
  311. package/lib/input/index.js.map +1 -1
  312. package/lib/input/style.js +1 -2
  313. package/lib/input/style.js.map +1 -1
  314. package/lib/input-number/index.js +2 -3
  315. package/lib/input-number/index.js.map +1 -1
  316. package/lib/katex/index.js +1 -2
  317. package/lib/katex/index.js.map +1 -1
  318. package/lib/md/common.d.ts +4 -0
  319. package/lib/md/common.js +1 -0
  320. package/lib/md/common.js.map +1 -0
  321. package/lib/md/index.d.ts +1 -0
  322. package/lib/md/index.js +1 -2
  323. package/lib/md/index.js.map +1 -1
  324. package/lib/md/worker.d.ts +9 -1
  325. package/lib/md/worker.js +1 -2
  326. package/lib/md/worker.js.map +1 -1
  327. package/lib/md-style/index.js +2 -3
  328. package/lib/md-style/index.js.map +1 -1
  329. package/lib/menu/index.js +1 -2
  330. package/lib/menu/index.js.map +1 -1
  331. package/lib/menu/style.js +1 -2
  332. package/lib/menu/style.js.map +1 -1
  333. package/lib/modal/hooks.js +1 -2
  334. package/lib/modal/hooks.js.map +1 -1
  335. package/lib/modal/index.js +1 -2
  336. package/lib/modal/index.js.map +1 -1
  337. package/lib/modal/store.js +1 -2
  338. package/lib/modal/store.js.map +1 -1
  339. package/lib/modal/style.js +1 -2
  340. package/lib/modal/style.js.map +1 -1
  341. package/lib/notification/index.js +1 -2
  342. package/lib/notification/index.js.map +1 -1
  343. package/lib/notification/notification.js +1 -2
  344. package/lib/notification/notification.js.map +1 -1
  345. package/lib/notification/queque.js +1 -2
  346. package/lib/notification/queque.js.map +1 -1
  347. package/lib/notification/styles.js +1 -2
  348. package/lib/notification/styles.js.map +1 -1
  349. package/lib/pagination/index.js +1 -2
  350. package/lib/pagination/index.js.map +1 -1
  351. package/lib/pagination/styles.js +1 -2
  352. package/lib/pagination/styles.js.map +1 -1
  353. package/lib/popover/index.js +1 -2
  354. package/lib/popover/index.js.map +1 -1
  355. package/lib/popover/style.js +3 -4
  356. package/lib/popover/style.js.map +1 -1
  357. package/lib/prism/index.d.ts +0 -1
  358. package/lib/prism/index.js +1 -2
  359. package/lib/prism/index.js.map +1 -1
  360. package/lib/provider/index.js +1 -2
  361. package/lib/provider/index.js.map +1 -1
  362. package/lib/qrcode/index.js +1 -2
  363. package/lib/qrcode/index.js.map +1 -1
  364. package/lib/qrcode/qrcode.js +1 -2
  365. package/lib/qrcode/qrcode.js.map +1 -1
  366. package/lib/radio/index.js +1 -2
  367. package/lib/radio/index.js.map +1 -1
  368. package/lib/radio/style.js +1 -2
  369. package/lib/radio/style.js.map +1 -1
  370. package/lib/segmented/index.js +1 -12
  371. package/lib/segmented/index.js.map +1 -1
  372. package/lib/segmented/style.js +1 -2
  373. package/lib/segmented/style.js.map +1 -1
  374. package/lib/select/index.js +1 -2
  375. package/lib/select/index.js.map +1 -1
  376. package/lib/select/style.js +1 -2
  377. package/lib/select/style.js.map +1 -1
  378. package/lib/skeleton/index.js +2 -25
  379. package/lib/skeleton/index.js.map +1 -1
  380. package/lib/spin/index.js +2 -3
  381. package/lib/spin/index.js.map +1 -1
  382. package/lib/switch/index.js +1 -2
  383. package/lib/switch/index.js.map +1 -1
  384. package/lib/switch/style.js +1 -2
  385. package/lib/switch/style.js.map +1 -1
  386. package/lib/table/index.js +1 -2
  387. package/lib/table/index.js.map +1 -1
  388. package/lib/table/styles.js +1 -2
  389. package/lib/table/styles.js.map +1 -1
  390. package/lib/tabs/index.js +1 -12
  391. package/lib/tabs/index.js.map +1 -1
  392. package/lib/tabs/style.d.ts +2 -2
  393. package/lib/tabs/style.js +32 -33
  394. package/lib/tabs/style.js.map +1 -1
  395. package/lib/tag/index.js +3 -4
  396. package/lib/tag/index.js.map +1 -1
  397. package/lib/tag/style.js +1 -2
  398. package/lib/tag/style.js.map +1 -1
  399. package/lib/theme/index.js +1 -2
  400. package/lib/theme/index.js.map +1 -1
  401. package/lib/tree/index.js +1 -2
  402. package/lib/tree/index.js.map +1 -1
  403. package/lib/tree/register.js +1 -2
  404. package/lib/tree/register.js.map +1 -1
  405. package/lib/tree/style.js +1 -2
  406. package/lib/tree/style.js.map +1 -1
  407. package/lib/tree/type.js +1 -2
  408. package/lib/tree/type.js.map +1 -1
  409. package/lib/typography/index.js +7 -8
  410. package/lib/typography/index.js.map +1 -1
  411. package/package.json +8 -8
  412. package/umd/index.js +4187 -1
  413. package/umd/js/074a85150a9f6a97.js +1 -0
  414. package/es/cron/api.md +0 -27
  415. package/lib/cron/api.md +0 -27
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createSignal,\n For,\n mergeProps,\n onCleanup,\n onMount,\n Show,\n untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { block } from '../theme';\n\nimport { addCss, btnCss, style } from './style';\n\nimport '../button';\n\nexport interface TabsProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 只读 */\n disabled?: boolean;\n /** 值(指定值时为受控模式,配合onChange使用) */\n value?: string | number;\n /** 默认值 */\n defaultValue?: string | number;\n /** 选项数据 */\n items?: (TabOption | string)[];\n /** 标签页居中 */\n centered?: boolean;\n /** 自定义节点 'label'、'value'、'options' 的字段 */\n fieldNames?: BasicConfig['fieldName'];\n /** 标签页的显示类型\n * @default 'line'\n */\n type?: 'line' | 'card';\n /** 值修改时的回调方法 */\n onChange?(val: string, item: TabOption, e: Event): void;\n /** 显示添加按钮 */\n add?: boolean;\n /** 删除和添加时的回调方法 */\n onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n /** 给标签页左右添加的附加内容 */\n extra?: {\n left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n };\n /** 动画\n * @since 2.8.2\n * @default false\n */\n animated?: boolean;\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n /** 内容 */\n content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n /** 标签可关闭 */\n closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n const { baseStyle, isDark } = theme;\n let box: HTMLDivElement | undefined;\n let add: ButtonElement | undefined;\n const [value, setValue] = createSignal<string | number>();\n const [offsetStyle, setOffsetStyle] = createSignal('');\n const [wrap, setWrap] = createSignal({ left: false, right: false });\n let wrapRef: HTMLDivElement | undefined;\n\n const cssVar = createMemo(() => {\n if (isDark()) {\n return css`\n :host {\n --tab-current-bg: var(--component-bg);\n --tab-bg: rgb(255 255 255 / 4%);\n }\n `;\n }\n\n return css`\n :host {\n --tab-bg: var(--primary-details-bg);\n --tab-current-bg: var(--component-bg);\n }\n `;\n });\n const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n const items = createMemo<TabOption[]>(() => {\n return getOptions(props.items, fieldNames());\n });\n const current = createMemo(() => {\n return items().find((o) => o[fieldNames().value] === value());\n });\n\n function onChange(item: TabOption, e: Event) {\n if (!props.disabled && !item.disabled) {\n const next = item[fieldNames().value];\n\n if (props.value === void 0) {\n setValue(next);\n }\n if (isFunction(props.onChange)) {\n props.onChange(next, item, e);\n }\n }\n }\n function onKeyUp(item: TabOption, e: KeyboardEvent) {\n if (e.key === 'Enter') {\n onChange(item, e);\n }\n }\n function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n e.stopPropagation();\n e.preventDefault();\n if (isFunction(props.onEdit)) {\n props.onEdit(type, item, e);\n }\n }\n function handleWheel(e?: WheelEvent) {\n if (wrapRef) {\n const pwid = box!.offsetWidth;\n const addWid = add?.offsetWidth || 0;\n const scrollWidth = wrapRef.scrollWidth;\n\n if (scrollWidth > pwid - addWid) {\n let deltaY = 0;\n\n if (e) {\n if (!passiveSupported) {\n e.stopPropagation();\n e.preventDefault();\n }\n deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n }\n const nl = wrapRef.scrollLeft + deltaY;\n\n wrapRef.scrollTo({\n left: nl,\n });\n setWrap({\n left: nl > 0,\n right: scrollWidth > nl + wrapRef.offsetWidth,\n });\n } else {\n setWrap({\n left: false,\n right: false,\n });\n }\n const el = untrack(current)?.ref;\n\n setOffsetStyle(\n `.tabs {--w: ${el.offsetWidth}px;--left: ${\n el.offsetLeft - wrapRef.scrollLeft + wrapRef.offsetLeft\n }px;--s:${wrapRef.scrollLeft}px}`,\n );\n }\n }\n createEffect(() => {\n let _val = untrack(value);\n\n if (props.value !== void 0) {\n _val = props.value;\n } else if (props.defaultValue !== void 0) {\n _val = props.defaultValue;\n } else if (items()[0]) {\n _val = items()[0][fieldNames().value];\n }\n if (_val !== untrack(value)) {\n setValue(_val);\n }\n });\n\n createEffect(() => {\n let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n const el = current()?.ref;\n\n if (el) {\n timer = setTimeout(() => {\n clearTimeout(timer);\n if (wrapRef) {\n setWrap({\n left: false,\n right: false,\n });\n wrapRef.scrollTo({\n left: el.offsetLeft - wrapRef.offsetLeft,\n behavior: 'smooth',\n });\n }\n\n setOffsetStyle(\n `.tabs {--w: ${el.offsetWidth}px;--left: ${\n el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n }px;--s:${wrapRef!.scrollLeft}px}`,\n );\n whellTimer = setTimeout(() => {\n clearTimeout(whellTimer);\n handleWheel();\n }, 300);\n }, 0);\n } else {\n setOffsetStyle('');\n }\n onCleanup(() => {\n clearTimeout(timer);\n clearTimeout(whellTimer);\n });\n });\n const [ani, setAni] = createSignal('slide-in');\n\n createEffect(() => {\n if (props.animated) {\n setAni('slide-in');\n }\n return current()?.content;\n });\n const left = createMemo(() =>\n isFunction(props.extra?.left) ? (props.extra.left() as JSX.Element) : props.extra?.left,\n );\n const right = createMemo(() =>\n isFunction(props.extra?.right) ? (props.extra.right() as JSX.Element) : props.extra?.right,\n );\n const content = createMemo(() => {\n const _content = current()?.content;\n\n return isFunction(_content) ? (_content() as JSX.Element) : _content;\n });\n\n function onAnimationEnd() {\n if (props.animated) {\n setAni('');\n }\n }\n onMount(() => {\n box?.addEventListener('wheel', handleWheel, {\n passive: passiveSupported,\n });\n });\n onCleanup(() => {\n box?.removeEventListener('wheel', handleWheel, false);\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={cssVar()} />\n <style textContent={style} />\n <style textContent={offsetStyle()} />\n <Show when={props.css}>\n <style textContent={css(props.css)} />\n </Show>\n <div\n ref={box}\n class={cx('tabs', props.type, props.class)}\n classList={{\n centered: props.centered,\n }}\n aria-disabled={props.disabled}\n >\n <Show when={left()}>{left()}</Show>\n <div\n ref={wrapRef}\n class=\"items\"\n classList={{\n 'warp-left': wrap().left,\n 'warp-right': wrap().right,\n }}\n >\n <For each={items()}>\n {(item, i) => {\n const readOnly = createMemo(() => props.disabled || item.disabled);\n const { icon, value: val, label } = fieldNames();\n const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n return (\n <n-button\n link={true}\n type={isActive() ? 'primary' : 'default'}\n class={cx('tab', item.class)}\n classList={{\n active: isActive(),\n 'first-active': isActive() && i() === 0,\n }}\n tabindex={readOnly() ? -1 : 0}\n onKeyUp={onKeyUp.bind(null, item)}\n onClick={onChange.bind(null, item)}\n disabled={readOnly()}\n icon={item[icon]}\n ref={items()[i()].ref}\n css={btnCss}\n >\n {item[label]}\n <Show when={item.closable}>\n <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n ⛌\n </span>\n </Show>\n </n-button>\n );\n }}\n </For>\n </div>\n <Show when={props.add}>\n <n-button\n ref={add}\n link={true}\n class=\"tab add\"\n css={addCss}\n onClick={handleEdit.bind(null, 'add', void 0)}\n >\n +\n </n-button>\n </Show>\n <Show when={right()}>{right()}</Show>\n </div>\n <Show when={current()?.content}>\n <div\n class=\"content\"\n classList={{\n [ani()]: props.animated,\n }}\n onAnimationEnd={onAnimationEnd}\n >\n {content()}\n </div>\n </Show>\n </>\n );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n 'n-tabs',\n {\n class: void 0,\n css: void 0,\n disabled: void 0,\n value: void 0,\n defaultValue: void 0,\n centered: void 0,\n items: [],\n type: 'line' as TabsProps['type'],\n fieldNames: void 0,\n add: void 0,\n extra: void 0,\n animated: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onChange(next: string, item: TabOption, e: Event) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [next, item, e],\n }),\n );\n },\n onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n el.dispatchEvent(\n new CustomEvent('edit', {\n detail: [type, item, e],\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css', 'fieldNames', 'items', 'extra']);\n });\n return (\n <>\n <style textContent={block} />\n <Tabs {...props} />\n </>\n );\n },\n);\nexport default Tabs;\n"],"names":["createEffect","createMemo","createSignal","For","mergeProps","onCleanup","onMount","Show","untrack","isFunction","passiveSupported","css","cx","customElement","clearAttribute","FieldName","getOptions","theme","block","addCss","btnCss","style","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","animated","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
1
+ {"version":3,"sources":["components/tabs/index.tsx"],"sourcesContent":["import {\n createEffect,\n createMemo,\n createSignal,\n For,\n mergeProps,\n onCleanup,\n onMount,\n Show,\n untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { block } from '../theme';\n\nimport { addCss, btnCss, style } from './style';\n\nimport '../button';\n\nexport interface TabsProps {\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n /** 只读 */\n disabled?: boolean;\n /** 值(指定值时为受控模式,配合onChange使用) */\n value?: string | number;\n /** 默认值 */\n defaultValue?: string | number;\n /** 选项数据 */\n items?: (TabOption | string)[];\n /** 标签页居中 */\n centered?: boolean;\n /** 自定义节点 'label'、'value'、'options' 的字段 */\n fieldNames?: BasicConfig['fieldName'];\n /** 标签页的显示类型\n * @default 'line'\n */\n type?: 'line' | 'card';\n /** 值修改时的回调方法 */\n onChange?(val: string, item: TabOption, e: Event): void;\n /** 显示添加按钮 */\n add?: boolean;\n /** 删除和添加时的回调方法 */\n onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n /** 给标签页左右添加的附加内容 */\n extra?: {\n left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n };\n /** 动画\n * @since 2.8.2\n * @default false\n */\n animated?: boolean;\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n /** 内容 */\n content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n /** 标签可关闭 */\n closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n const { baseStyle, isDark } = theme;\n let box: HTMLDivElement | undefined;\n let add: ButtonElement | undefined;\n const [value, setValue] = createSignal<string | number>();\n const [offsetStyle, setOffsetStyle] = createSignal('');\n const [wrap, setWrap] = createSignal({ left: false, right: false });\n let wrapRef: HTMLDivElement | undefined;\n\n const cssVar = createMemo(() => {\n const dark = isDark();\n\n return css({\n ':host': {\n '--tab-bg': dark ? 'rgb(255 255 255 / 4%)' : 'var(--primary-details-bg)',\n '--tab-current-bg': dark ? 'var(--component-bg)' : 'var(--component-bg)',\n },\n });\n });\n const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n const items = createMemo<TabOption[]>(() => {\n return getOptions(props.items, fieldNames());\n });\n const current = createMemo(() => {\n return items().find((o) => o[fieldNames().value] === value());\n });\n\n function onChange(item: TabOption, e: Event) {\n if (!props.disabled && !item.disabled) {\n const next = item[fieldNames().value];\n\n if (props.value === void 0) {\n setValue(next);\n }\n if (isFunction(props.onChange)) {\n props.onChange(next, item, e);\n }\n }\n }\n function onKeyUp(item: TabOption, e: KeyboardEvent) {\n if (e.key === 'Enter') {\n onChange(item, e);\n }\n }\n function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n e.stopPropagation();\n e.preventDefault();\n if (isFunction(props.onEdit)) {\n props.onEdit(type, item, e);\n }\n }\n function handleWheel(e?: WheelEvent) {\n if (wrapRef) {\n const pwid = box!.offsetWidth;\n const addWid = add?.offsetWidth || 0;\n const scrollWidth = wrapRef.scrollWidth;\n\n if (scrollWidth > pwid - addWid) {\n let deltaY = 0;\n\n if (e) {\n if (!passiveSupported) {\n e.stopPropagation();\n e.preventDefault();\n }\n deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n }\n const nl = wrapRef.scrollLeft + deltaY;\n\n wrapRef.scrollTo({\n left: nl,\n });\n setWrap({\n left: nl > 0,\n right: scrollWidth > nl + wrapRef.offsetWidth,\n });\n } else {\n setWrap({\n left: false,\n right: false,\n });\n }\n const el = untrack(current)?.ref;\n\n setOffsetStyle(\n `.tabs {--w: ${el.offsetWidth}px;--left: ${\n el.offsetLeft - wrapRef.scrollLeft + wrapRef.offsetLeft\n }px;--s:${wrapRef.scrollLeft}px}`,\n );\n }\n }\n createEffect(() => {\n let _val = untrack(value);\n\n if (props.value !== void 0) {\n _val = props.value;\n } else if (props.defaultValue !== void 0) {\n _val = props.defaultValue;\n } else if (items()[0]) {\n _val = items()[0][fieldNames().value];\n }\n if (_val !== untrack(value)) {\n setValue(_val);\n }\n });\n\n createEffect(() => {\n let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n const el = current()?.ref;\n\n if (el) {\n timer = setTimeout(() => {\n clearTimeout(timer);\n if (wrapRef) {\n setWrap({\n left: false,\n right: false,\n });\n wrapRef.scrollTo({\n left: el.offsetLeft - wrapRef.offsetLeft,\n behavior: 'smooth',\n });\n }\n\n setOffsetStyle(\n `.tabs {--w: ${el.offsetWidth}px;--left: ${\n el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n }px;--s:${wrapRef!.scrollLeft}px}`,\n );\n whellTimer = setTimeout(() => {\n clearTimeout(whellTimer);\n handleWheel();\n }, 300);\n }, 0);\n } else {\n setOffsetStyle('');\n }\n onCleanup(() => {\n clearTimeout(timer);\n clearTimeout(whellTimer);\n });\n });\n const [ani, setAni] = createSignal('slide-in');\n\n createEffect(() => {\n if (props.animated) {\n setAni('slide-in');\n }\n return current()?.content;\n });\n const left = createMemo(() =>\n isFunction(props.extra?.left) ? (props.extra.left() as JSX.Element) : props.extra?.left,\n );\n const right = createMemo(() =>\n isFunction(props.extra?.right) ? (props.extra.right() as JSX.Element) : props.extra?.right,\n );\n const content = createMemo(() => {\n const _content = current()?.content;\n\n return isFunction(_content) ? (_content() as JSX.Element) : _content;\n });\n\n function onAnimationEnd() {\n if (props.animated) {\n setAni('');\n }\n }\n onMount(() => {\n box?.addEventListener('wheel', handleWheel, {\n passive: passiveSupported,\n });\n });\n onCleanup(() => {\n box?.removeEventListener('wheel', handleWheel, false);\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={cssVar()} />\n <style textContent={style} />\n <style textContent={offsetStyle()} />\n <Show when={props.css}>\n <style textContent={css(props.css)} />\n </Show>\n <div\n ref={box}\n class={cx('tabs', props.type, props.class)}\n classList={{\n centered: props.centered,\n }}\n aria-disabled={props.disabled}\n >\n <Show when={left()}>{left()}</Show>\n <div\n ref={wrapRef}\n class=\"items\"\n classList={{\n 'warp-left': wrap().left,\n 'warp-right': wrap().right,\n }}\n >\n <For each={items()}>\n {(item, i) => {\n const readOnly = createMemo(() => props.disabled || item.disabled);\n const { icon, value: val, label } = fieldNames();\n const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n return (\n <n-button\n link={true}\n type={isActive() ? 'primary' : 'default'}\n class={cx('tab', item.class)}\n classList={{\n active: isActive(),\n 'first-active': isActive() && i() === 0,\n }}\n tabindex={readOnly() ? -1 : 0}\n onKeyUp={onKeyUp.bind(null, item)}\n onClick={onChange.bind(null, item)}\n disabled={readOnly()}\n icon={item[icon]}\n ref={items()[i()].ref}\n css={btnCss}\n >\n {item[label]}\n <Show when={item.closable}>\n <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n ⛌\n </span>\n </Show>\n </n-button>\n );\n }}\n </For>\n </div>\n <Show when={props.add}>\n <n-button\n ref={add}\n link={true}\n class=\"tab add\"\n css={addCss}\n onClick={handleEdit.bind(null, 'add', void 0)}\n >\n +\n </n-button>\n </Show>\n <Show when={right()}>{right()}</Show>\n </div>\n <Show when={current()?.content}>\n <div\n class=\"content\"\n classList={{\n [ani()]: props.animated,\n }}\n onAnimationEnd={onAnimationEnd}\n >\n {content()}\n </div>\n </Show>\n </>\n );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n 'n-tabs',\n {\n class: void 0,\n css: void 0,\n disabled: void 0,\n value: void 0,\n defaultValue: void 0,\n centered: void 0,\n items: [],\n type: 'line' as TabsProps['type'],\n fieldNames: void 0,\n add: void 0,\n extra: void 0,\n animated: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n onChange(next: string, item: TabOption, e: Event) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [next, item, e],\n }),\n );\n },\n onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n el.dispatchEvent(\n new CustomEvent('edit', {\n detail: [type, item, e],\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css', 'fieldNames', 'items', 'extra']);\n });\n return (\n <>\n <style textContent={block} />\n <Tabs {...props} />\n </>\n );\n },\n);\nexport default Tabs;\n"],"names":["createEffect","createMemo","createSignal","For","mergeProps","onCleanup","onMount","Show","untrack","isFunction","passiveSupported","css","cx","customElement","clearAttribute","FieldName","getOptions","theme","block","addCss","btnCss","style","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","dark","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","animated","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail"],"mappings":"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"}
@@ -1,3 +1,3 @@
1
- export declare const style: string;
2
- export declare const btnCss: string;
3
1
  export declare const addCss: string;
2
+ export declare const btnCss: string;
3
+ export declare const style: string;
package/es/tabs/style.js CHANGED
@@ -1,4 +1,26 @@
1
- import{css as i}from"@moneko/css";export const style=i`
1
+ import{css as i}from"@moneko/css";export const addCss=i`
2
+ .btn {
3
+ padding: 4px;
4
+ font-size: var(--font-size-lg);
5
+ }
6
+ `;export const btnCss=i`
7
+ .remove {
8
+ display: inline-block;
9
+ font-size: 12px;
10
+ font-weight: 400;
11
+ color: var(--text-secondary);
12
+ transition: color var(--transition-timing-function) var(--transition-duration);
13
+ margin-inline-start: 8px;
14
+
15
+ &:hover {
16
+ color: var(--error-color);
17
+ }
18
+ }
19
+
20
+ .btn:has(.remove) {
21
+ padding-inline-end: 10px;
22
+ }
23
+ `;export const style=i`
2
24
  :host {
3
25
  display: block;
4
26
  font-size: var(--font-size);
@@ -44,18 +66,6 @@ import{css as i}from"@moneko/css";export const style=i`
44
66
  animation: slide-in var(--transition-timing-function) var(--transition-duration);
45
67
  }
46
68
 
47
- @keyframes slide-in {
48
- 0% {
49
- opacity: 0;
50
- transform: translateY(16px);
51
- }
52
-
53
- 100% {
54
- opacity: 1;
55
- transform: translateY(0);
56
- }
57
- }
58
-
59
69
  .items {
60
70
  position: relative;
61
71
  display: flex;
@@ -140,27 +150,16 @@ import{css as i}from"@moneko/css";export const style=i`
140
150
  .warp-right::after {
141
151
  opacity: 1;
142
152
  }
143
- `;export const btnCss=i`
144
- .remove {
145
- display: inline-block;
146
- font-size: 12px;
147
- font-weight: 400;
148
- color: var(--text-secondary);
149
- transition: color var(--transition-timing-function) var(--transition-duration);
150
- margin-inline-start: 8px;
151
153
 
152
- &:hover {
153
- color: var(--error-color);
154
+ @keyframes slide-in {
155
+ 0% {
156
+ opacity: 0;
157
+ transform: translateY(16px);
154
158
  }
155
- }
156
159
 
157
- .btn:has(.remove) {
158
- padding-inline-end: 10px;
159
- }
160
- `;export const addCss=i`
161
- .btn {
162
- padding: 4px;
163
- font-size: var(--font-size-lg);
160
+ 100% {
161
+ opacity: 1;
162
+ transform: translateY(0);
163
+ }
164
164
  }
165
- `;
166
- //# sourceMappingURL=style.js.map
165
+ `;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tabs/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n display: block;\n font-size: var(--font-size);\n }\n\n [aria-disabled='true'] {\n --primary-color: var(--disable-color);\n }\n\n .tabs {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n box-sizing: border-box;\n max-inline-size: 100%;\n\n &::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n content: '';\n display: block;\n inline-size: 100%;\n border-block-end: var(--border-base);\n }\n }\n\n .centered {\n justify-content: center;\n }\n\n .tab {\n cursor: pointer;\n position: relative;\n }\n\n .content {\n padding: 16px 0;\n }\n\n .slide-in {\n animation: slide-in var(--transition-timing-function) var(--transition-duration);\n }\n\n @keyframes slide-in {\n 0% {\n opacity: 0;\n transform: translateY(16px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .items {\n position: relative;\n display: flex;\n column-gap: 4px;\n max-inline-size: calc(100% - 38px);\n overflow-x: scroll;\n\n &::after,\n &::before {\n inset-block: 0;\n inline-size: 30px;\n position: absolute;\n z-index: 1;\n opacity: 0;\n transition: opacity var(--transition-duration);\n content: '';\n pointer-events: none;\n }\n\n &::before {\n inset-inline-start: var(--s, 0);\n box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 8%);\n }\n\n &::after {\n inset-inline-end: 0;\n transform: translateX(var(--s, 0));\n box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 8%);\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .line {\n &::after {\n position: absolute;\n display: block;\n border-radius: 1px;\n background-color: var(--primary-color);\n content: '';\n inline-size: var(--w);\n inset-inline-start: var(--left);\n block-size: 2px;\n inset-block-end: -0.5px;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: inline-size, block-size, inset-inline-start, background-color;\n }\n }\n\n .card {\n gap: 4px;\n\n .tab {\n display: block;\n border: var(--border-base);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background-color: var(--tab-bg);\n transition:\n border-color var(--transition-timing-function) var(--transition-duration),\n background-color var(--transition-timing-function) var(--transition-duration);\n\n &.active {\n background-color: var(--tab-current-bg);\n border-block-end-color: var(--tab-current-bg);\n }\n }\n }\n\n .tab.add {\n position: sticky;\n background-color: initial;\n inset-inline-end: 0;\n }\n\n .warp-left::before {\n opacity: 1;\n }\n\n .warp-right::after {\n opacity: 1;\n }\n`;\n\nexport const btnCss = css`\n .remove {\n display: inline-block;\n font-size: 12px;\n font-weight: 400;\n color: var(--text-secondary);\n transition: color var(--transition-timing-function) var(--transition-duration);\n margin-inline-start: 8px;\n\n &:hover {\n color: var(--error-color);\n }\n }\n\n .btn:has(.remove) {\n padding-inline-end: 10px;\n }\n`;\n\nexport const addCss = css`\n .btn {\n padding: 4px;\n font-size: var(--font-size-lg);\n }\n`;\n"],"names":["css","style","btnCss","addCss"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IzB,CAAC,AAAC,AAEF,QAAO,MAAME,OAASF,CAAG,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,AAAC,AAEF,QAAO,MAAMG,OAASH,CAAG,CAAC;;;;;AAK1B,CAAC,AAAC"}
1
+ {"version":3,"sources":["components/tabs/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const addCss = css`\n .btn {\n padding: 4px;\n font-size: var(--font-size-lg);\n }\n`;\n\nexport const btnCss = css`\n .remove {\n display: inline-block;\n font-size: 12px;\n font-weight: 400;\n color: var(--text-secondary);\n transition: color var(--transition-timing-function) var(--transition-duration);\n margin-inline-start: 8px;\n\n &:hover {\n color: var(--error-color);\n }\n }\n\n .btn:has(.remove) {\n padding-inline-end: 10px;\n }\n`;\n\nexport const style = css`\n :host {\n display: block;\n font-size: var(--font-size);\n }\n\n [aria-disabled='true'] {\n --primary-color: var(--disable-color);\n }\n\n .tabs {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n box-sizing: border-box;\n max-inline-size: 100%;\n\n &::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n content: '';\n display: block;\n inline-size: 100%;\n border-block-end: var(--border-base);\n }\n }\n\n .centered {\n justify-content: center;\n }\n\n .tab {\n cursor: pointer;\n position: relative;\n }\n\n .content {\n padding: 16px 0;\n }\n\n .slide-in {\n animation: slide-in var(--transition-timing-function) var(--transition-duration);\n }\n\n .items {\n position: relative;\n display: flex;\n column-gap: 4px;\n max-inline-size: calc(100% - 38px);\n overflow-x: scroll;\n\n &::after,\n &::before {\n inset-block: 0;\n inline-size: 30px;\n position: absolute;\n z-index: 1;\n opacity: 0;\n transition: opacity var(--transition-duration);\n content: '';\n pointer-events: none;\n }\n\n &::before {\n inset-inline-start: var(--s, 0);\n box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 8%);\n }\n\n &::after {\n inset-inline-end: 0;\n transform: translateX(var(--s, 0));\n box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 8%);\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .line {\n &::after {\n position: absolute;\n display: block;\n border-radius: 1px;\n background-color: var(--primary-color);\n content: '';\n inline-size: var(--w);\n inset-inline-start: var(--left);\n block-size: 2px;\n inset-block-end: -0.5px;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: inline-size, block-size, inset-inline-start, background-color;\n }\n }\n\n .card {\n gap: 4px;\n\n .tab {\n display: block;\n border: var(--border-base);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background-color: var(--tab-bg);\n transition:\n border-color var(--transition-timing-function) var(--transition-duration),\n background-color var(--transition-timing-function) var(--transition-duration);\n\n &.active {\n background-color: var(--tab-current-bg);\n border-block-end-color: var(--tab-current-bg);\n }\n }\n }\n\n .tab.add {\n position: sticky;\n background-color: initial;\n inset-inline-end: 0;\n }\n\n .warp-left::before {\n opacity: 1;\n }\n\n .warp-right::after {\n opacity: 1;\n }\n\n @keyframes slide-in {\n 0% {\n opacity: 0;\n transform: translateY(16px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n`;\n"],"names":["css","addCss","btnCss","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;AAK1B,CAAC,AAAC,AAEF,QAAO,MAAME,OAASF,CAAG,CAAC;;;;;;;;;;;;;;;;;AAiB1B,CAAC,AAAC,AAEF,QAAO,MAAMG,MAAQH,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IzB,CAAC,AAAC"}
package/es/tag/index.js CHANGED
@@ -2,5 +2,4 @@ import{template as e}from"solid-js/web";import{spread as o}from"solid-js/web";im
2
2
  :host {
3
3
  ${E(h.color,{dark:u(),name:"tag-custom"})}
4
4
  }
5
- `:"");function N(e){v(h.onClose)&&h.onClose(e),x(!1)}return n(g,{get when(){return k()},get children(){return[(()=>{let e=c(),o=e.firstChild;return s(()=>o.data=l()),e})(),(()=>{let e=c(),o=e.firstChild;return s(()=>o.data=F()),e})(),(()=>{let e=d();return e.textContent=L,e})(),n(g,{get when(){return h.css},get children(){let e=c(),o=e.firstChild;return s(()=>o.data=C(h.css)),e}}),(()=>{let e=p();return o(e,t(y,{get class(){return j("tag",h.type)},get classList(){return{"tag-custom":!!h.color,bordered:h.bordered,disabled:h.disabled}}}),!1,!0),r(e,n(g,{get when(){return h.icon},get children(){let e=m();return r(e,()=>h.icon),e}}),null),r(e,()=>y.children,null),r(e,n(g,{get when(){return h.closeIcon},get children(){let e=a();return i(e,"click",N,!0),r(e,()=>!0===h.closeIcon?"⛌":h.closeIcon),e}}),null),e})()]}})}y("n-tag",{class:void 0,css:void 0,color:void 0,icon:void 0,closeIcon:void 0,onClose:void 0,bordered:!0,disabled:void 0,type:void 0},(e,o)=>{let t=o.element,r=h({css:t.css,children:[...t.childNodes.values()],onClose(e){t.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return u(()=>{t.replaceChildren(),k(t,["css"])}),[(()=>{let e=d();return e.textContent=x,e})(),n(F,r)]});export default F;l(["click"]);
6
- //# sourceMappingURL=index.js.map
5
+ `:"");function N(e){v(h.onClose)&&h.onClose(e),x(!1)}return n(g,{get when(){return k()},get children(){return[(()=>{let e=c(),o=e.firstChild;return s(()=>o.data=l()),e})(),(()=>{let e=c(),o=e.firstChild;return s(()=>o.data=F()),e})(),(()=>{let e=d();return e.textContent=L,e})(),n(g,{get when(){return h.css},get children(){let e=c(),o=e.firstChild;return s(()=>o.data=C(h.css)),e}}),(()=>{let e=p();return o(e,t(y,{get class(){return j("tag",h.type)},get classList(){return{"tag-custom":!!h.color,bordered:h.bordered,disabled:h.disabled}}}),!1,!0),r(e,n(g,{get when(){return h.icon},get children(){let e=m();return r(e,()=>h.icon),e}}),null),r(e,()=>y.children,null),r(e,n(g,{get when(){return h.closeIcon},get children(){let e=a();return i(e,"click",N,!0),r(e,()=>!0===h.closeIcon?"⛌":h.closeIcon),e}}),null),e})()]}})}y("n-tag",{class:void 0,css:void 0,color:void 0,icon:void 0,closeIcon:void 0,onClose:void 0,bordered:!0,disabled:void 0,type:void 0},(e,o)=>{let t=o.element,r=h({css:t.css,children:[...t.childNodes.values()],onClose(e){t.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return u(()=>{t.replaceChildren(),k(t,["css"])}),[(()=>{let e=d();return e.textContent=x,e})(),n(F,r)]});export default F;l(["click"]);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tag/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { generateColor, inline } from '../theme';\n\nimport { style } from './style';\n\nexport interface TagProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 自定义颜色 */\n color?: string;\n /** 图标 */\n icon?: JSX.Element;\n /** 内置类型(状态) */\n type?: 'primary' | 'success' | 'error' | 'warning';\n /** 自定义关闭图标 */\n closeIcon?: JSX.Element | boolean;\n /** 显示边框\n * @default true\n */\n bordered?: boolean;\n /** 禁用 */\n disabled?: boolean;\n /** 关闭时的回调方法 */\n onClose?: (e: MouseEvent) => void;\n children?: JSX.Element;\n}\n\nfunction Tag(props: TagProps) {\n const { baseStyle, isDark } = theme;\n const [local, other] = splitProps(props, [\n 'class',\n 'css',\n 'onClose',\n 'color',\n 'icon',\n 'closeIcon',\n 'bordered',\n 'type',\n 'disabled',\n ]);\n const [show, setShow] = createSignal(true);\n\n const customColor = createMemo(() => {\n if (local.color) {\n return css`\n :host {\n ${generateColor(local.color, {\n dark: isDark(),\n name: 'tag-custom',\n })}\n }\n `;\n }\n return '';\n });\n\n function onClose(e: Event) {\n if (isFunction(local.onClose)) {\n local.onClose(e);\n }\n setShow(false);\n }\n\n return (\n <Show when={show()}>\n <style textContent={baseStyle()} />\n <style textContent={customColor()} />\n <style textContent={style} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <span\n {...other}\n class={cx('tag', local.type)}\n classList={{\n 'tag-custom': !!local.color,\n bordered: local.bordered,\n disabled: local.disabled,\n }}\n >\n <Show when={local.icon}>\n <span class=\"icon\">{local.icon}</span>\n </Show>\n {other.children}\n <Show when={local.closeIcon}>\n <span class=\"close\" onClick={onClose}>\n {local.closeIcon === true ? '⛌' : local.closeIcon}\n </span>\n </Show>\n </span>\n </Show>\n );\n}\n\nexport type TagElement = CustomElement<TagProps, 'onClose'>;\n\ncustomElement<TagProps>(\n 'n-tag',\n {\n class: void 0,\n css: void 0,\n color: void 0,\n icon: void 0,\n closeIcon: void 0,\n onClose: void 0,\n bordered: true,\n disabled: void 0,\n type: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n css: el.css,\n children: [...el.childNodes.values()],\n onClose(e: Event) {\n el.dispatchEvent(\n new CustomEvent('close', {\n detail: e,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n clearAttribute(el, ['css']);\n });\n\n return (\n <>\n <style textContent={inline} />\n <Tag {...props} />\n </>\n );\n },\n);\n\nexport default Tag;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","Show","splitProps","isFunction","css","cx","customElement","clearAttribute","theme","generateColor","inline","style","Tag","props","baseStyle","isDark","local","other","show","setShow","customColor","color","dark","name","onClose","e","type","bordered","disabled","icon","children","closeIcon","class","_","opt","el","element","childNodes","values","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"6cAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,iBAAAA,CAAa,CAAEC,UAAAA,CAAM,KAAQ,UAAW,AAExD,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0BhC,SAASC,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGP,EACxB,CAACQ,EAAOC,EAAM,CAAGf,EAAWW,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACK,EAAMC,EAAQ,CAAGpB,EAAa,CAAA,GAE/BqB,EAActB,EAAW,IAC7B,AAAIkB,EAAMK,KAAK,CACNjB,CAAG,CAAC;;UAEP,EAAEK,EAAcO,EAAMK,KAAK,CAAE,CAC3BC,KAAMP,IACNQ,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBtB,EAAWa,EAAMQ,OAAO,GAC1BR,EAAMQ,OAAO,CAACC,GAEhBN,EAAQ,CAAA,EACV,CAEA,SACGlB,qBAAWiB,8EACUJ,8DACAM,gDACAT,UACnBV,qBAAWe,EAAMZ,GAAG,8DACCA,EAAIY,EAAMZ,GAAG,qCAG7Ba,sBACGZ,EAAG,MAAOW,EAAMU,IAAI,yBAChB,CACT,aAAc,CAAC,CAACV,EAAMK,KAAK,CAC3BM,SAAUX,EAAMW,QAAQ,CACxBC,SAAUZ,EAAMY,QAAQ,AAC1B,kBAEC3B,qBAAWe,EAAMa,IAAI,0CACAb,EAAMa,IAAI,qBAE/BZ,EAAMa,QAAQ,aACd7B,qBAAWe,EAAMe,SAAS,8CACIP,cAC1BR,AAAoB,CAAA,IAApBA,EAAMe,SAAS,CAAY,IAAMf,EAAMe,SAAS,sBAM7D,CAIAzB,EACE,QACA,CACE0B,MAAO,KAAK,EACZ5B,IAAK,KAAK,EACViB,MAAO,KAAK,EACZQ,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBP,QAAS,KAAK,EACdG,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvB,EAAQb,EACZ,CACEI,IAAK+B,EAAG/B,GAAG,CACX0B,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,CACrCd,QAAQC,CAAQ,EACdU,EAAGI,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQhB,CACV,GAEJ,CACF,EACAQ,GAQF,OALApC,EAAa,KACXsC,EAAGO,eAAe,GAClBnC,EAAe4B,EAAI,CAAC,MAAM,CAC5B,yCAIwBzB,UACnBE,EAAQC,GAGf,EAGF,gBAAeD,CAAI"}
1
+ {"version":3,"sources":["components/tag/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { generateColor, inline } from '../theme';\n\nimport { style } from './style';\n\nexport interface TagProps {\n /** 自定义样式表 */\n css?: string;\n /** 自定义类名 */\n class?: string;\n /** 自定义颜色 */\n color?: string;\n /** 图标 */\n icon?: JSX.Element;\n /** 内置类型(状态) */\n type?: 'primary' | 'success' | 'error' | 'warning';\n /** 自定义关闭图标 */\n closeIcon?: JSX.Element | boolean;\n /** 显示边框\n * @default true\n */\n bordered?: boolean;\n /** 禁用 */\n disabled?: boolean;\n /** 关闭时的回调方法 */\n onClose?: (e: MouseEvent) => void;\n children?: JSX.Element;\n}\n\nfunction Tag(props: TagProps) {\n const { baseStyle, isDark } = theme;\n const [local, other] = splitProps(props, [\n 'class',\n 'css',\n 'onClose',\n 'color',\n 'icon',\n 'closeIcon',\n 'bordered',\n 'type',\n 'disabled',\n ]);\n const [show, setShow] = createSignal(true);\n\n const customColor = createMemo(() => {\n if (local.color) {\n return css`\n :host {\n ${generateColor(local.color, {\n dark: isDark(),\n name: 'tag-custom',\n })}\n }\n `;\n }\n return '';\n });\n\n function onClose(e: Event) {\n if (isFunction(local.onClose)) {\n local.onClose(e);\n }\n setShow(false);\n }\n\n return (\n <Show when={show()}>\n <style textContent={baseStyle()} />\n <style textContent={customColor()} />\n <style textContent={style} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <span\n {...other}\n class={cx('tag', local.type)}\n classList={{\n 'tag-custom': !!local.color,\n bordered: local.bordered,\n disabled: local.disabled,\n }}\n >\n <Show when={local.icon}>\n <span class=\"icon\">{local.icon}</span>\n </Show>\n {other.children}\n <Show when={local.closeIcon}>\n <span class=\"close\" onClick={onClose}>\n {local.closeIcon === true ? '⛌' : local.closeIcon}\n </span>\n </Show>\n </span>\n </Show>\n );\n}\n\nexport type TagElement = CustomElement<TagProps, 'onClose'>;\n\ncustomElement<TagProps>(\n 'n-tag',\n {\n class: void 0,\n css: void 0,\n color: void 0,\n icon: void 0,\n closeIcon: void 0,\n onClose: void 0,\n bordered: true,\n disabled: void 0,\n type: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n css: el.css,\n children: [...el.childNodes.values()],\n onClose(e: Event) {\n el.dispatchEvent(\n new CustomEvent('close', {\n detail: e,\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n el.replaceChildren();\n clearAttribute(el, ['css']);\n });\n\n return (\n <>\n <style textContent={inline} />\n <Tag {...props} />\n </>\n );\n },\n);\n\nexport default Tag;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","Show","splitProps","isFunction","css","cx","customElement","clearAttribute","theme","generateColor","inline","style","Tag","props","baseStyle","isDark","local","other","show","setShow","customColor","color","dark","name","onClose","e","type","bordered","disabled","icon","children","closeIcon","class","_","opt","el","element","childNodes","values","dispatchEvent","CustomEvent","detail","replaceChildren"],"mappings":"6cAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,GAASC,iBAAAA,CAAa,CAAEC,UAAAA,CAAM,KAAQ,UAAW,AAExD,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0BhC,SAASC,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGP,EACxB,CAACQ,EAAOC,EAAM,CAAGf,EAAWW,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACK,EAAMC,EAAQ,CAAGpB,EAAa,CAAA,GAE/BqB,EAActB,EAAW,IAC7B,AAAIkB,EAAMK,KAAK,CACNjB,CAAG,CAAC;;UAEP,EAAEK,EAAcO,EAAMK,KAAK,CAAE,CAC3BC,KAAMP,IACNQ,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBtB,EAAWa,EAAMQ,OAAO,GAC1BR,EAAMQ,OAAO,CAACC,GAEhBN,EAAQ,CAAA,EACV,CAEA,SACGlB,qBAAWiB,8EACUJ,8DACAM,gDACAT,UACnBV,qBAAWe,EAAMZ,GAAG,8DACCA,EAAIY,EAAMZ,GAAG,qCAG7Ba,sBACGZ,EAAG,MAAOW,EAAMU,IAAI,yBAChB,CACT,aAAc,CAAC,CAACV,EAAMK,KAAK,CAC3BM,SAAUX,EAAMW,QAAQ,CACxBC,SAAUZ,EAAMY,QAAQ,AAC1B,kBAEC3B,qBAAWe,EAAMa,IAAI,0CACAb,EAAMa,IAAI,qBAE/BZ,EAAMa,QAAQ,aACd7B,qBAAWe,EAAMe,SAAS,8CACIP,cAC1BR,AAAoB,CAAA,IAApBA,EAAMe,SAAS,CAAY,IAAMf,EAAMe,SAAS,sBAM7D,CAIAzB,EACE,QACA,CACE0B,MAAO,KAAK,EACZ5B,IAAK,KAAK,EACViB,MAAO,KAAK,EACZQ,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBP,QAAS,KAAK,EACdG,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvB,EAAQb,EACZ,CACEI,IAAK+B,EAAG/B,GAAG,CACX0B,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,CACrCd,QAAQC,CAAQ,EACdU,EAAGI,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQhB,CACV,GAEJ,CACF,EACAQ,GAQF,OALApC,EAAa,KACXsC,EAAGO,eAAe,GAClBnC,EAAe4B,EAAI,CAAC,MAAM,CAC5B,yCAIwBzB,UACnBE,EAAQC,GAGf,EAGF,gBAAeD,CAAI"}
package/es/tag/style.js CHANGED
@@ -49,5 +49,4 @@ import{css as o}from"@moneko/css";export const style=o`
49
49
  --border-color: var(--disable-border);
50
50
  --component-bg: var(--disable-bg);
51
51
  }
52
- `;
53
- //# sourceMappingURL=style.js.map
52
+ `;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tag/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n display: inline-block;\n }\n\n .tag {\n display: flex;\n align-items: center;\n overflow: hidden;\n border-radius: calc(var(--border-radius) / 1.5);\n padding: 0 8px;\n font-size: var(--font-size-sm);\n color: var(--text-color);\n background-color: var(--component-bg);\n gap: 5px;\n line-height: 20px;\n\n a {\n text-decoration: unset;\n color: inherit;\n }\n }\n\n .icon {\n font-size: var(--font-size-sm);\n line-height: var(--font-size-sm);\n }\n\n .bordered {\n border: 1px solid var(--border-color);\n }\n\n .close {\n font-size: var(--font-size-sm);\n cursor: pointer;\n opacity: 0.5;\n transition: var(--transition-duration) var(--transition-timing-function) opacity;\n user-select: none;\n\n &:hover {\n opacity: 1;\n }\n }\n\n ${['primary', 'success', 'error', 'warning', 'tag-custom']\n .map(\n (s) =>\n `.${s} {--text-color: var(--${s}-color);--border-color: var(--${s}-secondary-bg);--component-bg: var(--${s}-details-bg);}`,\n )\n .join('')}\n\n .disabled {\n --text-color: var(--disable-color);\n --border-color: var(--disable-border);\n --component-bg: var(--disable-bg);\n }\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CvB,EAAE,CAAC,UAAW,UAAW,QAAS,UAAW,aAAa,CACvDE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,sBAAsB,EAAEA,EAAE,8BAA8B,EAAEA,EAAE,qCAAqC,EAAEA,EAAE,cAAc,CAAC,EAE7HC,IAAI,CAAC,IAAI;;;;;;;AAOd,CAAC,AAAC"}
1
+ {"version":3,"sources":["components/tag/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n :host {\n display: inline-block;\n }\n\n .tag {\n display: flex;\n align-items: center;\n overflow: hidden;\n border-radius: calc(var(--border-radius) / 1.5);\n padding: 0 8px;\n font-size: var(--font-size-sm);\n color: var(--text-color);\n background-color: var(--component-bg);\n gap: 5px;\n line-height: 20px;\n\n a {\n text-decoration: unset;\n color: inherit;\n }\n }\n\n .icon {\n font-size: var(--font-size-sm);\n line-height: var(--font-size-sm);\n }\n\n .bordered {\n border: 1px solid var(--border-color);\n }\n\n .close {\n font-size: var(--font-size-sm);\n cursor: pointer;\n opacity: 0.5;\n transition: var(--transition-duration) var(--transition-timing-function) opacity;\n user-select: none;\n\n &:hover {\n opacity: 1;\n }\n }\n\n ${['primary', 'success', 'error', 'warning', 'tag-custom']\n .map(\n (s) =>\n `.${s} {--text-color: var(--${s}-color);--border-color: var(--${s}-secondary-bg);--component-bg: var(--${s}-details-bg);}`,\n )\n .join('')}\n\n .disabled {\n --text-color: var(--disable-color);\n --border-color: var(--disable-border);\n --component-bg: var(--disable-bg);\n }\n`;\n"],"names":["css","style","map","s","join"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CvB,EAAE,CAAC,UAAW,UAAW,QAAS,UAAW,aAAa,CACvDE,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,sBAAsB,EAAEA,EAAE,8BAA8B,EAAEA,EAAE,qCAAqC,EAAEA,EAAE,cAAc,CAAC,EAE7HC,IAAI,CAAC,IAAI;;;;;;;AAOd,CAAC,AAAC"}
package/es/theme/index.js CHANGED
@@ -1,2 +1 @@
1
- var e;import{createEffect as o,createMemo as r,createRoot as a,createSignal as n,getOwner as t}from"solid-js";import i from"@moneko/common/lib/colorParse";import l from"@moneko/common/lib/mixColor";import s from"@moneko/common/lib/toneColor";import{css as m}from"@moneko/css";export{toneColor}from"@moneko/common";export function generateColor(e,o){let r=s(e,o.dark),a=i(r[5]),n=i(e);return{[`--${o.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${o.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${o.name}-heading`]:r[5],[`--${o.name}-active`]:r[30],[`--${o.name}-color`]:r[40],[`--${o.name}-hover`]:l(r[40],r[30],15),[`--${o.name}-secondary-bg`]:r[70],[`--${o.name}-border`]:r[80],[`--${o.name}-outline`]:l(r[90],r[40],5),[`--${o.name}-selection`]:r[90],[`--${o.name}-notify-bg`]:i(r[90]).setAlpha(.8).toRgbaString(),[`--on-${o.name}-selection`]:r[10],[`--${o.name}-shadow`]:n.setAlpha(.12).toRgbaString(),[`--${o.name}-shadow-1`]:n.setAlpha(.08).toRgbaString(),[`--${o.name}-shadow-2`]:n.setAlpha(.05).toRgbaString(),[`--${o.name}-details-bg`]:r[95],[`--${o.name}-component-bg`]:r[98],[`--${o.name}-bg`]:r[99],[`--on-${o.name}-bg`]:r[5]}}export var ColorScheme;(e=ColorScheme||(ColorScheme={})).light="light",e.dark="dark",e.auto="auto";export const inline=m({":host":{display:"inline-flex"}});export const block=m({":host":{display:"block"}});export default a(function(){let e=m({":root,:host":{"--scrollbar-size":"4px","--font-size":"14px","--font-size-sm":"12px","--font-size-xs":"10px","--font-size-lg":"16px","--border-base":"1px solid var(--border-color)","--border-radius":"8px","--text-color":"var(--primary-text)","--text-secondary":"var(--primary-secondary)","--text-heading":"var(--primary-heading)","--text-selection":"var(--primary-selection)","--transition-duration":"0.3s","--mask-bg":"rgb(0 0 0 / 5%)","--modal-component-bg":"rgb(255 255 255 / 80%)","--modal-box-shadow":"0 5px 35px rgb(0 0 0 / 10%)","--notification-box-shadow":"0 4px 16px rgb(0 0 0 / 5%)","--transition-timing-function":"cubic-bezier(0.645, 0.045, 0.355, 1)",fontSize:"var(--font-size)",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'",color:"var(--text-color, rgb(0 0 0 / 65%))",lineHeight:1.8},'[disabled]:not([disabled="false"]):not(n-img)':{cursor:"not-allowed",color:"var(--disable-color)"},"::selection":{backgroundColor:"var(--text-selection)"},"::-webkit-scrollbar":{inlineSize:"var(--scrollbar-size)",blockSize:"var(--scrollbar-size)"}}),a=ColorScheme[localStorage.getItem("color-scheme")]||"auto",t=window.matchMedia("(prefers-color-scheme: dark)"),[i,l]=n(a),[s,c]=n(t.matches),[b,g]=n({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,p]=n({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),h=r(()=>generateColor(b().primary,{name:"primary"})),f=r(()=>generateColor(d().primary,{name:"primary",dark:!0})),x=r(()=>generateColor(b().warning,{name:"warning"})),y=r(()=>generateColor(d().warning,{name:"warning",dark:!0})),u=r(()=>generateColor(b().success,{name:"success"})),S=r(()=>generateColor(d().success,{name:"success",dark:!0})),$=r(()=>generateColor(b().error,{name:"error"})),v=r(()=>generateColor(d().error,{name:"error",dark:!0}));function k(o){let r="";for(let e in o)Object.prototype.hasOwnProperty.call(o,e)&&(r+=`${e}:${o[e]};`);return`${e}:root,:host{${r}}`}let C=r(()=>k(Object.assign({},h(),x(),u(),$(),{"--bg":"transparent","--disable-color":"rgb(0 0 0 / 25%)","--disable-bg":"rgb(0 0 0 / 4%)","--disable-border":"#d9d9d9","--border-color":"var(--primary-border)","--component-bg":"var(--primary-bg)"}))),w=r(()=>k(Object.assign({},f(),y(),S(),v(),{"--bg":"#1c1c1c","--disable-color":"rgb(255 255 255 / 25%)","--disable-bg":"rgb(255 255 255 / 8%)","--disable-border":"#424242","--border-color":"#303030","--component-bg":"#141414","--primary-shadow":"rgb(0 0 0 / 12%)","--primary-selection":"rgb(255 255 255 / 5%)","--primary-details-bg":"rgb(255 255 255 / 3%)","--primary-component-bg":"#000","--modal-component-bg":"rgb(30 30 30 / 80%)"})));function z(e){c(e.matches)}o(()=>{let e=i();c("dark"===e||"auto"===e&&t.matches)});let A=r(()=>s()?w():C());return o(()=>{"auto"===i()?t.addEventListener("change",z):t.removeEventListener("change",z),localStorage.setItem("color-scheme",i())}),{baseStyle:A,dark:d,setDark:p,light:b,setLight:g,scheme:i,setScheme:l,isDark:s}},t());
2
- //# sourceMappingURL=index.js.map
1
+ var e;import{createEffect as o,createMemo as r,createRoot as a,createSignal as n,getOwner as t}from"solid-js";import i from"@moneko/common/lib/colorParse";import l from"@moneko/common/lib/mixColor";import s from"@moneko/common/lib/toneColor";import{css as m}from"@moneko/css";export{toneColor}from"@moneko/common";export function generateColor(e,o){let r=s(e,o.dark),a=i(r[5]),n=i(e);return{[`--${o.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${o.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${o.name}-heading`]:r[5],[`--${o.name}-active`]:r[30],[`--${o.name}-color`]:r[40],[`--${o.name}-hover`]:l(r[40],r[30],15),[`--${o.name}-secondary-bg`]:r[70],[`--${o.name}-border`]:r[80],[`--${o.name}-outline`]:l(r[90],r[40],5),[`--${o.name}-selection`]:r[90],[`--${o.name}-notify-bg`]:i(r[90]).setAlpha(.8).toRgbaString(),[`--on-${o.name}-selection`]:r[10],[`--${o.name}-shadow`]:n.setAlpha(.12).toRgbaString(),[`--${o.name}-shadow-1`]:n.setAlpha(.08).toRgbaString(),[`--${o.name}-shadow-2`]:n.setAlpha(.05).toRgbaString(),[`--${o.name}-details-bg`]:r[95],[`--${o.name}-component-bg`]:r[98],[`--${o.name}-bg`]:r[99],[`--on-${o.name}-bg`]:r[5]}}export var ColorScheme;(e=ColorScheme||(ColorScheme={})).light="light",e.dark="dark",e.auto="auto";export const inline=m({":host":{display:"inline-flex"}});export const block=m({":host":{display:"block"}});export default a(function(){let e=m({":root,:host":{"--scrollbar-size":"4px","--font-size":"14px","--font-size-sm":"12px","--font-size-xs":"10px","--font-size-lg":"16px","--border-base":"1px solid var(--border-color)","--border-radius":"8px","--text-color":"var(--primary-text)","--text-secondary":"var(--primary-secondary)","--text-heading":"var(--primary-heading)","--text-selection":"var(--primary-selection)","--transition-duration":"0.3s","--mask-bg":"rgb(0 0 0 / 5%)","--modal-component-bg":"rgb(255 255 255 / 80%)","--modal-box-shadow":"0 5px 35px rgb(0 0 0 / 10%)","--notification-box-shadow":"0 4px 16px rgb(0 0 0 / 5%)","--transition-timing-function":"cubic-bezier(0.645, 0.045, 0.355, 1)",fontSize:"var(--font-size)",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'",color:"var(--text-color, rgb(0 0 0 / 65%))",lineHeight:1.8},'[disabled]:not([disabled="false"]):not(n-img)':{cursor:"not-allowed",color:"var(--disable-color)"},"::selection":{backgroundColor:"var(--text-selection)"},"::-webkit-scrollbar":{inlineSize:"var(--scrollbar-size)",blockSize:"var(--scrollbar-size)"}}),a=ColorScheme[localStorage.getItem("color-scheme")]||"auto",t=window.matchMedia("(prefers-color-scheme: dark)"),[i,l]=n(a),[s,c]=n(t.matches),[b,g]=n({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,p]=n({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),h=r(()=>generateColor(b().primary,{name:"primary"})),f=r(()=>generateColor(d().primary,{name:"primary",dark:!0})),x=r(()=>generateColor(b().warning,{name:"warning"})),y=r(()=>generateColor(d().warning,{name:"warning",dark:!0})),u=r(()=>generateColor(b().success,{name:"success"})),S=r(()=>generateColor(d().success,{name:"success",dark:!0})),$=r(()=>generateColor(b().error,{name:"error"})),v=r(()=>generateColor(d().error,{name:"error",dark:!0}));function k(o){let r="";for(let e in o)Object.prototype.hasOwnProperty.call(o,e)&&(r+=`${e}:${o[e]};`);return`${e}:root,:host{${r}}`}let C=r(()=>k(Object.assign({},h(),x(),u(),$(),{"--bg":"transparent","--disable-color":"rgb(0 0 0 / 25%)","--disable-bg":"rgb(0 0 0 / 4%)","--disable-border":"#d9d9d9","--border-color":"var(--primary-border)","--component-bg":"var(--primary-bg)"}))),w=r(()=>k(Object.assign({},f(),y(),S(),v(),{"--bg":"#1c1c1c","--disable-color":"rgb(255 255 255 / 25%)","--disable-bg":"rgb(255 255 255 / 8%)","--disable-border":"#424242","--border-color":"#303030","--component-bg":"#141414","--primary-shadow":"rgb(0 0 0 / 12%)","--primary-selection":"rgb(255 255 255 / 5%)","--primary-details-bg":"rgb(255 255 255 / 3%)","--primary-component-bg":"#000","--modal-component-bg":"rgb(30 30 30 / 80%)"})));function z(e){c(e.matches)}o(()=>{let e=i();c("dark"===e||"auto"===e&&t.matches)});let A=r(()=>s()?w():C());return o(()=>{"auto"===i()?t.addEventListener("change",z):t.removeEventListener("change",z),localStorage.setItem("color-scheme",i())}),{baseStyle:A,dark:d,setDark:p,light:b,setLight:g,scheme:i,setScheme:l,isDark:s}},t());
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/theme/index.ts"],"sourcesContent":["import {\n type Accessor,\n createEffect,\n createMemo,\n createRoot,\n createSignal,\n getOwner,\n type Setter,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { css, type CSSObject } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateColor(base: string, option: ThemeOption): Record<string, string> {\n const obj = toneColor(base, option.dark);\n const textColor = colorParse(obj[5]);\n const baseColor = colorParse(base);\n\n return {\n [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n [`--${option.name}-heading`]: obj[5],\n [`--${option.name}-active`]: obj[30],\n [`--${option.name}-color`]: obj[40],\n [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n [`--${option.name}-secondary-bg`]: obj[70],\n [`--${option.name}-border`]: obj[80],\n [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n [`--${option.name}-selection`]: obj[90],\n [`--${option.name}-notify-bg`]: colorParse(obj[90]).setAlpha(0.8).toRgbaString(),\n [`--on-${option.name}-selection`]: obj[10],\n [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n [`--${option.name}-shadow-1`]: baseColor.setAlpha(0.08).toRgbaString(),\n [`--${option.name}-shadow-2`]: baseColor.setAlpha(0.05).toRgbaString(),\n [`--${option.name}-details-bg`]: obj[95],\n [`--${option.name}-component-bg`]: obj[98],\n [`--${option.name}-bg`]: obj[99],\n [`--on-${option.name}-bg`]: obj[5],\n };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n /** 明亮 */\n light = 'light',\n /** 暗黑 */\n dark = 'dark',\n /** 跟随系统 */\n auto = 'auto',\n}\n\nfunction createTheme() {\n const baseTokens = css({\n ':root,:host': {\n '--scrollbar-size': '4px',\n '--font-size': '14px',\n '--font-size-sm': '12px',\n '--font-size-xs': '10px',\n '--font-size-lg': '16px',\n '--border-base': '1px solid var(--border-color)',\n '--border-radius': '8px',\n '--text-color': 'var(--primary-text)',\n '--text-secondary': 'var(--primary-secondary)',\n '--text-heading': 'var(--primary-heading)',\n '--text-selection': 'var(--primary-selection)',\n '--transition-duration': '0.3s',\n '--mask-bg': 'rgb(0 0 0 / 5%)',\n '--modal-component-bg': 'rgb(255 255 255 / 80%)',\n '--modal-box-shadow': '0 5px 35px rgb(0 0 0 / 10%)',\n '--notification-box-shadow': '0 4px 16px rgb(0 0 0 / 5%)',\n '--transition-timing-function': 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n fontSize: 'var(--font-size)',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'\",\n color: 'var(--text-color, rgb(0 0 0 / 65%))',\n lineHeight: 1.8,\n },\n '[disabled]:not([disabled=\"false\"]):not(n-img)': {\n cursor: 'not-allowed',\n color: 'var(--disable-color)',\n },\n '::selection': {\n backgroundColor: 'var(--text-selection)',\n },\n '::-webkit-scrollbar': {\n inlineSize: 'var(--scrollbar-size)',\n blockSize: 'var(--scrollbar-size)',\n },\n });\n const preset =\n ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n const media = window.matchMedia('(prefers-color-scheme: dark)');\n const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n const [isDark, setIsDark] = createSignal(media.matches);\n const [light, setLight] = createSignal({\n primary: '#5794ff',\n warning: '#faad14',\n error: '#ff4d4f',\n success: '#52c41a',\n });\n const [dark, setDark] = createSignal({\n primary: '#4d81dc',\n warning: '#bb8314',\n error: '#901c22',\n success: '#419418',\n });\n const primary = createMemo(() => generateColor(light().primary, { name: 'primary' }));\n const darkPrimary = createMemo(() =>\n generateColor(dark().primary, { name: 'primary', dark: true }),\n );\n const warning = createMemo(() => generateColor(light().warning, { name: 'warning' }));\n const darkWarning = createMemo(() =>\n generateColor(dark().warning, { name: 'warning', dark: true }),\n );\n const success = createMemo(() => generateColor(light().success, { name: 'success' }));\n const darkSuccess = createMemo(() =>\n generateColor(dark().success, { name: 'success', dark: true }),\n );\n const error = createMemo(() => generateColor(light().error, { name: 'error' }));\n const darkError = createMemo(() => generateColor(dark().error, { name: 'error', dark: true }));\n\n function getHostCss(tokens: CSSObject) {\n let str = '';\n\n for (const key in tokens) {\n if (Object.prototype.hasOwnProperty.call(tokens, key)) {\n str += `${key}:${tokens[key]};`;\n }\n }\n return `${baseTokens}:root,:host{${str}}`;\n }\n const lightCss = createMemo(() => {\n const tokens = Object.assign({}, primary(), warning(), success(), error(), {\n '--bg': 'transparent',\n '--disable-color': 'rgb(0 0 0 / 25%)',\n '--disable-bg': 'rgb(0 0 0 / 4%)',\n '--disable-border': '#d9d9d9',\n '--border-color': 'var(--primary-border)',\n '--component-bg': 'var(--primary-bg)',\n });\n\n return getHostCss(tokens);\n });\n const darkCss = createMemo(() => {\n const tokens = Object.assign({}, darkPrimary(), darkWarning(), darkSuccess(), darkError(), {\n '--bg': '#1c1c1c',\n '--disable-color': 'rgb(255 255 255 / 25%)',\n '--disable-bg': 'rgb(255 255 255 / 8%)',\n '--disable-border': '#424242',\n '--border-color': '#303030',\n '--component-bg': '#141414',\n '--primary-shadow': 'rgb(0 0 0 / 12%)',\n '--primary-selection': 'rgb(255 255 255 / 5%)',\n '--primary-details-bg': 'rgb(255 255 255 / 3%)',\n '--primary-component-bg': '#000',\n '--modal-component-bg': 'rgb(30 30 30 / 80%)',\n });\n\n return getHostCss(tokens);\n });\n\n function update(e: MediaQueryListEvent) {\n setIsDark(e.matches);\n }\n createEffect(() => {\n const _ = scheme();\n\n setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n });\n const baseStyle = createMemo(() => (isDark() ? darkCss() : lightCss()));\n\n createEffect(() => {\n if (scheme() === 'auto') {\n // 监听 prefers-color-scheme 媒体查询变化,自动更新颜色方案\n media.addEventListener('change', update);\n } else {\n media.removeEventListener('change', update);\n }\n localStorage.setItem('color-scheme', scheme());\n });\n\n return {\n baseStyle,\n dark,\n setDark,\n light,\n setLight,\n scheme,\n setScheme,\n isDark,\n };\n}\n\n/** API */\nexport interface Theme {\n /** 亮色样式的主要色 */\n light: Accessor<Color>;\n /** 设置亮色样式的主要色 */\n setLight: Setter<Color>;\n /** 黑色样式的主要色 */\n dark: Accessor<Color>;\n /** 设置黑色样式的主要色 */\n setDark: Setter<Color>;\n /** 颜色模式\n * @default 'auto'\n */\n scheme: Accessor<keyof typeof ColorScheme>;\n /** 设置颜色模式 */\n setScheme: Setter<keyof typeof ColorScheme>;\n /** 是否为色模式 */\n isDark: Accessor<boolean>;\n /** 基本都样式表, 响应 scheme 变化 */\n baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n /** 主要\n * @default '#5794ff'\n */\n primary: string;\n /** 警告\n * @default '#faad14'\n */\n warning: string;\n /** 错误\n * @default '#ff4d4f'\n */\n error: string;\n /** 成功\n * @default '#52c41a'\n */\n success: string;\n}\n\nexport interface ThemeOption {\n /** 是否采用暗色算法\n * @default false\n */\n dark?: boolean;\n /** 颜色名称 */\n name: string;\n}\n\nexport const inline = css({\n ':host': {\n display: 'inline-flex',\n },\n});\nexport const block = css({\n ':host': {\n display: 'block',\n },\n});\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","createEffect","createMemo","createRoot","createSignal","getOwner","colorParse","mixColor","toneColor","css","generateColor","base","option","obj","dark","textColor","baseColor","name","setAlpha","toRgbaString","inline","display","block","baseTokens","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","_","baseStyle","addEventListener","removeEventListener","setItem"],"mappings":"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"}
1
+ {"version":3,"sources":["components/theme/index.ts"],"sourcesContent":["import {\n type Accessor,\n createEffect,\n createMemo,\n createRoot,\n createSignal,\n getOwner,\n type Setter,\n} from 'solid-js';\nimport { colorParse, mixColor, toneColor } from '@moneko/common';\nimport { css, type CSSObject } from '@moneko/css';\nexport { toneColor } from '@moneko/common';\n\n/** 生成主题色调\n * @param {string} base 基础颜色\n * @param {ThemeOption} option 配置项\n * @returns {Record<string, string>} 主题色调\n */\nexport function generateColor(base: string, option: ThemeOption): Record<string, string> {\n const obj = toneColor(base, option.dark);\n const textColor = colorParse(obj[5]);\n const baseColor = colorParse(base);\n\n return {\n [`--${option.name}-text`]: textColor.setAlpha(0.65).toRgbaString(),\n [`--${option.name}-secondary`]: textColor.setAlpha(0.45).toRgbaString(),\n [`--${option.name}-heading`]: obj[5],\n [`--${option.name}-active`]: obj[30],\n [`--${option.name}-color`]: obj[40],\n [`--${option.name}-hover`]: mixColor(obj[40], obj[30], 15),\n [`--${option.name}-secondary-bg`]: obj[70],\n [`--${option.name}-border`]: obj[80],\n [`--${option.name}-outline`]: mixColor(obj[90], obj[40], 5),\n [`--${option.name}-selection`]: obj[90],\n [`--${option.name}-notify-bg`]: colorParse(obj[90]).setAlpha(0.8).toRgbaString(),\n [`--on-${option.name}-selection`]: obj[10],\n [`--${option.name}-shadow`]: baseColor.setAlpha(0.12).toRgbaString(),\n [`--${option.name}-shadow-1`]: baseColor.setAlpha(0.08).toRgbaString(),\n [`--${option.name}-shadow-2`]: baseColor.setAlpha(0.05).toRgbaString(),\n [`--${option.name}-details-bg`]: obj[95],\n [`--${option.name}-component-bg`]: obj[98],\n [`--${option.name}-bg`]: obj[99],\n [`--on-${option.name}-bg`]: obj[5],\n };\n}\n\n/** 颜色模式 */\nexport enum ColorScheme {\n /** 明亮 */\n light = 'light',\n /** 暗黑 */\n dark = 'dark',\n /** 跟随系统 */\n auto = 'auto',\n}\n\nfunction createTheme() {\n const baseTokens = css({\n ':root,:host': {\n '--scrollbar-size': '4px',\n '--font-size': '14px',\n '--font-size-sm': '12px',\n '--font-size-xs': '10px',\n '--font-size-lg': '16px',\n '--border-base': '1px solid var(--border-color)',\n '--border-radius': '8px',\n '--text-color': 'var(--primary-text)',\n '--text-secondary': 'var(--primary-secondary)',\n '--text-heading': 'var(--primary-heading)',\n '--text-selection': 'var(--primary-selection)',\n '--transition-duration': '0.3s',\n '--mask-bg': 'rgb(0 0 0 / 5%)',\n '--modal-component-bg': 'rgb(255 255 255 / 80%)',\n '--modal-box-shadow': '0 5px 35px rgb(0 0 0 / 10%)',\n '--notification-box-shadow': '0 4px 16px rgb(0 0 0 / 5%)',\n '--transition-timing-function': 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n fontSize: 'var(--font-size)',\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'\",\n color: 'var(--text-color, rgb(0 0 0 / 65%))',\n lineHeight: 1.8,\n },\n '[disabled]:not([disabled=\"false\"]):not(n-img)': {\n cursor: 'not-allowed',\n color: 'var(--disable-color)',\n },\n '::selection': {\n backgroundColor: 'var(--text-selection)',\n },\n '::-webkit-scrollbar': {\n inlineSize: 'var(--scrollbar-size)',\n blockSize: 'var(--scrollbar-size)',\n },\n });\n const preset =\n ColorScheme[localStorage.getItem('color-scheme') as keyof typeof ColorScheme] || 'auto';\n /** 检测 prefers-color-scheme 媒体查询是否为 light 模式 */\n const media = window.matchMedia('(prefers-color-scheme: dark)');\n const [scheme, setScheme] = createSignal<keyof typeof ColorScheme>(preset);\n const [isDark, setIsDark] = createSignal(media.matches);\n const [light, setLight] = createSignal({\n primary: '#5794ff',\n warning: '#faad14',\n error: '#ff4d4f',\n success: '#52c41a',\n });\n const [dark, setDark] = createSignal({\n primary: '#4d81dc',\n warning: '#bb8314',\n error: '#901c22',\n success: '#419418',\n });\n const primary = createMemo(() => generateColor(light().primary, { name: 'primary' }));\n const darkPrimary = createMemo(() =>\n generateColor(dark().primary, { name: 'primary', dark: true }),\n );\n const warning = createMemo(() => generateColor(light().warning, { name: 'warning' }));\n const darkWarning = createMemo(() =>\n generateColor(dark().warning, { name: 'warning', dark: true }),\n );\n const success = createMemo(() => generateColor(light().success, { name: 'success' }));\n const darkSuccess = createMemo(() =>\n generateColor(dark().success, { name: 'success', dark: true }),\n );\n const error = createMemo(() => generateColor(light().error, { name: 'error' }));\n const darkError = createMemo(() => generateColor(dark().error, { name: 'error', dark: true }));\n\n function getHostCss(tokens: CSSObject) {\n let str = '';\n\n for (const key in tokens) {\n if (Object.prototype.hasOwnProperty.call(tokens, key)) {\n str += `${key}:${tokens[key]};`;\n }\n }\n return `${baseTokens}:root,:host{${str}}`;\n }\n const lightCss = createMemo(() => {\n const tokens = Object.assign({}, primary(), warning(), success(), error(), {\n '--bg': 'transparent',\n '--disable-color': 'rgb(0 0 0 / 25%)',\n '--disable-bg': 'rgb(0 0 0 / 4%)',\n '--disable-border': '#d9d9d9',\n '--border-color': 'var(--primary-border)',\n '--component-bg': 'var(--primary-bg)',\n });\n\n return getHostCss(tokens);\n });\n const darkCss = createMemo(() => {\n const tokens = Object.assign({}, darkPrimary(), darkWarning(), darkSuccess(), darkError(), {\n '--bg': '#1c1c1c',\n '--disable-color': 'rgb(255 255 255 / 25%)',\n '--disable-bg': 'rgb(255 255 255 / 8%)',\n '--disable-border': '#424242',\n '--border-color': '#303030',\n '--component-bg': '#141414',\n '--primary-shadow': 'rgb(0 0 0 / 12%)',\n '--primary-selection': 'rgb(255 255 255 / 5%)',\n '--primary-details-bg': 'rgb(255 255 255 / 3%)',\n '--primary-component-bg': '#000',\n '--modal-component-bg': 'rgb(30 30 30 / 80%)',\n });\n\n return getHostCss(tokens);\n });\n\n function update(e: MediaQueryListEvent) {\n setIsDark(e.matches);\n }\n createEffect(() => {\n const _ = scheme();\n\n setIsDark(_ === 'dark' || (_ === 'auto' && media.matches));\n });\n const baseStyle = createMemo(() => (isDark() ? darkCss() : lightCss()));\n\n createEffect(() => {\n if (scheme() === 'auto') {\n // 监听 prefers-color-scheme 媒体查询变化,自动更新颜色方案\n media.addEventListener('change', update);\n } else {\n media.removeEventListener('change', update);\n }\n localStorage.setItem('color-scheme', scheme());\n });\n\n return {\n baseStyle,\n dark,\n setDark,\n light,\n setLight,\n scheme,\n setScheme,\n isDark,\n };\n}\n\n/** API */\nexport interface Theme {\n /** 亮色样式的主要色 */\n light: Accessor<Color>;\n /** 设置亮色样式的主要色 */\n setLight: Setter<Color>;\n /** 黑色样式的主要色 */\n dark: Accessor<Color>;\n /** 设置黑色样式的主要色 */\n setDark: Setter<Color>;\n /** 颜色模式\n * @default 'auto'\n */\n scheme: Accessor<keyof typeof ColorScheme>;\n /** 设置颜色模式 */\n setScheme: Setter<keyof typeof ColorScheme>;\n /** 是否为色模式 */\n isDark: Accessor<boolean>;\n /** 基本都样式表, 响应 scheme 变化 */\n baseStyle: Accessor<string>;\n}\n\n/** 主要色 */\ninterface Color {\n /** 主要\n * @default '#5794ff'\n */\n primary: string;\n /** 警告\n * @default '#faad14'\n */\n warning: string;\n /** 错误\n * @default '#ff4d4f'\n */\n error: string;\n /** 成功\n * @default '#52c41a'\n */\n success: string;\n}\n\nexport interface ThemeOption {\n /** 是否采用暗色算法\n * @default false\n */\n dark?: boolean;\n /** 颜色名称 */\n name: string;\n}\n\nexport const inline = css({\n ':host': {\n display: 'inline-flex',\n },\n});\nexport const block = css({\n ':host': {\n display: 'block',\n },\n});\nexport default createRoot<Theme>(createTheme, getOwner());\n"],"names":["ColorScheme","createEffect","createMemo","createRoot","createSignal","getOwner","colorParse","mixColor","toneColor","css","generateColor","base","option","obj","dark","textColor","baseColor","name","setAlpha","toRgbaString","inline","display","block","baseTokens","fontSize","fontFamily","color","lineHeight","cursor","backgroundColor","inlineSize","blockSize","preset","localStorage","getItem","media","window","matchMedia","scheme","setScheme","isDark","setIsDark","matches","light","setLight","primary","warning","error","success","setDark","darkPrimary","darkWarning","darkSuccess","darkError","getHostCss","tokens","str","key","Object","prototype","hasOwnProperty","call","lightCss","assign","darkCss","update","e","_","baseStyle","addEventListener","removeEventListener","setItem"],"mappings":"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"}
package/es/tree/index.js CHANGED
@@ -1,2 +1 @@
1
- import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{style as l}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";let c=t('<li class="row">'),m=t('<span class="title">'),d=t('<span class="sub-title">'),u=t("<style> "),p=t("<style>"),f=t('<ul class="tree">');import{createEffect as h,createMemo as g,createSignal as v,For as $,Show as b}from"solid-js";import y from"@moneko/common/lib/frameCallback";import k from"@moneko/common/lib/isFunction";import w from"@moneko/common/lib/isString";import{css as _}from"@moneko/css";import C from"../from-schema";import j from"../theme";import{style as R}from"./style";import"./register";export*from"./type";export default function(t){let i;let S={small:6,normal:8,large:10},{baseStyle:x}=j,[A,L]=v([]),[P,T]=v([]),z={key:"key",name:"name",title:"title",subTitle:"subTitle",children:"children",description:"description"},B=g(()=>Object.assign(z,t.fieldNames)),D=g(()=>"rtl"===t.direction),O=g(()=>void 0!==t.value&&null!==t.value?Array.isArray(t.value)?t.value:[t.value]:[]),q=Symbol("path"),E=Symbol("path-end");return h(()=>{let e=t.fromSchema?C(t.data):w(t.data)?function(e){let t=B(),l=t.key,o=t.title,r=t.children,n=/[^\s|`│├└]/,i=e.trim().split("\n"),s=[{[o]:i[0],[l]:i[0]}];for(let e=1;e<i.length;e++){let t=i[e].search(n);if(-1===t)continue;let a={[o]:i[e].slice(t+3),depth:t};for(;s.length&&t<=(s[s.length-1].depth||0);)s.pop();if(!s.length)return[];let c=s[s.length-1];c[r]||(c[r]=[]),a[l]=`${c[l]}-${a[o]}-${t}-${e}`,c[r].push(a),s.push(a)}return[s[0]]}(t.data):t.data;L([...new Set(function e(t,l=0){let o=t.length-1,r=t[o],n=t[0],i=[],s=B(),a=s.key,c=s.children;for(let s=0,m=t.length;s<m;s++){let m=t[s],d=s===o;delete m[q],delete m[E],(0===s||d)&&(m[q]=n[a]+(1===t.length?"":`>${r[a]}`),d&&(m[E]=""),i.push(m[q])),m[c]&&(i=i.concat(e(m[c],l+1)))}return i}(e))]),T(e)}),h(()=>{let e=A(),l=t.size||"normal";y(()=>{let t=e.length;if(i&&t){let o=S[l];for(let l=0;l<t;l++){let t=i.querySelectorAll(`li[data-path="${e[l]}"]`);if(t.length){let e=t[0].getBoundingClientRect(),r=e.height/2+o;if(t.length>1){let{bottom:n,height:i,top:s}=t[1].getBoundingClientRect();r=0===l?s-e.top:n-e.top-i/2+o,t[1].style.setProperty("--c","none")}else 0===l&&t[0].style.setProperty("--c","none");(1!==t.length||0!==l)&&t[0].style.setProperty("--line",`${Math.abs(r)}px`)}}}})}),[(()=>{let e=u(),t=e.firstChild;return n(()=>t.data=x()),e})(),(()=>{let e=p();return e.textContent=R,e})(),s(b,{get when(){return t.css},get children(){let e=u(),l=e.firstChild;return n(()=>l.data=_(t.css)),e}}),(()=>{let u=f(),p=i;return"function"==typeof p?e(p,u):i=u,r(u,()=>(function e(i,a=0){return s($,{each:i,children:i=>{let u=B(),p=i[u.title],f=i[u.key],h=i[u.name],g=i[u.subTitle],v=i[u.children],$=h!==p&&h?[h,p]:[p];return[(()=>{let e=c();return e.$$dblclick=e=>null==t.onRowDoubleClick?void 0:t.onRowDoubleClick.call(t,e,f,i),e.$$click=e=>{!function(e,l){let o=B();(function(e,l){if(!t.readonly&&k(t.onChange)){let o=[...O()];if(t.multiple){let t=o.indexOf(e);-1===t?o.push(e):o.splice(t,1)}else o=t.toggle&&o[0]===e?[]:[e];t.onChange(t.multiple?o:o[0],l)}})(l[o.key],l),null==t.onRowClick||t.onRowClick.call(t,e,l[o.key],l)}(e,i)},r(e,()=>(function(e,l,o){let r=(null==t.renderRow?void 0:t.renderRow.call(t,e,l,o))||[l,o];return D()?r.reverse():r})(i,(()=>{let e=m();return r(e,()=>(D()?$.reverse():$).join(": ")),e})(),s(b,{when:g,get children(){let e=d();return r(e,g),e}}))),n(r=>{let n=!!O().includes(f),s=!!(t.readonly||!k(t.onChange)),c=a?{"--depth":`${2*a}em`}:void 0,m=i[E],d=i[q];return n!==r._v$&&e.classList.toggle("active",r._v$=n),s!==r._v$2&&e.classList.toggle("non",r._v$2=s),r._v$3=l(e,c,r._v$3),m!==r._v$4&&o(e,"data-path-end",r._v$4=m),d!==r._v$5&&o(e,"data-path",r._v$5=d),r},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),e})(),s(b,{when:v,get children(){return e(v,a+1)}})]}})})(P())),n(e=>a(u,{[t.size||"normal"]:!0,[t.class]:!!t.class,rtl:D()},e)),u})()]}i(["click","dblclick"]);
2
- //# sourceMappingURL=index.js.map
1
+ import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{style as l}from"solid-js/web";import{setAttribute as o}from"solid-js/web";import{insert as r}from"solid-js/web";import{effect as n}from"solid-js/web";import{delegateEvents as i}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{classList as a}from"solid-js/web";let c=t('<li class="row">'),m=t('<span class="title">'),d=t('<span class="sub-title">'),u=t("<style> "),p=t("<style>"),f=t('<ul class="tree">');import{createEffect as h,createMemo as g,createSignal as v,For as $,Show as b}from"solid-js";import y from"@moneko/common/lib/frameCallback";import k from"@moneko/common/lib/isFunction";import w from"@moneko/common/lib/isString";import{css as _}from"@moneko/css";import C from"../from-schema";import j from"../theme";import{style as R}from"./style";import"./register";export*from"./type";export default function(t){let i;let S={small:6,normal:8,large:10},{baseStyle:x}=j,[A,L]=v([]),[P,T]=v([]),z={key:"key",name:"name",title:"title",subTitle:"subTitle",children:"children",description:"description"},B=g(()=>Object.assign(z,t.fieldNames)),D=g(()=>"rtl"===t.direction),O=g(()=>void 0!==t.value&&null!==t.value?Array.isArray(t.value)?t.value:[t.value]:[]),q=Symbol("path"),E=Symbol("path-end");return h(()=>{let e=t.fromSchema?C(t.data):w(t.data)?function(e){let t=B(),l=t.key,o=t.title,r=t.children,n=/[^\s|`│├└]/,i=e.trim().split("\n"),s=[{[o]:i[0],[l]:i[0]}];for(let e=1;e<i.length;e++){let t=i[e].search(n);if(-1===t)continue;let a={[o]:i[e].slice(t+3),depth:t};for(;s.length&&t<=(s[s.length-1].depth||0);)s.pop();if(!s.length)return[];let c=s[s.length-1];c[r]||(c[r]=[]),a[l]=`${c[l]}-${a[o]}-${t}-${e}`,c[r].push(a),s.push(a)}return[s[0]]}(t.data):t.data;L([...new Set(function e(t,l=0){let o=t.length-1,r=t[o],n=t[0],i=[],s=B(),a=s.key,c=s.children;for(let s=0,m=t.length;s<m;s++){let m=t[s],d=s===o;delete m[q],delete m[E],(0===s||d)&&(m[q]=n[a]+(1===t.length?"":`>${r[a]}`),d&&(m[E]=""),i.push(m[q])),m[c]&&(i=i.concat(e(m[c],l+1)))}return i}(e))]),T(e)}),h(()=>{let e=A(),l=t.size||"normal";y(()=>{let t=e.length;if(i&&t){let o=S[l];for(let l=0;l<t;l++){let t=i.querySelectorAll(`li[data-path="${e[l]}"]`);if(t.length){let e=t[0].getBoundingClientRect(),r=e.height/2+o;if(t.length>1){let{bottom:n,height:i,top:s}=t[1].getBoundingClientRect();r=0===l?s-e.top:n-e.top-i/2+o,t[1].style.setProperty("--c","none")}else 0===l&&t[0].style.setProperty("--c","none");(1!==t.length||0!==l)&&t[0].style.setProperty("--line",`${Math.abs(r)}px`)}}}})}),[(()=>{let e=u(),t=e.firstChild;return n(()=>t.data=x()),e})(),(()=>{let e=p();return e.textContent=R,e})(),s(b,{get when(){return t.css},get children(){let e=u(),l=e.firstChild;return n(()=>l.data=_(t.css)),e}}),(()=>{let u=f(),p=i;return"function"==typeof p?e(p,u):i=u,r(u,()=>(function e(i,a=0){return s($,{each:i,children:i=>{let u=B(),p=i[u.title],f=i[u.key],h=i[u.name],g=i[u.subTitle],v=i[u.children],$=h!==p&&h?[h,p]:[p];return[(()=>{let e=c();return e.$$dblclick=e=>null==t.onRowDoubleClick?void 0:t.onRowDoubleClick.call(t,e,f,i),e.$$click=e=>{!function(e,l){let o=B();(function(e,l){if(!t.readonly&&k(t.onChange)){let o=[...O()];if(t.multiple){let t=o.indexOf(e);-1===t?o.push(e):o.splice(t,1)}else o=t.toggle&&o[0]===e?[]:[e];t.onChange(t.multiple?o:o[0],l)}})(l[o.key],l),null==t.onRowClick||t.onRowClick.call(t,e,l[o.key],l)}(e,i)},r(e,()=>(function(e,l,o){let r=(null==t.renderRow?void 0:t.renderRow.call(t,e,l,o))||[l,o];return D()?r.reverse():r})(i,(()=>{let e=m();return r(e,()=>(D()?$.reverse():$).join(": ")),e})(),s(b,{when:g,get children(){let e=d();return r(e,g),e}}))),n(r=>{let n=!!O().includes(f),s=!!(t.readonly||!k(t.onChange)),c=a?{"--depth":`${2*a}em`}:void 0,m=i[E],d=i[q];return n!==r._v$&&e.classList.toggle("active",r._v$=n),s!==r._v$2&&e.classList.toggle("non",r._v$2=s),r._v$3=l(e,c,r._v$3),m!==r._v$4&&o(e,"data-path-end",r._v$4=m),d!==r._v$5&&o(e,"data-path",r._v$5=d),r},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),e})(),s(b,{when:v,get children(){return e(v,a+1)}})]}})})(P())),n(e=>a(u,{[t.size||"normal"]:!0,[t.class]:!!t.class,rtl:D()},e)),u})()]}i(["click","dblclick"]);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tree/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';\nimport { frameCallback, isFunction, isString } from '@moneko/common';\nimport { css } from '@moneko/css';\n\nimport schema from '../from-schema';\nimport theme from '../theme';\n\nimport { style } from './style';\nimport type {\n TreeData,\n TreeMultipleProps,\n TreeMultipleSchemaProps,\n TreeMultipleStringProps,\n TreeProps,\n TreeSchemaProps,\n TreeStack,\n TreeStringProps,\n} from './type';\n\nimport './register';\n\nfunction Tree(\n _:\n | TreeProps\n | TreeMultipleProps\n | TreeMultipleSchemaProps\n | TreeSchemaProps\n | TreeMultipleStringProps\n | TreeStringProps,\n) {\n const sizeCnt = {\n small: 6,\n normal: 8,\n large: 10,\n };\n const { baseStyle } = theme;\n let el: HTMLUListElement | undefined;\n const [lines, setLines] = createSignal<string[]>([]);\n const [treeData, setTreeData] = createSignal<TreeData[]>([]);\n const normalFieldNames = {\n key: 'key' as const,\n name: 'name' as const,\n title: 'title' as const,\n subTitle: 'subTitle' as const,\n children: 'children' as const,\n description: 'description' as const,\n };\n const fieldNames = createMemo(() => Object.assign(normalFieldNames, _.fieldNames));\n const rtl = createMemo(() => _.direction === 'rtl');\n const current = createMemo(() => {\n if (_.value !== void 0 && _.value !== null) {\n return Array.isArray(_.value) ? _.value : [_.value];\n }\n return [];\n });\n const path = Symbol('path');\n const pathEnd = Symbol('path-end');\n\n function countLineLen(tree: TreeData[], depth = 0) {\n const lastIdx = tree.length - 1;\n const last = tree[lastIdx];\n const frist = tree[0];\n let line: string[] = [];\n const fields = fieldNames();\n const key = fields.key;\n const children = fields.children;\n\n for (let i = 0, len = tree.length; i < len; i++) {\n const item = tree[i],\n isLast = i === lastIdx;\n\n delete item[path];\n delete item[pathEnd];\n if (i === 0 || isLast) {\n item[path] = frist[key] + (tree.length === 1 ? '' : `>${last[key]}`);\n if (isLast) {\n item[pathEnd] = '';\n }\n line.push(item[path]);\n }\n if (item[children]) {\n line = line.concat(countLineLen(item[children], depth + 1));\n }\n }\n return line;\n }\n\n function parseTree(str: string): TreeData[] {\n const fields = fieldNames();\n const key = fields.key;\n const title = fields.title;\n const children = fields.children;\n const depthRegex = /[^\\s|`│├└]/;\n const rows = str.trim().split('\\n');\n const stack: TreeStack[] = [{ [title]: rows[0], [key]: rows[0] }];\n\n for (let i = 1; i < rows.length; i++) {\n const depth = rows[i].search(depthRegex);\n\n if (depth === -1) {\n continue;\n }\n const node: Partial<TreeData> = {\n [title]: rows[i].slice(depth + 3),\n depth,\n };\n\n while (stack.length && depth <= (stack[stack.length - 1].depth || 0)) {\n stack.pop();\n }\n if (!stack.length) {\n return [];\n }\n const parent = stack[stack.length - 1];\n\n if (!parent[children]) {\n parent[children] = [];\n }\n node[key] = `${parent[key]}-${node[title]}-${depth}-${i}`;\n parent[children].push(node as TreeData);\n stack.push(node as TreeData);\n }\n\n return [stack[0]];\n }\n\n function handleChange(key: string, item: TreeData) {\n if (!_.readonly && isFunction(_.onChange)) {\n let _current = [...current()];\n\n if (_.multiple) {\n const idx = _current.indexOf(key);\n\n if (idx === -1) {\n _current.push(key);\n } else {\n _current.splice(idx, 1);\n }\n } else if (_.toggle && _current[0] === key) {\n _current = [];\n } else {\n _current = [key];\n }\n _.onChange(_.multiple ? _current : _current[0], item);\n }\n }\n function handleClick(e: MouseEvent, item: TreeData) {\n const fields = fieldNames();\n\n handleChange(item[fields.key], item);\n _.onRowClick?.(e, item[fields.key] as never, item as TreeData<never>);\n }\n function renderItem(item: TreeData, title: JSX.Element, subTitle?: JSX.Element): JSX.Element[] {\n const row = _.renderRow?.(item, title, subTitle) || [title, subTitle];\n\n return rtl() ? row.reverse() : row;\n }\n\n function renderTreeRow(list: TreeData[], depth = 0): JSX.Element {\n return (\n <For each={list}>\n {(item) => {\n const fields = fieldNames();\n const title = item[fields.title];\n const key = item[fields.key];\n const name = item[fields.name];\n const subTitle = item[fields.subTitle];\n const children = item[fields.children];\n const _title = name === title || !name ? [title] : [name, title];\n\n return (\n <>\n <li\n class=\"row\"\n classList={{\n active: current().includes(key),\n non: _.readonly || !isFunction(_.onChange),\n }}\n onClick={(e) => {\n handleClick(e, item);\n }}\n onDblClick={(e) => _.onRowDoubleClick?.(e, key, item)}\n style={depth ? { '--depth': `${depth * 2}em` } : void 0}\n data-path-end={item[pathEnd]}\n data-path={item[path]}\n >\n {renderItem(\n item,\n <span class=\"title\">{(rtl() ? _title.reverse() : _title).join(': ')}</span>,\n <Show when={subTitle}>\n <span class=\"sub-title\">{subTitle}</span>\n </Show>,\n )}\n </li>\n <Show when={children}>{renderTreeRow(children!, depth + 1)}</Show>\n </>\n );\n }}\n </For>\n );\n }\n createEffect(() => {\n const data = _.fromSchema ? schema(_.data) : isString(_.data) ? parseTree(_.data) : _.data;\n\n setLines([...new Set(countLineLen(data))]);\n setTreeData(data);\n });\n\n createEffect(() => {\n const list = lines();\n const size = _.size || 'normal';\n\n frameCallback(() => {\n const len = list.length;\n\n if (el && len) {\n const prefixSize = sizeCnt[size];\n\n for (let i = 0; i < len; i++) {\n const al: NodeListOf<HTMLLIElement> = el.querySelectorAll(`li[data-path=\"${list[i]}\"]`);\n\n if (al.length) {\n const rect1 = al[0].getBoundingClientRect();\n let sideLen = rect1.height / 2 + prefixSize;\n\n if (al.length > 1) {\n const { bottom, height, top } = al[1].getBoundingClientRect();\n\n sideLen = i === 0 ? top - rect1.top : bottom - rect1.top - height / 2 + prefixSize;\n al[1].style.setProperty('--c', 'none');\n } else if (i === 0) {\n al[0].style.setProperty('--c', 'none');\n }\n if (al.length !== 1 || i !== 0) {\n al[0].style.setProperty('--line', `${Math.abs(sideLen)}px`);\n }\n }\n }\n }\n });\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={style} />\n <Show when={_.css}>\n <style textContent={css(_.css)} />\n </Show>\n <ul\n ref={el}\n class=\"tree\"\n classList={{\n [_.size || 'normal']: true,\n [_.class!]: !!_.class,\n rtl: rtl(),\n }}\n >\n {renderTreeRow(treeData())}\n </ul>\n </>\n );\n}\n\nexport * from './type';\nexport default Tree;\n"],"names":["createEffect","createMemo","createSignal","For","Show","frameCallback","isFunction","isString","css","schema","theme","style","_","el","sizeCnt","small","normal","large","baseStyle","lines","setLines","treeData","setTreeData","normalFieldNames","key","name","title","subTitle","children","description","fieldNames","Object","assign","rtl","direction","current","value","Array","isArray","path","Symbol","pathEnd","data","fromSchema","parseTree","str","fields","depthRegex","rows","trim","split","stack","i","length","depth","search","node","slice","pop","parent","push","Set","countLineLen","tree","lastIdx","last","frist","line","len","item","isLast","concat","list","size","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","setProperty","Math","abs","renderTreeRow","_title","e","onRowDoubleClick","handleClick","handleChange","readonly","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","includes","class"],"mappings":"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"}
1
+ {"version":3,"sources":["components/tree/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';\nimport { frameCallback, isFunction, isString } from '@moneko/common';\nimport { css } from '@moneko/css';\n\nimport schema from '../from-schema';\nimport theme from '../theme';\n\nimport { style } from './style';\nimport type {\n TreeData,\n TreeMultipleProps,\n TreeMultipleSchemaProps,\n TreeMultipleStringProps,\n TreeProps,\n TreeSchemaProps,\n TreeStack,\n TreeStringProps,\n} from './type';\n\nimport './register';\n\nfunction Tree(\n _:\n | TreeProps\n | TreeMultipleProps\n | TreeMultipleSchemaProps\n | TreeSchemaProps\n | TreeMultipleStringProps\n | TreeStringProps,\n) {\n const sizeCnt = {\n small: 6,\n normal: 8,\n large: 10,\n };\n const { baseStyle } = theme;\n let el: HTMLUListElement | undefined;\n const [lines, setLines] = createSignal<string[]>([]);\n const [treeData, setTreeData] = createSignal<TreeData[]>([]);\n const normalFieldNames = {\n key: 'key' as const,\n name: 'name' as const,\n title: 'title' as const,\n subTitle: 'subTitle' as const,\n children: 'children' as const,\n description: 'description' as const,\n };\n const fieldNames = createMemo(() => Object.assign(normalFieldNames, _.fieldNames));\n const rtl = createMemo(() => _.direction === 'rtl');\n const current = createMemo(() => {\n if (_.value !== void 0 && _.value !== null) {\n return Array.isArray(_.value) ? _.value : [_.value];\n }\n return [];\n });\n const path = Symbol('path');\n const pathEnd = Symbol('path-end');\n\n function countLineLen(tree: TreeData[], depth = 0) {\n const lastIdx = tree.length - 1;\n const last = tree[lastIdx];\n const frist = tree[0];\n let line: string[] = [];\n const fields = fieldNames();\n const key = fields.key;\n const children = fields.children;\n\n for (let i = 0, len = tree.length; i < len; i++) {\n const item = tree[i],\n isLast = i === lastIdx;\n\n delete item[path];\n delete item[pathEnd];\n if (i === 0 || isLast) {\n item[path] = frist[key] + (tree.length === 1 ? '' : `>${last[key]}`);\n if (isLast) {\n item[pathEnd] = '';\n }\n line.push(item[path]);\n }\n if (item[children]) {\n line = line.concat(countLineLen(item[children], depth + 1));\n }\n }\n return line;\n }\n\n function parseTree(str: string): TreeData[] {\n const fields = fieldNames();\n const key = fields.key;\n const title = fields.title;\n const children = fields.children;\n const depthRegex = /[^\\s|`│├└]/;\n const rows = str.trim().split('\\n');\n const stack: TreeStack[] = [{ [title]: rows[0], [key]: rows[0] }];\n\n for (let i = 1; i < rows.length; i++) {\n const depth = rows[i].search(depthRegex);\n\n if (depth === -1) {\n continue;\n }\n const node: Partial<TreeData> = {\n [title]: rows[i].slice(depth + 3),\n depth,\n };\n\n while (stack.length && depth <= (stack[stack.length - 1].depth || 0)) {\n stack.pop();\n }\n if (!stack.length) {\n return [];\n }\n const parent = stack[stack.length - 1];\n\n if (!parent[children]) {\n parent[children] = [];\n }\n node[key] = `${parent[key]}-${node[title]}-${depth}-${i}`;\n parent[children].push(node as TreeData);\n stack.push(node as TreeData);\n }\n\n return [stack[0]];\n }\n\n function handleChange(key: string, item: TreeData) {\n if (!_.readonly && isFunction(_.onChange)) {\n let _current = [...current()];\n\n if (_.multiple) {\n const idx = _current.indexOf(key);\n\n if (idx === -1) {\n _current.push(key);\n } else {\n _current.splice(idx, 1);\n }\n } else if (_.toggle && _current[0] === key) {\n _current = [];\n } else {\n _current = [key];\n }\n _.onChange(_.multiple ? _current : _current[0], item);\n }\n }\n function handleClick(e: MouseEvent, item: TreeData) {\n const fields = fieldNames();\n\n handleChange(item[fields.key], item);\n _.onRowClick?.(e, item[fields.key] as never, item as TreeData<never>);\n }\n function renderItem(item: TreeData, title: JSX.Element, subTitle?: JSX.Element): JSX.Element[] {\n const row = _.renderRow?.(item, title, subTitle) || [title, subTitle];\n\n return rtl() ? row.reverse() : row;\n }\n\n function renderTreeRow(list: TreeData[], depth = 0): JSX.Element {\n return (\n <For each={list}>\n {(item) => {\n const fields = fieldNames();\n const title = item[fields.title];\n const key = item[fields.key];\n const name = item[fields.name];\n const subTitle = item[fields.subTitle];\n const children = item[fields.children];\n const _title = name === title || !name ? [title] : [name, title];\n\n return (\n <>\n <li\n class=\"row\"\n classList={{\n active: current().includes(key),\n non: _.readonly || !isFunction(_.onChange),\n }}\n onClick={(e) => {\n handleClick(e, item);\n }}\n onDblClick={(e) => _.onRowDoubleClick?.(e, key, item)}\n style={depth ? { '--depth': `${depth * 2}em` } : void 0}\n data-path-end={item[pathEnd]}\n data-path={item[path]}\n >\n {renderItem(\n item,\n <span class=\"title\">{(rtl() ? _title.reverse() : _title).join(': ')}</span>,\n <Show when={subTitle}>\n <span class=\"sub-title\">{subTitle}</span>\n </Show>,\n )}\n </li>\n <Show when={children}>{renderTreeRow(children!, depth + 1)}</Show>\n </>\n );\n }}\n </For>\n );\n }\n createEffect(() => {\n const data = _.fromSchema ? schema(_.data) : isString(_.data) ? parseTree(_.data) : _.data;\n\n setLines([...new Set(countLineLen(data))]);\n setTreeData(data);\n });\n\n createEffect(() => {\n const list = lines();\n const size = _.size || 'normal';\n\n frameCallback(() => {\n const len = list.length;\n\n if (el && len) {\n const prefixSize = sizeCnt[size];\n\n for (let i = 0; i < len; i++) {\n const al: NodeListOf<HTMLLIElement> = el.querySelectorAll(`li[data-path=\"${list[i]}\"]`);\n\n if (al.length) {\n const rect1 = al[0].getBoundingClientRect();\n let sideLen = rect1.height / 2 + prefixSize;\n\n if (al.length > 1) {\n const { bottom, height, top } = al[1].getBoundingClientRect();\n\n sideLen = i === 0 ? top - rect1.top : bottom - rect1.top - height / 2 + prefixSize;\n al[1].style.setProperty('--c', 'none');\n } else if (i === 0) {\n al[0].style.setProperty('--c', 'none');\n }\n if (al.length !== 1 || i !== 0) {\n al[0].style.setProperty('--line', `${Math.abs(sideLen)}px`);\n }\n }\n }\n }\n });\n });\n\n return (\n <>\n <style textContent={baseStyle()} />\n <style textContent={style} />\n <Show when={_.css}>\n <style textContent={css(_.css)} />\n </Show>\n <ul\n ref={el}\n class=\"tree\"\n classList={{\n [_.size || 'normal']: true,\n [_.class!]: !!_.class,\n rtl: rtl(),\n }}\n >\n {renderTreeRow(treeData())}\n </ul>\n </>\n );\n}\n\nexport * from './type';\nexport default Tree;\n"],"names":["createEffect","createMemo","createSignal","For","Show","frameCallback","isFunction","isString","css","schema","theme","style","_","el","sizeCnt","small","normal","large","baseStyle","lines","setLines","treeData","setTreeData","normalFieldNames","key","name","title","subTitle","children","description","fieldNames","Object","assign","rtl","direction","current","value","Array","isArray","path","Symbol","pathEnd","data","fromSchema","parseTree","str","fields","depthRegex","rows","trim","split","stack","i","length","depth","search","node","slice","pop","parent","push","Set","countLineLen","tree","lastIdx","last","frist","line","len","item","isLast","concat","list","size","prefixSize","al","querySelectorAll","rect1","getBoundingClientRect","sideLen","height","bottom","top","setProperty","Math","abs","renderTreeRow","_title","e","onRowDoubleClick","handleClick","handleChange","readonly","onChange","_current","multiple","idx","indexOf","splice","toggle","onRowClick","renderItem","row","renderRow","reverse","join","includes","class"],"mappings":"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"}
@@ -1,2 +1 @@
1
- import{template as e}from"solid-js/web";import{createComponent as o}from"solid-js/web";let i=e("<style>");import{createEffect as t,mergeProps as l}from"solid-js";import{customElement as d}from"solid-element";import{clearAttribute as n}from"../basic-config";import{block as a}from"../theme";import m from"./index";d("n-tree",{fieldNames:{},fromSchema:void 0,size:void 0,data:[],multiple:void 0,value:void 0,onChange:void 0,class:void 0,css:void 0,readonly:void 0,toggle:void 0,direction:void 0,onRowClick:void 0,onRowDoubleClick:void 0,renderRow:void 0},(e,d)=>{let r=d.element,s=l({data:r.data,value:r.value,multiple:r.multiple,fromSchema:r.fromSchema,size:r.size,css:r.css,readonly:r.readonly,toggle:r.toggle,direction:r.direction,onChange(e,o){r.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,i){r.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,i]}))},onRowDoubleClick(e,o,i){r.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,i]}))}},e);return t(()=>{n(r,["css","fieldNames","data"])}),[(()=>{let e=i();return e.textContent=a,e})(),o(m,s)]});
2
- //# sourceMappingURL=register.js.map
1
+ import{template as e}from"solid-js/web";import{createComponent as o}from"solid-js/web";let i=e("<style>");import{createEffect as t,mergeProps as l}from"solid-js";import{customElement as d}from"solid-element";import{clearAttribute as n}from"../basic-config";import{block as a}from"../theme";import m from"./index";d("n-tree",{fieldNames:{},fromSchema:void 0,size:void 0,data:[],multiple:void 0,value:void 0,onChange:void 0,class:void 0,css:void 0,readonly:void 0,toggle:void 0,direction:void 0,onRowClick:void 0,onRowDoubleClick:void 0,renderRow:void 0},(e,d)=>{let r=d.element,s=l({data:r.data,value:r.value,multiple:r.multiple,fromSchema:r.fromSchema,size:r.size,css:r.css,readonly:r.readonly,toggle:r.toggle,direction:r.direction,onChange(e,o){r.dispatchEvent(new CustomEvent("change",{detail:[e,o]}))},onRowClick(e,o,i){r.dispatchEvent(new CustomEvent("rowclick",{detail:[e,o,i]}))},onRowDoubleClick(e,o,i){r.dispatchEvent(new CustomEvent("rowdoubleclick",{detail:[e,o,i]}))}},e);return t(()=>{n(r,["css","fieldNames","data"])}),[(()=>{let e=i();return e.textContent=a,e})(),o(m,s)]});
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tree/register.tsx"],"sourcesContent":["import { createEffect, mergeProps } from 'solid-js';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute } from '../basic-config';\nimport { block } from '../theme';\n\nimport Tree from './index';\nimport type { TreeData, TreeProps } from './type';\n\ncustomElement<TreeProps>(\n 'n-tree',\n {\n fieldNames: {},\n fromSchema: void 0,\n size: void 0,\n data: [],\n multiple: void 0,\n value: void 0,\n onChange: void 0,\n class: void 0,\n css: void 0,\n readonly: void 0,\n toggle: void 0,\n direction: void 0,\n onRowClick: void 0,\n onRowDoubleClick: void 0,\n renderRow: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n data: el.data,\n value: el.value,\n multiple: el.multiple,\n fromSchema: el.fromSchema,\n size: el.size,\n css: el.css,\n readonly: el.readonly,\n toggle: el.toggle,\n direction: el.direction,\n onChange(key: string, item: TreeData) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [key, item],\n }),\n );\n },\n onRowClick(e: MouseEvent, key: string, item: TreeData) {\n el.dispatchEvent(\n new CustomEvent('rowclick', {\n detail: [e, key, item],\n }),\n );\n },\n onRowDoubleClick(e: MouseEvent, key: string, item: TreeData) {\n el.dispatchEvent(\n new CustomEvent('rowdoubleclick', {\n detail: [e, key, item],\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css', 'fieldNames', 'data']);\n });\n return (\n <>\n <style textContent={block} />\n <Tree {...props} />\n </>\n );\n },\n);\n"],"names":["createEffect","mergeProps","customElement","clearAttribute","block","Tree","fieldNames","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","key","item","dispatchEvent","CustomEvent","detail","e"],"mappings":"yGAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpD,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAE9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAASC,SAAAA,CAAK,KAAQ,UAAW,AAEjC,QAAOC,MAAU,SAAU,CAG3BH,EACE,SACA,CACEI,WAAY,CAAC,EACbC,WAAY,KAAK,EACjBC,KAAM,KAAK,EACXC,KAAM,EAAE,CACRC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfC,OAAQ,KAAK,EACbC,UAAW,KAAK,EAChBC,WAAY,KAAK,EACjBC,iBAAkB,KAAK,EACvBC,UAAW,KAAK,CAClB,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQxB,EACZ,CACEQ,KAAMc,EAAGd,IAAI,CACbE,MAAOY,EAAGZ,KAAK,CACfD,SAAUa,EAAGb,QAAQ,CACrBH,WAAYgB,EAAGhB,UAAU,CACzBC,KAAMe,EAAGf,IAAI,CACbM,IAAKS,EAAGT,GAAG,CACXC,SAAUQ,EAAGR,QAAQ,CACrBC,OAAQO,EAAGP,MAAM,CACjBC,UAAWM,EAAGN,SAAS,CACvBL,SAASc,CAAW,CAAEC,CAAc,EAClCJ,EAAGK,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAT,WAAWa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAR,iBAAiBY,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAN,GAMF,OAHArB,EAAa,KACXG,EAAeoB,EAAI,CAAC,MAAO,aAAc,OAAO,CAClD,yCAGwBnB,UACnBC,EAASoB,GAGhB"}
1
+ {"version":3,"sources":["components/tree/register.tsx"],"sourcesContent":["import { createEffect, mergeProps } from 'solid-js';\nimport { customElement } from 'solid-element';\n\nimport { clearAttribute } from '../basic-config';\nimport { block } from '../theme';\n\nimport Tree from './index';\nimport type { TreeData, TreeProps } from './type';\n\ncustomElement<TreeProps>(\n 'n-tree',\n {\n fieldNames: {},\n fromSchema: void 0,\n size: void 0,\n data: [],\n multiple: void 0,\n value: void 0,\n onChange: void 0,\n class: void 0,\n css: void 0,\n readonly: void 0,\n toggle: void 0,\n direction: void 0,\n onRowClick: void 0,\n onRowDoubleClick: void 0,\n renderRow: void 0,\n },\n (_, opt) => {\n const el = opt.element;\n const props = mergeProps(\n {\n data: el.data,\n value: el.value,\n multiple: el.multiple,\n fromSchema: el.fromSchema,\n size: el.size,\n css: el.css,\n readonly: el.readonly,\n toggle: el.toggle,\n direction: el.direction,\n onChange(key: string, item: TreeData) {\n el.dispatchEvent(\n new CustomEvent('change', {\n detail: [key, item],\n }),\n );\n },\n onRowClick(e: MouseEvent, key: string, item: TreeData) {\n el.dispatchEvent(\n new CustomEvent('rowclick', {\n detail: [e, key, item],\n }),\n );\n },\n onRowDoubleClick(e: MouseEvent, key: string, item: TreeData) {\n el.dispatchEvent(\n new CustomEvent('rowdoubleclick', {\n detail: [e, key, item],\n }),\n );\n },\n },\n _,\n );\n\n createEffect(() => {\n clearAttribute(el, ['css', 'fieldNames', 'data']);\n });\n return (\n <>\n <style textContent={block} />\n <Tree {...props} />\n </>\n );\n },\n);\n"],"names":["createEffect","mergeProps","customElement","clearAttribute","block","Tree","fieldNames","fromSchema","size","data","multiple","value","onChange","class","css","readonly","toggle","direction","onRowClick","onRowDoubleClick","renderRow","_","opt","el","element","props","key","item","dispatchEvent","CustomEvent","detail","e"],"mappings":"yGAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACpD,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAE9C,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAASC,SAAAA,CAAK,KAAQ,UAAW,AAEjC,QAAOC,MAAU,SAAU,CAG3BH,EACE,SACA,CACEI,WAAY,CAAC,EACbC,WAAY,KAAK,EACjBC,KAAM,KAAK,EACXC,KAAM,EAAE,CACRC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfC,MAAO,KAAK,EACZC,IAAK,KAAK,EACVC,SAAU,KAAK,EACfC,OAAQ,KAAK,EACbC,UAAW,KAAK,EAChBC,WAAY,KAAK,EACjBC,iBAAkB,KAAK,EACvBC,UAAW,KAAK,CAClB,EACA,CAACC,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBC,EAAQxB,EACZ,CACEQ,KAAMc,EAAGd,IAAI,CACbE,MAAOY,EAAGZ,KAAK,CACfD,SAAUa,EAAGb,QAAQ,CACrBH,WAAYgB,EAAGhB,UAAU,CACzBC,KAAMe,EAAGf,IAAI,CACbM,IAAKS,EAAGT,GAAG,CACXC,SAAUQ,EAAGR,QAAQ,CACrBC,OAAQO,EAAGP,MAAM,CACjBC,UAAWM,EAAGN,SAAS,CACvBL,SAASc,CAAW,CAAEC,CAAc,EAClCJ,EAAGK,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACJ,EAAKC,EAAK,AACrB,GAEJ,EACAT,WAAWa,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACnDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,WAAY,CAC1BC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,EACAR,iBAAiBY,CAAa,CAAEL,CAAW,CAAEC,CAAc,EACzDJ,EAAGK,aAAa,CACd,IAAIC,YAAY,iBAAkB,CAChCC,OAAQ,CAACC,EAAGL,EAAKC,EAAK,AACxB,GAEJ,CACF,EACAN,GAMF,OAHArB,EAAa,KACXG,EAAeoB,EAAI,CAAC,MAAO,aAAc,OAAO,CAClD,yCAGwBnB,UACnBC,EAASoB,GAGhB"}
package/es/tree/style.js CHANGED
@@ -160,5 +160,4 @@ import{css as r}from"@moneko/css";export const style=r`
160
160
  padding: 0 10px;
161
161
  font-size: 12px;
162
162
  }
163
- `;
164
- //# sourceMappingURL=style.js.map
163
+ `;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tree/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .tree {\n --size: 8px;\n\n padding-inline-start: 2em;\n inline-size: 100%;\n box-sizing: border-box;\n }\n\n .row {\n position: relative;\n z-index: 0;\n display: flex;\n align-items: baseline;\n border-radius: var(--border-radius);\n padding: 2px 10px;\n color: var(--text-color);\n background-color: var(--component-bg);\n list-style: none;\n box-shadow: 0 0 0 1px var(--border-color);\n margin-inline-start: var(--depth);\n margin-block-end: var(--size);\n cursor: pointer;\n box-sizing: border-box;\n min-inline-size: 160px;\n inline-size: fit-content;\n }\n\n .row.non {\n cursor: auto;\n }\n\n .row::before,\n .row::after {\n position: absolute;\n pointer-events: none;\n z-index: -1;\n inset-inline-start: 0;\n transition-property: border-color;\n }\n\n .row:not(:first-of-type, :last-of-type, [data-path-end])::before {\n content: '';\n inset-inline-start: -1em;\n inset-block-start: 50%;\n inline-size: 1em;\n block-size: 100%;\n border-block-start: 1px solid var(--border-color);\n box-sizing: border-box;\n }\n\n .row[data-path] {\n --r: 0 0 0 var(--border-radius);\n --c: '';\n\n &::after {\n border-style: solid;\n border-width: 0 0 1px 1px;\n border-color: var(--border-color);\n border-radius: var(--r);\n content: var(--c);\n inline-size: 1em;\n inset-block-start: calc(var(--size) * -1);\n inset-inline-start: -1em;\n block-size: var(--line);\n box-sizing: border-box;\n }\n }\n\n .row:first-of-type {\n --r: var(--border-radius) 0 0 var(--border-radius);\n\n &[data-path]::after {\n border-width: 1px 0 1px 1px;\n inset-block-start: 15px;\n }\n }\n\n .row:last-of-type {\n margin-block-end: 0;\n }\n\n .title {\n font-size: 14px;\n font-weight: normal;\n }\n\n .sub-title {\n padding: 0 var(--size);\n font-size: 10px;\n color: var(--text-secondary);\n font-style: italic;\n text-transform: capitalize;\n opacity: 0.5;\n }\n\n .row.active {\n color: var(--primary-color);\n background-color: var(--primary-selection);\n box-shadow: 0 0 0 1px var(--primary-border);\n text-shadow: 2px 2px 2px var(--primary-outline);\n }\n\n .rtl {\n direction: rtl;\n }\n\n .rtl .row {\n flex-direction: row-reverse;\n justify-content: flex-end;\n\n &::before,\n &::after {\n transform: scaleX(-1);\n }\n }\n\n .normal {\n --size: 8px;\n }\n\n .small {\n --size: 6px;\n }\n\n .small .row {\n padding: 1px 9px;\n\n &:first-of-type[data-path]::after {\n inset-block-start: 12px;\n }\n }\n\n .small .title {\n font-size: 13px;\n }\n\n .small .sub-title {\n padding: 0 4px;\n font-size: 9px;\n }\n\n .large {\n --size: 10px;\n }\n\n .large .row {\n padding: 3px 12px;\n\n &:first-of-type[data-path]::after {\n inset-block-start: 17px;\n }\n }\n\n .large .title {\n font-size: 15px;\n }\n\n .large .sub-title {\n padding: 0 10px;\n font-size: 12px;\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKzB,CAAC,AAAC"}
1
+ {"version":3,"sources":["components/tree/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .tree {\n --size: 8px;\n\n padding-inline-start: 2em;\n inline-size: 100%;\n box-sizing: border-box;\n }\n\n .row {\n position: relative;\n z-index: 0;\n display: flex;\n align-items: baseline;\n border-radius: var(--border-radius);\n padding: 2px 10px;\n color: var(--text-color);\n background-color: var(--component-bg);\n list-style: none;\n box-shadow: 0 0 0 1px var(--border-color);\n margin-inline-start: var(--depth);\n margin-block-end: var(--size);\n cursor: pointer;\n box-sizing: border-box;\n min-inline-size: 160px;\n inline-size: fit-content;\n }\n\n .row.non {\n cursor: auto;\n }\n\n .row::before,\n .row::after {\n position: absolute;\n pointer-events: none;\n z-index: -1;\n inset-inline-start: 0;\n transition-property: border-color;\n }\n\n .row:not(:first-of-type, :last-of-type, [data-path-end])::before {\n content: '';\n inset-inline-start: -1em;\n inset-block-start: 50%;\n inline-size: 1em;\n block-size: 100%;\n border-block-start: 1px solid var(--border-color);\n box-sizing: border-box;\n }\n\n .row[data-path] {\n --r: 0 0 0 var(--border-radius);\n --c: '';\n\n &::after {\n border-style: solid;\n border-width: 0 0 1px 1px;\n border-color: var(--border-color);\n border-radius: var(--r);\n content: var(--c);\n inline-size: 1em;\n inset-block-start: calc(var(--size) * -1);\n inset-inline-start: -1em;\n block-size: var(--line);\n box-sizing: border-box;\n }\n }\n\n .row:first-of-type {\n --r: var(--border-radius) 0 0 var(--border-radius);\n\n &[data-path]::after {\n border-width: 1px 0 1px 1px;\n inset-block-start: 15px;\n }\n }\n\n .row:last-of-type {\n margin-block-end: 0;\n }\n\n .title {\n font-size: 14px;\n font-weight: normal;\n }\n\n .sub-title {\n padding: 0 var(--size);\n font-size: 10px;\n color: var(--text-secondary);\n font-style: italic;\n text-transform: capitalize;\n opacity: 0.5;\n }\n\n .row.active {\n color: var(--primary-color);\n background-color: var(--primary-selection);\n box-shadow: 0 0 0 1px var(--primary-border);\n text-shadow: 2px 2px 2px var(--primary-outline);\n }\n\n .rtl {\n direction: rtl;\n }\n\n .rtl .row {\n flex-direction: row-reverse;\n justify-content: flex-end;\n\n &::before,\n &::after {\n transform: scaleX(-1);\n }\n }\n\n .normal {\n --size: 8px;\n }\n\n .small {\n --size: 6px;\n }\n\n .small .row {\n padding: 1px 9px;\n\n &:first-of-type[data-path]::after {\n inset-block-start: 12px;\n }\n }\n\n .small .title {\n font-size: 13px;\n }\n\n .small .sub-title {\n padding: 0 4px;\n font-size: 9px;\n }\n\n .large {\n --size: 10px;\n }\n\n .large .row {\n padding: 3px 12px;\n\n &:first-of-type[data-path]::after {\n inset-block-start: 17px;\n }\n }\n\n .large .title {\n font-size: 15px;\n }\n\n .large .sub-title {\n padding: 0 10px;\n font-size: 12px;\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKzB,CAAC,AAAC"}
package/es/tree/type.js CHANGED
@@ -1,2 +1 @@
1
- export{};
2
- //# sourceMappingURL=type.js.map
1
+ export{};
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/tree/type.ts"],"names":[],"mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -17,5 +17,4 @@ import{template as e}from"solid-js/web";import{effect as t}from"solid-js/web";im
17
17
  cursor: ${e.disabled?"not-allowed":"auto"};
18
18
  ${r}
19
19
  }
20
- `});return[(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=i()),e})(),(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=m()),e})(),r(a,{get when(){return e.css},get children(){let r=o(),i=r.firstChild;return t(()=>i.data=n(e.css)),r}}),r(d,{get component(){return p.tag},get class(){return c("typography",p.class)},get style(){return p.style},get children(){return p.children}})]}p("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,t)=>{let o=t.element,l=s({children:[...o.childNodes.values()]},e);return i(()=>{m(o,["css","tag","style"]),o.replaceChildren()}),r(u,l)});export default u;
21
- //# sourceMappingURL=index.js.map
20
+ `});return[(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=i()),e})(),(()=>{let e=o(),r=e.firstChild;return t(()=>r.data=m()),e})(),r(a,{get when(){return e.css},get children(){let r=o(),i=r.firstChild;return t(()=>i.data=n(e.css)),r}}),r(d,{get component(){return p.tag},get class(){return c("typography",p.class)},get style(){return p.style},get children(){return p.children}})]}p("n-typography",{class:void 0,css:void 0,type:void 0,truncated:void 0,tag:void 0,disabled:void 0,style:void 0},(e,t)=>{let o=t.element,l=s({children:[...o.childNodes.values()]},e);return i(()=>{m(o,["css","tag","style"]),o.replaceChildren()}),r(u,l)});export default u;