@element-plus/nightly 0.0.20231009 → 0.0.20231011

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 (376) hide show
  1. package/attributes.json +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.full.js +1016 -538
  4. package/dist/index.full.min.js +25 -25
  5. package/dist/index.full.min.js.map +1 -1
  6. package/dist/index.full.min.mjs +23 -23
  7. package/dist/index.full.min.mjs.map +1 -1
  8. package/dist/index.full.mjs +1016 -538
  9. package/dist/locale/af.js +1 -1
  10. package/dist/locale/af.min.js +1 -1
  11. package/dist/locale/af.min.mjs +1 -1
  12. package/dist/locale/af.mjs +1 -1
  13. package/dist/locale/ar.js +1 -1
  14. package/dist/locale/ar.min.js +1 -1
  15. package/dist/locale/ar.min.mjs +1 -1
  16. package/dist/locale/ar.mjs +1 -1
  17. package/dist/locale/az.js +1 -1
  18. package/dist/locale/az.min.js +1 -1
  19. package/dist/locale/az.min.mjs +1 -1
  20. package/dist/locale/az.mjs +1 -1
  21. package/dist/locale/bg.js +1 -1
  22. package/dist/locale/bg.min.js +1 -1
  23. package/dist/locale/bg.min.mjs +1 -1
  24. package/dist/locale/bg.mjs +1 -1
  25. package/dist/locale/bn.js +1 -1
  26. package/dist/locale/bn.min.js +1 -1
  27. package/dist/locale/bn.min.mjs +1 -1
  28. package/dist/locale/bn.mjs +1 -1
  29. package/dist/locale/ca.js +1 -1
  30. package/dist/locale/ca.min.js +1 -1
  31. package/dist/locale/ca.min.mjs +1 -1
  32. package/dist/locale/ca.mjs +1 -1
  33. package/dist/locale/ckb.js +1 -1
  34. package/dist/locale/ckb.min.js +1 -1
  35. package/dist/locale/ckb.min.mjs +1 -1
  36. package/dist/locale/ckb.mjs +1 -1
  37. package/dist/locale/cs.js +1 -1
  38. package/dist/locale/cs.min.js +1 -1
  39. package/dist/locale/cs.min.mjs +1 -1
  40. package/dist/locale/cs.mjs +1 -1
  41. package/dist/locale/da.js +1 -1
  42. package/dist/locale/da.min.js +1 -1
  43. package/dist/locale/da.min.mjs +1 -1
  44. package/dist/locale/da.mjs +1 -1
  45. package/dist/locale/de.js +1 -1
  46. package/dist/locale/de.min.js +1 -1
  47. package/dist/locale/de.min.mjs +1 -1
  48. package/dist/locale/de.mjs +1 -1
  49. package/dist/locale/el.js +1 -1
  50. package/dist/locale/el.min.js +1 -1
  51. package/dist/locale/el.min.mjs +1 -1
  52. package/dist/locale/el.mjs +1 -1
  53. package/dist/locale/en.js +1 -1
  54. package/dist/locale/en.min.js +1 -1
  55. package/dist/locale/en.min.mjs +1 -1
  56. package/dist/locale/en.mjs +1 -1
  57. package/dist/locale/eo.js +1 -1
  58. package/dist/locale/eo.min.js +1 -1
  59. package/dist/locale/eo.min.mjs +1 -1
  60. package/dist/locale/eo.mjs +1 -1
  61. package/dist/locale/es.js +1 -1
  62. package/dist/locale/es.min.js +1 -1
  63. package/dist/locale/es.min.mjs +1 -1
  64. package/dist/locale/es.mjs +1 -1
  65. package/dist/locale/et.js +1 -1
  66. package/dist/locale/et.min.js +1 -1
  67. package/dist/locale/et.min.mjs +1 -1
  68. package/dist/locale/et.mjs +1 -1
  69. package/dist/locale/eu.js +1 -1
  70. package/dist/locale/eu.min.js +1 -1
  71. package/dist/locale/eu.min.mjs +1 -1
  72. package/dist/locale/eu.mjs +1 -1
  73. package/dist/locale/fa.js +1 -1
  74. package/dist/locale/fa.min.js +1 -1
  75. package/dist/locale/fa.min.mjs +1 -1
  76. package/dist/locale/fa.mjs +1 -1
  77. package/dist/locale/fi.js +1 -1
  78. package/dist/locale/fi.min.js +1 -1
  79. package/dist/locale/fi.min.mjs +1 -1
  80. package/dist/locale/fi.mjs +1 -1
  81. package/dist/locale/fr.js +1 -1
  82. package/dist/locale/fr.min.js +1 -1
  83. package/dist/locale/fr.min.mjs +1 -1
  84. package/dist/locale/fr.mjs +1 -1
  85. package/dist/locale/he.js +1 -1
  86. package/dist/locale/he.min.js +1 -1
  87. package/dist/locale/he.min.mjs +1 -1
  88. package/dist/locale/he.mjs +1 -1
  89. package/dist/locale/hr.js +1 -1
  90. package/dist/locale/hr.min.js +1 -1
  91. package/dist/locale/hr.min.mjs +1 -1
  92. package/dist/locale/hr.mjs +1 -1
  93. package/dist/locale/hu.js +1 -1
  94. package/dist/locale/hu.min.js +1 -1
  95. package/dist/locale/hu.min.mjs +1 -1
  96. package/dist/locale/hu.mjs +1 -1
  97. package/dist/locale/hy-am.js +1 -1
  98. package/dist/locale/hy-am.min.js +1 -1
  99. package/dist/locale/hy-am.min.mjs +1 -1
  100. package/dist/locale/hy-am.mjs +1 -1
  101. package/dist/locale/id.js +1 -1
  102. package/dist/locale/id.min.js +1 -1
  103. package/dist/locale/id.min.mjs +1 -1
  104. package/dist/locale/id.mjs +1 -1
  105. package/dist/locale/it.js +1 -1
  106. package/dist/locale/it.min.js +1 -1
  107. package/dist/locale/it.min.mjs +1 -1
  108. package/dist/locale/it.mjs +1 -1
  109. package/dist/locale/ja.js +1 -1
  110. package/dist/locale/ja.min.js +1 -1
  111. package/dist/locale/ja.min.mjs +1 -1
  112. package/dist/locale/ja.mjs +1 -1
  113. package/dist/locale/kk.js +1 -1
  114. package/dist/locale/kk.min.js +1 -1
  115. package/dist/locale/kk.min.mjs +1 -1
  116. package/dist/locale/kk.mjs +1 -1
  117. package/dist/locale/km.js +1 -1
  118. package/dist/locale/km.min.js +1 -1
  119. package/dist/locale/km.min.mjs +1 -1
  120. package/dist/locale/km.mjs +1 -1
  121. package/dist/locale/ko.js +1 -1
  122. package/dist/locale/ko.min.js +1 -1
  123. package/dist/locale/ko.min.mjs +1 -1
  124. package/dist/locale/ko.mjs +1 -1
  125. package/dist/locale/ku.js +1 -1
  126. package/dist/locale/ku.min.js +1 -1
  127. package/dist/locale/ku.min.mjs +1 -1
  128. package/dist/locale/ku.mjs +1 -1
  129. package/dist/locale/ky.js +1 -1
  130. package/dist/locale/ky.min.js +1 -1
  131. package/dist/locale/ky.min.mjs +1 -1
  132. package/dist/locale/ky.mjs +1 -1
  133. package/dist/locale/lt.js +1 -1
  134. package/dist/locale/lt.min.js +1 -1
  135. package/dist/locale/lt.min.mjs +1 -1
  136. package/dist/locale/lt.mjs +1 -1
  137. package/dist/locale/lv.js +1 -1
  138. package/dist/locale/lv.min.js +1 -1
  139. package/dist/locale/lv.min.mjs +1 -1
  140. package/dist/locale/lv.mjs +1 -1
  141. package/dist/locale/mg.js +1 -1
  142. package/dist/locale/mg.min.js +1 -1
  143. package/dist/locale/mg.min.mjs +1 -1
  144. package/dist/locale/mg.mjs +1 -1
  145. package/dist/locale/mn.js +1 -1
  146. package/dist/locale/mn.min.js +1 -1
  147. package/dist/locale/mn.min.mjs +1 -1
  148. package/dist/locale/mn.mjs +1 -1
  149. package/dist/locale/nb-no.js +1 -1
  150. package/dist/locale/nb-no.min.js +1 -1
  151. package/dist/locale/nb-no.min.mjs +1 -1
  152. package/dist/locale/nb-no.mjs +1 -1
  153. package/dist/locale/nl.js +1 -1
  154. package/dist/locale/nl.min.js +1 -1
  155. package/dist/locale/nl.min.mjs +1 -1
  156. package/dist/locale/nl.mjs +1 -1
  157. package/dist/locale/pa.js +1 -1
  158. package/dist/locale/pa.min.js +1 -1
  159. package/dist/locale/pa.min.mjs +1 -1
  160. package/dist/locale/pa.mjs +1 -1
  161. package/dist/locale/pl.js +1 -1
  162. package/dist/locale/pl.min.js +1 -1
  163. package/dist/locale/pl.min.mjs +1 -1
  164. package/dist/locale/pl.mjs +1 -1
  165. package/dist/locale/pt-br.js +1 -1
  166. package/dist/locale/pt-br.min.js +1 -1
  167. package/dist/locale/pt-br.min.mjs +1 -1
  168. package/dist/locale/pt-br.mjs +1 -1
  169. package/dist/locale/pt.js +1 -1
  170. package/dist/locale/pt.min.js +1 -1
  171. package/dist/locale/pt.min.mjs +1 -1
  172. package/dist/locale/pt.mjs +1 -1
  173. package/dist/locale/ro.js +1 -1
  174. package/dist/locale/ro.min.js +1 -1
  175. package/dist/locale/ro.min.mjs +1 -1
  176. package/dist/locale/ro.mjs +1 -1
  177. package/dist/locale/ru.js +1 -1
  178. package/dist/locale/ru.min.js +1 -1
  179. package/dist/locale/ru.min.mjs +1 -1
  180. package/dist/locale/ru.mjs +1 -1
  181. package/dist/locale/sk.js +1 -1
  182. package/dist/locale/sk.min.js +1 -1
  183. package/dist/locale/sk.min.mjs +1 -1
  184. package/dist/locale/sk.mjs +1 -1
  185. package/dist/locale/sl.js +1 -1
  186. package/dist/locale/sl.min.js +1 -1
  187. package/dist/locale/sl.min.mjs +1 -1
  188. package/dist/locale/sl.mjs +1 -1
  189. package/dist/locale/sr.js +1 -1
  190. package/dist/locale/sr.min.js +1 -1
  191. package/dist/locale/sr.min.mjs +1 -1
  192. package/dist/locale/sr.mjs +1 -1
  193. package/dist/locale/sv.js +1 -1
  194. package/dist/locale/sv.min.js +1 -1
  195. package/dist/locale/sv.min.mjs +1 -1
  196. package/dist/locale/sv.mjs +1 -1
  197. package/dist/locale/ta.js +1 -1
  198. package/dist/locale/ta.min.js +1 -1
  199. package/dist/locale/ta.min.mjs +1 -1
  200. package/dist/locale/ta.mjs +1 -1
  201. package/dist/locale/th.js +1 -1
  202. package/dist/locale/th.min.js +1 -1
  203. package/dist/locale/th.min.mjs +1 -1
  204. package/dist/locale/th.mjs +1 -1
  205. package/dist/locale/tk.js +1 -1
  206. package/dist/locale/tk.min.js +1 -1
  207. package/dist/locale/tk.min.mjs +1 -1
  208. package/dist/locale/tk.mjs +1 -1
  209. package/dist/locale/tr.js +1 -1
  210. package/dist/locale/tr.min.js +1 -1
  211. package/dist/locale/tr.min.mjs +1 -1
  212. package/dist/locale/tr.mjs +1 -1
  213. package/dist/locale/ug-cn.js +1 -1
  214. package/dist/locale/ug-cn.min.js +1 -1
  215. package/dist/locale/ug-cn.min.mjs +1 -1
  216. package/dist/locale/ug-cn.mjs +1 -1
  217. package/dist/locale/uk.js +1 -1
  218. package/dist/locale/uk.min.js +1 -1
  219. package/dist/locale/uk.min.mjs +1 -1
  220. package/dist/locale/uk.mjs +1 -1
  221. package/dist/locale/uz-uz.js +1 -1
  222. package/dist/locale/uz-uz.min.js +1 -1
  223. package/dist/locale/uz-uz.min.mjs +1 -1
  224. package/dist/locale/uz-uz.mjs +1 -1
  225. package/dist/locale/vi.js +1 -1
  226. package/dist/locale/vi.min.js +1 -1
  227. package/dist/locale/vi.min.mjs +1 -1
  228. package/dist/locale/vi.mjs +1 -1
  229. package/dist/locale/zh-cn.js +1 -1
  230. package/dist/locale/zh-cn.min.js +1 -1
  231. package/dist/locale/zh-cn.min.mjs +1 -1
  232. package/dist/locale/zh-cn.mjs +1 -1
  233. package/dist/locale/zh-tw.js +1 -1
  234. package/dist/locale/zh-tw.min.js +1 -1
  235. package/dist/locale/zh-tw.min.mjs +1 -1
  236. package/dist/locale/zh-tw.mjs +1 -1
  237. package/es/component.mjs +3 -1
  238. package/es/component.mjs.map +1 -1
  239. package/es/components/carousel/index.d.ts +5 -0
  240. package/es/components/carousel/src/carousel.vue.d.ts +5 -0
  241. package/es/components/carousel/src/carousel2.mjs +7 -2
  242. package/es/components/carousel/src/carousel2.mjs.map +1 -1
  243. package/es/components/carousel/src/use-carousel.d.ts +6 -0
  244. package/es/components/carousel/src/use-carousel.mjs +33 -1
  245. package/es/components/carousel/src/use-carousel.mjs.map +1 -1
  246. package/es/components/checkbox/index.d.ts +12 -0
  247. package/es/components/checkbox/src/checkbox-button.vue.d.ts +4 -0
  248. package/es/components/checkbox/src/checkbox.d.ts +1 -0
  249. package/es/components/checkbox/src/checkbox.mjs +2 -1
  250. package/es/components/checkbox/src/checkbox.mjs.map +1 -1
  251. package/es/components/checkbox/src/checkbox.vue.d.ts +4 -0
  252. package/es/components/checkbox/src/composables/use-checkbox-status.mjs +2 -2
  253. package/es/components/checkbox/src/composables/use-checkbox-status.mjs.map +1 -1
  254. package/es/components/color-picker/index.d.ts +18 -1
  255. package/es/components/color-picker/src/color-picker.d.ts +2 -0
  256. package/es/components/color-picker/src/color-picker.mjs +3 -1
  257. package/es/components/color-picker/src/color-picker.mjs.map +1 -1
  258. package/es/components/color-picker/src/color-picker.vue.d.ts +18 -1
  259. package/es/components/color-picker/src/color-picker2.mjs +83 -11
  260. package/es/components/color-picker/src/color-picker2.mjs.map +1 -1
  261. package/es/components/descriptions/src/description-item.mjs.map +1 -1
  262. package/es/components/descriptions/src/description.mjs.map +1 -1
  263. package/es/components/drawer/index.mjs +2 -2
  264. package/es/components/drawer/src/drawer.mjs +26 -176
  265. package/es/components/drawer/src/drawer.mjs.map +1 -1
  266. package/es/components/drawer/src/drawer2.mjs +176 -26
  267. package/es/components/drawer/src/drawer2.mjs.map +1 -1
  268. package/es/components/index.mjs +1 -1
  269. package/es/components/table/src/table.mjs +2 -1
  270. package/es/components/table/src/table.mjs.map +1 -1
  271. package/es/components/transfer/index.d.ts +40 -0
  272. package/es/components/transfer/src/transfer-panel.vue.d.ts +8 -0
  273. package/es/components/transfer/src/transfer.vue.d.ts +40 -0
  274. package/es/components/tree-v2/index.d.ts +8 -0
  275. package/es/components/tree-v2/src/tree-node.vue.d.ts +8 -0
  276. package/es/components/tree-v2/src/tree.vue.d.ts +8 -0
  277. package/es/components/watermark/index.d.ts +94 -0
  278. package/es/components/watermark/index.mjs +9 -0
  279. package/es/components/watermark/index.mjs.map +1 -0
  280. package/es/components/watermark/src/useClips.d.ts +7 -0
  281. package/es/components/watermark/src/useClips.mjs +82 -0
  282. package/es/components/watermark/src/useClips.mjs.map +1 -0
  283. package/es/components/watermark/src/utils.d.ts +8 -0
  284. package/es/components/watermark/src/utils.mjs +22 -0
  285. package/es/components/watermark/src/utils.mjs.map +1 -0
  286. package/es/components/watermark/src/watermark.d.ts +32 -0
  287. package/es/components/watermark/src/watermark.mjs +33 -0
  288. package/es/components/watermark/src/watermark.mjs.map +1 -0
  289. package/es/components/watermark/src/watermark.vue.d.ts +94 -0
  290. package/es/components/watermark/src/watermark2.mjs +202 -0
  291. package/es/components/watermark/src/watermark2.mjs.map +1 -0
  292. package/es/components/watermark/style/index.d.ts +0 -0
  293. package/es/components/watermark/style/index.mjs +2 -0
  294. package/es/components/watermark/style/index.mjs.map +1 -0
  295. package/es/hooks/use-focus-controller/index.d.ts +6 -1
  296. package/es/hooks/use-focus-controller/index.mjs +5 -2
  297. package/es/hooks/use-focus-controller/index.mjs.map +1 -1
  298. package/es/index.mjs +1 -1
  299. package/es/version.d.ts +1 -1
  300. package/es/version.mjs +1 -1
  301. package/es/version.mjs.map +1 -1
  302. package/lib/component.js +3 -1
  303. package/lib/component.js.map +1 -1
  304. package/lib/components/carousel/index.d.ts +5 -0
  305. package/lib/components/carousel/src/carousel.vue.d.ts +5 -0
  306. package/lib/components/carousel/src/carousel2.js +7 -2
  307. package/lib/components/carousel/src/carousel2.js.map +1 -1
  308. package/lib/components/carousel/src/use-carousel.d.ts +6 -0
  309. package/lib/components/carousel/src/use-carousel.js +32 -0
  310. package/lib/components/carousel/src/use-carousel.js.map +1 -1
  311. package/lib/components/checkbox/index.d.ts +12 -0
  312. package/lib/components/checkbox/src/checkbox-button.vue.d.ts +4 -0
  313. package/lib/components/checkbox/src/checkbox.d.ts +1 -0
  314. package/lib/components/checkbox/src/checkbox.js +2 -1
  315. package/lib/components/checkbox/src/checkbox.js.map +1 -1
  316. package/lib/components/checkbox/src/checkbox.vue.d.ts +4 -0
  317. package/lib/components/checkbox/src/composables/use-checkbox-status.js +1 -1
  318. package/lib/components/checkbox/src/composables/use-checkbox-status.js.map +1 -1
  319. package/lib/components/color-picker/index.d.ts +18 -1
  320. package/lib/components/color-picker/src/color-picker.d.ts +2 -0
  321. package/lib/components/color-picker/src/color-picker.js +3 -1
  322. package/lib/components/color-picker/src/color-picker.js.map +1 -1
  323. package/lib/components/color-picker/src/color-picker.vue.d.ts +18 -1
  324. package/lib/components/color-picker/src/color-picker2.js +93 -21
  325. package/lib/components/color-picker/src/color-picker2.js.map +1 -1
  326. package/lib/components/descriptions/src/description-item.js.map +1 -1
  327. package/lib/components/descriptions/src/description.js.map +1 -1
  328. package/lib/components/drawer/index.js +2 -2
  329. package/lib/components/drawer/src/drawer.js +27 -176
  330. package/lib/components/drawer/src/drawer.js.map +1 -1
  331. package/lib/components/drawer/src/drawer2.js +176 -27
  332. package/lib/components/drawer/src/drawer2.js.map +1 -1
  333. package/lib/components/index.js +1 -1
  334. package/lib/components/table/src/table.js +2 -1
  335. package/lib/components/table/src/table.js.map +1 -1
  336. package/lib/components/transfer/index.d.ts +40 -0
  337. package/lib/components/transfer/src/transfer-panel.vue.d.ts +8 -0
  338. package/lib/components/transfer/src/transfer.vue.d.ts +40 -0
  339. package/lib/components/tree-v2/index.d.ts +8 -0
  340. package/lib/components/tree-v2/src/tree-node.vue.d.ts +8 -0
  341. package/lib/components/tree-v2/src/tree.vue.d.ts +8 -0
  342. package/lib/components/watermark/index.d.ts +94 -0
  343. package/lib/components/watermark/index.js +15 -0
  344. package/lib/components/watermark/index.js.map +1 -0
  345. package/lib/components/watermark/src/useClips.d.ts +7 -0
  346. package/lib/components/watermark/src/useClips.js +87 -0
  347. package/lib/components/watermark/src/useClips.js.map +1 -0
  348. package/lib/components/watermark/src/utils.d.ts +8 -0
  349. package/lib/components/watermark/src/utils.js +29 -0
  350. package/lib/components/watermark/src/utils.js.map +1 -0
  351. package/lib/components/watermark/src/watermark.d.ts +32 -0
  352. package/lib/components/watermark/src/watermark.js +37 -0
  353. package/lib/components/watermark/src/watermark.js.map +1 -0
  354. package/lib/components/watermark/src/watermark.vue.d.ts +94 -0
  355. package/lib/components/watermark/src/watermark2.js +206 -0
  356. package/lib/components/watermark/src/watermark2.js.map +1 -0
  357. package/lib/components/watermark/style/index.d.ts +0 -0
  358. package/lib/components/watermark/style/index.js +3 -0
  359. package/lib/components/watermark/style/index.js.map +1 -0
  360. package/lib/hooks/use-focus-controller/index.d.ts +6 -1
  361. package/lib/hooks/use-focus-controller/index.js +5 -2
  362. package/lib/hooks/use-focus-controller/index.js.map +1 -1
  363. package/lib/index.js +1 -1
  364. package/lib/version.d.ts +1 -1
  365. package/lib/version.js +1 -1
  366. package/lib/version.js.map +1 -1
  367. package/package.json +2 -2
  368. package/tags.json +1 -1
  369. package/theme-chalk/el-color-picker.css +1 -1
  370. package/theme-chalk/el-table-v2.css +1 -1
  371. package/theme-chalk/el-table.css +1 -1
  372. package/theme-chalk/index.css +1 -1
  373. package/theme-chalk/src/color-picker.scss +8 -2
  374. package/theme-chalk/src/common/var.scss +1 -0
  375. package/theme-chalk/src/table.scss +16 -9
  376. package/web-types.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"color-picker2.mjs","sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n :visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n >\n <template #content>\n <div v-click-outside=\"hide\">\n <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"sv\" :color=\"color\" />\n </div>\n <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n <predefine\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div :class=\"ns.be('dropdown', 'btns')\">\n <span :class=\"ns.be('dropdown', 'value')\">\n <el-input\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n :class=\"ns.be('dropdown', 'link-btn')\"\n text\n size=\"small\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n :class=\"ns.be('dropdown', 'btn')\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :id=\"buttonId\"\n :class=\"btnKls\"\n role=\"button\"\n :aria-label=\"buttonAriaLabel\"\n :aria-labelledby=\"buttonAriaLabelledby\"\n :aria-description=\"\n t('el.colorpicker.description', { color: modelValue || '' })\n \"\n :tabindex=\"tabindex\"\n @keydown.enter=\"handleTrigger\"\n >\n <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\" />\n <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n <span\n :class=\"ns.be('picker', 'color-inner')\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue || showPanelColor\"\n :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-show=\"!modelValue && !showPanelColor\"\n :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n >\n <close />\n </el-icon>\n </span>\n </span>\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElInput } from '@element-plus/components/input'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './utils/color'\nimport {\n colorPickerContextKey,\n colorPickerEmits,\n colorPickerProps,\n} from './color-picker'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n name: 'ElColorPicker',\n})\nconst props = defineProps(colorPickerProps)\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\n\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst hue = ref<InstanceType<typeof HueSlider>>()\nconst sv = ref<InstanceType<typeof SvPanel>>()\nconst alpha = ref<InstanceType<typeof AlphaSlider>>()\nconst popper = ref<TooltipInstance>()\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n) as Color\n\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\nconst customInput = ref('')\n\nconst displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n return !isLabeledByFormItem.value\n ? props.label || t('el.colorpicker.defaultLabel')\n : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n return [\n ns.b('picker'),\n ns.is('disabled', colorDisabled.value),\n ns.bm('picker', colorSize.value),\n ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n if (!(color instanceof Color)) {\n throw new TypeError('color should be instance of _color Class')\n }\n\n const { r, g, b } = color.toRgb()\n return showAlpha\n ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\n\nfunction show() {\n if (colorDisabled.value) return\n setShowPicker(true)\n}\n\nfunction hide() {\n debounceSetShowPicker(false)\n resetColor()\n}\n\nfunction resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n color.value = ''\n nextTick(() => {\n showPanelColor.value = false\n })\n }\n })\n}\n\nfunction handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n}\n\nfunction handleConfirm() {\n color.fromString(customInput.value)\n}\n\nfunction confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n if (props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n debounceSetShowPicker(false)\n // check if modelValue change, if not change, then reset color.\n nextTick(() => {\n const newColor = new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n}\n\nfunction clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null && props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n resetColor()\n}\n\nonMounted(() => {\n if (props.modelValue) {\n customInput.value = currentColor.value\n }\n})\n\nwatch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n shouldActiveChange = false\n color.fromString(newVal)\n }\n }\n)\n\nwatch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n shouldActiveChange && emit('activeChange', val)\n shouldActiveChange = true\n }\n)\n\nwatch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n)\n\nwatch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n sv.value?.update()\n alpha.value?.update()\n })\n }\n)\n\nprovide(colorPickerContextKey, {\n currentColor,\n})\n\ndefineExpose({\n /**\n * @description current color object\n */\n color,\n /**\n * @description manually show ColorPicker\n */\n show,\n /**\n * @description manually hide ColorPicker\n */\n hide,\n})\n</script>\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"color-picker2.mjs","sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n :visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n @hide=\"setShowPicker(false)\"\n >\n <template #content>\n <div v-click-outside=\"handleClickOutside\" @keydown.esc=\"handleEsc\">\n <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"sv\" :color=\"color\" />\n </div>\n <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n <predefine\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div :class=\"ns.be('dropdown', 'btns')\">\n <span :class=\"ns.be('dropdown', 'value')\">\n <el-input\n ref=\"inputRef\"\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n :class=\"ns.be('dropdown', 'link-btn')\"\n text\n size=\"small\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n :class=\"ns.be('dropdown', 'btn')\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :id=\"buttonId\"\n ref=\"triggerRef\"\n :class=\"btnKls\"\n role=\"button\"\n :aria-label=\"buttonAriaLabel\"\n :aria-labelledby=\"buttonAriaLabelledby\"\n :aria-description=\"\n t('el.colorpicker.description', { color: modelValue || '' })\n \"\n :aria-disabled=\"colorDisabled\"\n :tabindex=\"colorDisabled ? -1 : tabindex\"\n @keydown=\"handleKeyDown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n >\n <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\" />\n <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n <span\n :class=\"ns.be('picker', 'color-inner')\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue || showPanelColor\"\n :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-show=\"!modelValue && !showPanelColor\"\n :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n >\n <close />\n </el-icon>\n </span>\n </span>\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElInput } from '@element-plus/components/input'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport {\n useFocusController,\n useLocale,\n useNamespace,\n} from '@element-plus/hooks'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './utils/color'\nimport {\n colorPickerContextKey,\n colorPickerEmits,\n colorPickerProps,\n} from './color-picker'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n name: 'ElColorPicker',\n})\nconst props = defineProps(colorPickerProps)\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\n\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst hue = ref<InstanceType<typeof HueSlider>>()\nconst sv = ref<InstanceType<typeof SvPanel>>()\nconst alpha = ref<InstanceType<typeof AlphaSlider>>()\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst inputRef = ref()\n\nconst {\n isFocused,\n handleFocus: _handleFocus,\n handleBlur,\n} = useFocusController(triggerRef, {\n beforeBlur(event) {\n return popper.value?.isFocusInsideContent(event)\n },\n afterBlur() {\n setShowPicker(false)\n resetColor()\n },\n})\n\nconst handleFocus = (event: FocusEvent) => {\n if (colorDisabled.value) return blur()\n _handleFocus(event)\n}\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n) as Color\n\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\nconst customInput = ref('')\n\nconst displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n return !isLabeledByFormItem.value\n ? props.label || t('el.colorpicker.defaultLabel')\n : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n return [\n ns.b('picker'),\n ns.is('disabled', colorDisabled.value),\n ns.bm('picker', colorSize.value),\n ns.is('focused', isFocused.value),\n ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n if (!(color instanceof Color)) {\n throw new TypeError('color should be instance of _color Class')\n }\n\n const { r, g, b } = color.toRgb()\n return showAlpha\n ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\n\nfunction show() {\n if (colorDisabled.value) return\n setShowPicker(true)\n}\n\nfunction hide() {\n debounceSetShowPicker(false)\n resetColor()\n}\n\nfunction resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n color.value = ''\n nextTick(() => {\n showPanelColor.value = false\n })\n }\n })\n}\n\nfunction handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n}\n\nfunction handleConfirm() {\n color.fromString(customInput.value)\n}\n\nfunction confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n if (props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n debounceSetShowPicker(false)\n // check if modelValue change, if not change, then reset color.\n nextTick(() => {\n const newColor = new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n}\n\nfunction clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null && props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n resetColor()\n}\n\nfunction handleClickOutside(event: Event) {\n if (!showPicker.value) return\n hide()\n\n if (isFocused.value) {\n const _event = new FocusEvent('focus', event)\n handleBlur(_event)\n }\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n event.preventDefault()\n event.stopPropagation()\n setShowPicker(false)\n resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n switch (event.code) {\n case EVENT_CODE.enter:\n case EVENT_CODE.space:\n event.preventDefault()\n event.stopPropagation()\n show()\n inputRef.value.focus()\n break\n case EVENT_CODE.esc:\n handleEsc(event)\n break\n }\n}\n\nfunction focus() {\n triggerRef.value.focus()\n}\n\nfunction blur() {\n triggerRef.value.blur()\n}\n\nonMounted(() => {\n if (props.modelValue) {\n customInput.value = currentColor.value\n }\n})\n\nwatch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n shouldActiveChange = false\n color.fromString(newVal)\n }\n }\n)\n\nwatch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n shouldActiveChange && emit('activeChange', val)\n shouldActiveChange = true\n }\n)\n\nwatch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n)\n\nwatch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n sv.value?.update()\n alpha.value?.update()\n })\n }\n)\n\nprovide(colorPickerContextKey, {\n currentColor,\n})\n\ndefineExpose({\n /**\n * @description current color object\n */\n color,\n /**\n * @description manually show ColorPicker\n */\n show,\n /**\n * @description manually hide ColorPicker\n */\n hide,\n /**\n * @description focus the input element\n */\n focus,\n /**\n * @description blur the input element\n */\n blur,\n})\n</script>\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"description-item.mjs","sources":["../../../../../../packages/components/descriptions/src/description-item.ts"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, Slot, VNode } from 'vue'\n\nconst descriptionItemProps = buildProps({\n label: {\n type: String,\n default: '',\n },\n span: {\n type: Number,\n default: 1,\n },\n width: {\n type: [String, Number],\n default: '',\n },\n minWidth: {\n type: [String, Number],\n default: '',\n },\n align: {\n type: String,\n default: 'left',\n },\n labelAlign: {\n type: String,\n default: '',\n },\n className: {\n type: String,\n default: '',\n },\n labelClassName: {\n type: String,\n default: '',\n },\n})\nconst DescriptionItem = defineComponent({\n name: 'ElDescriptionsItem',\n props: descriptionItemProps,\n})\n\nexport default DescriptionItem\n\ntype DescriptionItemProps = ExtractPropTypes<typeof descriptionItemProps>\nexport type DescriptionItemVNode = VNode & {\n children: { [name: string]: Slot } | null\n props: Partial<DescriptionItemProps> | null\n}\n"],"names":[],"mappings":";;;;AAEA,MAAM,oBAAoB,GAAG,UAAU,CAAC;AACxC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC,CAAC,CAAC;AACE,MAAC,eAAe,GAAG,eAAe,CAAC;AACxC,EAAE,IAAI,EAAE,oBAAoB;AAC5B,EAAE,KAAK,EAAE,oBAAoB;AAC7B,CAAC;;;;"}
