@element-plus/nightly 0.0.20240112 → 0.0.20240114

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 (299) hide show
  1. package/README.md +0 -5
  2. package/dist/index.full.js +7 -8
  3. package/dist/index.full.min.js +14 -14
  4. package/dist/index.full.min.js.map +1 -1
  5. package/dist/index.full.min.mjs +14 -14
  6. package/dist/index.full.min.mjs.map +1 -1
  7. package/dist/index.full.mjs +7 -8
  8. package/dist/locale/af.js +1 -1
  9. package/dist/locale/af.min.js +1 -1
  10. package/dist/locale/af.min.mjs +1 -1
  11. package/dist/locale/af.mjs +1 -1
  12. package/dist/locale/ar-eg.js +1 -1
  13. package/dist/locale/ar-eg.min.js +1 -1
  14. package/dist/locale/ar-eg.min.mjs +1 -1
  15. package/dist/locale/ar-eg.mjs +1 -1
  16. package/dist/locale/ar.js +1 -1
  17. package/dist/locale/ar.min.js +1 -1
  18. package/dist/locale/ar.min.mjs +1 -1
  19. package/dist/locale/ar.mjs +1 -1
  20. package/dist/locale/az.js +1 -1
  21. package/dist/locale/az.min.js +1 -1
  22. package/dist/locale/az.min.mjs +1 -1
  23. package/dist/locale/az.mjs +1 -1
  24. package/dist/locale/bg.js +1 -1
  25. package/dist/locale/bg.min.js +1 -1
  26. package/dist/locale/bg.min.mjs +1 -1
  27. package/dist/locale/bg.mjs +1 -1
  28. package/dist/locale/bn.js +1 -1
  29. package/dist/locale/bn.min.js +1 -1
  30. package/dist/locale/bn.min.mjs +1 -1
  31. package/dist/locale/bn.mjs +1 -1
  32. package/dist/locale/ca.js +1 -1
  33. package/dist/locale/ca.min.js +1 -1
  34. package/dist/locale/ca.min.mjs +1 -1
  35. package/dist/locale/ca.mjs +1 -1
  36. package/dist/locale/ckb.js +1 -1
  37. package/dist/locale/ckb.min.js +1 -1
  38. package/dist/locale/ckb.min.mjs +1 -1
  39. package/dist/locale/ckb.mjs +1 -1
  40. package/dist/locale/cs.js +1 -1
  41. package/dist/locale/cs.min.js +1 -1
  42. package/dist/locale/cs.min.mjs +1 -1
  43. package/dist/locale/cs.mjs +1 -1
  44. package/dist/locale/da.js +1 -1
  45. package/dist/locale/da.min.js +1 -1
  46. package/dist/locale/da.min.mjs +1 -1
  47. package/dist/locale/da.mjs +1 -1
  48. package/dist/locale/de.js +1 -1
  49. package/dist/locale/de.min.js +1 -1
  50. package/dist/locale/de.min.mjs +1 -1
  51. package/dist/locale/de.mjs +1 -1
  52. package/dist/locale/el.js +1 -1
  53. package/dist/locale/el.min.js +1 -1
  54. package/dist/locale/el.min.mjs +1 -1
  55. package/dist/locale/el.mjs +1 -1
  56. package/dist/locale/en.js +1 -1
  57. package/dist/locale/en.min.js +1 -1
  58. package/dist/locale/en.min.mjs +1 -1
  59. package/dist/locale/en.mjs +1 -1
  60. package/dist/locale/eo.js +1 -1
  61. package/dist/locale/eo.min.js +1 -1
  62. package/dist/locale/eo.min.mjs +1 -1
  63. package/dist/locale/eo.mjs +1 -1
  64. package/dist/locale/es.js +1 -1
  65. package/dist/locale/es.min.js +1 -1
  66. package/dist/locale/es.min.mjs +1 -1
  67. package/dist/locale/es.mjs +1 -1
  68. package/dist/locale/et.js +1 -1
  69. package/dist/locale/et.min.js +1 -1
  70. package/dist/locale/et.min.mjs +1 -1
  71. package/dist/locale/et.mjs +1 -1
  72. package/dist/locale/eu.js +1 -1
  73. package/dist/locale/eu.min.js +1 -1
  74. package/dist/locale/eu.min.mjs +1 -1
  75. package/dist/locale/eu.mjs +1 -1
  76. package/dist/locale/fa.js +1 -1
  77. package/dist/locale/fa.min.js +1 -1
  78. package/dist/locale/fa.min.mjs +1 -1
  79. package/dist/locale/fa.mjs +1 -1
  80. package/dist/locale/fi.js +1 -1
  81. package/dist/locale/fi.min.js +1 -1
  82. package/dist/locale/fi.min.mjs +1 -1
  83. package/dist/locale/fi.mjs +1 -1
  84. package/dist/locale/fr.js +1 -1
  85. package/dist/locale/fr.min.js +1 -1
  86. package/dist/locale/fr.min.mjs +1 -1
  87. package/dist/locale/fr.mjs +1 -1
  88. package/dist/locale/he.js +1 -1
  89. package/dist/locale/he.min.js +1 -1
  90. package/dist/locale/he.min.mjs +1 -1
  91. package/dist/locale/he.mjs +1 -1
  92. package/dist/locale/hr.js +1 -1
  93. package/dist/locale/hr.min.js +1 -1
  94. package/dist/locale/hr.min.mjs +1 -1
  95. package/dist/locale/hr.mjs +1 -1
  96. package/dist/locale/hu.js +1 -1
  97. package/dist/locale/hu.min.js +1 -1
  98. package/dist/locale/hu.min.mjs +1 -1
  99. package/dist/locale/hu.mjs +1 -1
  100. package/dist/locale/hy-am.js +1 -1
  101. package/dist/locale/hy-am.min.js +1 -1
  102. package/dist/locale/hy-am.min.mjs +1 -1
  103. package/dist/locale/hy-am.mjs +1 -1
  104. package/dist/locale/id.js +1 -1
  105. package/dist/locale/id.min.js +1 -1
  106. package/dist/locale/id.min.mjs +1 -1
  107. package/dist/locale/id.mjs +1 -1
  108. package/dist/locale/it.js +1 -1
  109. package/dist/locale/it.min.js +1 -1
  110. package/dist/locale/it.min.mjs +1 -1
  111. package/dist/locale/it.mjs +1 -1
  112. package/dist/locale/ja.js +1 -1
  113. package/dist/locale/ja.min.js +1 -1
  114. package/dist/locale/ja.min.mjs +1 -1
  115. package/dist/locale/ja.mjs +1 -1
  116. package/dist/locale/kk.js +1 -1
  117. package/dist/locale/kk.min.js +1 -1
  118. package/dist/locale/kk.min.mjs +1 -1
  119. package/dist/locale/kk.mjs +1 -1
  120. package/dist/locale/km.js +1 -1
  121. package/dist/locale/km.min.js +1 -1
  122. package/dist/locale/km.min.mjs +1 -1
  123. package/dist/locale/km.mjs +1 -1
  124. package/dist/locale/ko.js +1 -1
  125. package/dist/locale/ko.min.js +1 -1
  126. package/dist/locale/ko.min.mjs +1 -1
  127. package/dist/locale/ko.mjs +1 -1
  128. package/dist/locale/ku.js +1 -1
  129. package/dist/locale/ku.min.js +1 -1
  130. package/dist/locale/ku.min.mjs +1 -1
  131. package/dist/locale/ku.mjs +1 -1
  132. package/dist/locale/ky.js +1 -1
  133. package/dist/locale/ky.min.js +1 -1
  134. package/dist/locale/ky.min.mjs +1 -1
  135. package/dist/locale/ky.mjs +1 -1
  136. package/dist/locale/lt.js +1 -1
  137. package/dist/locale/lt.min.js +1 -1
  138. package/dist/locale/lt.min.mjs +1 -1
  139. package/dist/locale/lt.mjs +1 -1
  140. package/dist/locale/lv.js +1 -1
  141. package/dist/locale/lv.min.js +1 -1
  142. package/dist/locale/lv.min.mjs +1 -1
  143. package/dist/locale/lv.mjs +1 -1
  144. package/dist/locale/mg.js +1 -1
  145. package/dist/locale/mg.min.js +1 -1
  146. package/dist/locale/mg.min.mjs +1 -1
  147. package/dist/locale/mg.mjs +1 -1
  148. package/dist/locale/mn.js +1 -1
  149. package/dist/locale/mn.min.js +1 -1
  150. package/dist/locale/mn.min.mjs +1 -1
  151. package/dist/locale/mn.mjs +1 -1
  152. package/dist/locale/nb-no.js +1 -1
  153. package/dist/locale/nb-no.min.js +1 -1
  154. package/dist/locale/nb-no.min.mjs +1 -1
  155. package/dist/locale/nb-no.mjs +1 -1
  156. package/dist/locale/nl.js +1 -1
  157. package/dist/locale/nl.min.js +1 -1
  158. package/dist/locale/nl.min.mjs +1 -1
  159. package/dist/locale/nl.mjs +1 -1
  160. package/dist/locale/pa.js +1 -1
  161. package/dist/locale/pa.min.js +1 -1
  162. package/dist/locale/pa.min.mjs +1 -1
  163. package/dist/locale/pa.mjs +1 -1
  164. package/dist/locale/pl.js +1 -1
  165. package/dist/locale/pl.min.js +1 -1
  166. package/dist/locale/pl.min.mjs +1 -1
  167. package/dist/locale/pl.mjs +1 -1
  168. package/dist/locale/pt-br.js +1 -1
  169. package/dist/locale/pt-br.min.js +1 -1
  170. package/dist/locale/pt-br.min.mjs +1 -1
  171. package/dist/locale/pt-br.mjs +1 -1
  172. package/dist/locale/pt.js +1 -1
  173. package/dist/locale/pt.min.js +1 -1
  174. package/dist/locale/pt.min.mjs +1 -1
  175. package/dist/locale/pt.mjs +1 -1
  176. package/dist/locale/ro.js +1 -1
  177. package/dist/locale/ro.min.js +1 -1
  178. package/dist/locale/ro.min.mjs +1 -1
  179. package/dist/locale/ro.mjs +1 -1
  180. package/dist/locale/ru.js +1 -1
  181. package/dist/locale/ru.min.js +1 -1
  182. package/dist/locale/ru.min.mjs +1 -1
  183. package/dist/locale/ru.mjs +1 -1
  184. package/dist/locale/sk.js +1 -1
  185. package/dist/locale/sk.min.js +1 -1
  186. package/dist/locale/sk.min.mjs +1 -1
  187. package/dist/locale/sk.mjs +1 -1
  188. package/dist/locale/sl.js +1 -1
  189. package/dist/locale/sl.min.js +1 -1
  190. package/dist/locale/sl.min.mjs +1 -1
  191. package/dist/locale/sl.mjs +1 -1
  192. package/dist/locale/sr.js +1 -1
  193. package/dist/locale/sr.min.js +1 -1
  194. package/dist/locale/sr.min.mjs +1 -1
  195. package/dist/locale/sr.mjs +1 -1
  196. package/dist/locale/sv.js +1 -1
  197. package/dist/locale/sv.min.js +1 -1
  198. package/dist/locale/sv.min.mjs +1 -1
  199. package/dist/locale/sv.mjs +1 -1
  200. package/dist/locale/sw.js +1 -1
  201. package/dist/locale/sw.min.js +1 -1
  202. package/dist/locale/sw.min.mjs +1 -1
  203. package/dist/locale/sw.mjs +1 -1
  204. package/dist/locale/ta.js +1 -1
  205. package/dist/locale/ta.min.js +1 -1
  206. package/dist/locale/ta.min.mjs +1 -1
  207. package/dist/locale/ta.mjs +1 -1
  208. package/dist/locale/th.js +1 -1
  209. package/dist/locale/th.min.js +1 -1
  210. package/dist/locale/th.min.mjs +1 -1
  211. package/dist/locale/th.mjs +1 -1
  212. package/dist/locale/tk.js +1 -1
  213. package/dist/locale/tk.min.js +1 -1
  214. package/dist/locale/tk.min.mjs +1 -1
  215. package/dist/locale/tk.mjs +1 -1
  216. package/dist/locale/tr.js +1 -1
  217. package/dist/locale/tr.min.js +1 -1
  218. package/dist/locale/tr.min.mjs +1 -1
  219. package/dist/locale/tr.mjs +1 -1
  220. package/dist/locale/ug-cn.js +1 -1
  221. package/dist/locale/ug-cn.min.js +1 -1
  222. package/dist/locale/ug-cn.min.mjs +1 -1
  223. package/dist/locale/ug-cn.mjs +1 -1
  224. package/dist/locale/uk.js +1 -1
  225. package/dist/locale/uk.min.js +1 -1
  226. package/dist/locale/uk.min.mjs +1 -1
  227. package/dist/locale/uk.mjs +1 -1
  228. package/dist/locale/uz-uz.js +1 -1
  229. package/dist/locale/uz-uz.min.js +1 -1
  230. package/dist/locale/uz-uz.min.mjs +1 -1
  231. package/dist/locale/uz-uz.mjs +1 -1
  232. package/dist/locale/vi.js +1 -1
  233. package/dist/locale/vi.min.js +1 -1
  234. package/dist/locale/vi.min.mjs +1 -1
  235. package/dist/locale/vi.mjs +1 -1
  236. package/dist/locale/zh-cn.js +1 -1
  237. package/dist/locale/zh-cn.min.js +1 -1
  238. package/dist/locale/zh-cn.min.mjs +1 -1
  239. package/dist/locale/zh-cn.mjs +1 -1
  240. package/dist/locale/zh-tw.js +1 -1
  241. package/dist/locale/zh-tw.min.js +1 -1
  242. package/dist/locale/zh-tw.min.mjs +1 -1
  243. package/dist/locale/zh-tw.mjs +1 -1
  244. package/es/components/image/index.d.ts +1 -1
  245. package/es/components/image/src/image.vue.d.ts +1 -1
  246. package/es/components/image-viewer/index.d.ts +1 -1
  247. package/es/components/image-viewer/src/image-viewer.vue.d.ts +1 -1
  248. package/es/components/image-viewer/src/image-viewer2.mjs +5 -7
  249. package/es/components/image-viewer/src/image-viewer2.mjs.map +1 -1
  250. package/es/components/index.mjs +3 -3
  251. package/es/components/progress/index.mjs +2 -2
  252. package/es/components/progress/src/progress.mjs +205 -59
  253. package/es/components/progress/src/progress.mjs.map +1 -1
  254. package/es/components/progress/src/progress2.mjs +59 -205
  255. package/es/components/progress/src/progress2.mjs.map +1 -1
  256. package/es/components/steps/index.mjs +2 -2
  257. package/es/components/steps/src/steps.mjs +39 -36
  258. package/es/components/steps/src/steps.mjs.map +1 -1
  259. package/es/components/steps/src/steps2.mjs +36 -39
  260. package/es/components/steps/src/steps2.mjs.map +1 -1
  261. package/es/components/upload/index.mjs +1 -1
  262. package/es/components/upload/src/upload-content.mjs +33 -194
  263. package/es/components/upload/src/upload-content.mjs.map +1 -1
  264. package/es/components/upload/src/upload-content2.mjs +194 -33
  265. package/es/components/upload/src/upload-content2.mjs.map +1 -1
  266. package/es/components/upload/src/upload2.mjs +1 -1
  267. package/es/index.mjs +3 -3
  268. package/es/version.d.ts +1 -1
  269. package/es/version.mjs +1 -1
  270. package/es/version.mjs.map +1 -1
  271. package/lib/components/image/index.d.ts +1 -1
  272. package/lib/components/image/src/image.vue.d.ts +1 -1
  273. package/lib/components/image-viewer/index.d.ts +1 -1
  274. package/lib/components/image-viewer/src/image-viewer.vue.d.ts +1 -1
  275. package/lib/components/image-viewer/src/image-viewer2.js +5 -7
  276. package/lib/components/image-viewer/src/image-viewer2.js.map +1 -1
  277. package/lib/components/index.js +3 -3
  278. package/lib/components/progress/index.js +2 -2
  279. package/lib/components/progress/src/progress.js +205 -59
  280. package/lib/components/progress/src/progress.js.map +1 -1
  281. package/lib/components/progress/src/progress2.js +59 -205
  282. package/lib/components/progress/src/progress2.js.map +1 -1
  283. package/lib/components/steps/index.js +2 -2
  284. package/lib/components/steps/src/steps.js +39 -37
  285. package/lib/components/steps/src/steps.js.map +1 -1
  286. package/lib/components/steps/src/steps2.js +37 -39
  287. package/lib/components/steps/src/steps2.js.map +1 -1
  288. package/lib/components/upload/index.js +1 -1
  289. package/lib/components/upload/src/upload-content.js +31 -192
  290. package/lib/components/upload/src/upload-content.js.map +1 -1
  291. package/lib/components/upload/src/upload-content2.js +192 -31
  292. package/lib/components/upload/src/upload-content2.js.map +1 -1
  293. package/lib/components/upload/src/upload2.js +1 -1
  294. package/lib/index.js +3 -3
  295. package/lib/version.d.ts +1 -1
  296. package/lib/version.js +1 -1
  297. package/lib/version.js.map +1 -1
  298. package/package.json +2 -2
  299. package/web-types.json +1 -1
