@element-plus/nightly 0.0.20220406 → 0.0.20220407

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 (252) hide show
  1. package/dist/index.full.js +2 -2
  2. package/dist/index.full.min.js +1 -1
  3. package/dist/index.full.min.js.map +1 -1
  4. package/dist/index.full.min.mjs +1 -1
  5. package/dist/index.full.min.mjs.map +1 -1
  6. package/dist/index.full.mjs +2 -2
  7. package/dist/locale/af.js +1 -1
  8. package/dist/locale/af.min.js +1 -1
  9. package/dist/locale/af.min.mjs +1 -1
  10. package/dist/locale/af.mjs +1 -1
  11. package/dist/locale/ar.js +1 -1
  12. package/dist/locale/ar.min.js +1 -1
  13. package/dist/locale/ar.min.mjs +1 -1
  14. package/dist/locale/ar.mjs +1 -1
  15. package/dist/locale/az.js +1 -1
  16. package/dist/locale/az.min.js +1 -1
  17. package/dist/locale/az.min.mjs +1 -1
  18. package/dist/locale/az.mjs +1 -1
  19. package/dist/locale/bg.js +1 -1
  20. package/dist/locale/bg.min.js +1 -1
  21. package/dist/locale/bg.min.mjs +1 -1
  22. package/dist/locale/bg.mjs +1 -1
  23. package/dist/locale/bn.js +1 -1
  24. package/dist/locale/bn.min.js +1 -1
  25. package/dist/locale/bn.min.mjs +1 -1
  26. package/dist/locale/bn.mjs +1 -1
  27. package/dist/locale/ca.js +1 -1
  28. package/dist/locale/ca.min.js +1 -1
  29. package/dist/locale/ca.min.mjs +1 -1
  30. package/dist/locale/ca.mjs +1 -1
  31. package/dist/locale/cs.js +1 -1
  32. package/dist/locale/cs.min.js +1 -1
  33. package/dist/locale/cs.min.mjs +1 -1
  34. package/dist/locale/cs.mjs +1 -1
  35. package/dist/locale/da.js +1 -1
  36. package/dist/locale/da.min.js +1 -1
  37. package/dist/locale/da.min.mjs +1 -1
  38. package/dist/locale/da.mjs +1 -1
  39. package/dist/locale/de.js +1 -1
  40. package/dist/locale/de.min.js +1 -1
  41. package/dist/locale/de.min.mjs +1 -1
  42. package/dist/locale/de.mjs +1 -1
  43. package/dist/locale/el.js +1 -1
  44. package/dist/locale/el.min.js +1 -1
  45. package/dist/locale/el.min.mjs +1 -1
  46. package/dist/locale/el.mjs +1 -1
  47. package/dist/locale/en.js +1 -1
  48. package/dist/locale/en.min.js +1 -1
  49. package/dist/locale/en.min.mjs +1 -1
  50. package/dist/locale/en.mjs +1 -1
  51. package/dist/locale/eo.js +1 -1
  52. package/dist/locale/eo.min.js +1 -1
  53. package/dist/locale/eo.min.mjs +1 -1
  54. package/dist/locale/eo.mjs +1 -1
  55. package/dist/locale/es.js +1 -1
  56. package/dist/locale/es.min.js +1 -1
  57. package/dist/locale/es.min.mjs +1 -1
  58. package/dist/locale/es.mjs +1 -1
  59. package/dist/locale/et.js +1 -1
  60. package/dist/locale/et.min.js +1 -1
  61. package/dist/locale/et.min.mjs +1 -1
  62. package/dist/locale/et.mjs +1 -1
  63. package/dist/locale/eu.js +1 -1
  64. package/dist/locale/eu.min.js +1 -1
  65. package/dist/locale/eu.min.mjs +1 -1
  66. package/dist/locale/eu.mjs +1 -1
  67. package/dist/locale/fa.js +1 -1
  68. package/dist/locale/fa.min.js +1 -1
  69. package/dist/locale/fa.min.mjs +1 -1
  70. package/dist/locale/fa.mjs +1 -1
  71. package/dist/locale/fi.js +1 -1
  72. package/dist/locale/fi.min.js +1 -1
  73. package/dist/locale/fi.min.mjs +1 -1
  74. package/dist/locale/fi.mjs +1 -1
  75. package/dist/locale/fr.js +1 -1
  76. package/dist/locale/fr.min.js +1 -1
  77. package/dist/locale/fr.min.mjs +1 -1
  78. package/dist/locale/fr.mjs +1 -1
  79. package/dist/locale/he.js +1 -1
  80. package/dist/locale/he.min.js +1 -1
  81. package/dist/locale/he.min.mjs +1 -1
  82. package/dist/locale/he.mjs +1 -1
  83. package/dist/locale/hr.js +1 -1
  84. package/dist/locale/hr.min.js +1 -1
  85. package/dist/locale/hr.min.mjs +1 -1
  86. package/dist/locale/hr.mjs +1 -1
  87. package/dist/locale/hu.js +1 -1
  88. package/dist/locale/hu.min.js +1 -1
  89. package/dist/locale/hu.min.mjs +1 -1
  90. package/dist/locale/hu.mjs +1 -1
  91. package/dist/locale/hy-am.js +1 -1
  92. package/dist/locale/hy-am.min.js +1 -1
  93. package/dist/locale/hy-am.min.mjs +1 -1
  94. package/dist/locale/hy-am.mjs +1 -1
  95. package/dist/locale/id.js +1 -1
  96. package/dist/locale/id.min.js +1 -1
  97. package/dist/locale/id.min.mjs +1 -1
  98. package/dist/locale/id.mjs +1 -1
  99. package/dist/locale/it.js +1 -1
  100. package/dist/locale/it.min.js +1 -1
  101. package/dist/locale/it.min.mjs +1 -1
  102. package/dist/locale/it.mjs +1 -1
  103. package/dist/locale/ja.js +1 -1
  104. package/dist/locale/ja.min.js +1 -1
  105. package/dist/locale/ja.min.mjs +1 -1
  106. package/dist/locale/ja.mjs +1 -1
  107. package/dist/locale/kk.js +1 -1
  108. package/dist/locale/kk.min.js +1 -1
  109. package/dist/locale/kk.min.mjs +1 -1
  110. package/dist/locale/kk.mjs +1 -1
  111. package/dist/locale/km.js +1 -1
  112. package/dist/locale/km.min.js +1 -1
  113. package/dist/locale/km.min.mjs +1 -1
  114. package/dist/locale/km.mjs +1 -1
  115. package/dist/locale/ko.js +1 -1
  116. package/dist/locale/ko.min.js +1 -1
  117. package/dist/locale/ko.min.mjs +1 -1
  118. package/dist/locale/ko.mjs +1 -1
  119. package/dist/locale/ku.js +1 -1
  120. package/dist/locale/ku.min.js +1 -1
  121. package/dist/locale/ku.min.mjs +1 -1
  122. package/dist/locale/ku.mjs +1 -1
  123. package/dist/locale/ky.js +1 -1
  124. package/dist/locale/ky.min.js +1 -1
  125. package/dist/locale/ky.min.mjs +1 -1
  126. package/dist/locale/ky.mjs +1 -1
  127. package/dist/locale/lt.js +1 -1
  128. package/dist/locale/lt.min.js +1 -1
  129. package/dist/locale/lt.min.mjs +1 -1
  130. package/dist/locale/lt.mjs +1 -1
  131. package/dist/locale/lv.js +1 -1
  132. package/dist/locale/lv.min.js +1 -1
  133. package/dist/locale/lv.min.mjs +1 -1
  134. package/dist/locale/lv.mjs +1 -1
  135. package/dist/locale/mg.js +1 -1
  136. package/dist/locale/mg.min.js +1 -1
  137. package/dist/locale/mg.min.mjs +1 -1
  138. package/dist/locale/mg.mjs +1 -1
  139. package/dist/locale/mn.js +1 -1
  140. package/dist/locale/mn.min.js +1 -1
  141. package/dist/locale/mn.min.mjs +1 -1
  142. package/dist/locale/mn.mjs +1 -1
  143. package/dist/locale/nb-no.js +1 -1
  144. package/dist/locale/nb-no.min.js +1 -1
  145. package/dist/locale/nb-no.min.mjs +1 -1
  146. package/dist/locale/nb-no.mjs +1 -1
  147. package/dist/locale/nl.js +1 -1
  148. package/dist/locale/nl.min.js +1 -1
  149. package/dist/locale/nl.min.mjs +1 -1
  150. package/dist/locale/nl.mjs +1 -1
  151. package/dist/locale/pa.js +1 -1
  152. package/dist/locale/pa.min.js +1 -1
  153. package/dist/locale/pa.min.mjs +1 -1
  154. package/dist/locale/pa.mjs +1 -1
  155. package/dist/locale/pl.js +1 -1
  156. package/dist/locale/pl.min.js +1 -1
  157. package/dist/locale/pl.min.mjs +1 -1
  158. package/dist/locale/pl.mjs +1 -1
  159. package/dist/locale/pt-br.js +1 -1
  160. package/dist/locale/pt-br.min.js +1 -1
  161. package/dist/locale/pt-br.min.mjs +1 -1
  162. package/dist/locale/pt-br.mjs +1 -1
  163. package/dist/locale/pt.js +1 -1
  164. package/dist/locale/pt.min.js +1 -1
  165. package/dist/locale/pt.min.mjs +1 -1
  166. package/dist/locale/pt.mjs +1 -1
  167. package/dist/locale/ro.js +1 -1
  168. package/dist/locale/ro.min.js +1 -1
  169. package/dist/locale/ro.min.mjs +1 -1
  170. package/dist/locale/ro.mjs +1 -1
  171. package/dist/locale/ru.js +1 -1
  172. package/dist/locale/ru.min.js +1 -1
  173. package/dist/locale/ru.min.mjs +1 -1
  174. package/dist/locale/ru.mjs +1 -1
  175. package/dist/locale/sk.js +1 -1
  176. package/dist/locale/sk.min.js +1 -1
  177. package/dist/locale/sk.min.mjs +1 -1
  178. package/dist/locale/sk.mjs +1 -1
  179. package/dist/locale/sl.js +1 -1
  180. package/dist/locale/sl.min.js +1 -1
  181. package/dist/locale/sl.min.mjs +1 -1
  182. package/dist/locale/sl.mjs +1 -1
  183. package/dist/locale/sr.js +1 -1
  184. package/dist/locale/sr.min.js +1 -1
  185. package/dist/locale/sr.min.mjs +1 -1
  186. package/dist/locale/sr.mjs +1 -1
  187. package/dist/locale/sv.js +1 -1
  188. package/dist/locale/sv.min.js +1 -1
  189. package/dist/locale/sv.min.mjs +1 -1
  190. package/dist/locale/sv.mjs +1 -1
  191. package/dist/locale/ta.js +1 -1
  192. package/dist/locale/ta.min.js +1 -1
  193. package/dist/locale/ta.min.mjs +1 -1
  194. package/dist/locale/ta.mjs +1 -1
  195. package/dist/locale/th.js +1 -1
  196. package/dist/locale/th.min.js +1 -1
  197. package/dist/locale/th.min.mjs +1 -1
  198. package/dist/locale/th.mjs +1 -1
  199. package/dist/locale/tk.js +1 -1
  200. package/dist/locale/tk.min.js +1 -1
  201. package/dist/locale/tk.min.mjs +1 -1
  202. package/dist/locale/tk.mjs +1 -1
  203. package/dist/locale/tr.js +1 -1
  204. package/dist/locale/tr.min.js +1 -1
  205. package/dist/locale/tr.min.mjs +1 -1
  206. package/dist/locale/tr.mjs +1 -1
  207. package/dist/locale/ug-cn.js +1 -1
  208. package/dist/locale/ug-cn.min.js +1 -1
  209. package/dist/locale/ug-cn.min.mjs +1 -1
  210. package/dist/locale/ug-cn.mjs +1 -1
  211. package/dist/locale/uk.js +1 -1
  212. package/dist/locale/uk.min.js +1 -1
  213. package/dist/locale/uk.min.mjs +1 -1
  214. package/dist/locale/uk.mjs +1 -1
  215. package/dist/locale/uz-uz.js +1 -1
  216. package/dist/locale/uz-uz.min.js +1 -1
  217. package/dist/locale/uz-uz.min.mjs +1 -1
  218. package/dist/locale/uz-uz.mjs +1 -1
  219. package/dist/locale/vi.js +1 -1
  220. package/dist/locale/vi.min.js +1 -1
  221. package/dist/locale/vi.min.mjs +1 -1
  222. package/dist/locale/vi.mjs +1 -1
  223. package/dist/locale/zh-cn.js +1 -1
  224. package/dist/locale/zh-cn.min.js +1 -1
  225. package/dist/locale/zh-cn.min.mjs +1 -1
  226. package/dist/locale/zh-cn.mjs +1 -1
  227. package/dist/locale/zh-tw.js +1 -1
  228. package/dist/locale/zh-tw.min.js +1 -1
  229. package/dist/locale/zh-tw.min.mjs +1 -1
  230. package/dist/locale/zh-tw.mjs +1 -1
  231. package/es/components/carousel/index.mjs +2 -2
  232. package/es/components/carousel/src/carousel-item.mjs +155 -7
  233. package/es/components/carousel/src/carousel-item.mjs.map +1 -1
  234. package/es/components/carousel/src/carousel-item2.mjs +7 -155
  235. package/es/components/carousel/src/carousel-item2.mjs.map +1 -1
  236. package/es/components/index.mjs +1 -1
  237. package/es/index.mjs +1 -1
  238. package/es/version.d.ts +1 -1
  239. package/es/version.mjs +1 -1
  240. package/es/version.mjs.map +1 -1
  241. package/lib/components/carousel/index.js +2 -2
  242. package/lib/components/carousel/src/carousel-item.js +155 -7
  243. package/lib/components/carousel/src/carousel-item.js.map +1 -1
  244. package/lib/components/carousel/src/carousel-item2.js +7 -155
  245. package/lib/components/carousel/src/carousel-item2.js.map +1 -1
  246. package/lib/components/index.js +1 -1
  247. package/lib/index.js +1 -1
  248. package/lib/version.d.ts +1 -1
  249. package/lib/version.js +1 -1
  250. package/lib/version.js.map +1 -1
  251. package/package.json +2 -2
  252. package/web-types.json +1 -1