1
+ {"version":3,"file":"description-item.mjs","sources":["../../../../../../packages/components/descriptions/src/description-item.ts"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, Slot, VNode } from 'vue'\n\nconst descriptionItemProps = buildProps({\n /**\n * @description label text\n */\n label: {\n type: String,\n default: '',\n },\n /**\n * @description colspan of column\n */\n span: {\n type: Number,\n default: 1,\n },\n /**\n * @description column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)\n */\n width: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)\n */\n minWidth: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description column content alignment (If no `border`, effective for both label and content)\n */\n align: {\n type: String,\n default: 'left',\n },\n /**\n * @description column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)\n */\n labelAlign: {\n type: String,\n default: '',\n },\n /**\n * @description column content custom class name\n */\n className: {\n type: String,\n default: '',\n },\n /**\n * @description column label custom class name\n */\n labelClassName: {\n type: String,\n default: '',\n },\n})\nconst DescriptionItem = defineComponent({\n name: 'ElDescriptionsItem',\n props: descriptionItemProps,\n})\n\nexport default DescriptionItem\n\ntype DescriptionItemProps = ExtractPropTypes<typeof descriptionItemProps>\nexport type DescriptionItemVNode = VNode & {\n children: { [name: string]: Slot } | null\n props: Partial<DescriptionItemProps> | null\n}\n"],"names":[],"mappings":";;;;AAEA,MAAM,oBAAoB,GAAG,UAAU,CAAC;AACxC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC,CAAC,CAAC;AACE,MAAC,eAAe,GAAG,eAAe,CAAC;AACxC,EAAE,IAAI,EAAE,oBAAoB;AAC5B,EAAE,KAAK,EAAE,oBAAoB;AAC7B,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"description.mjs","sources":["../../../../../../packages/components/descriptions/src/description.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { useSizeProp } from '@element-plus/hooks'\n\nimport type Description from './description.vue'\n\nexport const descriptionProps = buildProps({\n border: {\n type: Boolean,\n default: false,\n },\n column: {\n type: Number,\n default: 3,\n },\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n size: useSizeProp,\n title: {\n type: String,\n default: '',\n },\n extra: {\n type: String,\n default: '',\n },\n} as const)\n\nexport type DescriptionInstance = InstanceType<typeof Description>\n"],"names":[],"mappings":";;;;;AAEY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;AACtC,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG;AACH,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
1
+ {"version":3,"file":"description.mjs","sources":["../../../../../../packages/components/descriptions/src/description.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { useSizeProp } from '@element-plus/hooks'\n\nimport type Description from './description.vue'\n\nexport const descriptionProps = buildProps({\n /**\n * @description with or without border\n */\n border: {\n type: Boolean,\n default: false,\n },\n /**\n * @description numbers of `Descriptions Item` in one line\n */\n column: {\n type: Number,\n default: 3,\n },\n /**\n * @description direction of list\n */\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n /**\n * @description size of list\n */\n size: useSizeProp,\n /**\n * @description title text, display on the top left\n */\n title: {\n type: String,\n default: '',\n },\n /**\n * @description extra text, display on the top right\n */\n extra: {\n type: String,\n default: '',\n },\n} as const)\n\nexport type DescriptionInstance = InstanceType<typeof Description>\n"],"names":[],"mappings":";;;;;AAEY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;AACtC,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG;AACH,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
@@ -1,6 +1,6 @@
1
1
  import '../../utils/index.mjs';
2
- import Drawer from './src/drawer.mjs';
3
- export { drawerEmits, drawerProps } from './src/drawer2.mjs';
2
+ import Drawer from './src/drawer2.mjs';
3
+ export { drawerEmits, drawerProps } from './src/drawer.mjs';
4
4
  import { withInstall } from '../../utils/vue/install.mjs';
5
5
 
6
6
  const ElDrawer = withInstall(Drawer);
@@ -1,183 +1,33 @@
1
- import { defineComponent, computed, ref, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, mergeProps, withModifiers, normalizeClass, createElementBlock, renderSlot, toDisplayString, createCommentVNode, vShow } from 'vue';
2
- import { Close } from '@element-plus/icons-vue';
3
- import { ElOverlay } from '../../overlay/index.mjs';
4
- import '../../focus-trap/index.mjs';
5
- import '../../dialog/index.mjs';
6
1
  import '../../../utils/index.mjs';
7
- import { ElIcon } from '../../icon/index.mjs';
8
- import '../../../hooks/index.mjs';
9
- import { drawerProps, drawerEmits } from './drawer2.mjs';
10
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
11
- import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
12
- import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
13
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
14
- import { useLocale } from '../../../hooks/use-locale/index.mjs';
15
- import { addUnit } from '../../../utils/dom/style.mjs';
16
- import { useDialog } from '../../dialog/src/use-dialog.mjs';
2
+ import '../../dialog/index.mjs';
3
+ import { buildProps } from '../../../utils/vue/props/runtime.mjs';
4
+ import { dialogProps, dialogEmits } from '../../dialog/src/dialog.mjs';
17
5
 
18
- const _sfc_main = defineComponent({
19
- name: "ElDrawer",
20
- components: {
21
- ElOverlay,
22
- ElFocusTrap,
23
- ElIcon,
24
- Close
6
+ const drawerProps = buildProps({
7
+ ...dialogProps,
8
+ direction: {
9
+ type: String,
10
+ default: "rtl",
11
+ values: ["ltr", "rtl", "ttb", "btt"]
12
+ },
13
+ size: {
14
+ type: [String, Number],
15
+ default: "30%"
16
+ },
17
+ withHeader: {
18
+ type: Boolean,
19
+ default: true
20
+ },
21
+ modalFade: {
22
+ type: Boolean,
23
+ default: true
25
24
  },
26
- inheritAttrs: false,
27
- props: drawerProps,
28
- emits: drawerEmits,
29
- setup(props, { slots }) {
30
- useDeprecated({
31
- scope: "el-drawer",
32
- from: "the title slot",
33
- replacement: "the header slot",
34
- version: "3.0.0",
35
- ref: "https://element-plus.org/en-US/component/drawer.html#slots"
36
- }, computed(() => !!slots.title));
37
- useDeprecated({
38
- scope: "el-drawer",
39
- from: "custom-class",
40
- replacement: "class",
41
- version: "2.3.0",
42
- ref: "https://element-plus.org/en-US/component/drawer.html#attributes",
43
- type: "Attribute"
44
- }, computed(() => !!props.customClass));
45
- const drawerRef = ref();
46
- const focusStartRef = ref();
47
- const ns = useNamespace("drawer");
48
- const { t } = useLocale();
49
- const isHorizontal = computed(() => props.direction === "rtl" || props.direction === "ltr");
50
- const drawerSize = computed(() => addUnit(props.size));
51
- return {
52
- ...useDialog(props, drawerRef),
53
- drawerRef,
54
- focusStartRef,
55
- isHorizontal,
56
- drawerSize,
57
- ns,
58
- t
59
- };
25
+ headerAriaLevel: {
26
+ type: String,
27
+ default: "2"
60
28
  }
61
29
  });
62
- const _hoisted_1 = ["aria-label", "aria-labelledby", "aria-describedby"];
63
- const _hoisted_2 = ["id", "aria-level"];
64
- const _hoisted_3 = ["aria-label"];
65
- const _hoisted_4 = ["id"];
66
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
67
- const _component_close = resolveComponent("close");
68
- const _component_el_icon = resolveComponent("el-icon");
69
- const _component_el_focus_trap = resolveComponent("el-focus-trap");
70
- const _component_el_overlay = resolveComponent("el-overlay");
71
- return openBlock(), createBlock(Teleport, {
72
- to: "body",
73
- disabled: !_ctx.appendToBody
74
- }, [
75
- createVNode(Transition, {
76
- name: _ctx.ns.b("fade"),
77
- onAfterEnter: _ctx.afterEnter,
78
- onAfterLeave: _ctx.afterLeave,
79
- onBeforeLeave: _ctx.beforeLeave,
80
- persisted: ""
81
- }, {
82
- default: withCtx(() => [
83
- withDirectives(createVNode(_component_el_overlay, {
84
- mask: _ctx.modal,
85
- "overlay-class": _ctx.modalClass,
86
- "z-index": _ctx.zIndex,
87
- onClick: _ctx.onModalClick
88
- }, {
89
- default: withCtx(() => [
90
- createVNode(_component_el_focus_trap, {
91
- loop: "",
92
- trapped: _ctx.visible,
93
- "focus-trap-el": _ctx.drawerRef,
94
- "focus-start-el": _ctx.focusStartRef,
95
- onReleaseRequested: _ctx.onCloseRequested
96
- }, {
97
- default: withCtx(() => [
98
- createElementVNode("div", mergeProps({
99
- ref: "drawerRef",
100
- "aria-modal": "true",
101
- "aria-label": _ctx.title || void 0,
102
- "aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
103
- "aria-describedby": _ctx.bodyId
104
- }, _ctx.$attrs, {
105
- class: [_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass],
106
- style: _ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize,
107
- role: "dialog",
108
- onClick: _cache[1] || (_cache[1] = withModifiers(() => {
109
- }, ["stop"]))
110
- }), [
111
- createElementVNode("span", {
112
- ref: "focusStartRef",
113
- class: normalizeClass(_ctx.ns.e("sr-focus")),
114
- tabindex: "-1"
115
- }, null, 2),
116
- _ctx.withHeader ? (openBlock(), createElementBlock("header", {
117
- key: 0,
118
- class: normalizeClass(_ctx.ns.e("header"))
119
- }, [
120
- !_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
121
- key: 0,
122
- close: _ctx.handleClose,
123
- titleId: _ctx.titleId,
124
- titleClass: _ctx.ns.e("title")
125
- }, () => [
126
- !_ctx.$slots.title ? (openBlock(), createElementBlock("span", {
127
- key: 0,
128
- id: _ctx.titleId,
129
- role: "heading",
130
- "aria-level": _ctx.headerAriaLevel,
131
- class: normalizeClass(_ctx.ns.e("title"))
132
- }, toDisplayString(_ctx.title), 11, _hoisted_2)) : createCommentVNode("v-if", true)
133
- ]) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
134
- createCommentVNode(" DEPRECATED SLOT ")
135
- ]),
136
- _ctx.showClose ? (openBlock(), createElementBlock("button", {
137
- key: 2,
138
- "aria-label": _ctx.t("el.drawer.close"),
139
- class: normalizeClass(_ctx.ns.e("close-btn")),
140
- type: "button",
141
- onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
142
- }, [
143
- createVNode(_component_el_icon, {
144
- class: normalizeClass(_ctx.ns.e("close"))
145
- }, {
146
- default: withCtx(() => [
147
- createVNode(_component_close)
148
- ]),
149
- _: 1
150
- }, 8, ["class"])
151
- ], 10, _hoisted_3)) : createCommentVNode("v-if", true)
152
- ], 2)) : createCommentVNode("v-if", true),
153
- _ctx.rendered ? (openBlock(), createElementBlock("div", {
154
- key: 1,
155
- id: _ctx.bodyId,
156
- class: normalizeClass(_ctx.ns.e("body"))
157
- }, [
158
- renderSlot(_ctx.$slots, "default")
159
- ], 10, _hoisted_4)) : createCommentVNode("v-if", true),
160
- _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
161
- key: 2,
162
- class: normalizeClass(_ctx.ns.e("footer"))
163
- }, [
164
- renderSlot(_ctx.$slots, "footer")
165
- ], 2)) : createCommentVNode("v-if", true)
166
- ], 16, _hoisted_1)
167
- ]),
168
- _: 3
169
- }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
170
- ]),
171
- _: 3
172
- }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
173
- [vShow, _ctx.visible]
174
- ])
175
- ]),
176
- _: 3
177
- }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
178
- ], 8, ["disabled"]);
179
- }
180
- var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/drawer/src/drawer.vue"]]);
30
+ const drawerEmits = dialogEmits;
181
31
 