@@ -15,7 +15,6 @@ var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper
15
15
  var index = require('../../../hooks/use-locale/index.js');
16
16
  var index$1 = require('../../../hooks/use-namespace/index.js');
17
17
  var index$2 = require('../../../hooks/use-z-index/index.js');
18
- var types = require('../../../utils/types.js');
19
18
  var aria = require('../../../constants/aria.js');
20
19
  var objects = require('../../../utils/objects.js');
21
20
 
@@ -28,6 +27,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
28
27
  props: imageViewer.imageViewerProps,
29
28
  emits: imageViewer.imageViewerEmits,
30
29
  setup(__props, { expose, emit }) {
30
+ var _a;
31
31
  const props = __props;
32
32
  const modes = {
33
33
  CONTAIN: {
@@ -56,6 +56,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
56
56
  offsetY: 0,
57
57
  enableTransition: false
58
58
  });
59
+ const zIndex = vue.ref((_a = props.zIndex) != null ? _a : nextZIndex());
59
60
  const isSingle = vue.computed(() => {
60
61
  const { urlList } = props;
61
62
  return urlList.length <= 1;
@@ -109,9 +110,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
109
110
  }
110
111
  return style;
111
112
  });
112
- const computedZIndex = vue.computed(() => {
113
- return types.isNumber(props.zIndex) ? props.zIndex : nextZIndex();
114
- });
115
113
  function hide() {
116
114
  unregisterEventListener();
117
115
  emit("close");
@@ -260,9 +258,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
260
258
  emit("switch", val);
261
259
  });