@@ -1,13 +1,161 @@
1
+ import { defineComponent, inject, getCurrentInstance, ref, computed, unref, onMounted, reactive, onUnmounted, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, vShow, createCommentVNode, renderSlot } from 'vue';
1
2
  import '../../../utils/index.mjs';
2
- import { buildProps } from '../../../utils/vue/props.mjs';
3
+ import '../../../hooks/index.mjs';
4
+ import '../../../tokens/index.mjs';
5
+ import { carouselItemProps } from './carousel-item2.mjs';
6
+ import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
7
+ import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
8
+ import { carouselContextKey } from '../../../tokens/carousel.mjs';
9
+ import { debugWarn } from '../../../utils/error.mjs';
10
+ import { isUndefined } from '../../../utils/types.mjs';
3
11
 
4
- const carouselItemProps = buildProps({
5
- name: { type: String, default: "" },
6
- label: {
7
- type: [String, Number],
8
- default: ""
12
+ const __default__ = {
13
+ name: "ElCarouselItem"
14
+ };
15
+ const _sfc_main = /* @__PURE__ */ defineComponent({
16
+ ...__default__,
17
+ props: carouselItemProps,
18
+ setup(__props) {
19
+ const props = __props;
20
+ const ns = useNamespace("carousel");
21
+ const COMPONENT_NAME = "ElCarouselItem";
22
+ const carouselContext = inject(carouselContextKey);
23
+ const instance = getCurrentInstance();
24
+ if (!carouselContext) {
25
+ debugWarn(COMPONENT_NAME, "usage: <el-carousel></el-carousel-item></el-carousel>");
26
+ }
27
+ if (!instance) {
28
+ debugWarn(COMPONENT_NAME, "compositional hook can only be invoked inside setups");
29
+ }
30
+ const CARD_SCALE = 0.83;
31
+ const hover = ref(false);
32
+ const translate = ref(0);
33
+ const scale = ref(1);
34
+ const active = ref(false);
35
+ const ready = ref(false);
36
+ const inStage = ref(false);
37
+ const animating = ref(false);
38
+ const { isCardType, isVertical } = carouselContext;
39
+ const itemStyle = computed(() => {
40
+ const translateType = `translate${unref(isVertical) ? "Y" : "X"}`;
41
+ const _translate = `${translateType}(${unref(translate)}px)`;
42
+ const _scale = `scale(${unref(scale)})`;
43
+ const transform = [_translate, _scale].join(" ");
44
+ return {
45
+ transform
46
+ };
47
+ });
48
+ function processIndex(index, activeIndex, length) {
49
+ const lastItemIndex = length - 1;
50
+ const prevItemIndex = activeIndex - 1;
51
+ const nextItemIndex = activeIndex + 1;
52
+ const halfItemIndex = length / 2;
53
+ if (activeIndex === 0 && index === lastItemIndex) {
54
+ return -1;
55
+ } else if (activeIndex === lastItemIndex && index === 0) {
56
+ return length;
57
+ } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
58
+ return length + 1;
59
+ } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
60
+ return -2;
61
+ }
62
+ return index;
63
+ }
64
+ function calcCardTranslate(index, activeIndex) {
65
+ var _a;
66
+ const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
67
+ if (inStage.value) {
68
+ return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
69
+ } else if (index < activeIndex) {
70
+ return -(1 + CARD_SCALE) * parentWidth / 4;
71
+ } else {
72
+ return (3 + CARD_SCALE) * parentWidth / 4;
73
+ }
74
+ }
75
+ function calcTranslate(index, activeIndex, isVertical2) {
76
+ const rootEl = carouselContext.root.value;
77
+ if (!rootEl)
78
+ return 0;
79
+ const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
80
+ return distance * (index - activeIndex);
81
+ }
82
+ const translateItem = (index, activeIndex, oldIndex) => {
83
+ var _a;
84
+ const _isCardType = unref(isCardType);
85
+ const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
86
+ const isActive = index === activeIndex;
87
+ if (!_isCardType && !isUndefined(oldIndex)) {
88
+ animating.value = isActive || index === oldIndex;
89
+ }
90
+ if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
91
+ index = processIndex(index, activeIndex, carouselItemLength);
92
+ }
93
+ const _isVertical = unref(isVertical);
94
+ active.value = isActive;
95
+ if (_isCardType) {
96
+ if (_isVertical) {
97
+ debugWarn("Carousel", "vertical direction is not supported for card mode");
98
+ }
99
+ inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
100
+ translate.value = calcCardTranslate(index, activeIndex);
101
+ scale.value = unref(active) ? 1 : CARD_SCALE;
102
+ } else {
103
+ translate.value = calcTranslate(index, activeIndex, _isVertical);
104
+ }
105
+ ready.value = true;
106
+ };
107
+ function handleItemClick() {
108
+ if (carouselContext && unref(isCardType)) {
109
+ const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
110
+ carouselContext.setActiveItem(index);
111
+ }
112
+ }
113
+ onMounted(() => {
114
+ carouselContext.addItem({
115
+ props,
116
+ states: reactive({
117
+ hover,
118
+ translate,
119
+ scale,
120
+ active,
121
+ ready,
122
+ inStage,
123
+ animating
124
+ }),
125
+ uid: instance.uid,
126
+ translateItem
127
+ });
128
+ });
129
+ onUnmounted(() => {
130
+ carouselContext.removeItem(instance.uid);
131
+ });
132
+ return (_ctx, _cache) => {
133
+ return withDirectives((openBlock(), createElementBlock("div", {
134
+ class: normalizeClass([
135
+ unref(ns).e("item"),
136
+ unref(ns).is("active", active.value),
137
+ unref(ns).is("in-stage", inStage.value),
138
+ unref(ns).is("hover", hover.value),
139
+ unref(ns).is("animating", animating.value),
140
+ { [unref(ns).em("item", "card")]: unref(isCardType) }
141
+ ]),
142
+ style: normalizeStyle(unref(itemStyle)),
143
+ onClick: handleItemClick
144
+ }, [
145
+ unref(isCardType) ? withDirectives((openBlock(), createElementBlock("div", {
146
+ key: 0,
147
+ class: normalizeClass(unref(ns).e("mask"))
148
+ }, null, 2)), [
149
+ [vShow, !active.value]
150
+ ]) : createCommentVNode("v-if", true),
151
+ renderSlot(_ctx.$slots, "default")
152
+ ], 6)), [
153
+ [vShow, ready.value]
154
+ ]);
155
+ };
9
156
  }
10
157
  });