182
- export { Drawer as default };
32
+ export { drawerEmits, drawerProps };
183
33
  //# sourceMappingURL=drawer.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<template>\n <teleport to=\"body\" :disabled=\"!appendToBody\">\n <transition\n :name=\"ns.b('fade')\"\n @after-enter=\"afterEnter\"\n @after-leave=\"afterLeave\"\n @before-leave=\"beforeLeave\"\n >\n <el-overlay\n v-show=\"visible\"\n :mask=\"modal\"\n :overlay-class=\"modalClass\"\n :z-index=\"zIndex\"\n @click=\"onModalClick\"\n >\n <el-focus-trap\n loop\n :trapped=\"visible\"\n :focus-trap-el=\"drawerRef\"\n :focus-start-el=\"focusStartRef\"\n @release-requested=\"onCloseRequested\"\n >\n <div\n ref=\"drawerRef\"\n aria-modal=\"true\"\n :aria-label=\"title || undefined\"\n :aria-labelledby=\"!title ? titleId : undefined\"\n :aria-describedby=\"bodyId\"\n v-bind=\"$attrs\"\n :class=\"[ns.b(), direction, visible && 'open', customClass]\"\n :style=\"\n isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize\n \"\n role=\"dialog\"\n @click.stop\n >\n <span ref=\"focusStartRef\" :class=\"ns.e('sr-focus')\" tabindex=\"-1\" />\n <header v-if=\"withHeader\" :class=\"ns.e('header')\">\n <slot\n v-if=\"!$slots.title\"\n name=\"header\"\n :close=\"handleClose\"\n :title-id=\"titleId\"\n :title-class=\"ns.e('title')\"\n >\n <span\n v-if=\"!$slots.title\"\n :id=\"titleId\"\n role=\"heading\"\n :aria-level=\"headerAriaLevel\"\n :class=\"ns.e('title')\"\n >\n {{ title }}\n </span>\n </slot>\n <slot v-else name=\"title\">\n <!-- DEPRECATED SLOT -->\n </slot>\n <button\n v-if=\"showClose\"\n :aria-label=\"t('el.drawer.close')\"\n :class=\"ns.e('close-btn')\"\n type=\"button\"\n @click=\"handleClose\"\n >\n <el-icon :class=\"ns.e('close')\"><close /></el-icon>\n </button>\n </header>\n <template v-if=\"rendered\">\n <div :id=\"bodyId\" :class=\"ns.e('body')\">\n <slot />\n </div>\n </template>\n <div v-if=\"$slots.footer\" :class=\"ns.e('footer')\">\n <slot name=\"footer\" />\n </div>\n </div>\n </el-focus-trap>\n </el-overlay>\n </transition>\n </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\n\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { useDialog } from '@element-plus/components/dialog'\nimport { addUnit } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'\nimport { drawerEmits, drawerProps } from './drawer'\n\nexport default defineComponent({\n name: 'ElDrawer',\n components: {\n ElOverlay,\n ElFocusTrap,\n ElIcon,\n Close,\n },\n inheritAttrs: false,\n props: drawerProps,\n emits: drawerEmits,\n\n setup(props, { slots }) {\n useDeprecated(\n {\n scope: 'el-drawer',\n from: 'the title slot',\n replacement: 'the header slot',\n version: '3.0.0',\n ref: 'https://element-plus.org/en-US/component/drawer.html#slots',\n },\n computed(() => !!slots.title)\n )\n useDeprecated(\n {\n scope: 'el-drawer',\n from: 'custom-class',\n replacement: 'class',\n version: '2.3.0',\n ref: 'https://element-plus.org/en-US/component/drawer.html#attributes',\n type: 'Attribute',\n },\n computed(() => !!props.customClass)\n )\n\n const drawerRef = ref<HTMLElement>()\n const focusStartRef = ref<HTMLElement>()\n const ns = useNamespace('drawer')\n const { t } = useLocale()\n\n const isHorizontal = computed(\n () => props.direction === 'rtl' || props.direction === 'ltr'\n )\n const drawerSize = computed(() => addUnit(props.size))\n\n return {\n ...useDialog(props, drawerRef),\n drawerRef,\n focusStartRef,\n isHorizontal,\n drawerSize,\n ns,\n t,\n }\n },\n})\n</script>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_withDirectives","_createElementVNode","_mergeProps","_withModifiers","_normalizeClass","_openBlock","_createElementBlock","_renderSlot","_toDisplayString","_createCommentVNode"],"mappings":"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"}