262
260
  vue.onMounted(() => {
263
- var _a, _b;
261
+ var _a2, _b;
264
262
  registerEventListener();
265
- (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
263
+ (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
266
264
  });
267
265
  expose({
268
266
  setActiveItem
@@ -282,7 +280,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
282
280
  ref: wrapper,
283
281
  tabindex: -1,
284
282
  class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
285
- style: vue.normalizeStyle({ zIndex: vue.unref(computedZIndex) })
283
+ style: vue.normalizeStyle({ zIndex: zIndex.value })
286
284
  }, [
287
285
  vue.createElementVNode("div", {
288
286
  class: vue.normalizeClass(vue.unref(ns).e("mask")),
@@ -1 +1 @@
1
- {"version":3,"file":"image-viewer2.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n <teleport to=\"body\" :disabled=\"!teleported\">\n <transition name=\"viewer-fade\" appear>\n <div\n ref=\"wrapper\"\n :tabindex=\"-1\"\n :class=\"ns.e('wrapper')\"\n :style=\"{ zIndex: computedZIndex }\"\n >\n <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n <!-- CLOSE -->\n <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n <el-icon><Close /></el-icon>\n </span>\n\n <!-- ARROW -->\n <template v-if=\"!isSingle\">\n <span :class=\"arrowPrevKls\" @click=\"prev\">\n <el-icon><ArrowLeft /></el-icon>\n </span>\n <span :class=\"arrowNextKls\" @click=\"next\">\n <el-icon><ArrowRight /></el-icon>\n </span>\n </template>\n <!-- ACTIONS -->\n <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n <div :class=\"ns.e('actions__inner')\">\n <el-icon @click=\"handleActions('zoomOut')\">\n <ZoomOut />\n </el-icon>\n <el-icon @click=\"handleActions('zoomIn')\">\n <ZoomIn />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"toggleMode\">\n <component :is=\"mode.icon\" />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"handleActions('anticlockwise')\">\n <RefreshLeft />\n </el-icon>\n <el-icon @click=\"handleActions('clockwise')\">\n <RefreshRight />\n </el-icon>\n </div>\n </div>\n <!-- CANVAS -->\n <div :class=\"ns.e('canvas')\">\n <img\n v-for=\"(url, i) in urlList\"\n v-show=\"i === activeIndex\"\n :ref=\"(el) => (imgRefs[i] = el as HTMLImageElement)\"\n :key=\"url\"\n :src=\"url\"\n :style=\"imgStyle\"\n :class=\"ns.e('img')\"\n :crossorigin=\"crossorigin\"\n @load=\"handleImgLoad\"\n @error=\"handleImgError\"\n @mousedown=\"handleMouseDown\"\n />\n </div>\n <slot />\n </div>\n </transition>\n </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n effectScope,\n markRaw,\n nextTick,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { isNumber, keysOf } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n ArrowLeft,\n ArrowRight,\n Close,\n FullScreen,\n RefreshLeft,\n RefreshRight,\n ScaleToOriginal,\n ZoomIn,\n ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n CONTAIN: {\n name: 'contain',\n icon: markRaw(FullScreen),\n },\n ORIGINAL: {\n name: 'original',\n icon: markRaw(ScaleToOriginal),\n },\n}\n\ndefineOptions({\n name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<HTMLImageElement[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst crossorigin = ref<string>(props.crossorigin)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n})\n\nconst isSingle = computed(() => {\n const { urlList } = props\n return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n return activeIndex.value === 0\n})\n\nconst isLast = computed(() => {\n return activeIndex.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n return props.urlList[activeIndex.value]\n})\n\nconst arrowPrevKls = computed(() => [\n ns.e('btn'),\n ns.e('prev'),\n ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n ns.e('btn'),\n ns.e('next'),\n ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n let translateX = offsetX / scale\n let translateY = offsetY / scale\n\n switch (deg % 360) {\n case 90:\n case -270:\n ;[translateX, translateY] = [translateY, -translateX]\n break\n case 180:\n case -180:\n ;[translateX, translateY] = [-translateX, -translateY]\n break\n case 270:\n case -90:\n ;[translateX, translateY] = [-translateY, translateX]\n break\n }\n\n const style: CSSProperties = {\n transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n transition: enableTransition ? 'transform .3s' : '',\n }\n if (mode.value.name === modes.CONTAIN.name) {\n style.maxWidth = style.maxHeight = '100%'\n }\n return style\n})\n\nconst computedZIndex = computed(() => {\n return isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n})\n\nfunction hide() {\n unregisterEventListener()\n emit('close')\n}\n\nfunction registerEventListener() {\n const keydownHandler = throttle((e: KeyboardEvent) => {\n switch (e.code) {\n // ESC\n case EVENT_CODE.esc:\n props.closeOnPressEscape && hide()\n break\n // SPACE\n case EVENT_CODE.space:\n toggleMode()\n break\n // LEFT_ARROW\n case EVENT_CODE.left:\n prev()\n break\n // UP_ARROW\n case EVENT_CODE.up:\n handleActions('zoomIn')\n break\n // RIGHT_ARROW\n case EVENT_CODE.right:\n next()\n break\n // DOWN_ARROW\n case EVENT_CODE.down:\n handleActions('zoomOut')\n break\n }\n })\n const mousewheelHandler = throttle((e: WheelEvent) => {\n const delta = e.deltaY || e.deltaX\n handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n zoomRate: props.zoomRate,\n enableTransition: false,\n })\n })\n\n scopeEventListener.run(() => {\n useEventListener(document, 'keydown', keydownHandler)\n useEventListener(document, 'wheel', mousewheelHandler)\n })\n}\n\nfunction unregisterEventListener() {\n scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n loading.value = false\n ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction handleMouseDown(e: MouseEvent) {\n if (loading.value || e.button !== 0 || !wrapper.value) return\n transform.value.enableTransition = false\n\n const { offsetX, offsetY } = transform.value\n const startX = e.pageX\n const startY = e.pageY\n\n const dragHandler = throttle((ev: MouseEvent) => {\n transform.value = {\n ...transform.value,\n offsetX: offsetX + ev.pageX - startX,\n offsetY: offsetY + ev.pageY - startY,\n }\n })\n const removeMousemove = useEventListener(document, 'mousemove', dragHandler)\n useEventListener(document, 'mouseup', () => {\n removeMousemove()\n })\n\n e.preventDefault()\n}\n\nfunction reset() {\n transform.value = {\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n }\n}\n\nfunction toggleMode() {\n if (loading.value) return\n\n const modeNames = keysOf(modes)\n const modeValues = Object.values(modes)\n const currentMode = mode.value.name\n const index = modeValues.findIndex((i) => i.name === currentMode)\n const nextIndex = (index + 1) % modeNames.length\n mode.value = modes[modeNames[nextIndex]]\n reset()\n}\n\nfunction setActiveItem(index: number) {\n const len = props.urlList.length\n activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n if (isFirst.value && !props.infinite) return\n setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n if (isLast.value && !props.infinite) return\n setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n if (loading.value) return\n const { minScale, maxScale } = props\n const { zoomRate, rotateDeg, enableTransition } = {\n zoomRate: props.zoomRate,\n rotateDeg: 90,\n enableTransition: true,\n ...options,\n }\n switch (action) {\n case 'zoomOut':\n if (transform.value.scale > minScale) {\n transform.value.scale = Number.parseFloat(\n (transform.value.scale / zoomRate).toFixed(3)\n )\n }\n break\n case 'zoomIn':\n if (transform.value.scale < maxScale) {\n transform.value.scale = Number.parseFloat(\n (transform.value.scale * zoomRate).toFixed(3)\n )\n }\n break\n case 'clockwise':\n transform.value.deg += rotateDeg\n emit('rotate', transform.value.deg)\n break\n case 'anticlockwise':\n transform.value.deg -= rotateDeg\n emit('rotate', transform.value.deg)\n break\n }\n transform.value.enableTransition = enableTransition\n}\n\nwatch(currentImg, () => {\n nextTick(() => {\n const $img = imgRefs.value[0]\n if (!$img?.complete) {\n loading.value = true\n }\n })\n})\n\nwatch(activeIndex, (val) => {\n reset()\n emit('switch', val)\n})\n\nonMounted(() => {\n registerEventListener()\n // add tabindex then wrapper can be focusable via Javascript\n // focus wrapper so arrow key can't cause inner scroll behavior underneath\n wrapper.value?.focus?.()\n})\n\ndefineExpose({\n /**\n * @description manually switch image\n */\n setActiveItem,\n})\n</script>\n"],"names":["markRaw","FullScreen","ScaleToOriginal","useLocale","useNamespace","useZIndex","ref","effectScope","shallowRef","computed","isNumber","throttle","EVENT_CODE","useEventListener","keysOf","watch","nextTick","onMounted"],"mappings":"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"}
1
+ {"version":3,"file":"image-viewer2.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n <teleport to=\"body\" :disabled=\"!teleported\">\n <transition name=\"viewer-fade\" appear>\n <div\n ref=\"wrapper\"\n :tabindex=\"-1\"\n :class=\"ns.e('wrapper')\"\n :style=\"{ zIndex }\"\n >\n <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n <!-- CLOSE -->\n <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n <el-icon><Close /></el-icon>\n </span>\n\n <!-- ARROW -->\n <template v-if=\"!isSingle\">\n <span :class=\"arrowPrevKls\" @click=\"prev\">\n <el-icon><ArrowLeft /></el-icon>\n </span>\n <span :class=\"arrowNextKls\" @click=\"next\">\n <el-icon><ArrowRight /></el-icon>\n </span>\n </template>\n <!-- ACTIONS -->\n <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n <div :class=\"ns.e('actions__inner')\">\n <el-icon @click=\"handleActions('zoomOut')\">\n <ZoomOut />\n </el-icon>\n <el-icon @click=\"handleActions('zoomIn')\">\n <ZoomIn />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"toggleMode\">\n <component :is=\"mode.icon\" />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"handleActions('anticlockwise')\">\n <RefreshLeft />\n </el-icon>\n <el-icon @click=\"handleActions('clockwise')\">\n <RefreshRight />\n </el-icon>\n </div>\n </div>\n <!-- CANVAS -->\n <div :class=\"ns.e('canvas')\">\n <img\n v-for=\"(url, i) in urlList\"\n v-show=\"i === activeIndex\"\n :ref=\"(el) => (imgRefs[i] = el as HTMLImageElement)\"\n :key=\"url\"\n :src=\"url\"\n :style=\"imgStyle\"\n :class=\"ns.e('img')\"\n :crossorigin=\"crossorigin\"\n @load=\"handleImgLoad\"\n @error=\"handleImgError\"\n @mousedown=\"handleMouseDown\"\n />\n </div>\n <slot />\n </div>\n </transition>\n </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n effectScope,\n markRaw,\n nextTick,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { keysOf } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n ArrowLeft,\n ArrowRight,\n Close,\n FullScreen,\n RefreshLeft,\n RefreshRight,\n ScaleToOriginal,\n ZoomIn,\n ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n CONTAIN: {\n name: 'contain',\n icon: markRaw(FullScreen),\n },\n ORIGINAL: {\n name: 'original',\n icon: markRaw(ScaleToOriginal),\n },\n}\n\ndefineOptions({\n name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<HTMLImageElement[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst crossorigin = ref<string>(props.crossorigin)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nconst isSingle = computed(() => {\n const { urlList } = props\n return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n return activeIndex.value === 0\n})\n\nconst isLast = computed(() => {\n return activeIndex.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n return props.urlList[activeIndex.value]\n})\n\nconst arrowPrevKls = computed(() => [\n ns.e('btn'),\n ns.e('prev'),\n ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n ns.e('btn'),\n ns.e('next'),\n ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n let translateX = offsetX / scale\n let translateY = offsetY / scale\n\n switch (deg % 360) {\n case 90:\n case -270:\n ;[translateX, translateY] = [translateY, -translateX]\n break\n case 180:\n case -180:\n ;[translateX, translateY] = [-translateX, -translateY]\n break\n case 270:\n case -90:\n ;[translateX, translateY] = [-translateY, translateX]\n break\n }\n\n const style: CSSProperties = {\n transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n transition: enableTransition ? 'transform .3s' : '',\n }\n if (mode.value.name === modes.CONTAIN.name) {\n style.maxWidth = style.maxHeight = '100%'\n }\n return style\n})\n\nfunction hide() {\n unregisterEventListener()\n emit('close')\n}\n\nfunction registerEventListener() {\n const keydownHandler = throttle((e: KeyboardEvent) => {\n switch (e.code) {\n // ESC\n case EVENT_CODE.esc:\n props.closeOnPressEscape && hide()\n break\n // SPACE\n case EVENT_CODE.space:\n toggleMode()\n break\n // LEFT_ARROW\n case EVENT_CODE.left:\n prev()\n break\n // UP_ARROW\n case EVENT_CODE.up:\n handleActions('zoomIn')\n break\n // RIGHT_ARROW\n case EVENT_CODE.right:\n next()\n break\n // DOWN_ARROW\n case EVENT_CODE.down:\n handleActions('zoomOut')\n break\n }\n })\n const mousewheelHandler = throttle((e: WheelEvent) => {\n const delta = e.deltaY || e.deltaX\n handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n zoomRate: props.zoomRate,\n enableTransition: false,\n })\n })\n\n scopeEventListener.run(() => {\n useEventListener(document, 'keydown', keydownHandler)\n useEventListener(document, 'wheel', mousewheelHandler)\n })\n}\n\nfunction unregisterEventListener() {\n scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n loading.value = false\n ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction handleMouseDown(e: MouseEvent) {\n if (loading.value || e.button !== 0 || !wrapper.value) return\n transform.value.enableTransition = false\n\n const { offsetX, offsetY } = transform.value\n const startX = e.pageX\n const startY = e.pageY\n\n const dragHandler = throttle((ev: MouseEvent) => {\n transform.value = {\n ...transform.value,\n offsetX: offsetX + ev.pageX - startX,\n offsetY: offsetY + ev.pageY - startY,\n }\n })\n const removeMousemove = useEventListener(document, 'mousemove', dragHandler)\n useEventListener(document, 'mouseup', () => {\n removeMousemove()\n })\n\n e.preventDefault()\n}\n\nfunction reset() {\n transform.value = {\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n }\n}\n\nfunction toggleMode() {\n if (loading.value) return\n\n const modeNames = keysOf(modes)\n const modeValues = Object.values(modes)\n const currentMode = mode.value.name\n const index = modeValues.findIndex((i) => i.name === currentMode)\n const nextIndex = (index + 1) % modeNames.length\n mode.value = modes[modeNames[nextIndex]]\n reset()\n}\n\nfunction setActiveItem(index: number) {\n const len = props.urlList.length\n activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n if (isFirst.value && !props.infinite) return\n setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n if (isLast.value && !props.infinite) return\n setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n if (loading.value) return\n const { minScale, maxScale } = props\n const { zoomRate, rotateDeg, enableTransition } = {\n zoomRate: props.zoomRate,\n rotateDeg: 90,\n enableTransition: true,\n ...options,\n }\n switch (action) {\n case 'zoomOut':\n if (transform.value.scale > minScale) {\n transform.value.scale = Number.parseFloat(\n (transform.value.scale / zoomRate).toFixed(3)\n )\n }\n break\n case 'zoomIn':\n if (transform.value.scale < maxScale) {\n transform.value.scale = Number.parseFloat(\n (transform.value.scale * zoomRate).toFixed(3)\n )\n }\n break\n case 'clockwise':\n transform.value.deg += rotateDeg\n emit('rotate', transform.value.deg)\n break\n case 'anticlockwise':\n transform.value.deg -= rotateDeg\n emit('rotate', transform.value.deg)\n break\n }\n transform.value.enableTransition = enableTransition\n}\n\nwatch(currentImg, () => {\n nextTick(() => {\n const $img = imgRefs.value[0]\n if (!$img?.complete) {\n loading.value = true\n }\n })\n})\n\nwatch(activeIndex, (val) => {\n reset()\n emit('switch', val)\n})\n\nonMounted(() => {\n registerEventListener()\n // add tabindex then wrapper can be focusable via Javascript\n // focus wrapper so arrow key can't cause inner scroll behavior underneath\n wrapper.value?.focus?.()\n})\n\ndefineExpose({\n /**\n * @description manually switch image\n */\n setActiveItem,\n})\n</script>\n"],"names":["markRaw","FullScreen","ScaleToOriginal","useZIndex","ref","effectScope","computed","throttle","EVENT_CODE","useEventListener","keysOf","watch","nextTick","onMounted"],"mappings":"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"}
@@ -153,7 +153,7 @@ var constants$a = require('./popper/src/constants.js');
153
153
  var arrow = require('./popper/src/arrow2.js');
154
154
  var trigger = require('./popper/src/trigger2.js');
155
155
  var content = require('./popper/src/content2.js');
156
- var progress = require('./progress/src/progress.js');
156
+ var progress = require('./progress/src/progress2.js');
157
157
  var radio = require('./radio/src/radio.js');
158
158
  var radioGroup = require('./radio/src/radio-group.js');
159
159
  var radioButton = require('./radio/src/radio-button.js');
@@ -176,7 +176,7 @@ var space = require('./space/src/space.js');
176
176
  var useSpace = require('./space/src/use-space.js');
177
177
  var statistic = require('./statistic/src/statistic.js');
178
178
  var item = require('./steps/src/item.js');
179
- var steps = require('./steps/src/steps.js');
179
+ var steps = require('./steps/src/steps2.js');
180
180
  var _switch = require('./switch/src/switch.js');
181
181
  var constants$f = require('./table-v2/src/constants.js');
182
182
  var tableV2 = require('./table-v2/src/table-v2.js');
@@ -203,7 +203,7 @@ var content$2 = require('./tooltip/src/content.js');
203
203
  var constants$i = require('./tooltip/src/constants.js');
204
204
  var transfer = require('./transfer/src/transfer.js');
205
205
  var upload = require('./upload/src/upload.js');
206
- var uploadContent = require('./upload/src/upload-content2.js');
206
+ var uploadContent = require('./upload/src/upload-content.js');
207
207
  var uploadList = require('./upload/src/upload-list.js');
208
208
  var uploadDragger = require('./upload/src/upload-dragger.js');
209
209
  var constants$j = require('./upload/src/constants.js');
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  require('../../utils/index.js');
6
- var progress$1 = require('./src/progress2.js');
7
- var progress = require('./src/progress.js');
6
+ var progress$1 = require('./src/progress.js');
7
+ var progress = require('./src/progress2.js');
8
8
  var install = require('../../utils/vue/install.js');
9
9
 
10
10
  const ElProgress = install.withInstall(progress$1["default"]);
@@ -2,68 +2,214 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var vue = require('vue');
6
+ var index$1 = require('../../icon/index.js');
7
+ var iconsVue = require('@element-plus/icons-vue');
8
+ require('../../../hooks/index.js');
5
9
  require('../../../utils/index.js');
6
- var runtime = require('../../../utils/vue/props/runtime.js');
10
+ var progress = require('./progress2.js');
11
+ var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
12
+ var index = require('../../../hooks/use-namespace/index.js');
13
+ var shared = require('@vue/shared');
7
14
 
8
- const progressProps = runtime.buildProps({
9
- type: {
10
- type: String,
11
- default: "line",
12
- values: ["line", "circle", "dashboard"]
13
- },
14
- percentage: {
15
- type: Number,
16
- default: 0,
17
- validator: (val) => val >= 0 && val <= 100
18
- },
19
- status: {
20
- type: String,
21
- default: "",
22
- values: ["", "success", "exception", "warning"]
23
- },
24
- indeterminate: {
25
- type: Boolean,
26
- default: false
27
- },
28
- duration: {
29
- type: Number,
30
- default: 3
31
- },
32
- strokeWidth: {
33
- type: Number,
34
- default: 6
35
- },
36
- strokeLinecap: {
37
- type: runtime.definePropType(String),
38
- default: "round"
39
- },
40
- textInside: {
41
- type: Boolean,
42
- default: false
43
- },
44
- width: {
45
- type: Number,
46
- default: 126
47
- },
48
- showText: {
49
- type: Boolean,
50
- default: true
51
- },
52
- color: {
53
- type: runtime.definePropType([
54
- String,
55
- Array,
56
- Function
57
- ]),
58
- default: ""
59
- },
60
- striped: Boolean,
61
- stripedFlow: Boolean,
62
- format: {
63
- type: runtime.definePropType(Function),
64
- default: (percentage) => `${percentage}%`
15
+ const _hoisted_1 = ["aria-valuenow"];
16
+ const _hoisted_2 = { viewBox: "0 0 100 100" };
17
+ const _hoisted_3 = ["d", "stroke", "stroke-linecap", "stroke-width"];
18
+ const _hoisted_4 = ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"];
19
+ const _hoisted_5 = { key: 0 };
20
+ const __default__ = vue.defineComponent({
21
+ name: "ElProgress"
22
+ });
23
+ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
24
+ ...__default__,
25
+ props: progress.progressProps,
26
+ setup(__props) {
27
+ const props = __props;
28
+ const STATUS_COLOR_MAP = {
29
+ success: "#13ce66",
30
+ exception: "#ff4949",
31
+ warning: "#e6a23c",
32
+ default: "#20a0ff"
33
+ };
34
+ const ns = index.useNamespace("progress");
35
+ const barStyle = vue.computed(() => ({
36
+ width: `${props.percentage}%`,
37
+ animationDuration: `${props.duration}s`,
38
+ backgroundColor: getCurrentColor(props.percentage)
39
+ }));
40
+ const relativeStrokeWidth = vue.computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
41
+ const radius = vue.computed(() => {
42
+ if (["circle", "dashboard"].includes(props.type)) {
43
+ return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);
44
+ }
45
+ return 0;
46
+ });
47
+ const trackPath = vue.computed(() => {
48
+ const r = radius.value;
49
+ const isDashboard = props.type === "dashboard";
50
+ return `
51
+ M 50 50
52
+ m 0 ${isDashboard ? "" : "-"}${r}
53
+ a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2}
54
+ a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
55
+ `;
56
+ });
57
+ const perimeter = vue.computed(() => 2 * Math.PI * radius.value);
58
+ const rate = vue.computed(() => props.type === "dashboard" ? 0.75 : 1);
59
+ const strokeDashoffset = vue.computed(() => {
60
+ const offset = -1 * perimeter.value * (1 - rate.value) / 2;
61
+ return `${offset}px`;
62
+ });
63
+ const trailPathStyle = vue.computed(() => ({
64
+ strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
65
+ strokeDashoffset: strokeDashoffset.value
66
+ }));
67
+ const circlePathStyle = vue.computed(() => ({
68
+ strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
69
+ strokeDashoffset: strokeDashoffset.value,
70
+ transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s"
71
+ }));
72
+ const stroke = vue.computed(() => {
73
+ let ret;
74
+ if (props.color) {
75
+ ret = getCurrentColor(props.percentage);
76
+ } else {
77
+ ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default;
78
+ }
79
+ return ret;
80
+ });
81
+ const statusIcon = vue.computed(() => {
82
+ if (props.status === "warning") {
83
+ return iconsVue.WarningFilled;
84
+ }
85
+ if (props.type === "line") {
86
+ return props.status === "success" ? iconsVue.CircleCheck : iconsVue.CircleClose;
87
+ } else {
88
+ return props.status === "success" ? iconsVue.Check : iconsVue.Close;
89
+ }
90
+ });
91
+ const progressTextSize = vue.computed(() => {
92
+ return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
93
+ });
94
+ const content = vue.computed(() => props.format(props.percentage));
95
+ function getColors(color) {
96
+ const span = 100 / color.length;
97
+ const seriesColors = color.map((seriesColor, index) => {
98
+ if (shared.isString(seriesColor)) {
99
+ return {
100
+ color: seriesColor,
101
+ percentage: (index + 1) * span
102
+ };
103
+ }
104
+ return seriesColor;
105
+ });
106
+ return seriesColors.sort((a, b) => a.percentage - b.percentage);
107
+ }
108
+ const getCurrentColor = (percentage) => {
109
+ var _a;
110
+ const { color } = props;
111
+ if (shared.isFunction(color)) {
112
+ return color(percentage);
113
+ } else if (shared.isString(color)) {
114
+ return color;
115
+ } else {
116
+ const colors = getColors(color);
117
+ for (const color2 of colors) {
118
+ if (color2.percentage > percentage)
119
+ return color2.color;
120
+ }
121
+ return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;
122
+ }
123
+ };
124
+ return (_ctx, _cache) => {
125
+ return vue.openBlock(), vue.createElementBlock("div", {
126
+ class: vue.normalizeClass([
127
+ vue.unref(ns).b(),
128
+ vue.unref(ns).m(_ctx.type),
129
+ vue.unref(ns).is(_ctx.status),
130
+ {
131
+ [vue.unref(ns).m("without-text")]: !_ctx.showText,
132
+ [vue.unref(ns).m("text-inside")]: _ctx.textInside
133
+ }
134
+ ]),
135
+ role: "progressbar",
136
+ "aria-valuenow": _ctx.percentage,
137
+ "aria-valuemin": "0",
138
+ "aria-valuemax": "100"
139
+ }, [
140
+ _ctx.type === "line" ? (vue.openBlock(), vue.createElementBlock("div", {
141
+ key: 0,
142
+ class: vue.normalizeClass(vue.unref(ns).b("bar"))
143
+ }, [
144
+ vue.createElementVNode("div", {
145
+ class: vue.normalizeClass(vue.unref(ns).be("bar", "outer")),
146
+ style: vue.normalizeStyle({ height: `${_ctx.strokeWidth}px` })
147
+ }, [
148
+ vue.createElementVNode("div", {
149
+ class: vue.normalizeClass([
150
+ vue.unref(ns).be("bar", "inner"),
151
+ { [vue.unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate },
152
+ { [vue.unref(ns).bem("bar", "inner", "striped")]: _ctx.striped },
153
+ { [vue.unref(ns).bem("bar", "inner", "striped-flow")]: _ctx.stripedFlow }
154
+ ]),
155
+ style: vue.normalizeStyle(vue.unref(barStyle))
156
+ }, [
157
+ (_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", {
158
+ key: 0,
159
+ class: vue.normalizeClass(vue.unref(ns).be("bar", "innerText"))
160
+ }, [
161
+ vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
162
+ vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(content)), 1)
163
+ ])
164
+ ], 2)) : vue.createCommentVNode("v-if", true)
165
+ ], 6)
166
+ ], 6)
167
+ ], 2)) : (vue.openBlock(), vue.createElementBlock("div", {
168
+ key: 1,
169
+ class: vue.normalizeClass(vue.unref(ns).b("circle")),
170
+ style: vue.normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
171
+ }, [
172
+ (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
173
+ vue.createElementVNode("path", {
174
+ class: vue.normalizeClass(vue.unref(ns).be("circle", "track")),
175
+ d: vue.unref(trackPath),
176
+ stroke: `var(${vue.unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`,
177
+ "stroke-linecap": _ctx.strokeLinecap,
178
+ "stroke-width": vue.unref(relativeStrokeWidth),
179
+ fill: "none",
180
+ style: vue.normalizeStyle(vue.unref(trailPathStyle))
181
+ }, null, 14, _hoisted_3),
182
+ vue.createElementVNode("path", {
183
+ class: vue.normalizeClass(vue.unref(ns).be("circle", "path")),
184
+ d: vue.unref(trackPath),
185
+ stroke: vue.unref(stroke),
186
+ fill: "none",
187
+ opacity: _ctx.percentage ? 1 : 0,
188
+ "stroke-linecap": _ctx.strokeLinecap,
189
+ "stroke-width": vue.unref(relativeStrokeWidth),
190
+ style: vue.normalizeStyle(vue.unref(circlePathStyle))
191
+ }, null, 14, _hoisted_4)
192
+ ]))
193
+ ], 6)),
194
+ (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", {
195
+ key: 2,
196
+ class: vue.normalizeClass(vue.unref(ns).e("text")),
197
+ style: vue.normalizeStyle({ fontSize: `${vue.unref(progressTextSize)}px` })
198
+ }, [
199
+ vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
200
+ !_ctx.status ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(vue.unref(content)), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 1 }, {
201
+ default: vue.withCtx(() => [
202
+ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(statusIcon))))
203
+ ]),
204
+ _: 1
205
+ }))
206
+ ])
207
+ ], 6)) : vue.createCommentVNode("v-if", true)
208
+ ], 10, _hoisted_1);
209
+ };
65
210
  }
