@studiometa/ui 1.0.0-alpha.0 → 1.0.0-alpha.2

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 (192) hide show
  1. package/README.md +6 -4
  2. package/atoms/Data/DataBind.d.ts +1 -1
  3. package/atoms/Data/DataBind.js +12 -5
  4. package/atoms/Data/DataBind.js.map +2 -2
  5. package/atoms/Data/DataComputed.js +1 -1
  6. package/atoms/Data/DataComputed.js.map +2 -2
  7. package/atoms/Data/DataModel.d.ts +1 -0
  8. package/atoms/Data/DataModel.js +13 -3
  9. package/atoms/Data/DataModel.js.map +2 -2
  10. package/package.json +1 -1
  11. package/atoms/Action/Action.cjs +0 -115
  12. package/atoms/Action/Action.cjs.map +0 -7
  13. package/atoms/Action/Target.cjs +0 -35
  14. package/atoms/Action/Target.cjs.map +0 -7
  15. package/atoms/Action/index.cjs +0 -22
  16. package/atoms/Action/index.cjs.map +0 -7
  17. package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +0 -52
  18. package/atoms/AnchorScrollTo/AnchorScrollTo.cjs.map +0 -7
  19. package/atoms/AnchorScrollTo/index.cjs +0 -21
  20. package/atoms/AnchorScrollTo/index.cjs.map +0 -7
  21. package/atoms/CircularMarquee/CircularMarquee.cjs +0 -69
  22. package/atoms/CircularMarquee/CircularMarquee.cjs.map +0 -7
  23. package/atoms/CircularMarquee/index.cjs +0 -21
  24. package/atoms/CircularMarquee/index.cjs.map +0 -7
  25. package/atoms/Cursor/Cursor.cjs +0 -137
  26. package/atoms/Cursor/Cursor.cjs.map +0 -7
  27. package/atoms/Cursor/index.cjs +0 -21
  28. package/atoms/Cursor/index.cjs.map +0 -7
  29. package/atoms/Data/DataBind.cjs +0 -124
  30. package/atoms/Data/DataBind.cjs.map +0 -7
  31. package/atoms/Data/DataComputed.cjs +0 -49
  32. package/atoms/Data/DataComputed.cjs.map +0 -7
  33. package/atoms/Data/DataEffect.cjs +0 -47
  34. package/atoms/Data/DataEffect.cjs.map +0 -7
  35. package/atoms/Data/DataModel.cjs +0 -38
  36. package/atoms/Data/DataModel.cjs.map +0 -7
  37. package/atoms/Data/index.cjs +0 -24
  38. package/atoms/Data/index.cjs.map +0 -7
  39. package/atoms/Data/utils.cjs +0 -46
  40. package/atoms/Data/utils.cjs.map +0 -7
  41. package/atoms/Figure/Figure.cjs +0 -105
  42. package/atoms/Figure/Figure.cjs.map +0 -7
  43. package/atoms/Figure/FigureTwicpics.cjs +0 -123
  44. package/atoms/Figure/FigureTwicpics.cjs.map +0 -7
  45. package/atoms/Figure/index.cjs +0 -22
  46. package/atoms/Figure/index.cjs.map +0 -7
  47. package/atoms/FigureVideo/FigureVideo.cjs +0 -132
  48. package/atoms/FigureVideo/FigureVideo.cjs.map +0 -7
  49. package/atoms/FigureVideo/FigureVideoTwicpics.cjs +0 -153
  50. package/atoms/FigureVideo/FigureVideoTwicpics.cjs.map +0 -7
  51. package/atoms/FigureVideo/index.cjs +0 -22
  52. package/atoms/FigureVideo/index.cjs.map +0 -7
  53. package/atoms/LargeText/LargeText.cjs +0 -109
  54. package/atoms/LargeText/LargeText.cjs.map +0 -7
  55. package/atoms/LargeText/index.cjs +0 -21
  56. package/atoms/LargeText/index.cjs.map +0 -7
  57. package/atoms/LazyInclude/LazyInclude.cjs +0 -78
  58. package/atoms/LazyInclude/LazyInclude.cjs.map +0 -7
  59. package/atoms/LazyInclude/index.cjs +0 -21
  60. package/atoms/LazyInclude/index.cjs.map +0 -7
  61. package/atoms/Prefetch/AbstractPrefetch.cjs +0 -86
  62. package/atoms/Prefetch/AbstractPrefetch.cjs.map +0 -7
  63. package/atoms/Prefetch/PrefetchWhenOver.cjs +0 -42
  64. package/atoms/Prefetch/PrefetchWhenOver.cjs.map +0 -7
  65. package/atoms/Prefetch/PrefetchWhenVisible.cjs +0 -43
  66. package/atoms/Prefetch/PrefetchWhenVisible.cjs.map +0 -7
  67. package/atoms/Prefetch/index.cjs +0 -23
  68. package/atoms/Prefetch/index.cjs.map +0 -7
  69. package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +0 -95
  70. package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +0 -7
  71. package/atoms/ScrollAnimation/ScrollAnimation.cjs +0 -44
  72. package/atoms/ScrollAnimation/ScrollAnimation.cjs.map +0 -7
  73. package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +0 -84
  74. package/atoms/ScrollAnimation/ScrollAnimationChild.cjs.map +0 -7
  75. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +0 -37
  76. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs.map +0 -7
  77. package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +0 -50
  78. package/atoms/ScrollAnimation/ScrollAnimationParent.cjs.map +0 -7
  79. package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +0 -37
  80. package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs.map +0 -7
  81. package/atoms/ScrollAnimation/animationScrollWithEase.cjs +0 -59
  82. package/atoms/ScrollAnimation/animationScrollWithEase.cjs.map +0 -7
  83. package/atoms/ScrollAnimation/index.cjs +0 -27
  84. package/atoms/ScrollAnimation/index.cjs.map +0 -7
  85. package/atoms/ScrollReveal/ScrollReveal.cjs +0 -81
  86. package/atoms/ScrollReveal/ScrollReveal.cjs.map +0 -7
  87. package/atoms/ScrollReveal/index.cjs +0 -21
  88. package/atoms/ScrollReveal/index.cjs.map +0 -7
  89. package/atoms/index.cjs +0 -32
  90. package/atoms/index.cjs.map +0 -7
  91. package/decorators/index.cjs +0 -22
  92. package/decorators/index.cjs.map +0 -7
  93. package/decorators/withDeprecation.cjs +0 -47
  94. package/decorators/withDeprecation.cjs.map +0 -7
  95. package/decorators/withTransition.cjs +0 -86
  96. package/decorators/withTransition.cjs.map +0 -7
  97. package/index.cjs +0 -25
  98. package/index.cjs.map +0 -7
  99. package/molecules/Accordion/Accordion.cjs +0 -36
  100. package/molecules/Accordion/Accordion.cjs.map +0 -7
  101. package/molecules/Accordion/AccordionCore.cjs +0 -58
  102. package/molecules/Accordion/AccordionCore.cjs.map +0 -7
  103. package/molecules/Accordion/AccordionItem.cjs +0 -206
  104. package/molecules/Accordion/AccordionItem.cjs.map +0 -7
  105. package/molecules/Accordion/index.cjs +0 -22
  106. package/molecules/Accordion/index.cjs.map +0 -7
  107. package/molecules/AnchorNav/AnchorNav.cjs +0 -63
  108. package/molecules/AnchorNav/AnchorNav.cjs.map +0 -7
  109. package/molecules/AnchorNav/AnchorNavLink.cjs +0 -40
  110. package/molecules/AnchorNav/AnchorNavLink.cjs.map +0 -7
  111. package/molecules/AnchorNav/AnchorNavTarget.cjs +0 -35
  112. package/molecules/AnchorNav/AnchorNavTarget.cjs.map +0 -7
  113. package/molecules/AnchorNav/index.cjs +0 -23
  114. package/molecules/AnchorNav/index.cjs.map +0 -7
  115. package/molecules/Menu/Menu.cjs +0 -177
  116. package/molecules/Menu/Menu.cjs.map +0 -7
  117. package/molecules/Menu/MenuBtn.cjs +0 -66
  118. package/molecules/Menu/MenuBtn.cjs.map +0 -7
  119. package/molecules/Menu/MenuList.cjs +0 -165
  120. package/molecules/Menu/MenuList.cjs.map +0 -7
  121. package/molecules/Menu/index.cjs +0 -23
  122. package/molecules/Menu/index.cjs.map +0 -7
  123. package/molecules/Modal/Modal.cjs +0 -219
  124. package/molecules/Modal/Modal.cjs.map +0 -7
  125. package/molecules/Modal/ModalWithTransition.cjs +0 -69
  126. package/molecules/Modal/ModalWithTransition.cjs.map +0 -7
  127. package/molecules/Modal/index.cjs +0 -22
  128. package/molecules/Modal/index.cjs.map +0 -7
  129. package/molecules/Panel/Panel.cjs +0 -137
  130. package/molecules/Panel/Panel.cjs.map +0 -7
  131. package/molecules/Panel/index.cjs +0 -21
  132. package/molecules/Panel/index.cjs.map +0 -7
  133. package/molecules/Slider/AbstractSliderChild.cjs +0 -88
  134. package/molecules/Slider/AbstractSliderChild.cjs.map +0 -7
  135. package/molecules/Slider/Slider.cjs +0 -404
  136. package/molecules/Slider/Slider.cjs.map +0 -7
  137. package/molecules/Slider/SliderBtn.cjs +0 -71
  138. package/molecules/Slider/SliderBtn.cjs.map +0 -7
  139. package/molecules/Slider/SliderCount.cjs +0 -44
  140. package/molecules/Slider/SliderCount.cjs.map +0 -7
  141. package/molecules/Slider/SliderDots.cjs +0 -64
  142. package/molecules/Slider/SliderDots.cjs.map +0 -7
  143. package/molecules/Slider/SliderDrag.cjs +0 -66
  144. package/molecules/Slider/SliderDrag.cjs.map +0 -7
  145. package/molecules/Slider/SliderItem.cjs +0 -177
  146. package/molecules/Slider/SliderItem.cjs.map +0 -7
  147. package/molecules/Slider/SliderProgress.cjs +0 -49
  148. package/molecules/Slider/SliderProgress.cjs.map +0 -7
  149. package/molecules/Slider/index.cjs +0 -28
  150. package/molecules/Slider/index.cjs.map +0 -7
  151. package/molecules/Sticky/Sticky.cjs +0 -177
  152. package/molecules/Sticky/Sticky.cjs.map +0 -7
  153. package/molecules/Sticky/index.cjs +0 -21
  154. package/molecules/Sticky/index.cjs.map +0 -7
  155. package/molecules/TableOfContent/TableOfContent.cjs +0 -72
  156. package/molecules/TableOfContent/TableOfContent.cjs.map +0 -7
  157. package/molecules/TableOfContent/TableOfContentAnchor.cjs +0 -76
  158. package/molecules/TableOfContent/TableOfContentAnchor.cjs.map +0 -7
  159. package/molecules/TableOfContent/index.cjs +0 -22
  160. package/molecules/TableOfContent/index.cjs.map +0 -7
  161. package/molecules/Tabs/Tabs.cjs +0 -153
  162. package/molecules/Tabs/Tabs.cjs.map +0 -7
  163. package/molecules/Tabs/index.cjs +0 -21
  164. package/molecules/Tabs/index.cjs.map +0 -7
  165. package/molecules/index.cjs +0 -30
  166. package/molecules/index.cjs.map +0 -7
  167. package/organisms/Frame/Frame.cjs +0 -220
  168. package/organisms/Frame/Frame.cjs.map +0 -7
  169. package/organisms/Frame/FrameAnchor.cjs +0 -41
  170. package/organisms/Frame/FrameAnchor.cjs.map +0 -7
  171. package/organisms/Frame/FrameForm.cjs +0 -41
  172. package/organisms/Frame/FrameForm.cjs.map +0 -7
  173. package/organisms/Frame/FrameTarget.cjs +0 -114
  174. package/organisms/Frame/FrameTarget.cjs.map +0 -7
  175. package/organisms/Frame/index.cjs +0 -24
  176. package/organisms/Frame/index.cjs.map +0 -7
  177. package/organisms/index.cjs +0 -21
  178. package/organisms/index.cjs.map +0 -7
  179. package/primitives/Draggable/Draggable.cjs +0 -65
  180. package/primitives/Draggable/Draggable.cjs.map +0 -7
  181. package/primitives/Draggable/index.cjs +0 -21
  182. package/primitives/Draggable/index.cjs.map +0 -7
  183. package/primitives/Sentinel/Sentinel.cjs +0 -35
  184. package/primitives/Sentinel/Sentinel.cjs.map +0 -7
  185. package/primitives/Sentinel/index.cjs +0 -21
  186. package/primitives/Sentinel/index.cjs.map +0 -7
  187. package/primitives/Transition/Transition.cjs +0 -36
  188. package/primitives/Transition/Transition.cjs.map +0 -7
  189. package/primitives/Transition/index.cjs +0 -21
  190. package/primitives/Transition/index.cjs.map +0 -7
  191. package/primitives/index.cjs +0 -23
  192. package/primitives/index.cjs.map +0 -7
