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

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 (273) hide show
  1. package/README.md +6 -4
  2. package/atoms/Action/Action.d.ts +4 -6
  3. package/atoms/Action/Action.js +25 -60
  4. package/atoms/Action/Action.js.map +2 -2
  5. package/atoms/Action/ActionEvent.d.ts +55 -0
  6. package/atoms/Action/ActionEvent.js +130 -0
  7. package/atoms/Action/ActionEvent.js.map +7 -0
  8. package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts +3 -3
  9. package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -3
  10. package/atoms/AnchorScrollTo/AnchorScrollTo.js.map +2 -2
  11. package/atoms/Data/DataBind.d.ts +2 -2
  12. package/atoms/Data/DataBind.js +22 -12
  13. package/atoms/Data/DataBind.js.map +2 -2
  14. package/atoms/Data/DataComputed.js +3 -3
  15. package/atoms/Data/DataComputed.js.map +2 -2
  16. package/atoms/Data/DataEffect.js +2 -2
  17. package/atoms/Data/DataEffect.js.map +2 -2
  18. package/atoms/Data/DataModel.d.ts +1 -0
  19. package/atoms/Data/DataModel.js +13 -3
  20. package/atoms/Data/DataModel.js.map +2 -2
  21. package/atoms/Figure/AbstractFigure.d.ts +41 -0
  22. package/atoms/Figure/AbstractFigure.js +65 -0
  23. package/atoms/Figure/AbstractFigure.js.map +7 -0
  24. package/atoms/Figure/AbstractFigureDynamic.d.ts +29 -0
  25. package/atoms/Figure/AbstractFigureDynamic.js +48 -0
  26. package/atoms/Figure/AbstractFigureDynamic.js.map +7 -0
  27. package/atoms/Figure/Figure.d.ts +4 -35
  28. package/atoms/Figure/Figure.js +5 -68
  29. package/atoms/Figure/Figure.js.map +2 -2
  30. package/atoms/Figure/FigureShopify.d.ts +23 -0
  31. package/atoms/Figure/FigureShopify.js +38 -0
  32. package/atoms/Figure/FigureShopify.js.map +7 -0
  33. package/atoms/Figure/FigureTwicpics.d.ts +3 -19
  34. package/atoms/Figure/FigureTwicpics.js +10 -32
  35. package/atoms/Figure/FigureTwicpics.js.map +2 -2
  36. package/atoms/Figure/index.d.ts +1 -0
  37. package/atoms/Figure/index.js +1 -0
  38. package/atoms/Figure/index.js.map +2 -2
  39. package/atoms/Figure/utils.d.ts +8 -0
  40. package/atoms/Figure/utils.js +15 -0
  41. package/atoms/Figure/utils.js.map +7 -0
  42. package/atoms/FigureVideo/FigureVideo.js +1 -1
  43. package/atoms/FigureVideo/FigureVideo.js.map +1 -1
  44. package/atoms/FigureVideo/FigureVideoTwicpics.js +1 -1
  45. package/atoms/FigureVideo/FigureVideoTwicpics.js.map +1 -1
  46. package/atoms/LazyInclude/LazyInclude.d.ts +3 -1
  47. package/atoms/LazyInclude/LazyInclude.js +1 -1
  48. package/atoms/LazyInclude/LazyInclude.js.map +2 -2
  49. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +1 -1
  50. package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +1 -1
  51. package/decorators/withTransition.d.ts +1 -0
  52. package/decorators/withTransition.js +47 -23
  53. package/decorators/withTransition.js.map +2 -2
  54. package/molecules/Accordion/AccordionCore.d.ts +6 -2
  55. package/molecules/Accordion/AccordionCore.js +2 -2
  56. package/molecules/Accordion/AccordionCore.js.map +2 -2
  57. package/molecules/AnchorNav/AnchorNav.d.ts +6 -2
  58. package/molecules/AnchorNav/AnchorNav.js +4 -4
  59. package/molecules/AnchorNav/AnchorNav.js.map +2 -2
  60. package/molecules/AnchorNav/AnchorNavLink.d.ts +1 -1
  61. package/molecules/Menu/Menu.d.ts +11 -4
  62. package/molecules/Menu/Menu.js +7 -9
  63. package/molecules/Menu/Menu.js.map +2 -2
  64. package/molecules/Menu/MenuBtn.d.ts +9 -3
  65. package/molecules/Menu/MenuBtn.js +3 -3
  66. package/molecules/Menu/MenuBtn.js.map +2 -2
  67. package/molecules/Menu/MenuList.d.ts +1 -1
  68. package/molecules/Slider/Slider.d.ts +6 -2
  69. package/molecules/Slider/Slider.js +2 -2
  70. package/molecules/Slider/Slider.js.map +2 -2
  71. package/molecules/Slider/SliderDots.d.ts +5 -2
  72. package/molecules/Slider/SliderDots.js +1 -1
  73. package/molecules/Slider/SliderDots.js.map +2 -2
  74. package/molecules/Slider/SliderDrag.d.ts +3 -1
  75. package/molecules/Slider/SliderDrag.js +1 -1
  76. package/molecules/Slider/SliderDrag.js.map +2 -2
  77. package/molecules/Sticky/Sticky.d.ts +3 -1
  78. package/molecules/Sticky/Sticky.js +1 -1
  79. package/molecules/Sticky/Sticky.js.map +2 -2
  80. package/molecules/Tabs/Tabs.d.ts +4 -1
  81. package/molecules/Tabs/Tabs.js +1 -1
  82. package/molecules/Tabs/Tabs.js.map +2 -2
  83. package/molecules/index.d.ts +2 -3
  84. package/molecules/index.js +2 -3
  85. package/molecules/index.js.map +2 -2
  86. package/organisms/Frame/Frame.d.ts +11 -3
  87. package/organisms/Frame/Frame.js +14 -16
  88. package/organisms/Frame/Frame.js.map +2 -2
  89. package/organisms/Frame/FrameTarget.d.ts +1 -1
  90. package/package.json +2 -2
  91. package/primitives/Transition/Transition.d.ts +1 -1
  92. package/atoms/Action/Action.cjs +0 -115
  93. package/atoms/Action/Action.cjs.map +0 -7
  94. package/atoms/Action/Target.cjs +0 -35
  95. package/atoms/Action/Target.cjs.map +0 -7
  96. package/atoms/Action/index.cjs +0 -22
  97. package/atoms/Action/index.cjs.map +0 -7
  98. package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +0 -52
  99. package/atoms/AnchorScrollTo/AnchorScrollTo.cjs.map +0 -7
  100. package/atoms/AnchorScrollTo/index.cjs +0 -21
  101. package/atoms/AnchorScrollTo/index.cjs.map +0 -7
  102. package/atoms/CircularMarquee/CircularMarquee.cjs +0 -69
  103. package/atoms/CircularMarquee/CircularMarquee.cjs.map +0 -7
  104. package/atoms/CircularMarquee/index.cjs +0 -21
  105. package/atoms/CircularMarquee/index.cjs.map +0 -7
  106. package/atoms/Cursor/Cursor.cjs +0 -137
  107. package/atoms/Cursor/Cursor.cjs.map +0 -7
  108. package/atoms/Cursor/index.cjs +0 -21
  109. package/atoms/Cursor/index.cjs.map +0 -7
  110. package/atoms/Data/DataBind.cjs +0 -124
  111. package/atoms/Data/DataBind.cjs.map +0 -7
  112. package/atoms/Data/DataComputed.cjs +0 -49
  113. package/atoms/Data/DataComputed.cjs.map +0 -7
  114. package/atoms/Data/DataEffect.cjs +0 -47
  115. package/atoms/Data/DataEffect.cjs.map +0 -7
  116. package/atoms/Data/DataModel.cjs +0 -38
  117. package/atoms/Data/DataModel.cjs.map +0 -7
  118. package/atoms/Data/index.cjs +0 -24
  119. package/atoms/Data/index.cjs.map +0 -7
  120. package/atoms/Data/utils.cjs +0 -46
  121. package/atoms/Data/utils.cjs.map +0 -7
  122. package/atoms/Figure/Figure.cjs +0 -105
  123. package/atoms/Figure/Figure.cjs.map +0 -7
  124. package/atoms/Figure/FigureTwicpics.cjs +0 -123
  125. package/atoms/Figure/FigureTwicpics.cjs.map +0 -7
  126. package/atoms/Figure/index.cjs +0 -22
  127. package/atoms/Figure/index.cjs.map +0 -7
  128. package/atoms/FigureVideo/FigureVideo.cjs +0 -132
  129. package/atoms/FigureVideo/FigureVideo.cjs.map +0 -7
  130. package/atoms/FigureVideo/FigureVideoTwicpics.cjs +0 -153
  131. package/atoms/FigureVideo/FigureVideoTwicpics.cjs.map +0 -7
  132. package/atoms/FigureVideo/index.cjs +0 -22
  133. package/atoms/FigureVideo/index.cjs.map +0 -7
  134. package/atoms/LargeText/LargeText.cjs +0 -109
  135. package/atoms/LargeText/LargeText.cjs.map +0 -7
  136. package/atoms/LargeText/index.cjs +0 -21
  137. package/atoms/LargeText/index.cjs.map +0 -7
  138. package/atoms/LazyInclude/LazyInclude.cjs +0 -78
  139. package/atoms/LazyInclude/LazyInclude.cjs.map +0 -7
  140. package/atoms/LazyInclude/index.cjs +0 -21
  141. package/atoms/LazyInclude/index.cjs.map +0 -7
  142. package/atoms/Prefetch/AbstractPrefetch.cjs +0 -86
  143. package/atoms/Prefetch/AbstractPrefetch.cjs.map +0 -7
  144. package/atoms/Prefetch/PrefetchWhenOver.cjs +0 -42
  145. package/atoms/Prefetch/PrefetchWhenOver.cjs.map +0 -7
  146. package/atoms/Prefetch/PrefetchWhenVisible.cjs +0 -43
  147. package/atoms/Prefetch/PrefetchWhenVisible.cjs.map +0 -7
  148. package/atoms/Prefetch/index.cjs +0 -23
  149. package/atoms/Prefetch/index.cjs.map +0 -7
  150. package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +0 -95
  151. package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +0 -7
  152. package/atoms/ScrollAnimation/ScrollAnimation.cjs +0 -44
  153. package/atoms/ScrollAnimation/ScrollAnimation.cjs.map +0 -7
  154. package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +0 -84
  155. package/atoms/ScrollAnimation/ScrollAnimationChild.cjs.map +0 -7
  156. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +0 -37
  157. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs.map +0 -7
  158. package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +0 -50
  159. package/atoms/ScrollAnimation/ScrollAnimationParent.cjs.map +0 -7
  160. package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +0 -37
  161. package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs.map +0 -7
  162. package/atoms/ScrollAnimation/animationScrollWithEase.cjs +0 -59
  163. package/atoms/ScrollAnimation/animationScrollWithEase.cjs.map +0 -7
  164. package/atoms/ScrollAnimation/index.cjs +0 -27
  165. package/atoms/ScrollAnimation/index.cjs.map +0 -7
  166. package/atoms/ScrollReveal/ScrollReveal.cjs +0 -81
  167. package/atoms/ScrollReveal/ScrollReveal.cjs.map +0 -7
  168. package/atoms/ScrollReveal/index.cjs +0 -21
  169. package/atoms/ScrollReveal/index.cjs.map +0 -7
  170. package/atoms/index.cjs +0 -32
  171. package/atoms/index.cjs.map +0 -7
  172. package/decorators/index.cjs +0 -22
  173. package/decorators/index.cjs.map +0 -7
  174. package/decorators/withDeprecation.cjs +0 -47
  175. package/decorators/withDeprecation.cjs.map +0 -7
  176. package/decorators/withTransition.cjs +0 -86
  177. package/decorators/withTransition.cjs.map +0 -7
  178. package/index.cjs +0 -25
  179. package/index.cjs.map +0 -7
  180. package/molecules/Accordion/Accordion.cjs +0 -36
  181. package/molecules/Accordion/Accordion.cjs.map +0 -7
  182. package/molecules/Accordion/AccordionCore.cjs +0 -58
  183. package/molecules/Accordion/AccordionCore.cjs.map +0 -7
  184. package/molecules/Accordion/AccordionItem.cjs +0 -206
  185. package/molecules/Accordion/AccordionItem.cjs.map +0 -7
  186. package/molecules/Accordion/index.cjs +0 -22
  187. package/molecules/Accordion/index.cjs.map +0 -7
  188. package/molecules/AnchorNav/AnchorNav.cjs +0 -63
  189. package/molecules/AnchorNav/AnchorNav.cjs.map +0 -7
  190. package/molecules/AnchorNav/AnchorNavLink.cjs +0 -40
  191. package/molecules/AnchorNav/AnchorNavLink.cjs.map +0 -7
  192. package/molecules/AnchorNav/AnchorNavTarget.cjs +0 -35
  193. package/molecules/AnchorNav/AnchorNavTarget.cjs.map +0 -7
  194. package/molecules/AnchorNav/index.cjs +0 -23
  195. package/molecules/AnchorNav/index.cjs.map +0 -7
  196. package/molecules/Menu/Menu.cjs +0 -177
  197. package/molecules/Menu/Menu.cjs.map +0 -7
  198. package/molecules/Menu/MenuBtn.cjs +0 -66
  199. package/molecules/Menu/MenuBtn.cjs.map +0 -7
  200. package/molecules/Menu/MenuList.cjs +0 -165
  201. package/molecules/Menu/MenuList.cjs.map +0 -7
  202. package/molecules/Menu/index.cjs +0 -23
  203. package/molecules/Menu/index.cjs.map +0 -7
  204. package/molecules/Modal/Modal.cjs +0 -219
  205. package/molecules/Modal/Modal.cjs.map +0 -7
  206. package/molecules/Modal/ModalWithTransition.cjs +0 -69
  207. package/molecules/Modal/ModalWithTransition.cjs.map +0 -7
  208. package/molecules/Modal/index.cjs +0 -22
  209. package/molecules/Modal/index.cjs.map +0 -7
  210. package/molecules/Panel/Panel.cjs +0 -137
  211. package/molecules/Panel/Panel.cjs.map +0 -7
  212. package/molecules/Panel/index.cjs +0 -21
  213. package/molecules/Panel/index.cjs.map +0 -7
  214. package/molecules/Slider/AbstractSliderChild.cjs +0 -88
  215. package/molecules/Slider/AbstractSliderChild.cjs.map +0 -7
  216. package/molecules/Slider/Slider.cjs +0 -404
  217. package/molecules/Slider/Slider.cjs.map +0 -7
  218. package/molecules/Slider/SliderBtn.cjs +0 -71
  219. package/molecules/Slider/SliderBtn.cjs.map +0 -7
  220. package/molecules/Slider/SliderCount.cjs +0 -44
  221. package/molecules/Slider/SliderCount.cjs.map +0 -7
  222. package/molecules/Slider/SliderDots.cjs +0 -64
  223. package/molecules/Slider/SliderDots.cjs.map +0 -7
  224. package/molecules/Slider/SliderDrag.cjs +0 -66
  225. package/molecules/Slider/SliderDrag.cjs.map +0 -7
  226. package/molecules/Slider/SliderItem.cjs +0 -177
  227. package/molecules/Slider/SliderItem.cjs.map +0 -7
  228. package/molecules/Slider/SliderProgress.cjs +0 -49
  229. package/molecules/Slider/SliderProgress.cjs.map +0 -7
  230. package/molecules/Slider/index.cjs +0 -28
  231. package/molecules/Slider/index.cjs.map +0 -7
  232. package/molecules/Sticky/Sticky.cjs +0 -177
  233. package/molecules/Sticky/Sticky.cjs.map +0 -7
  234. package/molecules/Sticky/index.cjs +0 -21
  235. package/molecules/Sticky/index.cjs.map +0 -7
  236. package/molecules/TableOfContent/TableOfContent.cjs +0 -72
  237. package/molecules/TableOfContent/TableOfContent.cjs.map +0 -7
  238. package/molecules/TableOfContent/TableOfContentAnchor.cjs +0 -76
  239. package/molecules/TableOfContent/TableOfContentAnchor.cjs.map +0 -7
  240. package/molecules/TableOfContent/index.cjs +0 -22
  241. package/molecules/TableOfContent/index.cjs.map +0 -7
  242. package/molecules/Tabs/Tabs.cjs +0 -153
  243. package/molecules/Tabs/Tabs.cjs.map +0 -7
  244. package/molecules/Tabs/index.cjs +0 -21
  245. package/molecules/Tabs/index.cjs.map +0 -7
  246. package/molecules/index.cjs +0 -30
  247. package/molecules/index.cjs.map +0 -7
  248. package/organisms/Frame/Frame.cjs +0 -220
  249. package/organisms/Frame/Frame.cjs.map +0 -7
  250. package/organisms/Frame/FrameAnchor.cjs +0 -41
  251. package/organisms/Frame/FrameAnchor.cjs.map +0 -7
  252. package/organisms/Frame/FrameForm.cjs +0 -41
  253. package/organisms/Frame/FrameForm.cjs.map +0 -7
  254. package/organisms/Frame/FrameTarget.cjs +0 -114
  255. package/organisms/Frame/FrameTarget.cjs.map +0 -7
  256. package/organisms/Frame/index.cjs +0 -24
  257. package/organisms/Frame/index.cjs.map +0 -7
  258. package/organisms/index.cjs +0 -21
  259. package/organisms/index.cjs.map +0 -7
  260. package/primitives/Draggable/Draggable.cjs +0 -65
  261. package/primitives/Draggable/Draggable.cjs.map +0 -7
  262. package/primitives/Draggable/index.cjs +0 -21
  263. package/primitives/Draggable/index.cjs.map +0 -7
  264. package/primitives/Sentinel/Sentinel.cjs +0 -35
  265. package/primitives/Sentinel/Sentinel.cjs.map +0 -7
  266. package/primitives/Sentinel/index.cjs +0 -21
  267. package/primitives/Sentinel/index.cjs.map +0 -7
  268. package/primitives/Transition/Transition.cjs +0 -36
  269. package/primitives/Transition/Transition.cjs.map +0 -7
  270. package/primitives/Transition/index.cjs +0 -21
  271. package/primitives/Transition/index.cjs.map +0 -7
  272. package/primitives/index.cjs +0 -23
  273. package/primitives/index.cjs.map +0 -7