158
+ var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/carousel/src/carousel-item.vue"]]);
11
159
 
12
- export { carouselItemProps };
160
+ export { CarouselItem as default };
13
161
  //# sourceMappingURL=carousel-item.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"carousel-item.mjs","sources":["../../../../../../packages/components/carousel/src/carousel-item.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type CarouselItem from './carousel-item.vue'\n\nexport const carouselItemProps = buildProps({\n name: { type: String, default: '' },\n label: {\n type: [String, Number],\n default: '',\n },\n} as const)\n\nexport type CarouselItemProps = ExtractPropTypes<typeof carouselItemProps>\n\nexport type CarouselItemInstance = InstanceType<typeof CarouselItem>\n"],"names":[],"mappings":";;;AACY,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
1
+ {"version":3,"file":"carousel-item.mjs","sources":["../../../../../../packages/components/carousel/src/carousel-item.vue"],"sourcesContent":["<template>\n <div\n v-show=\"ready\"\n :class=\"[\n ns.e('item'),\n ns.is('active', active),\n ns.is('in-stage', inStage),\n ns.is('hover', hover),\n ns.is('animating', animating),\n { [ns.em('item', 'card')]: isCardType },\n ]\"\n :style=\"itemStyle\"\n @click=\"handleItemClick\"\n >\n <div v-if=\"isCardType\" v-show=\"!active\" :class=\"ns.e('mask')\" />\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { carouselContextKey } from '@element-plus/tokens'\nimport { carouselItemProps } from './carousel-item'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElCarouselItem',\n})\n\nconst props = defineProps(carouselItemProps)\nconst ns = useNamespace('carousel')\nconst COMPONENT_NAME = 'ElCarouselItem'\n// inject\nconst carouselContext = inject(carouselContextKey)!\n// instance\nconst instance = getCurrentInstance()!\nif (!carouselContext) {\n debugWarn(\n COMPONENT_NAME,\n 'usage: <el-carousel></el-carousel-item></el-carousel>'\n )\n}\n\nif (!instance) {\n debugWarn(\n COMPONENT_NAME,\n 'compositional hook can only be invoked inside setups'\n )\n}\n\nconst CARD_SCALE = 0.83\n\nconst hover = ref(false)\nconst translate = ref(0)\nconst scale = ref(1)\nconst active = ref(false)\nconst ready = ref(false)\nconst inStage = ref(false)\nconst animating = ref(false)\n\n// computed\nconst { isCardType, isVertical } = carouselContext\n\nconst itemStyle = computed<CSSProperties>(() => {\n const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`\n const _translate = `${translateType}(${unref(translate)}px)`\n const _scale = `scale(${unref(scale)})`\n const transform = [_translate, _scale].join(' ')\n\n return {\n transform,\n }\n})\n\n// methods\n\nfunction processIndex(index: number, activeIndex: number, length: number) {\n const lastItemIndex = length - 1\n const prevItemIndex = activeIndex - 1\n const nextItemIndex = activeIndex + 1\n const halfItemIndex = length / 2\n\n if (activeIndex === 0 && index === lastItemIndex) {\n return -1\n } else if (activeIndex === lastItemIndex && index === 0) {\n return length\n } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\n return length + 1\n } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\n return -2\n }\n return index\n}\n\nfunction calcCardTranslate(index: number, activeIndex: number) {\n const parentWidth = carouselContext.root.value?.offsetWidth || 0\n if (inStage.value) {\n return (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n } else if (index < activeIndex) {\n return (-(1 + CARD_SCALE) * parentWidth) / 4\n } else {\n return ((3 + CARD_SCALE) * parentWidth) / 4\n }\n}\n\nfunction calcTranslate(\n index: number,\n activeIndex: number,\n isVertical: boolean\n) {\n const rootEl = carouselContext.root.value\n if (!rootEl) return 0\n\n const distance = (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n return distance * (index - activeIndex)\n}\n\nconst translateItem = (\n index: number,\n activeIndex: number,\n oldIndex?: number\n) => {\n const _isCardType = unref(isCardType)\n const carouselItemLength = carouselContext.items.value.length ?? Number.NaN\n\n const isActive = index === activeIndex\n if (!_isCardType && !isUndefined(oldIndex)) {\n animating.value = isActive || index === oldIndex\n }\n\n if (!isActive && carouselItemLength > 2 && carouselContext.loop) {\n index = processIndex(index, activeIndex, carouselItemLength)\n }\n\n const _isVertical = unref(isVertical)\n active.value = isActive\n\n if (_isCardType) {\n if (_isVertical) {\n debugWarn('Carousel', 'vertical direction is not supported for card mode')\n }\n inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1\n translate.value = calcCardTranslate(index, activeIndex)\n scale.value = unref(active) ? 1 : CARD_SCALE\n } else {\n translate.value = calcTranslate(index, activeIndex, _isVertical)\n }\n\n ready.value = true\n}\n\nfunction handleItemClick() {\n if (carouselContext && unref(isCardType)) {\n const index = carouselContext.items.value.findIndex(\n ({ uid }) => uid === instance.uid\n )\n carouselContext.setActiveItem(index)\n }\n}\n\n// lifecycle\nonMounted(() => {\n carouselContext.addItem({\n props,\n states: reactive({\n hover,\n translate,\n scale,\n active,\n ready,\n inStage,\n animating,\n }),\n uid: instance.uid,\n translateItem,\n })\n})\n\nonUnmounted(() => {\n carouselContext.removeItem(instance.uid)\n})\n</script>\n"],"names":[],"mappings":"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"}
@@ -1,161 +1,13 @@
1
- import { defineComponent, inject, getCurrentInstance, ref, computed, unref, onMounted, reactive, onUnmounted, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, vShow, createCommentVNode, renderSlot } from 'vue';
2
1
  import '../../../utils/index.mjs';