66
211
  });
212
+ var Progress = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "progress.vue"]]);
67
213
 
68
- exports.progressProps = progressProps;
214
+ exports["default"] = Progress;
69
215
  //# sourceMappingURL=progress.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"progress.js","sources":["../../../../../../packages/components/progress/src/progress.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { ExtractPropTypes, SVGAttributes } from 'vue'\nimport type Progress from './progress.vue'\n\nexport type ProgressColor = { color: string; percentage: number }\nexport type ProgressFn = (percentage: number) => string\n\nexport const progressProps = buildProps({\n /**\n * @description type of progress bar\n */\n type: {\n type: String,\n default: 'line',\n values: ['line', 'circle', 'dashboard'],\n },\n /**\n * @description percentage, required\n */\n percentage: {\n type: Number,\n default: 0,\n validator: (val: number): boolean => val >= 0 && val <= 100,\n },\n /**\n * @description the current status of progress bar\n */\n status: {\n type: String,\n default: '',\n values: ['', 'success', 'exception', 'warning'],\n },\n /**\n * @description set indeterminate progress\n */\n indeterminate: {\n type: Boolean,\n default: false,\n },\n /**\n * @description control the animation duration of indeterminate progress or striped flow progress\n */\n duration: {\n type: Number,\n default: 3,\n },\n /**\n * @description the width of progress bar\n */\n strokeWidth: {\n type: Number,\n default: 6,\n },\n /**\n * @description butt/circle/dashboard type shape at the end path\n */\n strokeLinecap: {\n type: definePropType<NonNullable<SVGAttributes['stroke-linecap']>>(String),\n default: 'round',\n },\n /**\n * @description whether to place the percentage inside progress bar, only works when `type` is 'line'\n */\n textInside: {\n type: Boolean,\n default: false,\n },\n /**\n * @description the canvas width of circle progress bar\n */\n width: {\n type: Number,\n default: 126,\n },\n /**\n * @description whether to show percentage\n */\n showText: {\n type: Boolean,\n default: true,\n },\n /**\n * @description background color of progress bar. Overrides `status` prop\n */\n color: {\n type: definePropType<string | ProgressColor[] | ProgressFn>([\n String,\n Array,\n Function,\n ]),\n default: '',\n },\n /**\n * @description stripe over the progress bar's color\n */\n striped: Boolean,\n /**\n * @description get the stripes to flow\n */\n stripedFlow: Boolean,\n /**\n * @description custom text format\n */\n format: {\n type: definePropType<ProgressFn>(Function),\n default: (percentage: number): string => `${percentage}%`,\n },\n} as const)\n\nexport type ProgressProps = ExtractPropTypes<typeof progressProps>\nexport type ProgressInstance = InstanceType<typeof Progress>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,aAAa,GAAGA,kBAAU,CAAC;AACxC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC;AAC3C,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,SAAS,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG;AAC9C,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC;AACnD,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAEC,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAEA,sBAAc,CAAC;AACzB,MAAM,MAAM;AACZ,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,KAAK,CAAC;AACN,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,OAAO,EAAE,CAAC,UAAU,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;AAC7C,GAAG;AACH,CAAC;;;;"}