1
+ {"version":3,"file":"drawer.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { dialogEmits, dialogProps } from '@element-plus/components/dialog'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const drawerProps = buildProps({\n ...dialogProps,\n direction: {\n type: String,\n default: 'rtl',\n values: ['ltr', 'rtl', 'ttb', 'btt'],\n },\n size: {\n type: [String, Number],\n default: '30%',\n },\n withHeader: {\n type: Boolean,\n default: true,\n },\n modalFade: {\n type: Boolean,\n default: true,\n },\n headerAriaLevel: {\n type: String,\n default: '2',\n },\n} as const)\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>\n\nexport const drawerEmits = dialogEmits\n"],"names":[],"mappings":";;;;;AAEY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,GAAG,WAAW;AAChB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACxC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;;;;"}
@@ -1,33 +1,183 @@
1
- import '../../../utils/index.mjs';
1
+ import { defineComponent, computed, ref, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, mergeProps, withModifiers, normalizeClass, createElementBlock, renderSlot, toDisplayString, createCommentVNode, vShow } from 'vue';
2
+ import { Close } from '@element-plus/icons-vue';
3
+ import { ElOverlay } from '../../overlay/index.mjs';
4
+ import '../../focus-trap/index.mjs';
2
5
  import '../../dialog/index.mjs';