3
- import '../../../hooks/index.mjs';
4
- import '../../../tokens/index.mjs';
5
- import { carouselItemProps } from './carousel-item.mjs';
6
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
7
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
8
- import { carouselContextKey } from '../../../tokens/carousel.mjs';
9
- import { debugWarn } from '../../../utils/error.mjs';
10
- import { isUndefined } from '../../../utils/types.mjs';
2
+ import { buildProps } from '../../../utils/vue/props.mjs';
11
3
 
12
- const __default__ = {
13
- name: "ElCarouselItem"
14
- };
15
- const _sfc_main = /* @__PURE__ */ defineComponent({
16
- ...__default__,
17
- props: carouselItemProps,
18
- setup(__props) {
19
- const props = __props;
20
- const ns = useNamespace("carousel");
21
- const COMPONENT_NAME = "ElCarouselItem";
22
- const carouselContext = inject(carouselContextKey);
23
- const instance = getCurrentInstance();
24
- if (!carouselContext) {
25
- debugWarn(COMPONENT_NAME, "usage: <el-carousel></el-carousel-item></el-carousel>");
26
- }
27
- if (!instance) {
28
- debugWarn(COMPONENT_NAME, "compositional hook can only be invoked inside setups");
29
- }
30
- const CARD_SCALE = 0.83;
31
- const hover = ref(false);
32
- const translate = ref(0);
33
- const scale = ref(1);
34
- const active = ref(false);
35
- const ready = ref(false);
36
- const inStage = ref(false);
37
- const animating = ref(false);
38
- const { isCardType, isVertical } = carouselContext;
39
- const itemStyle = computed(() => {
40
- const translateType = `translate${unref(isVertical) ? "Y" : "X"}`;
41
- const _translate = `${translateType}(${unref(translate)}px)`;
42
- const _scale = `scale(${unref(scale)})`;
43
- const transform = [_translate, _scale].join(" ");
44
- return {
45
- transform
46
- };
47
- });
48
- function processIndex(index, activeIndex, length) {
49
- const lastItemIndex = length - 1;
50
- const prevItemIndex = activeIndex - 1;
51
- const nextItemIndex = activeIndex + 1;
52
- const halfItemIndex = length / 2;
53
- if (activeIndex === 0 && index === lastItemIndex) {
54
- return -1;
55
- } else if (activeIndex === lastItemIndex && index === 0) {
56
- return length;
57
- } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
58
- return length + 1;
59
- } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
60
- return -2;
61
- }
62
- return index;
63
- }
64
- function calcCardTranslate(index, activeIndex) {
65
- var _a;
66
- const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
67
- if (inStage.value) {
68
- return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
69
- } else if (index < activeIndex) {
70
- return -(1 + CARD_SCALE) * parentWidth / 4;
71
- } else {
72
- return (3 + CARD_SCALE) * parentWidth / 4;
73
- }
74
- }
75
- function calcTranslate(index, activeIndex, isVertical2) {
76
- const rootEl = carouselContext.root.value;
77
- if (!rootEl)
78
- return 0;
79
- const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
80
- return distance * (index - activeIndex);
81
- }
82
- const translateItem = (index, activeIndex, oldIndex) => {
83
- var _a;
84
- const _isCardType = unref(isCardType);
85
- const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
86
- const isActive = index === activeIndex;
87
- if (!_isCardType && !isUndefined(oldIndex)) {
88
- animating.value = isActive || index === oldIndex;
89
- }
90
- if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
91
- index = processIndex(index, activeIndex, carouselItemLength);
92
- }
93
- const _isVertical = unref(isVertical);
94
- active.value = isActive;
95
- if (_isCardType) {
96
- if (_isVertical) {
97
- debugWarn("Carousel", "vertical direction is not supported for card mode");
98
- }
99
- inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
100
- translate.value = calcCardTranslate(index, activeIndex);
101
- scale.value = unref(active) ? 1 : CARD_SCALE;
102
- } else {
103
- translate.value = calcTranslate(index, activeIndex, _isVertical);
104
- }
105
- ready.value = true;
106
- };
107
- function handleItemClick() {
108
- if (carouselContext && unref(isCardType)) {
109
- const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
110
- carouselContext.setActiveItem(index);
111
- }
112
- }
113
- onMounted(() => {
114
- carouselContext.addItem({
115
- props,
116
- states: reactive({
117
- hover,
118
- translate,
119
- scale,
120
- active,
121
- ready,
122
- inStage,
123
- animating
124
- }),
125
- uid: instance.uid,
126
- translateItem
127
- });
128
- });
129
- onUnmounted(() => {
130
- carouselContext.removeItem(instance.uid);
131
- });
132
- return (_ctx, _cache) => {
133
- return withDirectives((openBlock(), createElementBlock("div", {
134
- class: normalizeClass([
135
- unref(ns).e("item"),
136
- unref(ns).is("active", active.value),
137
- unref(ns).is("in-stage", inStage.value),
138
- unref(ns).is("hover", hover.value),
139
- unref(ns).is("animating", animating.value),
140
- { [unref(ns).em("item", "card")]: unref(isCardType) }
141
- ]),
142
- style: normalizeStyle(unref(itemStyle)),
143
- onClick: handleItemClick
144
- }, [
145
- unref(isCardType) ? withDirectives((openBlock(), createElementBlock("div", {
146
- key: 0,
147
- class: normalizeClass(unref(ns).e("mask"))
148
- }, null, 2)), [
149
- [vShow, !active.value]
150
- ]) : createCommentVNode("v-if", true),
151
- renderSlot(_ctx.$slots, "default")
152
- ], 6)), [
153
- [vShow, ready.value]
154
- ]);
155
- };
4
+ const carouselItemProps = buildProps({
5
+ name: { type: String, default: "" },
6
+ label: {
7
+ type: [String, Number],
8
+ default: ""
156
9
  }
157
10
  });