@@ -1,177 +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/Sticky/Sticky.ts
20
- var Sticky_exports = {};
21
- __export(Sticky_exports, {
22
- Sticky: () => Sticky
23
- });
24
- module.exports = __toCommonJS(Sticky_exports);
25
- var import_js_toolkit = require("@studiometa/js-toolkit");
26
- var import_primitives = require("../../primitives/index.cjs");
27
- var Sticky = class _Sticky extends import_js_toolkit.Base {
28
- /**
29
- * Config.
30
- */
31
- static config = {
32
- name: "Sticky",
33
- refs: ["inner", "sentinelRef"],
34
- components: {
35
- Sentinel: import_primitives.Sentinel
36
- },
37
- options: {
38
- zIndex: {
39
- type: Number,
40
- default: 100
41
- },
42
- hideWhenUp: Boolean,
43
- hideWhenDown: Boolean
44
- }
45
- };
46
- /**
47
- * Holder for all instances.
48
- */
49
- // eslint-disable-next-line no-use-before-define
50
- static instances = /* @__PURE__ */ new Set();
51
- /**
52
- * Is the component sticky?
53
- */
54
- isSticky = false;
55
- /**
56
- * Is the component visible?
57
- */
58
- isVisible = true;
59
- /**
60
- * Set the Y value.
61
- */
62
- set y(value) {
63
- this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
64
- }
65
- /**
66
- * Get instances as array.
67
- */
68
- get instances() {
69
- return Array.from(_Sticky.instances);
70
- }
71
- /**
72
- * Mounted hook.
73
- */
74
- mounted() {
75
- _Sticky.instances.add(this);
76
- this.setSentinelSize();
77
- }
78
- /**
79
- * Resized hook.
80
- */
81
- resized() {
82
- this.setSentinelSize();
83
- }
84
- /**
85
- * Destroyed hook.
86
- */
87
- destroyed() {
88
- _Sticky.instances.delete(this);
89
- }
90
- /**
91
- * Scrolled hook.
92
- */
93
- scrolled(props) {
94
- if (!this.isSticky || props.y === props.last.y) {
95
- return;
96
- }
97
- if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
98
- this.hide();
99
- } else {
100
- this.show();
101
- }
102
- }
103
- /**
104
- * Listen to the sentinel's `intersected` event to set the `isSticky` value.
105
- * @param {IntersectionObserverEntry[]} entries
106
- * @returns {void}
107
- */
108
- onSentinelIntersected([entry]) {
109
- this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
110
- this.setPosition();
111
- }
112
- /**
113
- * Hide the sticky component when another one is sticky.
114
- */
115
- hide() {
116
- if (!this.isVisible) {
117
- return;
118
- }
119
- this.isVisible = false;
120
- this.$el.classList.add("pointer-events-none");
121
- this.instances.forEach((instance, index) => instance.setPosition(index));
122
- }
123
- /**
124
- * Show the sticky component when the other one is not sticky anymore.
125
- */
126
- show() {
127
- if (this.isVisible) {
128
- return;
129
- }
130
- this.isVisible = true;
131
- this.$el.classList.remove("pointer-events-none");
132
- this.instances.forEach((instance, index) => instance.setPosition(index));
133
- }
134
- /**
135
- * Set the sentinel height based on the previous instances.
136
- */
137
- setSentinelSize() {
138
- const { instances } = this;
139
- const index = instances.indexOf(this);
140
- const height = instances.slice(0, index).filter(
141
- // Test each instance sticky context against the current element
142
- (instance) => this.closestRelativeElement(instance.$el).contains(this.$el)
143
- ).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
144
- this.$refs.sentinelRef.style.height = `${height + 1}px`;
145
- this.$el.style.top = `${height}px`;
146
- this.$el.style.zIndex = String(this.$options.zIndex - index);
147
- }
148
- /**
149
- * Set the component's position.
150
- * @param {number} [index] The instance index in all the pages' instances.
151
- * @returns {void}
152
- */
153
- setPosition(index) {
154
- if (!this.isSticky) {
155
- this.y = 0;
156
- return;
157
- }
158
- const { instances } = this;
159
- index = index ?? instances.indexOf(this);
160
- this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce(
161
- (y, instance) => y - instance.$refs.inner.offsetHeight,
162
- this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1
163
- );
164
- }
165
- /**
166
- * Find the first parent which has a relative position.
167
- */
168
- closestRelativeElement(element) {
169
- let parent = element.parentElement;
170
- while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
171
- parent = parent.parentElement;
172
- }
173
- return parent;
174
- }
175
- };
176
- if (module.exports.default) module.exports = module.exports.default;
177
- //# sourceMappingURL=Sticky.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Sticky/Sticky.ts"],
4
- "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../../primitives/index.js';\n\n/**\n * @typedef {object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n $refs: {\n inner: HTMLElement;\n sentinelRef: HTMLElement;\n };\n $options: {\n zIndex: number;\n hideWhenUp: boolean;\n hideWhenDown: boolean;\n };\n $children: {\n Sentinel: Sentinel[];\n };\n}\n\n/**\n * Sticky class.\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Sticky',\n refs: ['inner', 'sentinelRef'],\n components: {\n Sentinel,\n },\n options: {\n zIndex: {\n type: Number,\n default: 100,\n },\n hideWhenUp: Boolean,\n hideWhenDown: Boolean,\n },\n };\n\n /**\n * Holder for all instances.\n */\n // eslint-disable-next-line no-use-before-define\n static instances: Set<Sticky> = new Set();\n\n /**\n * Is the component sticky?\n */\n isSticky = false;\n\n /**\n * Is the component visible?\n */\n isVisible = true;\n\n /**\n * Set the Y value.\n */\n set y(value: number) {\n this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n }\n\n /**\n * Get instances as array.\n */\n get instances(): Sticky[] {\n return Array.from(Sticky.instances);\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n Sticky.instances.add(this);\n this.setSentinelSize();\n }\n\n /**\n * Resized hook.\n */\n resized() {\n this.setSentinelSize();\n }\n\n /**\n * Destroyed hook.\n */\n destroyed() {\n Sticky.instances.delete(this);\n }\n\n /**\n * Scrolled hook.\n */\n scrolled(props) {\n if (!this.isSticky || props.y === props.last.y) {\n return;\n }\n\n if (\n (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n (props.direction.y === 'UP' && this.$options.hideWhenUp)\n ) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n * @param {IntersectionObserverEntry[]} entries\n * @returns {void}\n */\n onSentinelIntersected([entry]: IntersectionObserverEntry[]) {\n this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n this.setPosition();\n }\n\n /**\n * Hide the sticky component when another one is sticky.\n */\n hide() {\n if (!this.isVisible) {\n return;\n }\n\n this.isVisible = false;\n this.$el.classList.add('pointer-events-none');\n\n this.instances.forEach((instance, index) => instance.setPosition(index));\n }\n\n /**\n * Show the sticky component when the other one is not sticky anymore.\n */\n show() {\n if (this.isVisible) {\n return;\n }\n\n this.isVisible = true;\n this.$el.classList.remove('pointer-events-none');\n this.instances.forEach((instance, index) => instance.setPosition(index));\n }\n\n /**\n * Set the sentinel height based on the previous instances.\n */\n setSentinelSize() {\n const { instances } = this;\n const index = instances.indexOf(this);\n const height = instances\n .slice(0, index)\n .filter(\n // Test each instance sticky context against the current element\n (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n )\n .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n this.$refs.sentinelRef.style.height = `${height + 1}px`;\n this.$el.style.top = `${height}px`;\n this.$el.style.zIndex = String(this.$options.zIndex - index);\n }\n\n /**\n * Set the component's position.\n * @param {number} [index] The instance index in all the pages' instances.\n * @returns {void}\n */\n setPosition(index?: number) {\n if (!this.isSticky) {\n this.y = 0;\n return;\n }\n\n const { instances } = this;\n\n // eslint-disable-next-line no-param-reassign\n index = index ?? instances.indexOf(this);\n\n this.y = instances\n .slice(0, index)\n .filter((instance) => instance.isSticky && !instance.isVisible)\n .reduce<number>(\n (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n ) as number;\n }\n\n /**\n * Find the first parent which has a relative position.\n */\n closestRelativeElement(element: HTMLElement) {\n let parent = element.parentElement;\n\n while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n parent = parent.parentElement;\n }\n\n return parent;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,21 +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 __copyProps = (to, from, except, desc) => {
6
- if (from && typeof from === "object" || typeof from === "function") {
7
- for (let key of __getOwnPropNames(from))
8
- if (!__hasOwnProp.call(to, key) && key !== except)
9
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
- }
11
- return to;
12
- };
13
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // packages/ui/molecules/Sticky/index.ts
17
- var Sticky_exports = {};
18
- module.exports = __toCommonJS(Sticky_exports);
19
- __reExport(Sticky_exports, require("./Sticky.cjs"), module.exports);
20
- if (module.exports.default) module.exports = module.exports.default;
21
- //# sourceMappingURL=index.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Sticky/index.ts"],
4
- "sourcesContent": ["export * from './Sticky.js';\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,yBAAd;",
6
- "names": []
7
- }
@@ -1,72 +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/TableOfContent/TableOfContent.ts
20
- var TableOfContent_exports = {};
21
- __export(TableOfContent_exports, {
22
- TableOfContent: () => TableOfContent
23
- });
24
- module.exports = __toCommonJS(TableOfContent_exports);
25
- var import_js_toolkit = require("@studiometa/js-toolkit");
26
- var import_TableOfContentAnchor = require("./TableOfContentAnchor.cjs");
27
- var import_withDeprecation = require("../../decorators/withDeprecation.cjs");
28
- var TableOfContent = class extends (0, import_withDeprecation.withDeprecation)(import_js_toolkit.Base) {
29
- /**
30
- * Config.
31
- */
32
- static config = {
33
- name: "TableOfContent",
34
- refs: ["itemTemplate", "list"],
35
- components: {
36
- TableOfContentAnchor: import_TableOfContentAnchor.TableOfContentAnchor
37
- },
38
- options: {
39
- contentSelector: String,
40
- withTemplate: Boolean
41
- }
42
- };
43
- /**
44
- * Generate anchors on mount and update the component to instantiate the
45
- * `TableOfContentAnchor` components.
46
- */
47
- mounted() {
48
- if (this.$options.withTemplate) {
49
- this.generateAnchors();
50
- this.$update();
51
- }
52
- }
53
- /**
54
- * Generate all anchors.
55
- * @todo Read anchor template from a ref?
56
- * @todo Better API to easily override the template function, maybe a `render` function?
57
- */
58
- generateAnchors() {
59
- document.querySelectorAll(this.$options.contentSelector).forEach((section) => {
60
- const tpl = document.createElement("div");
61
- tpl.innerHTML = this.$refs.itemTemplate.innerHTML;
62
- const li = tpl.querySelector("li");
63
- const anchor = li.querySelector("a");
64
- anchor.href = `#${section.id}`;
65
- anchor.innerHTML = section.textContent;
66
- anchor.dataset.component = "TableOfContentAnchor";
67
- this.$refs.list.append(li);
68
- });
69
- }
70
- };
71
- if (module.exports.default) module.exports = module.exports.default;
72
- //# sourceMappingURL=TableOfContent.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContent.ts"],
4
- "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { TableOfContentAnchor } from './TableOfContentAnchor.js';\nimport { withDeprecation } from '../../decorators/withDeprecation.js';\n\nexport interface TableOfContentProps extends BaseProps {\n $refs: {\n itemTemplate: HTMLTemplateElement;\n list: HTMLUListElement;\n };\n $options: {\n contentSelector: string;\n withTemplate: boolean;\n };\n $children: {\n TableOfContentAnchor: TableOfContentAnchor[];\n };\n}\n\n/**\n * TableOfContent class.\n * @deprecated\n */\nexport class TableOfContent<T extends BaseProps = BaseProps> extends withDeprecation(Base)<\n T & TableOfContentProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'TableOfContent',\n refs: ['itemTemplate', 'list'],\n components: {\n TableOfContentAnchor,\n },\n options: {\n contentSelector: String,\n withTemplate: Boolean,\n },\n };\n\n /**\n * Generate anchors on mount and update the component to instantiate the\n * `TableOfContentAnchor` components.\n */\n mounted() {\n if (this.$options.withTemplate) {\n this.generateAnchors();\n this.$update();\n }\n }\n\n /**\n * Generate all anchors.\n * @todo Read anchor template from a ref?\n * @todo Better API to easily override the template function, maybe a `render` function?\n */\n generateAnchors() {\n document.querySelectorAll(this.$options.contentSelector).forEach((section) => {\n const tpl = document.createElement('div');\n tpl.innerHTML = this.$refs.itemTemplate.innerHTML;\n const li = tpl.querySelector('li');\n const anchor = li.querySelector('a');\n anchor.href = `#${section.id}`;\n anchor.innerHTML = section.textContent;\n anchor.dataset.component = 'TableOfContentAnchor';\n this.$refs.list.append(li);\n });\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,kCAAqC;AACrC,6BAAgC;AAoBzB,IAAM,iBAAN,kBAA8D,wCAAgB,sBAAI,EAEvF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ,EAAE;AAC5B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;",
6
- "names": []
7
- }
@@ -1,76 +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/TableOfContent/TableOfContentAnchor.ts
20
- var TableOfContentAnchor_exports = {};
21
- __export(TableOfContentAnchor_exports, {
22
- TableOfContentAnchor: () => TableOfContentAnchor
23
- });
24
- module.exports = __toCommonJS(TableOfContentAnchor_exports);
25
- var import_atoms = require("../../atoms/index.cjs");
26
- var import_withDeprecation = require("../../decorators/withDeprecation.cjs");
27
- var TableOfContentAnchor = class extends (0, import_withDeprecation.withDeprecation)(
28
- import_atoms.AnchorScrollTo
29
- ) {
30
- /**
31
- * Config.
32
- */
33
- static config = {
34
- name: "TableOfContentAnchor",
35
- emits: ["should-activate"],
36
- options: {
37
- activeClass: {
38
- type: String,
39
- default: "is-active"
40
- }
41
- }
42
- };
43
- /**
44
- * Observer.
45
- * @private
46
- */
47
- __observer;
48
- /**
49
- * Get the sentinel.
50
- */
51
- get sentinel() {
52
- return document.querySelector(this.targetSelector);
53
- }
54
- /**
55
- * Init observer on mount.
56
- */
57
- mounted() {
58
- if (!this.sentinel) {
59
- return;
60
- }
61
- this.__observer = new IntersectionObserver(([entry]) => {
62
- const shouldActivate = entry.isIntersecting && entry.boundingClientRect.y < 100 && entry.boundingClientRect.y > -100;
63
- this.$el.classList.toggle(this.$options.activeClass, shouldActivate);
64
- this.$emit("should-activate", shouldActivate);
65
- });
66
- this.__observer.observe(this.sentinel);
67
- }
68
- /**
69
- * Destroy observer on destroy.
70
- */
71
- destroyed() {
72
- this.__observer.disconnect();
73
- }
74
- };
75
- if (module.exports.default) module.exports = module.exports.default;
76
- //# sourceMappingURL=TableOfContentAnchor.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/TableOfContent/TableOfContentAnchor.ts"],
4
- "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../../atoms/index.js';\nimport { withDeprecation } from '../../decorators/withDeprecation.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n $options: {\n activeClass: string;\n };\n}\n\n/**\n * TableOfContentAnchor class.\n * @deprecated\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends withDeprecation<AnchorScrollTo>(\n AnchorScrollTo,\n)<T & TableOfContentAnchorProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'TableOfContentAnchor',\n emits: ['should-activate'],\n options: {\n activeClass: {\n type: String,\n default: 'is-active',\n },\n },\n };\n\n /**\n * Observer.\n * @private\n */\n __observer: IntersectionObserver;\n\n /**\n * Get the sentinel.\n */\n get sentinel(): HTMLElement {\n return document.querySelector(this.targetSelector) as HTMLElement;\n }\n\n /**\n * Init observer on mount.\n */\n mounted() {\n if (!this.sentinel) {\n return;\n }\n\n this.__observer = new IntersectionObserver(([entry]) => {\n const shouldActivate =\n entry.isIntersecting &&\n entry.boundingClientRect.y < 100 &&\n entry.boundingClientRect.y > -100;\n this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n this.$emit('should-activate', shouldActivate);\n });\n\n this.__observer.observe(this.sentinel);\n }\n\n /**\n * Destroy observer on destroy.\n */\n destroyed() {\n this.__observer.disconnect();\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAC/B,6BAAgC;AAYzB,IAAM,uBAAN,kBAAoE;AAAA,EACzE;AACF,EAAiC;AAAA;AAAA;AAAA;AAAA,EAI/B,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAwB;AAC1B,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;",
6
- "names": []
7
- }
@@ -1,22 +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 __copyProps = (to, from, except, desc) => {
6
- if (from && typeof from === "object" || typeof from === "function") {
7
- for (let key of __getOwnPropNames(from))
8
- if (!__hasOwnProp.call(to, key) && key !== except)
9
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
- }
11
- return to;
12
- };
13
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // packages/ui/molecules/TableOfContent/index.ts
17
- var TableOfContent_exports = {};
18
- module.exports = __toCommonJS(TableOfContent_exports);
19
- __reExport(TableOfContent_exports, require("./TableOfContent.cjs"), module.exports);
20
- __reExport(TableOfContent_exports, require("./TableOfContentAnchor.cjs"), module.exports);
21
- if (module.exports.default) module.exports = module.exports.default;
22
- //# sourceMappingURL=index.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/TableOfContent/index.ts"],
4
- "sourcesContent": ["export * from './TableOfContent.js';\nexport * from './TableOfContentAnchor.js';\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,mCAAc,iCAAd;AACA,mCAAc,uCADd;",
6
- "names": []
7
- }
@@ -1,153 +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/Tabs/Tabs.ts
20
- var Tabs_exports = {};
21
- __export(Tabs_exports, {
22
- Tabs: () => Tabs
23
- });
24
- module.exports = __toCommonJS(Tabs_exports);
25
- var import_js_toolkit = require("@studiometa/js-toolkit");
26
- var import_utils = require("@studiometa/js-toolkit/utils");
27
- var Tabs = class extends import_js_toolkit.Base {
28
- /**
29
- * Config.
30
- */
31
- static config = {
32
- name: "Tabs",
33
- refs: ["btn[]", "content[]"],
34
- emits: ["enable", "disable"],
35
- options: {
36
- styles: {
37
- type: Object,
38
- default: () => ({
39
- content: {
40
- closed: {
41
- position: "absolute",
42
- opacity: "0",
43
- pointerEvents: "none",
44
- visibility: "hidden"
45
- }
46
- }
47
- }),
48
- merge: true
49
- }
50
- }
51
- };
52
- items;
53
- /**
54
- * Initialize the component's behaviours.
55
- * @returns {void}
56
- */
57
- mounted() {
58
- this.items = this.$refs.btn.map((btn, index) => {
59
- const id = `${this.$id}-${index}`;
60
- const content = this.$refs.content[index];
61
- btn.setAttribute("id", id);
62
- content.setAttribute("aria-labelledby", id);
63
- const item = { btn, content, isEnabled: index > 0 };
64
- if (index > 0) {
65
- this.disableItem(item);
66
- } else {
67
- this.enableItem(item);
68
- }
69
- return item;
70
- });
71
- }
72
- /**
73
- * Switch tab on button click.
74
- */
75
- onBtnClick(event, index) {
76
- this.items.forEach((item, i) => {
77
- if (i !== index) {
78
- this.disableItem(item);
79
- }
80
- });
81
- this.enableItem(this.items[index]);
82
- }
83
- /**
84
- * Enable the given tab and its associated content.
85
- */
86
- async enableItem(item) {
87
- if (!item || item.isEnabled) {
88
- return Promise.resolve(this);
89
- }
90
- item.isEnabled = true;
91
- const { btn, content } = item;
92
- const btnStyles = this.$options.styles.btn || {};
93
- const contentStyles = this.$options.styles.content || {};
94
- content.setAttribute("aria-hidden", "false");
95
- this.$emit("enable", item);
96
- return Promise.all([
97
- (0, import_utils.transition)(
98
- btn,
99
- {
100
- from: btnStyles.closed,
101
- active: btnStyles.active,
102
- to: btnStyles.open
103
- },
104
- "keep"
105
- ),
106
- (0, import_utils.transition)(
107
- content,
108
- {
109
- from: contentStyles.closed,
110
- active: contentStyles.active,
111
- to: contentStyles.open
112
- },
113
- "keep"
114
- )
115
- ]).then(() => Promise.resolve(this));
116
- }
117
- /**
118
- * Disable the given tab and its associated content.
119
- */
120
- async disableItem(item) {
121
- if (!item || !item.isEnabled) {
122
- return Promise.resolve(this);
123
- }
124
- item.isEnabled = false;
125
- const { btn, content } = item;
126
- const btnStyles = this.$options.styles.btn || {};
127
- const contentStyles = this.$options.styles.content || {};
128
- content.setAttribute("aria-hidden", "true");
129
- this.$emit("disable", item);
130
- return Promise.all([
131
- (0, import_utils.transition)(
132
- btn,
133
- {
134
- from: btnStyles.open,
135
- active: btnStyles.active,
136
- to: btnStyles.closed
137
- },
138
- "keep"
139
- ),
140
- (0, import_utils.transition)(
141
- content,
142
- {
143
- from: contentStyles.open,
144
- active: contentStyles.active,
145
- to: contentStyles.closed
146
- },
147
- "keep"
148
- )
149
- ]).then(() => Promise.resolve(this));
150
- }
151
- };
152
- if (module.exports.default) module.exports = module.exports.default;
153
- //# sourceMappingURL=Tabs.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Tabs/Tabs.ts"],
4
- "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n btn: HTMLElement;\n content: HTMLElement;\n isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n $options: {\n styles: TabsStylesOption;\n };\n $refs: {\n btn: HTMLElement[];\n content: HTMLElement[];\n };\n}\n\n/**\n * Tabs class.\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Tabs',\n refs: ['btn[]', 'content[]'],\n emits: ['enable', 'disable'],\n options: {\n styles: {\n type: Object,\n default: (): TabsStylesOption => ({\n content: {\n closed: {\n position: 'absolute',\n opacity: '0',\n pointerEvents: 'none',\n visibility: 'hidden',\n },\n },\n }),\n merge: true,\n },\n },\n };\n\n items: TabItem[];\n\n /**\n * Initialize the component's behaviours.\n * @returns {void}\n */\n mounted() {\n this.items = this.$refs.btn.map((btn, index) => {\n const id = `${this.$id}-${index}`;\n const content = this.$refs.content[index];\n btn.setAttribute('id', id);\n content.setAttribute('aria-labelledby', id);\n\n const item = { btn, content, isEnabled: index > 0 };\n if (index > 0) {\n this.disableItem(item);\n } else {\n this.enableItem(item);\n }\n return item;\n });\n }\n\n /**\n * Switch tab on button click.\n */\n onBtnClick(event: MouseEvent, index: number) {\n this.items.forEach((item, i) => {\n if (i !== index) {\n this.disableItem(item);\n }\n });\n\n this.enableItem(this.items[index]);\n }\n\n /**\n * Enable the given tab and its associated content.\n */\n async enableItem(item: TabItem): Promise<this> {\n if (!item || item.isEnabled) {\n return Promise.resolve(this);\n }\n\n item.isEnabled = true;\n const { btn, content } = item;\n const btnStyles = this.$options.styles.btn || {};\n const contentStyles = this.$options.styles.content || {};\n\n content.setAttribute('aria-hidden', 'false');\n this.$emit('enable', item);\n\n return Promise.all([\n transition(\n btn,\n {\n from: btnStyles.closed,\n active: btnStyles.active,\n to: btnStyles.open,\n },\n 'keep',\n ),\n transition(\n content,\n {\n from: contentStyles.closed,\n active: contentStyles.active,\n to: contentStyles.open,\n },\n 'keep',\n ),\n ]).then(() => Promise.resolve(this));\n }\n\n /**\n * Disable the given tab and its associated content.\n */\n async disableItem(item: TabItem): Promise<this> {\n if (!item || !item.isEnabled) {\n return Promise.resolve(this);\n }\n\n item.isEnabled = false;\n const { btn, content } = item;\n const btnStyles = this.$options.styles.btn || {};\n const contentStyles = this.$options.styles.content || {};\n\n content.setAttribute('aria-hidden', 'true');\n this.$emit('disable', item);\n\n return Promise.all([\n transition(\n btn,\n {\n from: btnStyles.open,\n active: btnStyles.active,\n to: btnStyles.closed,\n },\n 'keep',\n ),\n transition(\n content,\n {\n from: contentStyles.open,\n active: contentStyles.active,\n to: contentStyles.closed,\n },\n 'keep',\n ),\n ]).then(() => Promise.resolve(this));\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,21 +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 __copyProps = (to, from, except, desc) => {
6
- if (from && typeof from === "object" || typeof from === "function") {
7
- for (let key of __getOwnPropNames(from))
8
- if (!__hasOwnProp.call(to, key) && key !== except)
9
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
- }
11
- return to;
12
- };
13
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // packages/ui/molecules/Tabs/index.ts
17
- var Tabs_exports = {};
18
- module.exports = __toCommonJS(Tabs_exports);
19
- __reExport(Tabs_exports, require("./Tabs.cjs"), module.exports);
20
- if (module.exports.default) module.exports = module.exports.default;
21
- //# sourceMappingURL=index.cjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/ui/molecules/Tabs/index.ts"],
4
- "sourcesContent": ["export * from './Tabs.js';\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,uBAAd;",
6
- "names": []
7
- }