@studiometa/ui 0.2.2 → 0.2.5

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 (148) hide show
  1. package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +8 -13
  2. package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -26
  3. package/atoms/Cursor/Cursor.cjs +14 -22
  4. package/atoms/Cursor/Cursor.d.ts +2 -2
  5. package/atoms/Cursor/Cursor.js +1 -103
  6. package/atoms/Figure/Figure.cjs +20 -16
  7. package/atoms/Figure/Figure.d.ts +19 -1
  8. package/atoms/Figure/Figure.js +1 -27
  9. package/atoms/Figure/FigureTwicPics.cjs +72 -0
  10. package/atoms/Figure/FigureTwicPics.d.ts +48 -0
  11. package/atoms/Figure/FigureTwicPics.js +1 -0
  12. package/atoms/Figure/index.cjs +31 -0
  13. package/atoms/Figure/index.d.ts +2 -0
  14. package/atoms/Figure/index.js +1 -0
  15. package/atoms/LargeText/LargeText.cjs +36 -28
  16. package/atoms/LargeText/LargeText.d.ts +27 -4
  17. package/atoms/LargeText/LargeText.js +1 -48
  18. package/atoms/LazyInclude/LazyInclude.cjs +8 -13
  19. package/atoms/LazyInclude/LazyInclude.d.ts +4 -4
  20. package/atoms/LazyInclude/LazyInclude.js +1 -46
  21. package/atoms/Prefetch/AbstractPrefetch.cjs +8 -13
  22. package/atoms/Prefetch/AbstractPrefetch.d.ts +1 -1
  23. package/atoms/Prefetch/AbstractPrefetch.js +1 -58
  24. package/atoms/Prefetch/PrefetchWhenOver.cjs +12 -34
  25. package/atoms/Prefetch/PrefetchWhenOver.d.ts +1 -1
  26. package/atoms/Prefetch/PrefetchWhenOver.js +1 -35
  27. package/atoms/Prefetch/PrefetchWhenVisible.cjs +12 -34
  28. package/atoms/Prefetch/PrefetchWhenVisible.d.ts +1 -1
  29. package/atoms/Prefetch/PrefetchWhenVisible.js +1 -36
  30. package/atoms/Prefetch/index.cjs +9 -16
  31. package/atoms/Prefetch/index.js +1 -8
  32. package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +126 -0
  33. package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts +133 -0
  34. package/atoms/ScrollAnimation/AbstractScrollAnimation.js +1 -0
  35. package/atoms/ScrollAnimation/ScrollAnimation.cjs +51 -0
  36. package/atoms/ScrollAnimation/ScrollAnimation.d.ts +55 -0
  37. package/atoms/ScrollAnimation/ScrollAnimation.js +1 -0
  38. package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +51 -0
  39. package/atoms/ScrollAnimation/ScrollAnimationChild.d.ts +13 -0
  40. package/atoms/ScrollAnimation/ScrollAnimationChild.js +1 -0
  41. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +41 -0
  42. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +6 -0
  43. package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.js +1 -0
  44. package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +48 -0
  45. package/atoms/ScrollAnimation/ScrollAnimationParent.d.ts +35 -0
  46. package/atoms/ScrollAnimation/ScrollAnimationParent.js +1 -0
  47. package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +41 -0
  48. package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +6 -0
  49. package/atoms/ScrollAnimation/ScrollAnimationWithEase.js +1 -0
  50. package/atoms/ScrollAnimation/animationScrollWithEase.cjs +70 -0
  51. package/atoms/ScrollAnimation/animationScrollWithEase.d.ts +11 -0
  52. package/atoms/ScrollAnimation/animationScrollWithEase.js +1 -0
  53. package/atoms/ScrollAnimation/index.cjs +41 -0
  54. package/atoms/ScrollAnimation/index.d.ts +7 -0
  55. package/atoms/ScrollAnimation/index.js +1 -0
  56. package/atoms/index.cjs +13 -19
  57. package/atoms/index.d.ts +2 -1
  58. package/atoms/index.js +1 -13
  59. package/index.cjs +11 -15
  60. package/index.js +1 -3
  61. package/molecules/Accordion/Accordion.cjs +12 -34
  62. package/molecules/Accordion/Accordion.js +1 -35
  63. package/molecules/Accordion/AccordionCore.cjs +8 -13
  64. package/molecules/Accordion/AccordionCore.d.ts +2 -2
  65. package/molecules/Accordion/AccordionCore.js +1 -34
  66. package/molecules/Accordion/AccordionItem.cjs +70 -114
  67. package/molecules/Accordion/AccordionItem.d.ts +7 -6
  68. package/molecules/Accordion/AccordionItem.js +1 -178
  69. package/molecules/Menu/Menu.cjs +148 -0
  70. package/molecules/Menu/Menu.d.ts +140 -0
  71. package/molecules/Menu/Menu.js +1 -0
  72. package/molecules/Menu/MenuBtn.cjs +53 -0
  73. package/molecules/Menu/MenuBtn.d.ts +39 -0
  74. package/molecules/Menu/MenuBtn.js +1 -0
  75. package/molecules/Menu/MenuList.cjs +134 -0
  76. package/molecules/Menu/MenuList.d.ts +101 -0
  77. package/molecules/Menu/MenuList.js +1 -0
  78. package/molecules/Menu/index.cjs +33 -0
  79. package/molecules/Menu/index.d.ts +3 -0
  80. package/molecules/Menu/index.js +1 -0
  81. package/molecules/Modal/Modal.cjs +42 -71
  82. package/molecules/Modal/Modal.d.ts +5 -5
  83. package/molecules/Modal/Modal.js +1 -150
  84. package/molecules/Modal/ModalWithTransition.cjs +13 -43
  85. package/molecules/Modal/ModalWithTransition.js +1 -69
  86. package/molecules/Panel/Panel.cjs +42 -76
  87. package/molecules/Panel/Panel.js +1 -117
  88. package/molecules/Slider/AbstractSliderChild.cjs +10 -20
  89. package/molecules/Slider/AbstractSliderChild.d.ts +6 -2
  90. package/molecules/Slider/AbstractSliderChild.js +1 -43
  91. package/molecules/Slider/Slider.cjs +14 -24
  92. package/molecules/Slider/Slider.d.ts +6 -6
  93. package/molecules/Slider/Slider.js +1 -209
  94. package/molecules/Slider/SliderBtn.cjs +9 -16
  95. package/molecules/Slider/SliderBtn.d.ts +1 -1
  96. package/molecules/Slider/SliderBtn.js +1 -34
  97. package/molecules/Slider/SliderCount.cjs +9 -16
  98. package/molecules/Slider/SliderCount.js +1 -19
  99. package/molecules/Slider/SliderDots.cjs +9 -16
  100. package/molecules/Slider/SliderDots.js +1 -24
  101. package/molecules/Slider/SliderDrag.cjs +8 -13
  102. package/molecules/Slider/SliderDrag.js +1 -19
  103. package/molecules/Slider/SliderItem.cjs +14 -37
  104. package/molecules/Slider/SliderItem.js +1 -105
  105. package/molecules/Slider/SliderProgress.cjs +9 -16
  106. package/molecules/Slider/SliderProgress.js +1 -23
  107. package/molecules/Slider/index.cjs +9 -16
  108. package/molecules/Slider/index.js +1 -18
  109. package/molecules/Sticky/Sticky.cjs +11 -19
  110. package/molecules/Sticky/Sticky.d.ts +8 -8
  111. package/molecules/Sticky/Sticky.js +1 -107
  112. package/molecules/TableOfContent/TableOfContent.cjs +9 -16
  113. package/molecules/TableOfContent/TableOfContent.d.ts +1 -1
  114. package/molecules/TableOfContent/TableOfContent.js +1 -42
  115. package/molecules/TableOfContent/TableOfContentAnchor.cjs +8 -13
  116. package/molecules/TableOfContent/TableOfContentAnchor.js +1 -39
  117. package/molecules/TableOfContent/index.cjs +9 -16
  118. package/molecules/TableOfContent/index.js +1 -6
  119. package/molecules/Tabs/Tabs.cjs +54 -82
  120. package/molecules/Tabs/Tabs.d.ts +5 -4
  121. package/molecules/Tabs/Tabs.js +1 -126
  122. package/molecules/index.cjs +13 -18
  123. package/molecules/index.d.ts +1 -0
  124. package/molecules/index.js +1 -18
  125. package/organisms/Frame/Frame.cjs +67 -98
  126. package/organisms/Frame/Frame.d.ts +3 -3
  127. package/organisms/Frame/Frame.js +1 -171
  128. package/organisms/Frame/FrameAnchor.cjs +8 -13
  129. package/organisms/Frame/FrameAnchor.js +1 -22
  130. package/organisms/Frame/FrameForm.cjs +8 -13
  131. package/organisms/Frame/FrameForm.js +1 -22
  132. package/organisms/Frame/FrameTarget.cjs +31 -73
  133. package/organisms/Frame/FrameTarget.js +1 -109
  134. package/organisms/Frame/index.cjs +9 -16
  135. package/organisms/Frame/index.js +1 -10
  136. package/organisms/index.cjs +9 -13
  137. package/organisms/index.js +1 -1
  138. package/package.json +3 -4
  139. package/primitives/Draggable/Draggable.cjs +15 -28
  140. package/primitives/Draggable/Draggable.d.ts +0 -5
  141. package/primitives/Draggable/Draggable.js +1 -38
  142. package/primitives/Sentinel/Sentinel.cjs +8 -13
  143. package/primitives/Sentinel/Sentinel.js +1 -15
  144. package/primitives/Transition/Transition.cjs +12 -17
  145. package/primitives/Transition/Transition.d.ts +2 -4
  146. package/primitives/Transition/Transition.js +1 -45
  147. package/primitives/index.cjs +9 -16
  148. package/primitives/index.js +1 -8
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
5
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
7
6
  var __export = (target, all) => {
8
7
  for (var name in all)
9
8
  __defProp(target, name, { get: all[name], enumerable: true });
10
9
  };