158
- var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/carousel/src/carousel-item.vue"]]);
159
11
 
160
- export { CarouselItem as default };
12
+ export { carouselItemProps };
161
13
  //# sourceMappingURL=carousel-item2.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"carousel-item2.mjs","sources":["../../../../../../packages/components/carousel/src/carousel-item.vue"],"sourcesContent":["<template>\n <div\n v-show=\"ready\"\n :class=\"[\n ns.e('item'),\n ns.is('active', active),\n ns.is('in-stage', inStage),\n ns.is('hover', hover),\n ns.is('animating', animating),\n { [ns.em('item', 'card')]: isCardType },\n ]\"\n :style=\"itemStyle\"\n @click=\"handleItemClick\"\n >\n <div v-if=\"isCardType\" v-show=\"!active\" :class=\"ns.e('mask')\" />\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { carouselContextKey } from '@element-plus/tokens'\nimport { carouselItemProps } from './carousel-item'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElCarouselItem',\n})\n\nconst props = defineProps(carouselItemProps)\nconst ns = useNamespace('carousel')\nconst COMPONENT_NAME = 'ElCarouselItem'\n// inject\nconst carouselContext = inject(carouselContextKey)!\n// instance\nconst instance = getCurrentInstance()!\nif (!carouselContext) {\n debugWarn(\n COMPONENT_NAME,\n 'usage: <el-carousel></el-carousel-item></el-carousel>'\n )\n}\n\nif (!instance) {\n debugWarn(\n COMPONENT_NAME,\n 'compositional hook can only be invoked inside setups'\n )\n}\n\nconst CARD_SCALE = 0.83\n\nconst hover = ref(false)\nconst translate = ref(0)\nconst scale = ref(1)\nconst active = ref(false)\nconst ready = ref(false)\nconst inStage = ref(false)\nconst animating = ref(false)\n\n// computed\nconst { isCardType, isVertical } = carouselContext\n\nconst itemStyle = computed<CSSProperties>(() => {\n const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`\n const _translate = `${translateType}(${unref(translate)}px)`\n const _scale = `scale(${unref(scale)})`\n const transform = [_translate, _scale].join(' ')\n\n return {\n transform,\n }\n})\n\n// methods\n\nfunction processIndex(index: number, activeIndex: number, length: number) {\n const lastItemIndex = length - 1\n const prevItemIndex = activeIndex - 1\n const nextItemIndex = activeIndex + 1\n const halfItemIndex = length / 2\n\n if (activeIndex === 0 && index === lastItemIndex) {\n return -1\n } else if (activeIndex === lastItemIndex && index === 0) {\n return length\n } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\n return length + 1\n } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\n return -2\n }\n return index\n}\n\nfunction calcCardTranslate(index: number, activeIndex: number) {\n const parentWidth = carouselContext.root.value?.offsetWidth || 0\n if (inStage.value) {\n return (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n } else if (index < activeIndex) {\n return (-(1 + CARD_SCALE) * parentWidth) / 4\n } else {\n return ((3 + CARD_SCALE) * parentWidth) / 4\n }\n}\n\nfunction calcTranslate(\n index: number,\n activeIndex: number,\n isVertical: boolean\n) {\n const rootEl = carouselContext.root.value\n if (!rootEl) return 0\n\n const distance = (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n return distance * (index - activeIndex)\n}\n\nconst translateItem = (\n index: number,\n activeIndex: number,\n oldIndex?: number\n) => {\n const _isCardType = unref(isCardType)\n const carouselItemLength = carouselContext.items.value.length ?? Number.NaN\n\n const isActive = index === activeIndex\n if (!_isCardType && !isUndefined(oldIndex)) {\n animating.value = isActive || index === oldIndex\n }\n\n if (!isActive && carouselItemLength > 2 && carouselContext.loop) {\n index = processIndex(index, activeIndex, carouselItemLength)\n }\n\n const _isVertical = unref(isVertical)\n active.value = isActive\n\n if (_isCardType) {\n if (_isVertical) {\n debugWarn('Carousel', 'vertical direction is not supported for card mode')\n }\n inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1\n translate.value = calcCardTranslate(index, activeIndex)\n scale.value = unref(active) ? 1 : CARD_SCALE\n } else {\n translate.value = calcTranslate(index, activeIndex, _isVertical)\n }\n\n ready.value = true\n}\n\nfunction handleItemClick() {\n if (carouselContext && unref(isCardType)) {\n const index = carouselContext.items.value.findIndex(\n ({ uid }) => uid === instance.uid\n )\n carouselContext.setActiveItem(index)\n }\n}\n\n// lifecycle\nonMounted(() => {\n carouselContext.addItem({\n props,\n states: reactive({\n hover,\n translate,\n scale,\n active,\n ready,\n inStage,\n animating,\n }),\n uid: instance.uid,\n translateItem,\n })\n})\n\nonUnmounted(() => {\n carouselContext.removeItem(instance.uid)\n})\n</script>\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"carousel-item2.mjs","sources":["../../../../../../packages/components/carousel/src/carousel-item.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type CarouselItem from './carousel-item.vue'\n\nexport const carouselItemProps = buildProps({\n name: { type: String, default: '' },\n label: {\n type: [String, Number],\n default: '',\n },\n} as const)\n\nexport type CarouselItemProps = ExtractPropTypes<typeof carouselItemProps>\n\nexport type CarouselItemInstance = InstanceType<typeof CarouselItem>\n"],"names":[],"mappings":";;;AACY,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