1
+ {"version":3,"file":"progress.js","sources":["../../../../../../packages/components/progress/src/progress.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n ns.b(),\n ns.m(type),\n ns.is(status),\n {\n [ns.m('without-text')]: !showText,\n [ns.m('text-inside')]: textInside,\n },\n ]\"\n role=\"progressbar\"\n :aria-valuenow=\"percentage\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <div v-if=\"type === 'line'\" :class=\"ns.b('bar')\">\n <div\n :class=\"ns.be('bar', 'outer')\"\n :style=\"{ height: `${strokeWidth}px` }\"\n >\n <div\n :class=\"[\n ns.be('bar', 'inner'),\n { [ns.bem('bar', 'inner', 'indeterminate')]: indeterminate },\n { [ns.bem('bar', 'inner', 'striped')]: striped },\n { [ns.bem('bar', 'inner', 'striped-flow')]: stripedFlow },\n ]\"\n :style=\"barStyle\"\n >\n <div\n v-if=\"(showText || $slots.default) && textInside\"\n :class=\"ns.be('bar', 'innerText')\"\n >\n <slot :percentage=\"percentage\">\n <span>{{ content }}</span>\n </slot>\n </div>\n </div>\n </div>\n </div>\n <div\n v-else\n :class=\"ns.b('circle')\"\n :style=\"{ height: `${width}px`, width: `${width}px` }\"\n >\n <svg viewBox=\"0 0 100 100\">\n <path\n :class=\"ns.be('circle', 'track')\"\n :d=\"trackPath\"\n :stroke=\"`var(${ns.cssVarName('fill-color-light')}, #e5e9f2)`\"\n :stroke-linecap=\"strokeLinecap\"\n :stroke-width=\"relativeStrokeWidth\"\n fill=\"none\"\n :style=\"trailPathStyle\"\n />\n <path\n :class=\"ns.be('circle', 'path')\"\n :d=\"trackPath\"\n :stroke=\"stroke\"\n fill=\"none\"\n :opacity=\"percentage ? 1 : 0\"\n :stroke-linecap=\"strokeLinecap\"\n :stroke-width=\"relativeStrokeWidth\"\n :style=\"circlePathStyle\"\n />\n </svg>\n </div>\n <div\n v-if=\"(showText || $slots.default) && !textInside\"\n :class=\"ns.e('text')\"\n :style=\"{ fontSize: `${progressTextSize}px` }\"\n >\n <slot :percentage=\"percentage\">\n <span v-if=\"!status\">{{ content }}</span>\n <el-icon v-else><component :is=\"statusIcon\" /></el-icon>\n </slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n Check,\n CircleCheck,\n CircleClose,\n Close,\n WarningFilled,\n} from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction, isString } from '@element-plus/utils'\nimport { progressProps } from './progress'\nimport type { CSSProperties } from 'vue'\nimport type { ProgressColor } from './progress'\n\ndefineOptions({\n name: 'ElProgress',\n})\n\nconst STATUS_COLOR_MAP: Record<string, string> = {\n success: '#13ce66',\n exception: '#ff4949',\n warning: '#e6a23c',\n default: '#20a0ff',\n}\n\nconst props = defineProps(progressProps)\n\nconst ns = useNamespace('progress')\n\nconst barStyle = computed<CSSProperties>(() => ({\n width: `${props.percentage}%`,\n animationDuration: `${props.duration}s`,\n backgroundColor: getCurrentColor(props.percentage),\n}))\n\nconst relativeStrokeWidth = computed(() =>\n ((props.strokeWidth / props.width) * 100).toFixed(1)\n)\n\nconst radius = computed(() => {\n if (['circle', 'dashboard'].includes(props.type)) {\n return Number.parseInt(\n `${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`,\n 10\n )\n }\n return 0\n})\n\nconst trackPath = computed(() => {\n const r = radius.value\n const isDashboard = props.type === 'dashboard'\n return `\n M 50 50\n m 0 ${isDashboard ? '' : '-'}${r}\n a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}\n a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}\n `\n})\n\nconst perimeter = computed(() => 2 * Math.PI * radius.value)\n\nconst rate = computed(() => (props.type === 'dashboard' ? 0.75 : 1))\n\nconst strokeDashoffset = computed(() => {\n const offset = (-1 * perimeter.value * (1 - rate.value)) / 2\n return `${offset}px`\n})\n\nconst trailPathStyle = computed<CSSProperties>(() => ({\n strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,\n strokeDashoffset: strokeDashoffset.value,\n}))\n\nconst circlePathStyle = computed<CSSProperties>(() => ({\n strokeDasharray: `${\n perimeter.value * rate.value * (props.percentage / 100)\n }px, ${perimeter.value}px`,\n strokeDashoffset: strokeDashoffset.value,\n transition:\n 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s',\n}))\n\nconst stroke = computed(() => {\n let ret: string\n if (props.color) {\n ret = getCurrentColor(props.percentage)\n } else {\n ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default\n }\n return ret\n})\n\nconst statusIcon = computed(() => {\n if (props.status === 'warning') {\n return WarningFilled\n }\n if (props.type === 'line') {\n return props.status === 'success' ? CircleCheck : CircleClose\n } else {\n return props.status === 'success' ? Check : Close\n }\n})\n\nconst progressTextSize = computed(() => {\n return props.type === 'line'\n ? 12 + props.strokeWidth * 0.4\n : props.width * 0.111111 + 2\n})\n\nconst content = computed(() => props.format(props.percentage))\n\nfunction getColors(color: ProgressColor[]) {\n const span = 100 / color.length\n const seriesColors = color.map((seriesColor, index) => {\n if (isString(seriesColor)) {\n return {\n color: seriesColor,\n percentage: (index + 1) * span,\n }\n }\n return seriesColor\n })\n return seriesColors.sort((a, b) => a.percentage - b.percentage)\n}\n\nconst getCurrentColor = (percentage: number) => {\n const { color } = props\n if (isFunction(color)) {\n return color(percentage)\n } else if (isString(color)) {\n return color\n } else {\n const colors = getColors(color)\n for (const color of colors) {\n if (color.percentage > percentage) return color.color\n }\n return colors[colors.length - 1]?.color\n }\n}\n</script>\n"],"names":["useNamespace","computed","WarningFilled","CircleCheck","CircleClose","Check","Close","isString","isFunction"],"mappings":";;;;;;;;;;;;;;;;;;;uCAiGc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAEA,IAAA,MAAM,gBAA2C,GAAA;AAAA,MAC/C,OAAS,EAAA,SAAA;AAAA,MACT,SAAW,EAAA,SAAA;AAAA,MACX,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA,KACX,CAAA;AAIA,IAAM,MAAA,EAAA,GAAKA,mBAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAWC,aAAwB,OAAO;AAAA,MAC9C,KAAA,EAAO,GAAG,KAAM,CAAA,UAAA,CAAA,CAAA,CAAA;AAAA,MAChB,iBAAA,EAAmB,GAAG,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAC5B,eAAA,EAAiB,eAAgB,CAAA,KAAA,CAAM,UAAU,CAAA;AAAA,KACjD,CAAA,CAAA,CAAA;AAEF,IAAM,MAAA,mBAAA,GAAsBA,YAAS,CAAA,MACjC,CAAM,KAAA,CAAA,WAAA,GAAc,MAAM,KAAS,GAAA,GAAA,EAAK,OAAQ,CAAA,CAAC,CACrD,CAAA,CAAA;AAEA,IAAM,MAAA,MAAA,GAASA,aAAS,MAAM;AAC5B,MAAA,IAAI,CAAC,QAAU,EAAA,WAAW,EAAE,QAAS,CAAA,KAAA,CAAM,IAAI,CAAG,EAAA;AAChD,QAAO,OAAA,MAAA,CAAO,QACZ,CAAA,CAAA,EAAG,EAAK,GAAA,MAAA,CAAO,WAAW,mBAAoB,CAAA,KAAK,CAAI,GAAA,CAAA,CAAA,CAAA,EACvD,EACF,CAAA,CAAA;AAAA,OACF;AACA,MAAO,OAAA,CAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYA,aAAS,MAAM;AAC/B,MAAA,MAAM,IAAI,MAAO,CAAA,KAAA,CAAA;AACjB,MAAM,MAAA,WAAA,GAAc,MAAM,IAAS,KAAA,WAAA,CAAA;AACnC,MAAO,OAAA,CAAA;AAAA;AAAA,cAEO,EAAA,WAAA,GAAc,KAAK,GAAM,CAAA,EAAA,CAAA,CAAA;AAAA,YAAA,EAC3B,CAAK,CAAA,CAAA,EAAA,CAAA,CAAA,SAAA,EAAa,WAAc,GAAA,GAAA,GAAM,KAAK,CAAI,GAAA,CAAA,CAAA;AAAA,YAAA,EAC/C,CAAK,CAAA,CAAA,EAAA,CAAA,CAAA,SAAA,EAAa,WAAc,GAAA,EAAA,GAAK,MAAM,CAAI,GAAA,CAAA,CAAA;AAAA,UAAA,CAAA,CAAA;AAAA,KAE5D,CAAA,CAAA;AAED,IAAA,MAAM,YAAYA,YAAS,CAAA,MAAM,IAAI,IAAK,CAAA,EAAA,GAAK,OAAO,KAAK,CAAA,CAAA;AAE3D,IAAA,MAAM,OAAOA,YAAS,CAAA,MAAO,MAAM,IAAS,KAAA,WAAA,GAAc,OAAO,CAAE,CAAA,CAAA;AAEnE,IAAM,MAAA,gBAAA,GAAmBA,aAAS,MAAM;AACtC,MAAA,MAAM,SAAU,CAAK,CAAA,GAAA,SAAA,CAAU,KAAS,IAAA,CAAA,GAAI,KAAK,KAAU,CAAA,GAAA,CAAA,CAAA;AAC3D,MAAA,OAAO,CAAG,EAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAM,MAAA,cAAA,GAAiBA,aAAwB,OAAO;AAAA,MACpD,iBAAiB,CAAG,EAAA,SAAA,CAAU,KAAQ,GAAA,IAAA,CAAK,YAAY,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,MACjE,kBAAkB,gBAAiB,CAAA,KAAA;AAAA,KACnC,CAAA,CAAA,CAAA;AAEF,IAAM,MAAA,eAAA,GAAkBA,aAAwB,OAAO;AAAA,MACrD,eAAA,EAAiB,GACf,SAAU,CAAA,KAAA,GAAQ,KAAK,KAAS,IAAA,KAAA,CAAM,UAAa,GAAA,GAAA,CAAA,CAAA,IAAA,EAC9C,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,MACjB,kBAAkB,gBAAiB,CAAA,KAAA;AAAA,MACnC,UACE,EAAA,oEAAA;AAAA,KACF,CAAA,CAAA,CAAA;AAEF,IAAM,MAAA,MAAA,GAASA,aAAS,MAAM;AAC5B,MAAI,IAAA,GAAA,CAAA;AACJ,MAAA,IAAI,MAAM,KAAO,EAAA;AACf,QAAM,GAAA,GAAA,eAAA,CAAgB,MAAM,UAAU,CAAA,CAAA;AAAA,OACjC,MAAA;AACL,QAAM,GAAA,GAAA,gBAAA,CAAiB,KAAM,CAAA,MAAA,CAAA,IAAW,gBAAiB,CAAA,OAAA,CAAA;AAAA,OAC3D;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,UAAA,GAAaA,aAAS,MAAM;AAChC,MAAI,IAAA,KAAA,CAAM,WAAW,SAAW,EAAA;AAC9B,QAAO,OAAAC,sBAAA,CAAA;AAAA,OACT;AACA,MAAI,IAAA,KAAA,CAAM,SAAS,MAAQ,EAAA;AACzB,QAAO,OAAA,KAAA,CAAM,MAAW,KAAA,SAAA,GAAYC,oBAAc,GAAAC,oBAAA,CAAA;AAAA,OAC7C,MAAA;AACL,QAAO,OAAA,KAAA,CAAM,MAAW,KAAA,SAAA,GAAYC,cAAQ,GAAAC,cAAA,CAAA;AAAA,OAC9C;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBL,aAAS,MAAM;AACtC,MAAO,OAAA,KAAA,CAAM,SAAS,MAClB,GAAA,EAAA,GAAK,MAAM,WAAc,GAAA,GAAA,GACzB,KAAM,CAAA,KAAA,GAAQ,QAAW,GAAA,CAAA,CAAA;AAAA,KAC9B,CAAA,CAAA;AAED,IAAA,MAAM,UAAUA,YAAS,CAAA,MAAM,MAAM,MAAO,CAAA,KAAA,CAAM,UAAU,CAAC,CAAA,CAAA;AAE7D,IAAA,SAAA,SAAA,CAAmB,KAAwB,EAAA;AACzC,MAAM,MAAA,IAAA,GAAO,MAAM,KAAM,CAAA,MAAA,CAAA;AACzB,MAAA,MAAM,YAAe,GAAA,KAAA,CAAM,GAAI,CAAA,CAAC,aAAa,KAAU,KAAA;AACrD,QAAI,IAAAM,eAAA,CAAS,WAAW,CAAG,EAAA;AACzB,UAAO,OAAA;AAAA,YACL,KAAO,EAAA,WAAA;AAAA,YACP,UAAA,EAAa,SAAQ,CAAK,IAAA,IAAA;AAAA,WAC5B,CAAA;AAAA,SACF;AACA,QAAO,OAAA,WAAA,CAAA;AAAA,OACR,CAAA,CAAA;AACD,MAAO,OAAA,YAAA,CAAa,KAAK,CAAC,CAAA,EAAG,MAAM,CAAE,CAAA,UAAA,GAAa,EAAE,UAAU,CAAA,CAAA;AAAA,KAChE;AAEA,IAAM,MAAA,eAAA,GAAkB,CAAC,UAAuB,KAAA;AAC9C,MAAA,IAAA,EAAM;AACN,MAAI,MAAA,EAAA,KAAA,EAAW,QAAQ,CAAA;AACrB,MAAA,IAAAC,kBAAa,KAAU,CAAA,EAAA;AAAA,QACzB,OAAA,KAAoB,CAAA,UAAK,CAAG,CAAA;AAC1B,OAAO,MAAA,IAAAD,eAAA,CAAA,KAAA,CAAA,EAAA;AAAA,QACF,OAAA,KAAA,CAAA;AACL,OAAM,MAAA;AACN,QAAA,MAAA,kBAA4B,CAAA,KAAA,CAAA,CAAA;AAC1B,QAAA,KAAA,YAAuB,IAAA,MAAA,EAAA;AAAY,UAAA,IAAA,MAAa,CAAA,UAAA,GAAA,UAAA;AAAA,YAClD,OAAA,MAAA,CAAA,KAAA,CAAA;AACA,SAAO;AAA2B,QACpC,OAAA,CAAA,EAAA,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,GAAA,CAAA,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,CAAA;AAAA,OACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}