3
- import { buildProps } from '../../../utils/vue/props/runtime.mjs';
4
- import { dialogProps, dialogEmits } from '../../dialog/src/dialog.mjs';
6
+ import '../../../utils/index.mjs';
7
+ import { ElIcon } from '../../icon/index.mjs';
8
+ import '../../../hooks/index.mjs';
9
+ import { drawerProps, drawerEmits } from './drawer.mjs';
10
+ import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
11
+ import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
12
+ import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
13
+ import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
14
+ import { useLocale } from '../../../hooks/use-locale/index.mjs';
15
+ import { addUnit } from '../../../utils/dom/style.mjs';
16
+ import { useDialog } from '../../dialog/src/use-dialog.mjs';
5
17
 
6
- const drawerProps = buildProps({
7
- ...dialogProps,
8
- direction: {
9
- type: String,
10
- default: "rtl",
11
- values: ["ltr", "rtl", "ttb", "btt"]
12
- },
13
- size: {
14
- type: [String, Number],
15
- default: "30%"
16
- },
17
- withHeader: {
18
- type: Boolean,
19
- default: true
20
- },
21
- modalFade: {
22
- type: Boolean,
23
- default: true
18
+ const _sfc_main = defineComponent({
19
+ name: "ElDrawer",
20
+ components: {
21
+ ElOverlay,
22
+ ElFocusTrap,
23
+ ElIcon,
24
+ Close
24
25
  },
25
- headerAriaLevel: {
26
- type: String,
27
- default: "2"
26
+ inheritAttrs: false,
27
+ props: drawerProps,
28
+ emits: drawerEmits,
29
+ setup(props, { slots }) {
30
+ useDeprecated({
31
+ scope: "el-drawer",
32
+ from: "the title slot",
33
+ replacement: "the header slot",
34
+ version: "3.0.0",
35
+ ref: "https://element-plus.org/en-US/component/drawer.html#slots"
36
+ }, computed(() => !!slots.title));
37
+ useDeprecated({
38
+ scope: "el-drawer",
39
+ from: "custom-class",
40
+ replacement: "class",
41
+ version: "2.3.0",
42
+ ref: "https://element-plus.org/en-US/component/drawer.html#attributes",
43
+ type: "Attribute"
44
+ }, computed(() => !!props.customClass));
45
+ const drawerRef = ref();
46
+ const focusStartRef = ref();
47
+ const ns = useNamespace("drawer");
48
+ const { t } = useLocale();
49
+ const isHorizontal = computed(() => props.direction === "rtl" || props.direction === "ltr");
50
+ const drawerSize = computed(() => addUnit(props.size));
51
+ return {
52
+ ...useDialog(props, drawerRef),
53
+ drawerRef,
54
+ focusStartRef,
55
+ isHorizontal,
56
+ drawerSize,
57
+ ns,
58
+ t
59
+ };
28
60
  }
29
61
  });
30
- const drawerEmits = dialogEmits;
62
+ const _hoisted_1 = ["aria-label", "aria-labelledby", "aria-describedby"];
63
+ const _hoisted_2 = ["id", "aria-level"];
64
+ const _hoisted_3 = ["aria-label"];
65
+ const _hoisted_4 = ["id"];
66
+ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
67
+ const _component_close = resolveComponent("close");
68
+ const _component_el_icon = resolveComponent("el-icon");
69
+ const _component_el_focus_trap = resolveComponent("el-focus-trap");
70
+ const _component_el_overlay = resolveComponent("el-overlay");
71
+ return openBlock(), createBlock(Teleport, {
72
+ to: "body",
73
+ disabled: !_ctx.appendToBody
74
+ }, [
75
+ createVNode(Transition, {
76
+ name: _ctx.ns.b("fade"),
77
+ onAfterEnter: _ctx.afterEnter,
78
+ onAfterLeave: _ctx.afterLeave,
79
+ onBeforeLeave: _ctx.beforeLeave,
80
+ persisted: ""
81
+ }, {
82
+ default: withCtx(() => [
83
+ withDirectives(createVNode(_component_el_overlay, {
84
+ mask: _ctx.modal,
85
+ "overlay-class": _ctx.modalClass,
86
+ "z-index": _ctx.zIndex,
87
+ onClick: _ctx.onModalClick
88
+ }, {
89
+ default: withCtx(() => [
90
+ createVNode(_component_el_focus_trap, {
91
+ loop: "",
92
+ trapped: _ctx.visible,
93
+ "focus-trap-el": _ctx.drawerRef,
94
+ "focus-start-el": _ctx.focusStartRef,
95
+ onReleaseRequested: _ctx.onCloseRequested
96
+ }, {
97
+ default: withCtx(() => [
98
+ createElementVNode("div", mergeProps({
99
+ ref: "drawerRef",
100
+ "aria-modal": "true",
101
+ "aria-label": _ctx.title || void 0,
102
+ "aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
103
+ "aria-describedby": _ctx.bodyId
104
+ }, _ctx.$attrs, {
105
+ class: [_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass],
106
+ style: _ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize,
107
+ role: "dialog",
108
+ onClick: _cache[1] || (_cache[1] = withModifiers(() => {
109
+ }, ["stop"]))
110
+ }), [
111
+ createElementVNode("span", {
112
+ ref: "focusStartRef",
113
+ class: normalizeClass(_ctx.ns.e("sr-focus")),
114
+ tabindex: "-1"
115
+ }, null, 2),
116
+ _ctx.withHeader ? (openBlock(), createElementBlock("header", {
117
+ key: 0,
118
+ class: normalizeClass(_ctx.ns.e("header"))
119
+ }, [
120
+ !_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
121
+ key: 0,
122
+ close: _ctx.handleClose,
123
+ titleId: _ctx.titleId,
124
+ titleClass: _ctx.ns.e("title")
125
+ }, () => [
126
+ !_ctx.$slots.title ? (openBlock(), createElementBlock("span", {
127
+ key: 0,
128
+ id: _ctx.titleId,
129
+ role: "heading",
130
+ "aria-level": _ctx.headerAriaLevel,
131
+ class: normalizeClass(_ctx.ns.e("title"))
132
+ }, toDisplayString(_ctx.title), 11, _hoisted_2)) : createCommentVNode("v-if", true)
133
+ ]) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
134
+ createCommentVNode(" DEPRECATED SLOT ")
135
+ ]),
136
+ _ctx.showClose ? (openBlock(), createElementBlock("button", {
137
+ key: 2,
138
+ "aria-label": _ctx.t("el.drawer.close"),
139
+ class: normalizeClass(_ctx.ns.e("close-btn")),
140
+ type: "button",
141
+ onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
142
+ }, [
143
+ createVNode(_component_el_icon, {
144
+ class: normalizeClass(_ctx.ns.e("close"))
145
+ }, {
146
+ default: withCtx(() => [
147
+ createVNode(_component_close)
148
+ ]),
149
+ _: 1
150
+ }, 8, ["class"])
151
+ ], 10, _hoisted_3)) : createCommentVNode("v-if", true)
152
+ ], 2)) : createCommentVNode("v-if", true),
153
+ _ctx.rendered ? (openBlock(), createElementBlock("div", {
154
+ key: 1,
155
+ id: _ctx.bodyId,
156
+ class: normalizeClass(_ctx.ns.e("body"))
157
+ }, [
158
+ renderSlot(_ctx.$slots, "default")
159
+ ], 10, _hoisted_4)) : createCommentVNode("v-if", true),
160
+ _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
161
+ key: 2,
162
+ class: normalizeClass(_ctx.ns.e("footer"))
163
+ }, [
164
+ renderSlot(_ctx.$slots, "footer")
165
+ ], 2)) : createCommentVNode("v-if", true)
166
+ ], 16, _hoisted_1)
167
+ ]),
168
+ _: 3
169
+ }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
170
+ ]),
171
+ _: 3
172
+ }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
173
+ [vShow, _ctx.visible]
174
+ ])
175
+ ]),
176
+ _: 3
177
+ }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
178
+ ], 8, ["disabled"]);
179
+ }
180
+ var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/drawer/src/drawer.vue"]]);
31
181
 