@@ -83,7 +83,7 @@ export { buttonEmits, buttonNativeTypes, buttonProps, buttonTypes } from './butt
83
83
  export { calendarEmits, calendarProps } from './calendar/src/calendar.mjs';
84
84
  export { cardProps } from './card/src/card.mjs';
85
85
  export { carouselEmits, carouselProps } from './carousel/src/carousel.mjs';
86
- export { carouselItemProps } from './carousel/src/carousel-item.mjs';
86
+ export { carouselItemProps } from './carousel/src/carousel-item2.mjs';
87
87
  export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './cascader-panel/src/types.mjs';
88
88
  export { CommonProps, DefaultProps, useCascaderConfig } from './cascader-panel/src/config.mjs';
89
89
  export { checkTagEmits, checkTagProps } from './check-tag/src/check-tag.mjs';
package/es/index.mjs CHANGED
@@ -29,7 +29,7 @@ export { ElCalendar } from './components/calendar/index.mjs';
29
29
  export { cardProps } from './components/card/src/card.mjs';
30
30
  export { ElCard } from './components/card/index.mjs';
31
31
  export { carouselEmits, carouselProps } from './components/carousel/src/carousel.mjs';
32
- export { carouselItemProps } from './components/carousel/src/carousel-item.mjs';
32
+ export { carouselItemProps } from './components/carousel/src/carousel-item2.mjs';
33
33
  export { ElCarousel, ElCarouselItem } from './components/carousel/index.mjs';
34
34
  export { ElCascader } from './components/cascader/index.mjs';
35
35
  export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './components/cascader-panel/src/types.mjs';