11
- var __reExport = (target, module2, copyDefault, desc) => {
12
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
13
- for (let key of __getOwnPropNames(module2))
14
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
15
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
15
  }
17
- return target;
16
+ return to;
18
17
  };
19
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
20
- return (module2, temp) => {
21
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
22
- };
23
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
24
19
  var __publicField = (obj, key, value) => {
25
20
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
26
21
  return value;
@@ -31,6 +26,7 @@ var AnchorScrollTo_exports = {};
31
26
  __export(AnchorScrollTo_exports, {
32
27
  default: () => AnchorScrollTo
33
28
  });
29
+ module.exports = __toCommonJS(AnchorScrollTo_exports);
34
30
  var import_js_toolkit = require("@studiometa/js-toolkit");
35
31
  var import_utils = require("@studiometa/js-toolkit/utils");
36
32
  var AnchorScrollTo = class extends import_js_toolkit.Base {
@@ -48,5 +44,4 @@ var AnchorScrollTo = class extends import_js_toolkit.Base {
48
44
  __publicField(AnchorScrollTo, "config", {
49
45
  name: "AnchorScrollTo"
50
46
  });
51
- module.exports = __toCommonJS(AnchorScrollTo_exports);
52
47
  if (module.exports.default) module.exports = module.exports.default;
@@ -1,26 +1 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => {
4
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- return value;
6
- };
7
- import { Base } from "@studiometa/js-toolkit";
8
- import { scrollTo } from "@studiometa/js-toolkit/utils";
9
- class AnchorScrollTo extends Base {
10
- get targetSelector() {
11
- return this.$el.hash;
12
- }
13
- onClick(event) {
14
- try {
15
- scrollTo(this.targetSelector);
16
- event.preventDefault();
17
- } catch (err) {
18
- }
19
- }
20
- }
21
- __publicField(AnchorScrollTo, "config", {
22
- name: "AnchorScrollTo"
23
- });
24
- export {
25
- AnchorScrollTo as default
26
- };
1
+ import{Base as r}from"@studiometa/js-toolkit";import{scrollTo as e}from"@studiometa/js-toolkit/utils";class o extends r{static config={name:"AnchorScrollTo"};get targetSelector(){return this.$el.hash}onClick(t){try{e(this.targetSelector),t.preventDefault()}catch{}}}export{o as default};
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
5
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
7
6
  var __export = (target, all) => {
8
7
  for (var name in all)
9
8
  __defProp(target, name, { get: all[name], enumerable: true });
10
9
  };
11
- var __reExport = (target, module2, copyDefault, desc) => {
12
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
13
- for (let key of __getOwnPropNames(module2))
14
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
15
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
15
  }
17
- return target;
16
+ return to;
18
17
  };
19
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
20
- return (module2, temp) => {
21
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
22
- };
23
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
24
19
  var __publicField = (obj, key, value) => {
25
20
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
26
21
  return value;
@@ -31,18 +26,16 @@ var Cursor_exports = {};
31
26
  __export(Cursor_exports, {
32
27
  default: () => Cursor
33
28
  });
29
+ module.exports = __toCommonJS(Cursor_exports);
34
30
  var import_js_toolkit = require("@studiometa/js-toolkit");
35
31
  var import_utils = require("@studiometa/js-toolkit/utils");
36
32
  var Cursor = class extends import_js_toolkit.Base {
37
- constructor() {
38
- super(...arguments);
39
- __publicField(this, "x", 0);
40
- __publicField(this, "y", 0);
41
- __publicField(this, "scale", 0);
42
- __publicField(this, "pointerX", 0);
43
- __publicField(this, "pointerY", 0);
44
- __publicField(this, "pointerScale", 0);
45
- }
33
+ x = 0;
34
+ y = 0;
35
+ scale = 0;
36
+ pointerX = 0;
37
+ pointerY = 0;
38
+ pointerScale = 0;
46
39
  mounted() {
47
40
  this.x = 0;
48
41
  this.y = 0;
@@ -125,5 +118,4 @@ __publicField(Cursor, "config", {
125
118
  }
126
119
  }
127
120
  });
128
- module.exports = __toCommonJS(Cursor_exports);
129
121
  if (module.exports.default) module.exports = module.exports.default;
@@ -96,7 +96,7 @@ export default class Cursor extends Base {
96
96
  * @param {PointerServiceProps} options
97
97
  * @return {void}
98
98
  */
99
- moved({ event, x, y, isDown }: PointerServiceProps): void;
99
+ moved(this: CursorInterface, { event, x, y, isDown }: PointerServiceProps): void;
100
100
  /**
101
101
  * RequestAnimationFrame hook.
102
102
  *
@@ -104,7 +104,7 @@ export default class Cursor extends Base {
104
104
  *
105
105
  * @return {void}
106
106
  */
107
- ticked(): void;
107
+ ticked(this: CursorInterface): void;
108
108
  /**
109
109
  * Render the cursor.
110
110
  *
@@ -1,103 +1 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => {
4
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- return value;
6
- };
7
- import { Base } from "@studiometa/js-toolkit";
8
- import { damp, matrix } from "@studiometa/js-toolkit/utils";
9
- class Cursor extends Base {
10
- constructor() {
11
- super(...arguments);
12
- __publicField(this, "x", 0);
13
- __publicField(this, "y", 0);
14
- __publicField(this, "scale", 0);
15
- __publicField(this, "pointerX", 0);
16
- __publicField(this, "pointerY", 0);
17
- __publicField(this, "pointerScale", 0);
18
- }
19
- mounted() {
20
- this.x = 0;
21
- this.y = 0;
22
- this.scale = 0;
23
- this.pointerX = 0;
24
- this.pointerY = 0;
25
- this.pointerScale = 0;
26
- this.render({ x: this.x, y: this.y, scale: this.scale });
27
- }
28
- moved({ event, x, y, isDown }) {
29
- if (!this.$services.has("ticked")) {
30
- this.$services.enable("ticked");
31
- }
32
- this.pointerX = x;
33
- this.pointerY = y;
34
- let scale = 1;
35
- if (!event) {
36
- this.pointerScale = scale;
37
- return;
38
- }
39
- const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
40
- const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
41
- if (shouldGrow) {
42
- scale = this.$options.growTo;
43
- }
44
- if (shouldReduce) {
45
- scale = this.$options.shrinkTo;
46
- }
47
- this.pointerScale = scale;
48
- }
49
- ticked() {
50
- this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
51
- this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
52
- this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
53
- this.render({ x: this.x, y: this.y, scale: this.scale });
54
- if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
55
- this.$services.disable("ticked");
56
- }
57
- }
58
- render({ x, y, scale }) {
59
- const transform = matrix({
60
- translateX: x,
61
- translateY: y,
62
- scaleX: scale,
63
- scaleY: scale
64
- });
65
- this.$el.style.transform = `translateZ(0) ${transform}`;
66
- }
67
- }
68
- __publicField(Cursor, "config", {
69
- name: "Cursor",
70
- options: {
71
- growSelectors: {
72
- type: String,
73
- default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
74
- },
75
- shrinkSelectors: {
76
- type: String,
77
- default: "[data-cursor-shrink], [data-cursor-shrink] *"
78
- },
79
- growTo: {
80
- type: Number,
81
- default: 2
82
- },
83
- shrinkTo: {
84
- type: Number,
85
- default: 0.5
86
- },
87
- translateDampFactor: {
88
- type: Number,
89
- default: 0.25
90
- },
91
- growDampFactor: {
92
- type: Number,
93
- default: 0.25
94
- },
95
- shrinkDampFactor: {
96
- type: Number,
97
- default: 0.25
98
- }
99
- }
100
- });
101
- export {
102
- Cursor as default
103
- };
1
+ import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let e=1;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
5
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
7
6
  var __export = (target, all) => {
8
7
  for (var name in all)
9
8
  __defProp(target, name, { get: all[name], enumerable: true });
10
9
  };
11
- var __reExport = (target, module2, copyDefault, desc) => {
12
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
13
- for (let key of __getOwnPropNames(module2))
14
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
15
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
15
  }
17
- return target;
16
+ return to;
18
17
  };
19
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
20
- return (module2, temp) => {
21
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
22
- };
23
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
24
19
  var __publicField = (obj, key, value) => {
25
20
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
26
21
  return value;
@@ -31,8 +26,15 @@ var Figure_exports = {};
31
26
  __export(Figure_exports, {
32
27
  default: () => Figure
33
28
  });
29
+ module.exports = __toCommonJS(Figure_exports);
34
30
  var import_js_toolkit = require("@studiometa/js-toolkit");
35
31
  var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
32
+ get src() {
33
+ return this.$refs.img.src;
34
+ }
35
+ set src(value) {
36
+ this.$refs.img.src = value;
37
+ }
36
38
  mounted() {
37
39
  if (!this.$refs.img) {
38
40
  throw new Error("[Figure] The `img` ref is required.");
@@ -40,14 +42,16 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
40
42
  if (!(this.$refs.img instanceof HTMLImageElement)) {
41
43
  throw new Error("[Figure] The `img` ref must be an `<img>` element.");
42
44
  }
43
- if (this.$refs.img.hasAttribute("data-src")) {
44
- this.$refs.img.src = this.$refs.img.getAttribute("data-src");
45
+ if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
46
+ this.src = this.$refs.img.getAttribute("data-src");
45
47
  }
46
48
  }
47
49
  };
48
50
  __publicField(Figure, "config", {
49
51
  name: "Figure",
50
- refs: ["img"]
52
+ refs: ["img"],
53
+ options: {
54
+ lazy: Boolean
55
+ }
51
56
  });
52
- module.exports = __toCommonJS(Figure_exports);
53
57
  if (module.exports.default) module.exports = module.exports.default;
@@ -15,12 +15,30 @@ export default class Figure extends Base {
15
15
  static config: {
16
16
  name: string;
17
17
  refs: string[];
18
+ options: {
19
+ lazy: BooleanConstructor;
20
+ };
18
21
  };
22
+ /**
23
+ * Set the image source.
24
+ *
25
+ * @this {Figure & FigureInterface}
26
+ * @param {string} value
27
+ * @returns {void}
28
+ */
29
+ set src(arg: string);
30
+ /**
31
+ * Get the image source.
32
+ *
33
+ * @this {Figure & FigureInterface}
34
+ * @returns {string}
35
+ */
36
+ get src(): string;
19
37
  /**
20
38
  * Load on mount.
21
39
  * @this {Figure & FigureInterface}
22
40
  */
23
- mounted(): void;
41
+ mounted(this: Figure & FigureInterface): void;
24
42
  }
25
43
  export type FigureRefs = {
26
44
  img: HTMLImageElement;
@@ -1,27 +1 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => {
4
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- return value;
6
- };
7
- import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
8
- class Figure extends withMountWhenInView(Base, { threshold: [0, 1] }) {
9
- mounted() {
10
- if (!this.$refs.img) {
11
- throw new Error("[Figure] The `img` ref is required.");
12
- }
13
- if (!(this.$refs.img instanceof HTMLImageElement)) {
14
- throw new Error("[Figure] The `img` ref must be an `<img>` element.");
15
- }
16
- if (this.$refs.img.hasAttribute("data-src")) {
17
- this.$refs.img.src = this.$refs.img.getAttribute("data-src");
18
- }
19
- }
20
- }
21
- __publicField(Figure, "config", {
22
- name: "Figure",
23
- refs: ["img"]
24
- });
25
- export {
26
- Figure as default
27
- };
1
+ import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};
@@ -0,0 +1,72 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
21
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
+ var __publicField = (obj, key, value) => {
23
+ __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
24
+ return value;
25
+ };
26
+
27
+ // packages/ui/atoms/Figure/FigureTwicPics.js
28
+ var FigureTwicPics_exports = {};
29
+ __export(FigureTwicPics_exports, {
30
+ default: () => FigureTwicPics
31
+ });
32
+ module.exports = __toCommonJS(FigureTwicPics_exports);
33
+ var import_Figure = __toESM(require("./Figure.cjs"), 1);
34
+ function normalizeSize(that, prop) {
35
+ const { step } = that.$options;
36
+ return Math.ceil(that.$refs.img[prop] / step) * step;
37
+ }
38
+ var FigureTwicPics = class extends import_Figure.default {
39
+ get domain() {
40
+ const url = new URL(this.$refs.img.dataset.src);
41
+ return url.host;
42
+ }
43
+ set src(value) {
44
+ const url = new URL(value);
45
+ url.host = this.domain;
46
+ const width = normalizeSize(this, "offsetWidth");
47
+ const height = normalizeSize(this, "offsetHeight");
48
+ url.searchParams.set("twic", ["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/"));
49
+ url.search = decodeURIComponent(url.search);
50
+ super.src = url.toString();
51
+ }
52
+ resized() {
53
+ this.src = this.$refs.img.dataset.src;
54
+ }
55
+ };
56
+ __publicField(FigureTwicPics, "config", {
57
+ ...import_Figure.default.config,
58
+ name: "FigureTwicPics",
59
+ options: {
60
+ ...import_Figure.default.config.options,
61
+ transform: String,
62
+ step: {
63
+ type: Number,
64
+ default: 50
65
+ },
66
+ mode: {
67
+ type: String,
68
+ default: "cover"
69
+ }
70
+ }
71
+ });
72
+ if (module.exports.default) module.exports = module.exports.default;
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Figure class.
3
+ *
4
+ * Manager lazyloading image sources.
5
+ */
6
+ export default class FigureTwicPics extends Figure {
7
+ /**
8
+ * Config.
9
+ */
10
+ static config: {
11
+ name: string;
12
+ options: {
13
+ transform: StringConstructor;
14
+ step: {
15
+ type: NumberConstructor;
16
+ default: number;
17
+ };
18
+ mode: {
19
+ type: StringConstructor;
20
+ default: string;
21
+ };
22
+ lazy: BooleanConstructor;
23
+ };
24
+ refs: string[];
25
+ };
26
+ /**
27
+ * Get the TwicPics domain.
28
+ *
29
+ * @this {FigureTwicPicsInterface}
30
+ * @returns {string}
31
+ */
32
+ get domain(): string;
33
+ /**
34
+ * Reassign the source from the original on resized.
35
+ *
36
+ * @this {FigureTwicPicsInterface}
37
+ * @returns {void}
38
+ */
39
+ resized(this: FigureTwicPicsInterface): void;
40
+ }
41
+ export type FigureInterface = import('./Figure.js').FigureInterface;
42
+ export type FigureTwicPicsInterface = FigureTwicPics & FigureInterface & {
43
+ $options: {
44
+ transform: string;
45
+ step: number;
46
+ };
47
+ };
48
+ import Figure from "./Figure.js";
@@ -0,0 +1 @@
1
+ import i from"./Figure.js";function o(e,s){const{step:t}=e.$options;return Math.ceil(e.$refs.img[s]/t)*t}class c extends i{static config={...i.config,name:"FigureTwicPics",options:{...i.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};
@@ -0,0 +1,31 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
+
22
+ // packages/ui/atoms/Figure/index.js
23
+ var Figure_exports = {};
24
+ __export(Figure_exports, {
25
+ Figure: () => import_Figure.default,
26
+ FigureTwicPics: () => import_FigureTwicPics.default
27
+ });
28
+ module.exports = __toCommonJS(Figure_exports);
29
+ var import_Figure = __toESM(require("./Figure.cjs"), 1);
30
+ var import_FigureTwicPics = __toESM(require("./FigureTwicPics.cjs"), 1);
31
+ if (module.exports.default) module.exports = module.exports.default;
@@ -0,0 +1,2 @@
1
+ export { default as Figure } from "./Figure.js";
2
+ export { default as FigureTwicPics } from "./FigureTwicPics.js";
@@ -0,0 +1 @@
1
+ import{default as a}from"./Figure.js";import{default as i}from"./FigureTwicPics.js";export{a as Figure,i as FigureTwicPics};
@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
5
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
7
6
  var __export = (target, all) => {
8
7
  for (var name in all)
9
8
  __defProp(target, name, { get: all[name], enumerable: true });
10
9
  };
11
- var __reExport = (target, module2, copyDefault, desc) => {
12
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
13
- for (let key of __getOwnPropNames(module2))
14
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
15
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
15
  }
17
- return target;
16
+ return to;
18
17
  };
19
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
20
- return (module2, temp) => {
21
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
22
- };
23
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
24
19
  var __publicField = (obj, key, value) => {
25
20
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
26
21
  return value;
@@ -31,19 +26,17 @@ var LargeText_exports = {};
31
26
  __export(LargeText_exports, {
32
27
  default: () => LargeText
33
28
  });
29
+ module.exports = __toCommonJS(LargeText_exports);
34
30
  var import_js_toolkit = require("@studiometa/js-toolkit");
35
31
  var import_utils = require("@studiometa/js-toolkit/utils");
36
32
  var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
37
- constructor() {
38
- super(...arguments);
39
- __publicField(this, "translateX", 0);
40
- __publicField(this, "deltaY", 0);
41
- __publicField(this, "transform", {
42
- skewX: 0,
43
- translateX: 0
44
- });
45
- __publicField(this, "width", 0);
46
- }
33
+ translateX = 0;
34
+ deltaY = 0;
35
+ transform = {
36
+ skewX: 0,
37
+ translateX: 0
38
+ };
39
+ width = 0;
47
40
  mounted() {
48
41
  this.width = this.$refs.target.clientWidth;
49
42
  }
@@ -54,12 +47,17 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
54
47
  this.deltaY = props.delta.y;
55
48
  }
56
49
  ticked() {
57
- this.translateX -= Math.abs(this.deltaY) + 1;
50
+ this.translateX -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
58
51
  this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
59
- this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5), this.transform.skewX, 0.25);
60
- if (Math.abs(this.transform.translateX) >= this.width) {
52
+ if (this.$options.skew) {
53
+ this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
54
+ }
55
+ if (this.translateX <= this.width * -1) {
56
+ this.translateX = 0;
57
+ this.transform.translateX += this.width;
58
+ } else if (this.$options.sensitivity < 0 && this.translateX >= this.width) {
61
59
  this.translateX = 0;
62
- this.transform.translateX = 0;
60
+ this.transform.translateX -= this.width;
63
61
  }
64
62
  (0, import_utils.nextFrame)(() => {
65
63
  this.$refs.target.style.transform = (0, import_utils.matrix)(this.transform) + " translateZ(0px)";
@@ -68,7 +66,17 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
68
66
  };
69
67
  __publicField(LargeText, "config", {
70
68
  name: "LargeText",
71
- refs: ["target"]
69
+ refs: ["target"],
70
+ options: {
71
+ skew: Boolean,
72
+ sensitivity: {
73
+ type: Number,
74
+ default: 1
75
+ },
76
+ skewSensitivity: {
77
+ type: Number,
78
+ default: 1
79
+ }
80
+ }
72
81
  });
73
- module.exports = __toCommonJS(LargeText_exports);
74
82
  if (module.exports.default) module.exports = module.exports.default;