@@ -1,404 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all) => {
6
- for (var name in all)
7
- __defProp(target, name, { get: all[name], enumerable: true });
8
- };
9
- var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
16
- };
17
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
-
19
- // packages/ui/molecules/Slider/Slider.ts
20
- var Slider_exports = {};
21
- __export(Slider_exports, {
22
- Slider: () => Slider
23
- });
24
- module.exports = __toCommonJS(Slider_exports);
25
- var import_js_toolkit = require("@studiometa/js-toolkit");
26
- var import_utils = require("@studiometa/js-toolkit/utils");
27
- var import_SliderDrag = require("./SliderDrag.cjs");
28
- var import_SliderItem = require("./SliderItem.cjs");
29
- var Slider = class extends import_js_toolkit.Base {
30
- /**
31
- * Config.
32
- */
33
- static config = {
34
- name: "Slider",
35
- refs: ["wrapper", "debug"],
36
- emits: ["goto", "index"],
37
- components: {
38
- SliderItem: import_SliderItem.SliderItem,
39
- SliderDrag: import_SliderDrag.SliderDrag
40
- },
41
- options: {
42
- mode: { type: String, default: "left" },
43
- fitBounds: Boolean,
44
- contain: Boolean,
45
- sensitivity: { type: Number, default: 1 },
46
- dropSensitivity: { type: Number, default: 2 }
47
- }
48
- };
49
- __distanceX = 0;
50
- __initialX = 0;
51
- /**
52
- * Index of the current active slide.
53
- */
54
- __currentIndex = 0;
55
- __isDragging = false;
56
- /**
57
- * Get the current index.
58
- */
59
- get currentIndex() {
60
- return this.__currentIndex;
61
- }
62
- /**
63
- * Set the current index and emit the `index` event.
64
- */
65
- set currentIndex(value) {
66
- this.currentSliderItem.disactivate();
67
- this.$emit("index", value);
68
- this.__currentIndex = value;
69
- this.currentSliderItem.activate();
70
- }
71
- /**
72
- * Store all the states.
73
- */
74
- states = [];
75
- /**
76
- * Origins for the different modes.
77
- */
78
- origins = {
79
- left: 0,
80
- center: 0,
81
- right: 0
82
- };
83
- /**
84
- * Wether or not the wrapper is focused.
85
- * @type {boolean}
86
- */
87
- hasFocus = false;
88
- /**
89
- * Get the current state.
90
- */
91
- get currentState() {
92
- return this.states[this.currentIndex];
93
- }
94
- /**
95
- * Get the first state.
96
- */
97
- get firstState() {
98
- return this.states[0];
99
- }
100
- /**
101
- * Get the last state.
102
- */
103
- get lastState() {
104
- return this.states.at(-1);
105
- }
106
- /**
107
- * Get the minimal contain state value.
108
- */
109
- get containMinState() {
110
- return this.getStateValueByMode(this.firstState.x, "left");
111
- }
112
- /**
113
- * Get the maximal contain state value.
114
- */
115
- get containMaxState() {
116
- return this.getStateValueByMode(this.lastState.x, "right");
117
- }
118
- /**
119
- * Get the last index.
120
- */
121
- get indexMax() {
122
- return this.$children.SliderItem.length - 1;
123
- }
124
- /**
125
- * Get the current SliderItem
126
- */
127
- get currentSliderItem() {
128
- return this.$children.SliderItem[this.currentIndex];
129
- }
130
- /**
131
- * Get the states for each SliderItem.
132
- */
133
- getStates() {
134
- const { wrapper } = this.$refs;
135
- const originRect = wrapper.getBoundingClientRect();
136
- this.origins = {
137
- left: originRect.left,
138
- center: originRect.x + originRect.width / 2,
139
- right: originRect.x + originRect.width
140
- };
141
- const states = this.$children.SliderItem.map((item) => ({
142
- x: {
143
- left: (item.rect.x - this.origins.left) * -1,
144
- center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
145
- right: (item.rect.x + item.rect.width - this.origins.right) * -1
146
- }
147
- }));
148
- if (this.$options.contain) {
149
- const { mode } = this.$options;
150
- if (mode === "left") {
151
- const lastChild = this.$children.SliderItem.at(-1);
152
- const maxState = states.find((state) => {
153
- const lastChildPosition = lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;
154
- const diffWithWrapperBound = originRect.width - lastChildPosition;
155
- if (diffWithWrapperBound > 0) {
156
- state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);
157
- return true;
158
- }
159
- return false;
160
- });
161
- if (maxState) {
162
- return states.map((state) => {
163
- state.x.left = Math.max(state.x.left, maxState.x.left);
164
- return state;
165
- });
166
- }
167
- }
168
- if (mode === "right") {
169
- const maxStateIndex = states.findIndex((state) => state.x.right <= 0);
170
- const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];
171
- return states.map((state) => {
172
- state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);
173
- return state;
174
- });
175
- }
176
- if (mode === "center" && import_utils.isDev) {
177
- console.warn(
178
- `[${this.$id}]`,
179
- "The `center` mode is not yet compatible with the `contain` mode."
180
- );
181
- }
182
- }
183
- return states;
184
- }
185
- /**
186
- * Get an origin by mode.
187
- */
188
- getOriginByMode(mode) {
189
- return this.origins[mode ?? this.$options.mode];
190
- }
191
- /**
192
- * Get a state value according to the given mode.
193
- */
194
- getStateValueByMode(state, mode) {
195
- return state[mode ?? this.$options.mode];
196
- }
197
- /**
198
- * Mounted hook.
199
- */
200
- mounted() {
201
- this.states = this.getStates();
202
- this.setAccessibilityAttributes();
203
- this.prepareInvisibleItems();
204
- this.goTo(this.currentIndex);
205
- }
206
- /**
207
- * Resized hook.
208
- */
209
- resized() {
210
- (0, import_utils.nextFrame)(() => {
211
- this.states = this.getStates();
212
- (0, import_utils.nextFrame)(() => {
213
- this.prepareInvisibleItems();
214
- this.goTo(this.currentIndex);
215
- });
216
- });
217
- }
218
- /**
219
- * Set accessibility attributes for the component
220
- */
221
- setAccessibilityAttributes() {
222
- this.$el.setAttribute("role", "group");
223
- this.$el.setAttribute("aria-roledescription", "carousel");
224
- }
225
- /**
226
- * Go to the next slide.
227
- */
228
- goNext() {
229
- if (this.currentIndex + 1 > this.indexMax) {
230
- return;
231
- }
232
- this.goTo(this.currentIndex + 1);
233
- }
234
- /**
235
- * Go to the previous slide.
236
- */
237
- goPrev() {
238
- if (this.currentIndex - 1 < 0) {
239
- return;
240
- }
241
- this.goTo(this.currentIndex - 1);
242
- }
243
- /**
244
- * Go to the given index.
245
- */
246
- goTo(index, { withInstantMove = true } = {}) {
247
- if (index < 0 || index > this.indexMax) {
248
- throw new Error("Index out of bound.");
249
- }
250
- const currentState = this.getStateValueByMode(this.currentState.x);
251
- const state = this.getStateValueByMode(this.states[index].x);
252
- const itemsToMove = this.getVisibleItems(state);
253
- const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
254
- itemsToMove.forEach((item) => {
255
- if (currentState !== state && withInstantMove) {
256
- item.moveInstantly(currentState);
257
- }
258
- (0, import_utils.nextFrame)(() => item.move(state));
259
- });
260
- invisibleItemsToMoveInstantly.forEach((item) => {
261
- item.moveInstantly(state);
262
- });
263
- this.currentIndex = index;
264
- this.$emit("goto", index);
265
- }
266
- /**
267
- * Listen to the Draggable `start` event.
268
- */
269
- onSliderDragStart() {
270
- this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
271
- this.__distanceX = this.__initialX;
272
- this.__isDragging = true;
273
- }
274
- /**
275
- * Listen to the Draggable `drag` event.
276
- */
277
- onSliderDragDrag(props) {
278
- if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
279
- return;
280
- }
281
- this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
282
- this.getVisibleItems(this.__distanceX).forEach((item) => {
283
- item.moveInstantly(this.__distanceX);
284
- });
285
- }
286
- /**
287
- * Listen to the Draggable `drop` event and find the new active slide.
288
- */
289
- onSliderDragDrop(props) {
290
- if (!this.__isDragging) {
291
- return;
292
- }
293
- this.__isDragging = false;
294
- if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
295
- return;
296
- }
297
- let finalX = (0, import_utils.clamp)(
298
- (0, import_utils.inertiaFinalValue)(this.__distanceX, props.delta.x * this.$options.dropSensitivity),
299
- this.getStateValueByMode(this.firstState.x),
300
- this.getStateValueByMode(this.lastState.x)
301
- );
302
- const absoluteDifferencesBetweenDistanceAndState = this.states.map(
303
- (state) => Math.abs(finalX - this.getStateValueByMode(state.x))
304
- );
305
- const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
306
- const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);
307
- if (this.$options.fitBounds) {
308
- this.goTo(closestIndex, { withInstantMove: false });
309
- } else {
310
- if (this.$options.contain) {
311
- finalX = Math.min(this.containMinState, finalX);
312
- finalX = Math.max(this.containMaxState, finalX);
313
- }
314
- this.$children.SliderItem.forEach((item) => {
315
- item.move(finalX);
316
- });
317
- this.currentIndex = closestIndex;
318
- }
319
- }
320
- /**
321
- * Enable focus.
322
- */
323
- onWrapperFocus() {
324
- this.hasFocus = true;
325
- }
326
- /**
327
- * Disable focus.
328
- */
329
- onWrapperBlur() {
330
- this.hasFocus = false;
331
- }
332
- /**
333
- * Go prev or next when focus is on the wrapper and pressing arrow keys.
334
- */
335
- keyed({ LEFT, RIGHT, isDown }) {
336
- if (this.hasFocus && isDown) {
337
- if (LEFT) {
338
- this.goPrev();
339
- } else if (RIGHT) {
340
- this.goNext();
341
- }
342
- }
343
- }
344
- /**
345
- * Prepare invisible items.
346
- */
347
- prepareInvisibleItems() {
348
- const state = this.states[this.currentIndex];
349
- const nextItemsToPrepare = [];
350
- const previousItemsToPrepare = [];
351
- this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
352
- if (i > this.currentIndex) {
353
- nextItemsToPrepare.push(item);
354
- return;
355
- }
356
- if (i < this.currentIndex) {
357
- previousItemsToPrepare.push(item);
358
- }
359
- });
360
- nextItemsToPrepare.forEach((item) => {
361
- const invisibleState = this.getStateWhereItemWillBeInvisible(item);
362
- if (invisibleState) {
363
- item.moveInstantly(this.getStateValueByMode(invisibleState.x));
364
- }
365
- });
366
- previousItemsToPrepare.forEach((item) => {
367
- const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
368
- if (invisibleState) {
369
- item.moveInstantly(this.getStateValueByMode(invisibleState.x));
370
- }
371
- });
372
- }
373
- /**
374
- * Get the state where the given item will be visible.
375
- */
376
- getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
377
- const visibleStates = this.states.filter(
378
- (state) => item.willBeVisible(this.getStateValueByMode(state.x))
379
- );
380
- const firstVisibleState = visibleStates[0];
381
- const lastVisibleState = visibleStates.at(-1);
382
- const firstVisibleStateIndex = this.states.findIndex(
383
- (state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x)
384
- );
385
- const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
386
- return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
387
- }
388
- /**
389
- * Get the visible slides for the given position.
390
- */
391
- getVisibleItems(target) {
392
- return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
393
- }
394
- /**
395
- * Get the invisible slides for the given position.
396
- */
397
- getInvisibleItems(target) {
398
- return this.$children.SliderItem.filter(
399
- (item) => !item.isVisible && !item.willBeVisible(target)
400
- );
401
- }
402
- };
403
- if (module.exports.default) module.exports = module.exports.default;
404
- //# sourceMappingURL=Slider.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
4
- "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n BaseProps,\n BaseConfig,\n DragServiceProps,\n KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n $refs: {\n wrapper: HTMLElement;\n };\n $children: {\n SliderItem: SliderItem[];\n SliderDrag: SliderDrag[];\n };\n $options: {\n mode: SliderModes;\n fitBounds: boolean;\n contain: boolean;\n sensitivity: number;\n dropSensitivity: number;\n };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Slider',\n refs: ['wrapper', 'debug'],\n emits: ['goto', 'index'],\n components: {\n SliderItem,\n SliderDrag,\n },\n options: {\n mode: { type: String, default: 'left' },\n fitBounds: Boolean,\n contain: Boolean,\n sensitivity: { type: Number, default: 1 },\n dropSensitivity: { type: Number, default: 2 },\n },\n };\n\n __distanceX = 0;\n\n __initialX = 0;\n\n /**\n * Index of the current active slide.\n */\n __currentIndex = 0;\n\n __isDragging = false;\n\n /**\n * Get the current index.\n */\n get currentIndex() {\n return this.__currentIndex;\n }\n\n /**\n * Set the current index and emit the `index` event.\n */\n set currentIndex(value: number) {\n this.currentSliderItem.disactivate();\n this.$emit('index', value);\n this.__currentIndex = value;\n this.currentSliderItem.activate();\n }\n\n /**\n * Store all the states.\n */\n states: SliderState[] = [];\n\n /**\n * Origins for the different modes.\n */\n origins: Record<SliderModes, number> = {\n left: 0,\n center: 0,\n right: 0,\n };\n\n /**\n * Wether or not the wrapper is focused.\n * @type {boolean}\n */\n hasFocus = false;\n\n /**\n * Get the current state.\n */\n get currentState() {\n return this.states[this.currentIndex];\n }\n\n /**\n * Get the first state.\n */\n get firstState() {\n return this.states[0];\n }\n\n /**\n * Get the last state.\n */\n get lastState() {\n return this.states.at(-1);\n }\n\n /**\n * Get the minimal contain state value.\n */\n get containMinState(): number {\n return this.getStateValueByMode(this.firstState.x, 'left');\n }\n\n /**\n * Get the maximal contain state value.\n */\n get containMaxState(): number {\n return this.getStateValueByMode(this.lastState.x, 'right');\n }\n\n /**\n * Get the last index.\n */\n get indexMax(): number {\n return this.$children.SliderItem.length - 1;\n }\n\n /**\n * Get the current SliderItem\n */\n get currentSliderItem() {\n return this.$children.SliderItem[this.currentIndex];\n }\n\n /**\n * Get the states for each SliderItem.\n */\n getStates(): SliderState[] {\n const { wrapper } = this.$refs;\n const originRect = wrapper.getBoundingClientRect();\n\n this.origins = {\n left: originRect.left,\n center: originRect.x + originRect.width / 2,\n right: originRect.x + originRect.width,\n };\n\n const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n x: {\n left: (item.rect.x - this.origins.left) * -1,\n center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n },\n }));\n\n if (this.$options.contain) {\n const { mode } = this.$options;\n // Find state where last child has passed the wrapper bound completely\n if (mode === 'left') {\n const lastChild = this.$children.SliderItem.at(-1);\n\n const maxState = states.find((state) => {\n const lastChildPosition =\n lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n const diffWithWrapperBound = originRect.width - lastChildPosition;\n if (diffWithWrapperBound > 0) {\n state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n return true;\n }\n\n return false;\n });\n\n if (maxState) {\n return states.map((state) => {\n state.x.left = Math.max(state.x.left, maxState.x.left);\n return state;\n });\n }\n }\n\n if (mode === 'right') {\n const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n return states.map((state) => {\n state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n return state;\n });\n }\n\n if (mode === 'center' && isDev) {\n console.warn(\n `[${this.$id}]`,\n 'The `center` mode is not yet compatible with the `contain` mode.',\n );\n }\n }\n\n return states;\n }\n\n /**\n * Get an origin by mode.\n */\n getOriginByMode(mode?: SliderModes) {\n return this.origins[mode ?? this.$options.mode];\n }\n\n /**\n * Get a state value according to the given mode.\n */\n getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n return state[mode ?? this.$options.mode];\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n this.states = this.getStates();\n this.setAccessibilityAttributes();\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n }\n\n /**\n * Resized hook.\n */\n resized() {\n nextFrame(() => {\n this.states = this.getStates();\n nextFrame(() => {\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n });\n });\n }\n\n /**\n * Set accessibility attributes for the component\n */\n setAccessibilityAttributes() {\n this.$el.setAttribute('role', 'group');\n this.$el.setAttribute('aria-roledescription', 'carousel');\n }\n\n /**\n * Go to the next slide.\n */\n goNext() {\n if (this.currentIndex + 1 > this.indexMax) {\n return;\n }\n\n this.goTo(this.currentIndex + 1);\n }\n\n /**\n * Go to the previous slide.\n */\n goPrev() {\n if (this.currentIndex - 1 < 0) {\n return;\n }\n\n this.goTo(this.currentIndex - 1);\n }\n\n /**\n * Go to the given index.\n */\n goTo(index: number, { withInstantMove = true } = {}) {\n if (index < 0 || index > this.indexMax) {\n throw new Error('Index out of bound.');\n }\n\n const currentState = this.getStateValueByMode(this.currentState.x);\n const state = this.getStateValueByMode(this.states[index].x);\n const itemsToMove = this.getVisibleItems(state);\n const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n itemsToMove.forEach((item) => {\n // Better perfs when going fast through the slides\n if (currentState !== state && withInstantMove) {\n item.moveInstantly(currentState);\n }\n nextFrame(() => item.move(state));\n });\n invisibleItemsToMoveInstantly.forEach((item) => {\n item.moveInstantly(state);\n });\n\n this.currentIndex = index;\n this.$emit('goto', index);\n }\n\n /**\n * Listen to the Draggable `start` event.\n */\n onSliderDragStart() {\n this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n this.__distanceX = this.__initialX;\n\n this.__isDragging = true;\n }\n\n /**\n * Listen to the Draggable `drag` event.\n */\n onSliderDragDrag(props: DragServiceProps) {\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n this.getVisibleItems(this.__distanceX).forEach((item) => {\n item.moveInstantly(this.__distanceX);\n });\n }\n\n /**\n * Listen to the Draggable `drop` event and find the new active slide.\n */\n onSliderDragDrop(props: DragServiceProps) {\n if (!this.__isDragging) {\n return;\n }\n this.__isDragging = false;\n\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n let finalX = clamp(\n inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n this.getStateValueByMode(this.firstState.x),\n this.getStateValueByMode(this.lastState.x),\n );\n\n const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n Math.abs(finalX - this.getStateValueByMode(state.x)),\n );\n const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n if (this.$options.fitBounds) {\n this.goTo(closestIndex, { withInstantMove: false });\n } else {\n if (this.$options.contain) {\n finalX = Math.min(this.containMinState, finalX);\n finalX = Math.max(this.containMaxState, finalX);\n }\n this.$children.SliderItem.forEach((item) => {\n item.move(finalX);\n });\n this.currentIndex = closestIndex;\n }\n }\n\n /**\n * Enable focus.\n */\n onWrapperFocus() {\n this.hasFocus = true;\n }\n\n /**\n * Disable focus.\n */\n onWrapperBlur() {\n this.hasFocus = false;\n }\n\n /**\n * Go prev or next when focus is on the wrapper and pressing arrow keys.\n */\n keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n if (this.hasFocus && isDown) {\n if (LEFT) {\n this.goPrev();\n } else if (RIGHT) {\n this.goNext();\n }\n }\n }\n\n /**\n * Prepare invisible items.\n */\n prepareInvisibleItems() {\n const state = this.states[this.currentIndex];\n const nextItemsToPrepare = [];\n const previousItemsToPrepare = [];\n\n this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n if (i > this.currentIndex) {\n nextItemsToPrepare.push(item);\n return;\n }\n\n if (i < this.currentIndex) {\n previousItemsToPrepare.push(item);\n }\n });\n\n nextItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n\n previousItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n }\n\n /**\n * Get the state where the given item will be visible.\n */\n getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n const visibleStates = this.states.filter((state) =>\n item.willBeVisible(this.getStateValueByMode(state.x)),\n );\n const firstVisibleState = visibleStates[0];\n const lastVisibleState = visibleStates.at(-1);\n const firstVisibleStateIndex = this.states.findIndex(\n (state) =>\n this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n );\n const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n return reversed\n ? this.states[lastVisibleStateIndex + 1]\n : this.states[firstVisibleStateIndex - 1];\n }\n\n /**\n * Get the visible slides for the given position.\n */\n getVisibleItems(target: number) {\n return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n }\n\n /**\n * Get the invisible slides for the given position.\n */\n getInvisibleItems(target: number) {\n return this.$children.SliderItem.filter(\n (item) => !item.isVisible && !item.willBeVisible(target),\n );\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,71 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all) => {
6
- for (var name in all)
7
- __defProp(target, name, { get: all[name], enumerable: true });
8
- };
9
- var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
16
- };
17
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
-
19
- // packages/ui/molecules/Slider/SliderBtn.ts
20
- var SliderBtn_exports = {};
21
- __export(SliderBtn_exports, {
22
- SliderBtn: () => SliderBtn
23
- });
24
- module.exports = __toCommonJS(SliderBtn_exports);
25
- var import_utils = require("@studiometa/js-toolkit/utils");
26
- var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
27
- var SliderBtn = class extends import_AbstractSliderChild.AbstractSliderChild {
28
- /**
29
- * Config.
30
- */
31
- static config = {
32
- name: "SliderBtn",
33
- options: {
34
- prev: Boolean,
35
- next: Boolean,
36
- contain: Boolean
37
- }
38
- };
39
- /**
40
- * Update attributes.
41
- * @param {number} index
42
- * @returns {void}
43
- */
44
- update(index) {
45
- if (import_utils.isDev && this.$options.contain && !this.$parent.$options.contain) {
46
- console.warn(
47
- `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`
48
- );
49
- }
50
- const isContainMaxState = this.$options.contain && this.$parent.$options.contain && this.$parent.containMaxState === this.$parent.getStates()[index].x[this.$parent.$options.mode];
51
- if (index === 0 && this.$options.prev || (index === this.$parent.indexMax || isContainMaxState) && this.$options.next) {
52
- this.$el.setAttribute("disabled", "");
53
- } else {
54
- this.$el.removeAttribute("disabled");
55
- }
56
- }
57
- /**
58
- * Go prev or next on click.
59
- * @returns {void}
60
- */
61
- onClick() {
62
- const { prev, next } = this.$options;
63
- if (prev) {
64
- this.$parent.goPrev();
65
- } else if (next) {
66
- this.$parent.goNext();
67
- }
68
- }
69
- };
70
- if (module.exports.default) module.exports = module.exports.default;
71
- //# sourceMappingURL=SliderBtn.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
4
- "sourcesContent": ["import { isDev } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n $options: {\n prev: boolean;\n next: boolean;\n contain: boolean;\n };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderBtnProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderBtn',\n options: {\n prev: Boolean,\n next: Boolean,\n contain: Boolean,\n },\n };\n\n /**\n * Update attributes.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n if (isDev && this.$options.contain && !this.$parent.$options.contain) {\n console.warn(\n `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`,\n );\n }\n\n const isContainMaxState =\n this.$options.contain &&\n this.$parent.$options.contain &&\n this.$parent.containMaxState ===\n this.$parent.getStates()[index].x[this.$parent.$options.mode];\n\n if (\n (index === 0 && this.$options.prev) ||\n ((index === this.$parent.indexMax || isContainMaxState) && this.$options.next)\n ) {\n this.$el.setAttribute('disabled', '');\n } else {\n this.$el.removeAttribute('disabled');\n }\n }\n\n /**\n * Go prev or next on click.\n * @returns {void}\n */\n onClick() {\n const { prev, next } = this.$options;\n\n if (prev) {\n this.$parent.goPrev();\n } else if (next) {\n this.$parent.goNext();\n }\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AAEtB,iCAAoC;AAa7B,IAAM,YAAN,cAAyD,+CAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,QAAI,sBAAS,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AACpE,cAAQ;AAAA,QACN,IAAI,KAAK,GAAG;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBACJ,KAAK,SAAS,WACd,KAAK,QAAQ,SAAS,WACtB,KAAK,QAAQ,oBACX,KAAK,QAAQ,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,SAAS,IAAI;AAEhE,QACG,UAAU,KAAK,KAAK,SAAS,SAC5B,UAAU,KAAK,QAAQ,YAAY,sBAAsB,KAAK,SAAS,MACzE;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
6
- "names": []
7
- }
@@ -1,44 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all) => {
6
- for (var name in all)
7
- __defProp(target, name, { get: all[name], enumerable: true });
8
- };
9
- var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
16
- };
17
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
-
19
- // packages/ui/molecules/Slider/SliderCount.ts
20
- var SliderCount_exports = {};
21
- __export(SliderCount_exports, {
22
- SliderCount: () => SliderCount
23
- });
24
- module.exports = __toCommonJS(SliderCount_exports);
25
- var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
26
- var SliderCount = class extends import_AbstractSliderChild.AbstractSliderChild {
27
- /**
28
- * Config.
29
- */
30
- static config = {
31
- name: "SliderCount",
32
- refs: ["current"]
33
- };
34
- /**
35
- * Update the current counter indicator.
36
- * @param {number} index The new active index.
37
- * @returns {void}
38
- */
39
- update(index) {
40
- this.$refs.current.innerHTML = `${index + 1}`;
41
- }
42
- };
43
- if (module.exports.default) module.exports = module.exports.default;
44
- //# sourceMappingURL=SliderCount.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Slider/SliderCount.ts"],
4
- "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n $refs: {\n current: HTMLElement;\n };\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderCountProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderCount',\n refs: ['current'],\n };\n\n /**\n * Update the current counter indicator.\n * @param {number} index The new active index.\n * @returns {void}\n */\n update(index: number) {\n this.$refs.current.innerHTML = `${index + 1}`;\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iCAAoC;AAW7B,IAAM,cAAN,cAA2D,+CAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ,CAAC;AAAA,EAC7C;AACF;",
6
- "names": []
7
- }
@@ -1,64 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all) => {
6
- for (var name in all)
7
- __defProp(target, name, { get: all[name], enumerable: true });
8
- };
9
- var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
16
- };
17
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
-
19
- // packages/ui/molecules/Slider/SliderDots.ts
20
- var SliderDots_exports = {};
21
- __export(SliderDots_exports, {
22
- SliderDots: () => SliderDots
23
- });
24
- module.exports = __toCommonJS(SliderDots_exports);
25
- var import_decorators = require("../../decorators/index.cjs");
26
- var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
27
- var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.AbstractSliderChild) {
28
- /**
29
- * Config.
30
- */
31
- static config = {
32
- name: "SliderDots",
33
- refs: ["dots[]"]
34
- };
35
- /**
36
- * Get target.
37
- * @returns {HTMLButtonElement[]}
38
- */
39
- get target() {
40
- return this.$refs.dots;
41
- }
42
- /**
43
- * The current active index.
44
- */
45
- currentIndex = 0;
46
- /**
47
- * Update dots classes according to the new index.
48
- * @param {number} index
49
- * @returns {void}
50
- */
51
- update(index) {
52
- this.leave(this.$refs.dots[this.currentIndex]);
53
- this.enter(this.$refs.dots[index]);
54
- this.currentIndex = index;
55
- }
56
- /**
57
- * Go to the given index on dot click.
58
- */
59
- onDotsClick(event, index) {
60
- this.$parent.goTo(index);
61
- }
62
- };
63
- if (module.exports.default) module.exports = module.exports.default;
64
- //# sourceMappingURL=SliderDots.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Slider/SliderDots.ts"],
4
- "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n $refs: {\n dots: HTMLButtonElement[];\n };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderDots',\n refs: ['dots[]'],\n };\n\n /**\n * Get target.\n * @returns {HTMLButtonElement[]}\n */\n get target() {\n return this.$refs.dots;\n }\n\n /**\n * The current active index.\n */\n currentIndex = 0;\n\n /**\n * Update dots classes according to the new index.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n this.leave(this.$refs.dots[this.currentIndex]);\n this.enter(this.$refs.dots[index]);\n this.currentIndex = index;\n }\n\n /**\n * Go to the given index on dot click.\n */\n onDotsClick(event: MouseEvent, index: number) {\n this.$parent.goTo(index);\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAC/B,iCAAoC;AAW7B,IAAM,aAAN,kBAEG,kCAAoC,8CAAmB,EAAuB;AAAA;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAmB,OAAe;AAC5C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
6
- "names": []
7
- }