package/es/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const version = "0.0.20220406";
1
+ export declare const version = "0.0.20220407";
package/es/version.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const version = "0.0.20220406";
1
+ const version = "0.0.20220407";
2
2
 
3
3
  export { version };
4
4
  //# sourceMappingURL=version.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220406'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}
1
+ {"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220407'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}
@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  require('../../utils/index.js');
6
6
  var carousel$1 = require('./src/carousel2.js');
7
- var carouselItem$1 = require('./src/carousel-item2.js');
7
+ var carouselItem$1 = require('./src/carousel-item.js');
8
8
  var carousel = require('./src/carousel.js');
9
- var carouselItem = require('./src/carousel-item.js');
9
+ var carouselItem = require('./src/carousel-item2.js');
10
10
  var install = require('../../utils/vue/install.js');
11
11
 
12
12
  const ElCarousel = install.withInstall(carousel$1["default"], {
@@ -2,16 +2,164 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var vue = require('vue');
5
6
  require('../../../utils/index.js');
6
- var props = require('../../../utils/vue/props.js');
7
+ require('../../../hooks/index.js');
8
+ require('../../../tokens/index.js');
9
+ var carouselItem = require('./carousel-item2.js');
10
+ var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
11
+ var index = require('../../../hooks/use-namespace/index.js');
12
+ var carousel = require('../../../tokens/carousel.js');
13
+ var error = require('../../../utils/error.js');
14
+ var types = require('../../../utils/types.js');
7
15
 
8
- const carouselItemProps = props.buildProps({
9
- name: { type: String, default: "" },
10
- label: {
11
- type: [String, Number],
12
- default: ""
16
+ const __default__ = {
17
+ name: "ElCarouselItem"
18
+ };
19
+ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
20
+ ...__default__,
21
+ props: carouselItem.carouselItemProps,
22
+ setup(__props) {
23
+ const props = __props;
24
+ const ns = index.useNamespace("carousel");
25
+ const COMPONENT_NAME = "ElCarouselItem";
26
+ const carouselContext = vue.inject(carousel.carouselContextKey);
27
+ const instance = vue.getCurrentInstance();
28
+ if (!carouselContext) {
29
+ error.debugWarn(COMPONENT_NAME, "usage: <el-carousel></el-carousel-item></el-carousel>");
30
+ }
31
+ if (!instance) {
32
+ error.debugWarn(COMPONENT_NAME, "compositional hook can only be invoked inside setups");
33
+ }
34
+ const CARD_SCALE = 0.83;
35
+ const hover = vue.ref(false);
36
+ const translate = vue.ref(0);
37
+ const scale = vue.ref(1);
38
+ const active = vue.ref(false);
39
+ const ready = vue.ref(false);
40
+ const inStage = vue.ref(false);
41
+ const animating = vue.ref(false);
42
+ const { isCardType, isVertical } = carouselContext;
43
+ const itemStyle = vue.computed(() => {
44
+ const translateType = `translate${vue.unref(isVertical) ? "Y" : "X"}`;
45
+ const _translate = `${translateType}(${vue.unref(translate)}px)`;
46
+ const _scale = `scale(${vue.unref(scale)})`;
47
+ const transform = [_translate, _scale].join(" ");
48
+ return {
49
+ transform
50
+ };
51
+ });
52
+ function processIndex(index, activeIndex, length) {
53
+ const lastItemIndex = length - 1;
54
+ const prevItemIndex = activeIndex - 1;
55
+ const nextItemIndex = activeIndex + 1;
56
+ const halfItemIndex = length / 2;
57
+ if (activeIndex === 0 && index === lastItemIndex) {
58
+ return -1;
59
+ } else if (activeIndex === lastItemIndex && index === 0) {
60
+ return length;
61
+ } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
62
+ return length + 1;
63
+ } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
64
+ return -2;
65
+ }
66
+ return index;
67
+ }
68
+ function calcCardTranslate(index, activeIndex) {
69
+ var _a;
70
+ const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
71
+ if (inStage.value) {
72
+ return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
73
+ } else if (index < activeIndex) {
74
+ return -(1 + CARD_SCALE) * parentWidth / 4;
75
+ } else {
76
+ return (3 + CARD_SCALE) * parentWidth / 4;
77
+ }
78
+ }
79
+ function calcTranslate(index, activeIndex, isVertical2) {
80
+ const rootEl = carouselContext.root.value;
81
+ if (!rootEl)
82
+ return 0;
83
+ const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
84
+ return distance * (index - activeIndex);
85
+ }
86
+ const translateItem = (index, activeIndex, oldIndex) => {
87
+ var _a;
88
+ const _isCardType = vue.unref(isCardType);
89
+ const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
90
+ const isActive = index === activeIndex;
91
+ if (!_isCardType && !types.isUndefined(oldIndex)) {
92
+ animating.value = isActive || index === oldIndex;
93
+ }
94
+ if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
95
+ index = processIndex(index, activeIndex, carouselItemLength);
96
+ }
97
+ const _isVertical = vue.unref(isVertical);
98
+ active.value = isActive;
99
+ if (_isCardType) {
100
+ if (_isVertical) {
101
+ error.debugWarn("Carousel", "vertical direction is not supported for card mode");
102
+ }
103
+ inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
104
+ translate.value = calcCardTranslate(index, activeIndex);
105
+ scale.value = vue.unref(active) ? 1 : CARD_SCALE;
106
+ } else {
107
+ translate.value = calcTranslate(index, activeIndex, _isVertical);
108
+ }
109
+ ready.value = true;
110
+ };
111
+ function handleItemClick() {
112
+ if (carouselContext && vue.unref(isCardType)) {
113
+ const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
114
+ carouselContext.setActiveItem(index);
115
+ }
116
+ }
117
+ vue.onMounted(() => {
118
+ carouselContext.addItem({
119
+ props,
120
+ states: vue.reactive({
121
+ hover,
122
+ translate,
123
+ scale,
124
+ active,
125
+ ready,
126
+ inStage,
127
+ animating
128
+ }),
129
+ uid: instance.uid,
130
+ translateItem
131
+ });
132
+ });
133
+ vue.onUnmounted(() => {
134
+ carouselContext.removeItem(instance.uid);
135
+ });
136
+ return (_ctx, _cache) => {
137
+ return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
138
+ class: vue.normalizeClass([
139
+ vue.unref(ns).e("item"),
140
+ vue.unref(ns).is("active", active.value),
141
+ vue.unref(ns).is("in-stage", inStage.value),
142
+ vue.unref(ns).is("hover", hover.value),
143
+ vue.unref(ns).is("animating", animating.value),
144
+ { [vue.unref(ns).em("item", "card")]: vue.unref(isCardType) }
145
+ ]),
146
+ style: vue.normalizeStyle(vue.unref(itemStyle)),
147
+ onClick: handleItemClick
148
+ }, [
149
+ vue.unref(isCardType) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
150
+ key: 0,
151
+ class: vue.normalizeClass(vue.unref(ns).e("mask"))
152
+ }, null, 2)), [
153
+ [vue.vShow, !active.value]
154
+ ]) : vue.createCommentVNode("v-if", true),
155
+ vue.renderSlot(_ctx.$slots, "default")
156
+ ], 6)), [
157
+ [vue.vShow, ready.value]
158
+ ]);
159
+ };
13
160
  }