32
- export { drawerEmits, drawerProps };
182
+ export { Drawer as default };
33
183
  //# sourceMappingURL=drawer2.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"drawer2.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { dialogEmits, dialogProps } from '@element-plus/components/dialog'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const drawerProps = buildProps({\n ...dialogProps,\n direction: {\n type: String,\n default: 'rtl',\n values: ['ltr', 'rtl', 'ttb', 'btt'],\n },\n size: {\n type: [String, Number],\n default: '30%',\n },\n withHeader: {\n type: Boolean,\n default: true,\n },\n modalFade: {\n type: Boolean,\n default: true,\n },\n headerAriaLevel: {\n type: String,\n default: '2',\n },\n} as const)\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>\n\nexport const drawerEmits = dialogEmits\n"],"names":[],"mappings":";;;;;AAEY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,GAAG,WAAW;AAChB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACxC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;;;;"}
1
+ {"version":3,"file":"drawer2.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<template>\n <teleport to=\"body\" :disabled=\"!appendToBody\">\n <transition\n :name=\"ns.b('fade')\"\n @after-enter=\"afterEnter\"\n @after-leave=\"afterLeave\"\n @before-leave=\"beforeLeave\"\n >\n <el-overlay\n v-show=\"visible\"\n :mask=\"modal\"\n :overlay-class=\"modalClass\"\n :z-index=\"zIndex\"\n @click=\"onModalClick\"\n >\n <el-focus-trap\n loop\n :trapped=\"visible\"\n :focus-trap-el=\"drawerRef\"\n :focus-start-el=\"focusStartRef\"\n @release-requested=\"onCloseRequested\"\n >\n <div\n ref=\"drawerRef\"\n aria-modal=\"true\"\n :aria-label=\"title || undefined\"\n :aria-labelledby=\"!title ? titleId : undefined\"\n :aria-describedby=\"bodyId\"\n v-bind=\"$attrs\"\n :class=\"[ns.b(), direction, visible && 'open', customClass]\"\n :style=\"\n isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize\n \"\n role=\"dialog\"\n @click.stop\n >\n <span ref=\"focusStartRef\" :class=\"ns.e('sr-focus')\" tabindex=\"-1\" />\n <header v-if=\"withHeader\" :class=\"ns.e('header')\">\n <slot\n v-if=\"!$slots.title\"\n name=\"header\"\n :close=\"handleClose\"\n :title-id=\"titleId\"\n :title-class=\"ns.e('title')\"\n >\n <span\n v-if=\"!$slots.title\"\n :id=\"titleId\"\n role=\"heading\"\n :aria-level=\"headerAriaLevel\"\n :class=\"ns.e('title')\"\n >\n {{ title }}\n </span>\n </slot>\n <slot v-else name=\"title\">\n <!-- DEPRECATED SLOT -->\n </slot>\n <button\n v-if=\"showClose\"\n :aria-label=\"t('el.drawer.close')\"\n :class=\"ns.e('close-btn')\"\n type=\"button\"\n @click=\"handleClose\"\n >\n <el-icon :class=\"ns.e('close')\"><close /></el-icon>\n </button>\n </header>\n <template v-if=\"rendered\">\n <div :id=\"bodyId\" :class=\"ns.e('body')\">\n <slot />\n </div>\n </template>\n <div v-if=\"$slots.footer\" :class=\"ns.e('footer')\">\n <slot name=\"footer\" />\n </div>\n </div>\n </el-focus-trap>\n </el-overlay>\n </transition>\n </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\n\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { useDialog } from '@element-plus/components/dialog'\nimport { addUnit } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'\nimport { drawerEmits, drawerProps } from './drawer'\n\nexport default defineComponent({\n name: 'ElDrawer',\n components: {\n ElOverlay,\n ElFocusTrap,\n ElIcon,\n Close,\n },\n inheritAttrs: false,\n props: drawerProps,\n emits: drawerEmits,\n\n setup(props, { slots }) {\n useDeprecated(\n {\n scope: 'el-drawer',\n from: 'the title slot',\n replacement: 'the header slot',\n version: '3.0.0',\n ref: 'https://element-plus.org/en-US/component/drawer.html#slots',\n },\n computed(() => !!slots.title)\n )\n useDeprecated(\n {\n scope: 'el-drawer',\n from: 'custom-class',\n replacement: 'class',\n version: '2.3.0',\n ref: 'https://element-plus.org/en-US/component/drawer.html#attributes',\n type: 'Attribute',\n },\n computed(() => !!props.customClass)\n )\n\n const drawerRef = ref<HTMLElement>()\n const focusStartRef = ref<HTMLElement>()\n const ns = useNamespace('drawer')\n const { t } = useLocale()\n\n const isHorizontal = computed(\n () => props.direction === 'rtl' || props.direction === 'ltr'\n )\n const drawerSize = computed(() => addUnit(props.size))\n\n return {\n ...useDialog(props, drawerRef),\n drawerRef,\n focusStartRef,\n isHorizontal,\n drawerSize,\n ns,\n t,\n }\n },\n})\n</script>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_withDirectives","_createElementVNode","_mergeProps","_withModifiers","_normalizeClass","_openBlock","_createElementBlock","_renderSlot","_toDisplayString","_createCommentVNode"],"mappings":"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"}
@@ -115,7 +115,7 @@ export { useDialog } from './dialog/src/use-dialog.mjs';
115
115
  export { dialogEmits, dialogProps } from './dialog/src/dialog.mjs';
116
116
  export { dialogInjectionKey } from './dialog/src/constants.mjs';
117
117
  export { dividerProps } from './divider/src/divider.mjs';
118
- export { drawerEmits, drawerProps } from './drawer/src/drawer2.mjs';
118
+ export { drawerEmits, drawerProps } from './drawer/src/drawer.mjs';
119
119
  export { DROPDOWN_COLLECTION_INJECTION_KEY, DROPDOWN_COLLECTION_ITEM_INJECTION_KEY, ElCollection, ElCollectionItem, FIRST_KEYS, FIRST_LAST_KEYS, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps } from './dropdown/src/dropdown.mjs';
120
120
  export { DROPDOWN_INJECTION_KEY } from './dropdown/src/tokens.mjs';
121
121
  export { emptyProps } from './empty/src/empty.mjs';