14
161
  });
162
+ var CarouselItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/carousel/src/carousel-item.vue"]]);
15
163
 
16
- exports.carouselItemProps = carouselItemProps;
164
+ exports["default"] = CarouselItem;
17
165
  //# sourceMappingURL=carousel-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"carousel-item.js","sources":["../../../../../../packages/components/carousel/src/carousel-item.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type CarouselItem from './carousel-item.vue'\n\nexport const carouselItemProps = buildProps({\n name: { type: String, default: '' },\n label: {\n type: [String, Number],\n default: '',\n },\n} as const)\n\nexport type CarouselItemProps = ExtractPropTypes<typeof carouselItemProps>\n\nexport type CarouselItemInstance = InstanceType<typeof CarouselItem>\n"],"names":["buildProps"],"mappings":";;;;;;;AACY,MAAC,iBAAiB,GAAGA,gBAAU,CAAC;AAC5C,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
1
+ {"version":3,"file":"carousel-item.js","sources":["../../../../../../packages/components/carousel/src/carousel-item.vue"],"sourcesContent":["<template>\n <div\n v-show=\"ready\"\n :class=\"[\n ns.e('item'),\n ns.is('active', active),\n ns.is('in-stage', inStage),\n ns.is('hover', hover),\n ns.is('animating', animating),\n { [ns.em('item', 'card')]: isCardType },\n ]\"\n :style=\"itemStyle\"\n @click=\"handleItemClick\"\n >\n <div v-if=\"isCardType\" v-show=\"!active\" :class=\"ns.e('mask')\" />\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n unref,\n} from 'vue'\nimport { debugWarn, isUndefined } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { carouselContextKey } from '@element-plus/tokens'\nimport { carouselItemProps } from './carousel-item'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElCarouselItem',\n})\n\nconst props = defineProps(carouselItemProps)\nconst ns = useNamespace('carousel')\nconst COMPONENT_NAME = 'ElCarouselItem'\n// inject\nconst carouselContext = inject(carouselContextKey)!\n// instance\nconst instance = getCurrentInstance()!\nif (!carouselContext) {\n debugWarn(\n COMPONENT_NAME,\n 'usage: <el-carousel></el-carousel-item></el-carousel>'\n )\n}\n\nif (!instance) {\n debugWarn(\n COMPONENT_NAME,\n 'compositional hook can only be invoked inside setups'\n )\n}\n\nconst CARD_SCALE = 0.83\n\nconst hover = ref(false)\nconst translate = ref(0)\nconst scale = ref(1)\nconst active = ref(false)\nconst ready = ref(false)\nconst inStage = ref(false)\nconst animating = ref(false)\n\n// computed\nconst { isCardType, isVertical } = carouselContext\n\nconst itemStyle = computed<CSSProperties>(() => {\n const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`\n const _translate = `${translateType}(${unref(translate)}px)`\n const _scale = `scale(${unref(scale)})`\n const transform = [_translate, _scale].join(' ')\n\n return {\n transform,\n }\n})\n\n// methods\n\nfunction processIndex(index: number, activeIndex: number, length: number) {\n const lastItemIndex = length - 1\n const prevItemIndex = activeIndex - 1\n const nextItemIndex = activeIndex + 1\n const halfItemIndex = length / 2\n\n if (activeIndex === 0 && index === lastItemIndex) {\n return -1\n } else if (activeIndex === lastItemIndex && index === 0) {\n return length\n } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {\n return length + 1\n } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {\n return -2\n }\n return index\n}\n\nfunction calcCardTranslate(index: number, activeIndex: number) {\n const parentWidth = carouselContext.root.value?.offsetWidth || 0\n if (inStage.value) {\n return (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n } else if (index < activeIndex) {\n return (-(1 + CARD_SCALE) * parentWidth) / 4\n } else {\n return ((3 + CARD_SCALE) * parentWidth) / 4\n }\n}\n\nfunction calcTranslate(\n index: number,\n activeIndex: number,\n isVertical: boolean\n) {\n const rootEl = carouselContext.root.value\n if (!rootEl) return 0\n\n const distance = (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0\n return distance * (index - activeIndex)\n}\n\nconst translateItem = (\n index: number,\n activeIndex: number,\n oldIndex?: number\n) => {\n const _isCardType = unref(isCardType)\n const carouselItemLength = carouselContext.items.value.length ?? Number.NaN\n\n const isActive = index === activeIndex\n if (!_isCardType && !isUndefined(oldIndex)) {\n animating.value = isActive || index === oldIndex\n }\n\n if (!isActive && carouselItemLength > 2 && carouselContext.loop) {\n index = processIndex(index, activeIndex, carouselItemLength)\n }\n\n const _isVertical = unref(isVertical)\n active.value = isActive\n\n if (_isCardType) {\n if (_isVertical) {\n debugWarn('Carousel', 'vertical direction is not supported for card mode')\n }\n inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1\n translate.value = calcCardTranslate(index, activeIndex)\n scale.value = unref(active) ? 1 : CARD_SCALE\n } else {\n translate.value = calcTranslate(index, activeIndex, _isVertical)\n }\n\n ready.value = true\n}\n\nfunction handleItemClick() {\n if (carouselContext && unref(isCardType)) {\n const index = carouselContext.items.value.findIndex(\n ({ uid }) => uid === instance.uid\n )\n carouselContext.setActiveItem(index)\n }\n}\n\n// lifecycle\nonMounted(() => {\n carouselContext.addItem({\n props,\n states: reactive({\n hover,\n translate,\n scale,\n active,\n ready,\n inStage,\n animating,\n }),\n uid: instance.uid,\n translateItem,\n })\n})\n\nonUnmounted(() => {\n carouselContext.removeItem(instance.uid)\n})\n</script>\n"],"names":["useNamespace","inject","carouselContextKey","getCurrentInstance","debugWarn","ref","computed","unref","isUndefined","onMounted","reactive","onUnmounted"],"mappings":"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"}