@maas/vue-equipment 0.1.3 → 0.3.0
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.
- package/dist/composables/index.js +283 -1
- package/dist/composables/index.js.map +1 -1
- package/dist/composables/index.mjs +253 -1
- package/dist/composables/index.mjs.map +1 -1
- package/dist/nuxt/module.d.ts +2 -4
- package/dist/nuxt/module.json +1 -1
- package/dist/nuxt/module.mjs +8 -10
- package/dist/plugins/MagicModal/index.d.ts +2 -1
- package/dist/plugins/MagicModal/index.mjs +2 -1
- package/dist/plugins/MagicModal/src/components/MagicModal.vue +15 -0
- package/dist/plugins/MagicModal/src/composables/useModalEmitter.d.ts +15 -0
- package/dist/plugins/{MagicScroll/src/composables/useEmitter.mjs → MagicModal/src/composables/useModalEmitter.mjs} +1 -1
- package/dist/plugins/MagicModal/src/types/index.d.ts +7 -1
- package/dist/plugins/MagicScroll/index.d.ts +2 -2
- package/dist/plugins/MagicScroll/index.mjs +2 -2
- package/dist/plugins/MagicScroll/src/composables/useCollisionDetect.mjs +2 -2
- package/dist/plugins/MagicScroll/src/composables/useCollisionEmitter.d.ts +15 -0
- package/dist/plugins/MagicScroll/src/composables/useCollisionEmitter.mjs +9 -0
- package/dist/plugins/MagicScroll/src/types/index.d.ts +1 -1
- package/package.json +7 -11
- package/dist/plugins/MagicScroll/src/composables/useEmitter.d.ts +0 -15
- /package/dist/plugins/MagicModal/src/{store → composables/store}/modals.d.ts +0 -0
- /package/dist/plugins/MagicModal/src/{store → composables/store}/modals.mjs +0 -0
|
@@ -1,2 +1,284 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
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 });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// index.ts
|
|
21
|
+
var composables_exports = {};
|
|
22
|
+
__export(composables_exports, {
|
|
23
|
+
useEasings: () => useEasings,
|
|
24
|
+
useGlyphToSvg: () => useGlyphToSvg,
|
|
25
|
+
useScrollTo: () => useScrollTo,
|
|
26
|
+
useViewportDimensions: () => useViewportDimensions
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(composables_exports);
|
|
29
|
+
|
|
30
|
+
// useEasings/index.ts
|
|
31
|
+
function useEasings() {
|
|
32
|
+
const easings2 = {
|
|
33
|
+
linear: (t) => t,
|
|
34
|
+
easeInQuad: (t) => t * t,
|
|
35
|
+
easeOutQuad: (t) => t * (2 - t),
|
|
36
|
+
easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
|
|
37
|
+
easeInCubic: (t) => t * t * t,
|
|
38
|
+
easeOutCubic: (t) => --t * t * t + 1,
|
|
39
|
+
easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
|
|
40
|
+
easeInQuart: (t) => t * t * t * t,
|
|
41
|
+
easeOutQuart: (t) => 1 - --t * t * t * t,
|
|
42
|
+
easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
|
|
43
|
+
easeInQuint: (t) => t * t * t * t * t,
|
|
44
|
+
easeOutQuint: (t) => 1 + --t * t * t * t * t,
|
|
45
|
+
easeInOutQuint: (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
|
|
46
|
+
};
|
|
47
|
+
return easings2;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// useGlyphToSvg/index.ts
|
|
51
|
+
var import_core = require("@vueuse/core");
|
|
52
|
+
var import_vue = require("vue");
|
|
53
|
+
function useGlyphToSvg({
|
|
54
|
+
fontSize,
|
|
55
|
+
fontWeight,
|
|
56
|
+
fontFile
|
|
57
|
+
}) {
|
|
58
|
+
const { copy } = (0, import_core.useClipboard)();
|
|
59
|
+
const mappedFontFile = (0, import_vue.unref)(fontFile);
|
|
60
|
+
const mappedFontSize = (0, import_vue.unref)(fontSize);
|
|
61
|
+
const mappedFontWeight = (0, import_vue.unref)(fontWeight);
|
|
62
|
+
const loadVariableFont = () => {
|
|
63
|
+
const variableFont = mappedFontFile.getVariation({
|
|
64
|
+
wght: mappedFontWeight
|
|
65
|
+
});
|
|
66
|
+
return variableFont;
|
|
67
|
+
};
|
|
68
|
+
const convertToSvg = (glyph) => {
|
|
69
|
+
const scale = mappedFontSize / mappedFontFile.unitsPerEm;
|
|
70
|
+
const path = glyph.path.scale(scale, scale).scale(-1, 1).rotate(Math.PI);
|
|
71
|
+
const bbox = path.bbox;
|
|
72
|
+
const minX = bbox.minX;
|
|
73
|
+
const minY = bbox.minY;
|
|
74
|
+
const height = bbox.height;
|
|
75
|
+
const width = bbox.width;
|
|
76
|
+
const dims = (0, import_vue.unref)(fontSize);
|
|
77
|
+
const centeredY = (height - dims) / 2 + minY;
|
|
78
|
+
const centeredX = (width - dims) / 2 + minX;
|
|
79
|
+
const viewBox = `${centeredX} ${centeredY} ${dims} ${dims}`;
|
|
80
|
+
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" xmlns:xlink="http://www.w3.org/1999/xlink">`;
|
|
81
|
+
svg += `<path d="${path.toSVG()}" fill="currentColor" />`;
|
|
82
|
+
svg += "</svg>";
|
|
83
|
+
return svg;
|
|
84
|
+
};
|
|
85
|
+
const renderSvg = async (codePoint) => {
|
|
86
|
+
const font = await loadVariableFont();
|
|
87
|
+
const glyph = font.glyphForCodePoint(codePoint);
|
|
88
|
+
const svg = convertToSvg(glyph);
|
|
89
|
+
return svg;
|
|
90
|
+
};
|
|
91
|
+
const copySvg = async (codePoint) => {
|
|
92
|
+
const svg = await renderSvg(codePoint);
|
|
93
|
+
copy(svg);
|
|
94
|
+
};
|
|
95
|
+
return { copySvg, renderSvg };
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// useScrollTo/index.ts
|
|
99
|
+
var import_core2 = require("@vueuse/core");
|
|
100
|
+
var easings = useEasings();
|
|
101
|
+
function min(a, b) {
|
|
102
|
+
return a < b ? a : b;
|
|
103
|
+
}
|
|
104
|
+
function unwrapParent(parent) {
|
|
105
|
+
if (parent === window) {
|
|
106
|
+
return parent;
|
|
107
|
+
} else if (typeof parent === "string") {
|
|
108
|
+
return document.querySelector(parent) || document.documentElement;
|
|
109
|
+
} else {
|
|
110
|
+
return (0, import_core2.unrefElement)(parent) || document.documentElement;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
function unwrapTarget(target, parentEl) {
|
|
114
|
+
if (typeof target === "string") {
|
|
115
|
+
const queryTarget = parentEl === window ? document : parentEl;
|
|
116
|
+
return queryTarget.querySelector(target);
|
|
117
|
+
} else {
|
|
118
|
+
return (0, import_core2.unrefElement)(target);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
function useScrollTo() {
|
|
122
|
+
function getScrollPosition(element) {
|
|
123
|
+
if (element === window) {
|
|
124
|
+
return { x: window.pageXOffset, y: window.pageYOffset };
|
|
125
|
+
} else if (element instanceof Element) {
|
|
126
|
+
return { x: element.scrollLeft, y: element.scrollTop };
|
|
127
|
+
} else {
|
|
128
|
+
return { x: 0, y: 0 };
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
function getDistance(element) {
|
|
132
|
+
const rect = element.getBoundingClientRect();
|
|
133
|
+
const scrollEl = document.scrollingElement || document.documentElement;
|
|
134
|
+
return {
|
|
135
|
+
top: rect.top + scrollEl.scrollTop,
|
|
136
|
+
left: rect.left + scrollEl.scrollLeft
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
function getScrollDuration({
|
|
140
|
+
parent = document.documentElement || document.body,
|
|
141
|
+
left = 0,
|
|
142
|
+
top = 0,
|
|
143
|
+
speed = 500
|
|
144
|
+
}) {
|
|
145
|
+
const currentPos = getScrollPosition(parent);
|
|
146
|
+
const distanceX = currentPos.x - left;
|
|
147
|
+
const distanceY = currentPos.y - top;
|
|
148
|
+
const durationX = Math.abs(distanceX / speed * 100);
|
|
149
|
+
const durationY = Math.abs(distanceY / speed * 100);
|
|
150
|
+
return { x: durationX, y: durationY };
|
|
151
|
+
}
|
|
152
|
+
function scrollTo({
|
|
153
|
+
parent = document.documentElement || document.body,
|
|
154
|
+
top,
|
|
155
|
+
left,
|
|
156
|
+
duration = {},
|
|
157
|
+
easing = easings.easeOutQuad,
|
|
158
|
+
callback
|
|
159
|
+
}) {
|
|
160
|
+
const startTime = Date.now();
|
|
161
|
+
const { x: fromX, y: fromY } = getScrollPosition(parent);
|
|
162
|
+
if (fromX === top && fromY === left) {
|
|
163
|
+
if (callback)
|
|
164
|
+
callback();
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
const mappedDuration = { x: 500, y: 500, ...duration };
|
|
168
|
+
const scroll = () => {
|
|
169
|
+
const currentTime = Date.now();
|
|
170
|
+
const timeX = min(1, (currentTime - startTime) / mappedDuration.x);
|
|
171
|
+
const timeY = min(1, (currentTime - startTime) / mappedDuration.y);
|
|
172
|
+
const easedTimeX = easing(timeX);
|
|
173
|
+
const easedTimeY = easing(timeY);
|
|
174
|
+
const minTime = Math.min(easedTimeX, easedTimeY);
|
|
175
|
+
parent.scroll({
|
|
176
|
+
left: minTime * (left - fromX) + fromX,
|
|
177
|
+
top: minTime * (top - fromY) + fromY
|
|
178
|
+
});
|
|
179
|
+
if (easedTimeX < 1 || easedTimeY < 1) {
|
|
180
|
+
requestAnimationFrame(scroll);
|
|
181
|
+
} else if (callback) {
|
|
182
|
+
callback();
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
requestAnimationFrame(scroll);
|
|
186
|
+
}
|
|
187
|
+
function scrollToTarget({
|
|
188
|
+
target,
|
|
189
|
+
parent = document.documentElement || document.body,
|
|
190
|
+
offset = {},
|
|
191
|
+
speed = 500,
|
|
192
|
+
easing = easings.easeOutQuad
|
|
193
|
+
}) {
|
|
194
|
+
let parentEl = unwrapParent(parent);
|
|
195
|
+
if (!parentEl)
|
|
196
|
+
return;
|
|
197
|
+
let targetEl = unwrapTarget(target, parentEl);
|
|
198
|
+
if (!targetEl)
|
|
199
|
+
return;
|
|
200
|
+
const mappedOffset = { x: 0, y: 0, ...offset };
|
|
201
|
+
const distance = getDistance(targetEl);
|
|
202
|
+
const leftDistance = distance.left - mappedOffset.x;
|
|
203
|
+
const topDistance = distance.top - mappedOffset.y;
|
|
204
|
+
const scrollDuration = getScrollDuration({
|
|
205
|
+
parent: parentEl,
|
|
206
|
+
left: leftDistance,
|
|
207
|
+
top: topDistance,
|
|
208
|
+
speed
|
|
209
|
+
});
|
|
210
|
+
scrollTo({
|
|
211
|
+
parent: parentEl,
|
|
212
|
+
left: leftDistance,
|
|
213
|
+
top: topDistance,
|
|
214
|
+
duration: scrollDuration,
|
|
215
|
+
easing
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
return {
|
|
219
|
+
getScrollPosition,
|
|
220
|
+
getDistance,
|
|
221
|
+
getScrollDuration,
|
|
222
|
+
scrollTo,
|
|
223
|
+
scrollToTarget
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// useViewportDimensions/index.ts
|
|
228
|
+
var import_vue2 = require("vue");
|
|
229
|
+
function useViewportDimensions(options) {
|
|
230
|
+
const mappedOptions = {
|
|
231
|
+
width: "--vw",
|
|
232
|
+
height: "--vh",
|
|
233
|
+
initialWidth: "--initial-vw",
|
|
234
|
+
initialHeight: "--initial-vh",
|
|
235
|
+
...options
|
|
236
|
+
};
|
|
237
|
+
const setViewportWidth = (initial) => {
|
|
238
|
+
const vw = Number(window.innerWidth * 0.01).toFixed(2);
|
|
239
|
+
if (mappedOptions.width) {
|
|
240
|
+
document.documentElement.style.setProperty(mappedOptions.width, `${vw}px`);
|
|
241
|
+
}
|
|
242
|
+
if (initial && mappedOptions.initialWidth) {
|
|
243
|
+
document.documentElement.style.setProperty(
|
|
244
|
+
mappedOptions.initialWidth,
|
|
245
|
+
`${vw}px`
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
};
|
|
249
|
+
const setViewportHeight = (initial) => {
|
|
250
|
+
const vh = Number(window.innerHeight * 0.01).toFixed(2);
|
|
251
|
+
if (mappedOptions.height) {
|
|
252
|
+
document.documentElement.style.setProperty(
|
|
253
|
+
mappedOptions.height || "--vh",
|
|
254
|
+
`${vh}px`
|
|
255
|
+
);
|
|
256
|
+
}
|
|
257
|
+
if (initial && mappedOptions.initialHeight) {
|
|
258
|
+
document.documentElement.style.setProperty(
|
|
259
|
+
mappedOptions.initialHeight || "--initial-vh",
|
|
260
|
+
`${vh}px`
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
};
|
|
264
|
+
const setDimensions = () => {
|
|
265
|
+
setViewportWidth();
|
|
266
|
+
setViewportHeight();
|
|
267
|
+
};
|
|
268
|
+
(0, import_vue2.onMounted)(() => {
|
|
269
|
+
setViewportWidth(true);
|
|
270
|
+
setViewportHeight(true);
|
|
271
|
+
window.addEventListener("resize", setDimensions, { passive: true });
|
|
272
|
+
});
|
|
273
|
+
(0, import_vue2.onUnmounted)(() => {
|
|
274
|
+
window.addEventListener("resize", setDimensions, { passive: true });
|
|
275
|
+
});
|
|
276
|
+
}
|
|
277
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
278
|
+
0 && (module.exports = {
|
|
279
|
+
useEasings,
|
|
280
|
+
useGlyphToSvg,
|
|
281
|
+
useScrollTo,
|
|
282
|
+
useViewportDimensions
|
|
283
|
+
});
|
|
2
284
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../packages/composables/index.ts","../../packages/composables/useEasings/index.ts","../../packages/composables/useGlyphToSvg/index.ts","../../packages/composables/useScrollTo/index.ts","../../packages/composables/useViewportDimensions/index.ts"],"sourcesContent":["export * from './useEasings'\nexport * from './useGlyphToSvg'\nexport * from './useScrollTo'\nexport * from './useViewportDimensions'\n","export type EasingKey =\n | 'linear'\n | 'easeInQuad'\n | 'easeOutQuad'\n | 'easeInOutQuad'\n | 'easeInCubic'\n | 'easeOutCubic'\n | 'easeInOutCubic'\n | 'easeInQuart'\n | 'easeOutQuart'\n | 'easeInOutQuart'\n | 'easeInQuint'\n | 'easeOutQuint'\n | 'easeInOutQuint'\n\nexport type EasingFunction = (t: number) => number\n\nexport function useEasings() {\n const easings = {\n linear: (t: number) => t,\n easeInQuad: (t: number) => t * t,\n easeOutQuad: (t: number) => t * (2 - t),\n easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n easeInCubic: (t: number) => t * t * t,\n easeOutCubic: (t: number) => --t * t * t + 1,\n easeInOutCubic: (t: number) =>\n t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,\n easeInQuart: (t: number) => t * t * t * t,\n easeOutQuart: (t: number) => 1 - --t * t * t * t,\n easeInOutQuart: (t: number) =>\n t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,\n easeInQuint: (t: number) => t * t * t * t * t,\n easeOutQuint: (t: number) => 1 + --t * t * t * t * t,\n easeInOutQuint: (t: number) =>\n t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,\n }\n\n return easings\n}\n","import { useClipboard } from '@vueuse/core'\nimport { unref } from 'vue'\n\nimport type { Ref } from 'vue'\nimport type { Font } from 'fontkit'\n\nexport type useGlyphToSvgOptions = {\n fontSize: Ref<number> | number\n fontWeight: Ref<number> | number\n fontFile: Ref<Font> | Font\n}\n\nexport function useGlyphToSvg({\n fontSize,\n fontWeight,\n fontFile,\n}: useGlyphToSvgOptions) {\n const { copy } = useClipboard()\n const mappedFontFile = unref(fontFile)\n const mappedFontSize = unref(fontSize)\n const mappedFontWeight = unref(fontWeight)\n\n const loadVariableFont = () => {\n // @ts-ignore\n const variableFont = mappedFontFile.getVariation({\n wght: mappedFontWeight,\n })\n return variableFont\n }\n\n const convertToSvg = (glyph: any) => {\n // Scale according to current font size\n const scale = mappedFontSize / mappedFontFile.unitsPerEm\n const path = glyph.path.scale(scale, scale).scale(-1, 1).rotate(Math.PI)\n\n // Center inside square bounding box\n const bbox = path.bbox\n const minX = bbox.minX\n const minY = bbox.minY\n const height = bbox.height\n const width = bbox.width\n const dims = unref(fontSize)\n\n const centeredY = (height - dims) / 2 + minY\n const centeredX = (width - dims) / 2 + minX\n\n const viewBox = `${centeredX} ${centeredY} ${dims} ${dims}`\n\n let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"${viewBox}\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">`\n svg += `<path d=\"${path.toSVG()}\" fill=\"currentColor\" />`\n svg += '</svg>'\n\n return svg\n }\n\n const renderSvg = async (codePoint: string) => {\n const font = await loadVariableFont()\n const glyph = font.glyphForCodePoint(codePoint)\n const svg = convertToSvg(glyph)\n return svg\n }\n\n const copySvg = async (codePoint: string) => {\n const svg = await renderSvg(codePoint)\n copy(svg)\n }\n\n return { copySvg, renderSvg }\n}\n","import { useEasings } from '../useEasings'\nimport { unrefElement } from '@vueuse/core'\nimport type { EasingFunction } from '../useEasings'\nimport type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'\n\nexport type ScrollToTarget =\n | string\n | Element\n | MaybeElement\n | MaybeComputedElementRef\n\nexport type ScrollToParent = ScrollToTarget | Window\n\nexport type ScrollToParams = {\n parent?: Element | Window\n left: number\n top: number\n duration?: { x?: number; y?: number }\n easing?: EasingFunction\n callback?: () => void\n}\n\nexport type getScrollDurationParams = {\n parent: Element | Window\n left: number\n top: number\n speed: number\n}\n\nexport type scrollToTargetParams = {\n target: ScrollToTarget\n parent?: ScrollToParent\n offset?: {\n x?: number\n y?: number\n }\n speed?: number\n easing?: EasingFunction\n}\n\nconst easings = useEasings()\n\nfunction min(a: number, b: number) {\n return a < b ? a : b\n}\n\nfunction unwrapParent(parent: ScrollToParent) {\n if (parent === window) {\n return parent\n } else if (typeof parent === 'string') {\n return document.querySelector(parent) || document.documentElement\n } else {\n return (\n unrefElement(parent as MaybeComputedElementRef<MaybeElement>) ||\n document.documentElement\n )\n }\n}\n\nfunction unwrapTarget(target: ScrollToTarget, parentEl: Element | Window) {\n if (typeof target === 'string') {\n const queryTarget = parentEl === window ? document : (parentEl as Element)\n return queryTarget.querySelector(target)\n } else {\n return unrefElement(target as MaybeComputedElementRef<MaybeElement>)\n }\n}\n\nexport function useScrollTo() {\n function getScrollPosition(element: Element | Window): {\n x: number\n y: number\n } {\n if (element === window) {\n return { x: window.pageXOffset, y: window.pageYOffset }\n } else if (element instanceof Element) {\n return { x: element.scrollLeft, y: element.scrollTop }\n } else {\n return { x: 0, y: 0 }\n }\n }\n\n function getDistance(element: Element): { top: number; left: number } {\n const rect = element.getBoundingClientRect()\n const scrollEl = document.scrollingElement || document.documentElement\n\n return {\n top: rect.top + scrollEl.scrollTop,\n left: rect.left + scrollEl.scrollLeft,\n }\n }\n\n function getScrollDuration({\n parent = document.documentElement || document.body,\n left = 0,\n top = 0,\n speed = 500,\n }: getScrollDurationParams) {\n const currentPos = getScrollPosition(parent)\n const distanceX = currentPos.x - left\n const distanceY = currentPos.y - top\n const durationX = Math.abs((distanceX / speed) * 100)\n const durationY = Math.abs((distanceY / speed) * 100)\n\n return { x: durationX, y: durationY }\n }\n\n function scrollTo({\n parent = document.documentElement || document.body,\n top,\n left,\n duration = {},\n easing = easings.easeOutQuad,\n callback,\n }: ScrollToParams) {\n const startTime = Date.now()\n const { x: fromX, y: fromY } = getScrollPosition(parent)\n\n if (fromX === top && fromY === left) {\n if (callback) callback()\n return\n }\n\n const mappedDuration = { x: 500, y: 500, ...duration }\n\n const scroll = () => {\n const currentTime = Date.now()\n\n const timeX = min(1, (currentTime - startTime) / mappedDuration.x)\n const timeY = min(1, (currentTime - startTime) / mappedDuration.y)\n const easedTimeX = easing(timeX)\n const easedTimeY = easing(timeY)\n\n // We use the min of the two times to make sure we scroll at the same speed\n const minTime = Math.min(easedTimeX, easedTimeY)\n\n parent.scroll({\n left: minTime * (left - fromX) + fromX,\n top: minTime * (top - fromY) + fromY,\n })\n\n if (easedTimeX < 1 || easedTimeY < 1) {\n requestAnimationFrame(scroll)\n } else if (callback) {\n callback()\n }\n }\n\n requestAnimationFrame(scroll)\n }\n\n function scrollToTarget({\n target,\n parent = document.documentElement || document.body,\n offset = {},\n speed = 500,\n easing = easings.easeOutQuad,\n }: scrollToTargetParams) {\n let parentEl = unwrapParent(parent)\n if (!parentEl) return\n let targetEl = unwrapTarget(target, parentEl)\n if (!targetEl) return\n\n const mappedOffset = { x: 0, y: 0, ...offset }\n const distance = getDistance(targetEl)\n const leftDistance = distance.left - mappedOffset.x\n const topDistance = distance.top - mappedOffset.y\n\n const scrollDuration = getScrollDuration({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n speed: speed,\n })\n\n scrollTo({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n duration: scrollDuration,\n easing: easing,\n })\n }\n\n return {\n getScrollPosition,\n getDistance,\n getScrollDuration,\n scrollTo,\n scrollToTarget,\n }\n}\n","import { onMounted, onUnmounted } from 'vue'\n\nexport type UseViewportDimensionsOptions = {\n width?: false | string\n height?: false | string\n initialWidth?: false | string\n initialHeight?: false | string\n}\n\nexport function useViewportDimensions(options?: UseViewportDimensionsOptions) {\n const mappedOptions = {\n width: '--vw',\n height: '--vh',\n initialWidth: '--initial-vw',\n initialHeight: '--initial-vh',\n ...options,\n }\n\n const setViewportWidth = (initial?: boolean) => {\n const vw = Number(window.innerWidth * 0.01).toFixed(2)\n\n if (mappedOptions.width) {\n document.documentElement.style.setProperty(mappedOptions.width, `${vw}px`)\n }\n\n if (initial && mappedOptions.initialWidth) {\n document.documentElement.style.setProperty(\n mappedOptions.initialWidth,\n `${vw}px`\n )\n }\n }\n\n const setViewportHeight = (initial?: boolean) => {\n const vh = Number(window.innerHeight * 0.01).toFixed(2)\n\n if (mappedOptions.height) {\n document.documentElement.style.setProperty(\n mappedOptions.height || '--vh',\n `${vh}px`\n )\n }\n\n if (initial && mappedOptions.initialHeight) {\n document.documentElement.style.setProperty(\n mappedOptions.initialHeight || '--initial-vh',\n `${vh}px`\n )\n }\n }\n\n const setDimensions = () => {\n setViewportWidth()\n setViewportHeight()\n }\n\n onMounted(() => {\n setViewportWidth(true)\n setViewportHeight(true)\n\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n\n onUnmounted(() => {\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n}\n"],"mappings":"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","names":["composables_exports","__export","useEasings","useGlyphToSvg","useScrollTo","useViewportDimensions","__toCommonJS","useEasings","t","import_core","import_vue","useGlyphToSvg","fontSize","fontWeight","fontFile","copy","mappedFontFile","mappedFontSize","mappedFontWeight","loadVariableFont","convertToSvg","glyph","scale","path","bbox","minX","minY","height","width","dims","centeredY","svg","renderSvg","codePoint","import_core","easings","useEasings","min","a","b","unwrapParent","parent","unwrapTarget","target","parentEl","useScrollTo","getScrollPosition","element","getDistance","rect","scrollEl","getScrollDuration","left","top","speed","currentPos","distanceX","distanceY","durationX","durationY","scrollTo","duration","easing","callback","startTime","fromX","fromY","mappedDuration","scroll","currentTime","timeX","timeY","easedTimeX","easedTimeY","minTime","scrollToTarget","offset","targetEl","mappedOffset","distance","leftDistance","topDistance","scrollDuration","import_vue","useViewportDimensions","options","mappedOptions","setViewportWidth","initial","vw","setViewportHeight","vh","setDimensions"]}
|
|
1
|
+
{"version":3,"sources":["../../packages/composables/index.ts","../../packages/composables/useEasings/index.ts","../../packages/composables/useGlyphToSvg/index.ts","../../packages/composables/useScrollTo/index.ts","../../packages/composables/useViewportDimensions/index.ts"],"sourcesContent":["export * from './useEasings'\nexport * from './useGlyphToSvg'\nexport * from './useScrollTo'\nexport * from './useViewportDimensions'\n","export type EasingKey =\n | 'linear'\n | 'easeInQuad'\n | 'easeOutQuad'\n | 'easeInOutQuad'\n | 'easeInCubic'\n | 'easeOutCubic'\n | 'easeInOutCubic'\n | 'easeInQuart'\n | 'easeOutQuart'\n | 'easeInOutQuart'\n | 'easeInQuint'\n | 'easeOutQuint'\n | 'easeInOutQuint'\n\nexport type EasingFunction = (t: number) => number\n\nexport function useEasings() {\n const easings = {\n linear: (t: number) => t,\n easeInQuad: (t: number) => t * t,\n easeOutQuad: (t: number) => t * (2 - t),\n easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n easeInCubic: (t: number) => t * t * t,\n easeOutCubic: (t: number) => --t * t * t + 1,\n easeInOutCubic: (t: number) =>\n t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,\n easeInQuart: (t: number) => t * t * t * t,\n easeOutQuart: (t: number) => 1 - --t * t * t * t,\n easeInOutQuart: (t: number) =>\n t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,\n easeInQuint: (t: number) => t * t * t * t * t,\n easeOutQuint: (t: number) => 1 + --t * t * t * t * t,\n easeInOutQuint: (t: number) =>\n t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,\n }\n\n return easings\n}\n","import { useClipboard } from '@vueuse/core'\nimport { unref } from 'vue'\n\nimport type { Ref } from 'vue'\nimport type { Font } from 'fontkit'\n\nexport type useGlyphToSvgOptions = {\n fontSize: Ref<number> | number\n fontWeight: Ref<number> | number\n fontFile: Ref<Font> | Font\n}\n\nexport function useGlyphToSvg({\n fontSize,\n fontWeight,\n fontFile,\n}: useGlyphToSvgOptions) {\n const { copy } = useClipboard()\n const mappedFontFile = unref(fontFile)\n const mappedFontSize = unref(fontSize)\n const mappedFontWeight = unref(fontWeight)\n\n const loadVariableFont = () => {\n // @ts-ignore\n const variableFont = mappedFontFile.getVariation({\n wght: mappedFontWeight,\n })\n return variableFont\n }\n\n const convertToSvg = (glyph: any) => {\n // Scale according to current font size\n const scale = mappedFontSize / mappedFontFile.unitsPerEm\n const path = glyph.path.scale(scale, scale).scale(-1, 1).rotate(Math.PI)\n\n // Center inside square bounding box\n const bbox = path.bbox\n const minX = bbox.minX\n const minY = bbox.minY\n const height = bbox.height\n const width = bbox.width\n const dims = unref(fontSize)\n\n const centeredY = (height - dims) / 2 + minY\n const centeredX = (width - dims) / 2 + minX\n\n const viewBox = `${centeredX} ${centeredY} ${dims} ${dims}`\n\n let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"${viewBox}\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">`\n svg += `<path d=\"${path.toSVG()}\" fill=\"currentColor\" />`\n svg += '</svg>'\n\n return svg\n }\n\n const renderSvg = async (codePoint: string) => {\n const font = await loadVariableFont()\n const glyph = font.glyphForCodePoint(codePoint)\n const svg = convertToSvg(glyph)\n return svg\n }\n\n const copySvg = async (codePoint: string) => {\n const svg = await renderSvg(codePoint)\n copy(svg)\n }\n\n return { copySvg, renderSvg }\n}\n","import { useEasings } from '../useEasings'\nimport { unrefElement } from '@vueuse/core'\nimport type { EasingFunction } from '../useEasings'\nimport type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'\n\nexport type ScrollToTarget =\n | string\n | Element\n | MaybeElement\n | MaybeComputedElementRef\n\nexport type ScrollToParent = ScrollToTarget | Window\n\nexport type ScrollToParams = {\n parent?: Element | Window\n left: number\n top: number\n duration?: { x?: number; y?: number }\n easing?: EasingFunction\n callback?: () => void\n}\n\nexport type getScrollDurationParams = {\n parent: Element | Window\n left: number\n top: number\n speed: number\n}\n\nexport type scrollToTargetParams = {\n target: ScrollToTarget\n parent?: ScrollToParent\n offset?: {\n x?: number\n y?: number\n }\n speed?: number\n easing?: EasingFunction\n}\n\nconst easings = useEasings()\n\nfunction min(a: number, b: number) {\n return a < b ? a : b\n}\n\nfunction unwrapParent(parent: ScrollToParent) {\n if (parent === window) {\n return parent\n } else if (typeof parent === 'string') {\n return document.querySelector(parent) || document.documentElement\n } else {\n return (\n unrefElement(parent as MaybeComputedElementRef<MaybeElement>) ||\n document.documentElement\n )\n }\n}\n\nfunction unwrapTarget(target: ScrollToTarget, parentEl: Element | Window) {\n if (typeof target === 'string') {\n const queryTarget = parentEl === window ? document : (parentEl as Element)\n return queryTarget.querySelector(target)\n } else {\n return unrefElement(target as MaybeComputedElementRef<MaybeElement>)\n }\n}\n\nexport function useScrollTo() {\n function getScrollPosition(element: Element | Window): {\n x: number\n y: number\n } {\n if (element === window) {\n return { x: window.pageXOffset, y: window.pageYOffset }\n } else if (element instanceof Element) {\n return { x: element.scrollLeft, y: element.scrollTop }\n } else {\n return { x: 0, y: 0 }\n }\n }\n\n function getDistance(element: Element): { top: number; left: number } {\n const rect = element.getBoundingClientRect()\n const scrollEl = document.scrollingElement || document.documentElement\n\n return {\n top: rect.top + scrollEl.scrollTop,\n left: rect.left + scrollEl.scrollLeft,\n }\n }\n\n function getScrollDuration({\n parent = document.documentElement || document.body,\n left = 0,\n top = 0,\n speed = 500,\n }: getScrollDurationParams) {\n const currentPos = getScrollPosition(parent)\n const distanceX = currentPos.x - left\n const distanceY = currentPos.y - top\n const durationX = Math.abs((distanceX / speed) * 100)\n const durationY = Math.abs((distanceY / speed) * 100)\n\n return { x: durationX, y: durationY }\n }\n\n function scrollTo({\n parent = document.documentElement || document.body,\n top,\n left,\n duration = {},\n easing = easings.easeOutQuad,\n callback,\n }: ScrollToParams) {\n const startTime = Date.now()\n const { x: fromX, y: fromY } = getScrollPosition(parent)\n\n if (fromX === top && fromY === left) {\n if (callback) callback()\n return\n }\n\n const mappedDuration = { x: 500, y: 500, ...duration }\n\n const scroll = () => {\n const currentTime = Date.now()\n\n const timeX = min(1, (currentTime - startTime) / mappedDuration.x)\n const timeY = min(1, (currentTime - startTime) / mappedDuration.y)\n const easedTimeX = easing(timeX)\n const easedTimeY = easing(timeY)\n\n // We use the min of the two times to make sure we scroll at the same speed\n const minTime = Math.min(easedTimeX, easedTimeY)\n\n parent.scroll({\n left: minTime * (left - fromX) + fromX,\n top: minTime * (top - fromY) + fromY,\n })\n\n if (easedTimeX < 1 || easedTimeY < 1) {\n requestAnimationFrame(scroll)\n } else if (callback) {\n callback()\n }\n }\n\n requestAnimationFrame(scroll)\n }\n\n function scrollToTarget({\n target,\n parent = document.documentElement || document.body,\n offset = {},\n speed = 500,\n easing = easings.easeOutQuad,\n }: scrollToTargetParams) {\n let parentEl = unwrapParent(parent)\n if (!parentEl) return\n let targetEl = unwrapTarget(target, parentEl)\n if (!targetEl) return\n\n const mappedOffset = { x: 0, y: 0, ...offset }\n const distance = getDistance(targetEl)\n const leftDistance = distance.left - mappedOffset.x\n const topDistance = distance.top - mappedOffset.y\n\n const scrollDuration = getScrollDuration({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n speed: speed,\n })\n\n scrollTo({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n duration: scrollDuration,\n easing: easing,\n })\n }\n\n return {\n getScrollPosition,\n getDistance,\n getScrollDuration,\n scrollTo,\n scrollToTarget,\n }\n}\n","import { onMounted, onUnmounted } from 'vue'\n\nexport type UseViewportDimensionsOptions = {\n width?: false | string\n height?: false | string\n initialWidth?: false | string\n initialHeight?: false | string\n}\n\nexport function useViewportDimensions(options?: UseViewportDimensionsOptions) {\n const mappedOptions = {\n width: '--vw',\n height: '--vh',\n initialWidth: '--initial-vw',\n initialHeight: '--initial-vh',\n ...options,\n }\n\n const setViewportWidth = (initial?: boolean) => {\n const vw = Number(window.innerWidth * 0.01).toFixed(2)\n\n if (mappedOptions.width) {\n document.documentElement.style.setProperty(mappedOptions.width, `${vw}px`)\n }\n\n if (initial && mappedOptions.initialWidth) {\n document.documentElement.style.setProperty(\n mappedOptions.initialWidth,\n `${vw}px`\n )\n }\n }\n\n const setViewportHeight = (initial?: boolean) => {\n const vh = Number(window.innerHeight * 0.01).toFixed(2)\n\n if (mappedOptions.height) {\n document.documentElement.style.setProperty(\n mappedOptions.height || '--vh',\n `${vh}px`\n )\n }\n\n if (initial && mappedOptions.initialHeight) {\n document.documentElement.style.setProperty(\n mappedOptions.initialHeight || '--initial-vh',\n `${vh}px`\n )\n }\n }\n\n const setDimensions = () => {\n setViewportWidth()\n setViewportHeight()\n }\n\n onMounted(() => {\n setViewportWidth(true)\n setViewportHeight(true)\n\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n\n onUnmounted(() => {\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n}\n"],"mappings":"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","names":["easings","import_core","import_vue"]}
|
|
@@ -1,2 +1,254 @@
|
|
|
1
|
-
|
|
1
|
+
// useEasings/index.ts
|
|
2
|
+
function useEasings() {
|
|
3
|
+
const easings2 = {
|
|
4
|
+
linear: (t) => t,
|
|
5
|
+
easeInQuad: (t) => t * t,
|
|
6
|
+
easeOutQuad: (t) => t * (2 - t),
|
|
7
|
+
easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
|
|
8
|
+
easeInCubic: (t) => t * t * t,
|
|
9
|
+
easeOutCubic: (t) => --t * t * t + 1,
|
|
10
|
+
easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
|
|
11
|
+
easeInQuart: (t) => t * t * t * t,
|
|
12
|
+
easeOutQuart: (t) => 1 - --t * t * t * t,
|
|
13
|
+
easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
|
|
14
|
+
easeInQuint: (t) => t * t * t * t * t,
|
|
15
|
+
easeOutQuint: (t) => 1 + --t * t * t * t * t,
|
|
16
|
+
easeInOutQuint: (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
|
|
17
|
+
};
|
|
18
|
+
return easings2;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// useGlyphToSvg/index.ts
|
|
22
|
+
import { useClipboard } from "@vueuse/core";
|
|
23
|
+
import { unref } from "vue";
|
|
24
|
+
function useGlyphToSvg({
|
|
25
|
+
fontSize,
|
|
26
|
+
fontWeight,
|
|
27
|
+
fontFile
|
|
28
|
+
}) {
|
|
29
|
+
const { copy } = useClipboard();
|
|
30
|
+
const mappedFontFile = unref(fontFile);
|
|
31
|
+
const mappedFontSize = unref(fontSize);
|
|
32
|
+
const mappedFontWeight = unref(fontWeight);
|
|
33
|
+
const loadVariableFont = () => {
|
|
34
|
+
const variableFont = mappedFontFile.getVariation({
|
|
35
|
+
wght: mappedFontWeight
|
|
36
|
+
});
|
|
37
|
+
return variableFont;
|
|
38
|
+
};
|
|
39
|
+
const convertToSvg = (glyph) => {
|
|
40
|
+
const scale = mappedFontSize / mappedFontFile.unitsPerEm;
|
|
41
|
+
const path = glyph.path.scale(scale, scale).scale(-1, 1).rotate(Math.PI);
|
|
42
|
+
const bbox = path.bbox;
|
|
43
|
+
const minX = bbox.minX;
|
|
44
|
+
const minY = bbox.minY;
|
|
45
|
+
const height = bbox.height;
|
|
46
|
+
const width = bbox.width;
|
|
47
|
+
const dims = unref(fontSize);
|
|
48
|
+
const centeredY = (height - dims) / 2 + minY;
|
|
49
|
+
const centeredX = (width - dims) / 2 + minX;
|
|
50
|
+
const viewBox = `${centeredX} ${centeredY} ${dims} ${dims}`;
|
|
51
|
+
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" xmlns:xlink="http://www.w3.org/1999/xlink">`;
|
|
52
|
+
svg += `<path d="${path.toSVG()}" fill="currentColor" />`;
|
|
53
|
+
svg += "</svg>";
|
|
54
|
+
return svg;
|
|
55
|
+
};
|
|
56
|
+
const renderSvg = async (codePoint) => {
|
|
57
|
+
const font = await loadVariableFont();
|
|
58
|
+
const glyph = font.glyphForCodePoint(codePoint);
|
|
59
|
+
const svg = convertToSvg(glyph);
|
|
60
|
+
return svg;
|
|
61
|
+
};
|
|
62
|
+
const copySvg = async (codePoint) => {
|
|
63
|
+
const svg = await renderSvg(codePoint);
|
|
64
|
+
copy(svg);
|
|
65
|
+
};
|
|
66
|
+
return { copySvg, renderSvg };
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// useScrollTo/index.ts
|
|
70
|
+
import { unrefElement } from "@vueuse/core";
|
|
71
|
+
var easings = useEasings();
|
|
72
|
+
function min(a, b) {
|
|
73
|
+
return a < b ? a : b;
|
|
74
|
+
}
|
|
75
|
+
function unwrapParent(parent) {
|
|
76
|
+
if (parent === window) {
|
|
77
|
+
return parent;
|
|
78
|
+
} else if (typeof parent === "string") {
|
|
79
|
+
return document.querySelector(parent) || document.documentElement;
|
|
80
|
+
} else {
|
|
81
|
+
return unrefElement(parent) || document.documentElement;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
function unwrapTarget(target, parentEl) {
|
|
85
|
+
if (typeof target === "string") {
|
|
86
|
+
const queryTarget = parentEl === window ? document : parentEl;
|
|
87
|
+
return queryTarget.querySelector(target);
|
|
88
|
+
} else {
|
|
89
|
+
return unrefElement(target);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
function useScrollTo() {
|
|
93
|
+
function getScrollPosition(element) {
|
|
94
|
+
if (element === window) {
|
|
95
|
+
return { x: window.pageXOffset, y: window.pageYOffset };
|
|
96
|
+
} else if (element instanceof Element) {
|
|
97
|
+
return { x: element.scrollLeft, y: element.scrollTop };
|
|
98
|
+
} else {
|
|
99
|
+
return { x: 0, y: 0 };
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
function getDistance(element) {
|
|
103
|
+
const rect = element.getBoundingClientRect();
|
|
104
|
+
const scrollEl = document.scrollingElement || document.documentElement;
|
|
105
|
+
return {
|
|
106
|
+
top: rect.top + scrollEl.scrollTop,
|
|
107
|
+
left: rect.left + scrollEl.scrollLeft
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
function getScrollDuration({
|
|
111
|
+
parent = document.documentElement || document.body,
|
|
112
|
+
left = 0,
|
|
113
|
+
top = 0,
|
|
114
|
+
speed = 500
|
|
115
|
+
}) {
|
|
116
|
+
const currentPos = getScrollPosition(parent);
|
|
117
|
+
const distanceX = currentPos.x - left;
|
|
118
|
+
const distanceY = currentPos.y - top;
|
|
119
|
+
const durationX = Math.abs(distanceX / speed * 100);
|
|
120
|
+
const durationY = Math.abs(distanceY / speed * 100);
|
|
121
|
+
return { x: durationX, y: durationY };
|
|
122
|
+
}
|
|
123
|
+
function scrollTo({
|
|
124
|
+
parent = document.documentElement || document.body,
|
|
125
|
+
top,
|
|
126
|
+
left,
|
|
127
|
+
duration = {},
|
|
128
|
+
easing = easings.easeOutQuad,
|
|
129
|
+
callback
|
|
130
|
+
}) {
|
|
131
|
+
const startTime = Date.now();
|
|
132
|
+
const { x: fromX, y: fromY } = getScrollPosition(parent);
|
|
133
|
+
if (fromX === top && fromY === left) {
|
|
134
|
+
if (callback)
|
|
135
|
+
callback();
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
const mappedDuration = { x: 500, y: 500, ...duration };
|
|
139
|
+
const scroll = () => {
|
|
140
|
+
const currentTime = Date.now();
|
|
141
|
+
const timeX = min(1, (currentTime - startTime) / mappedDuration.x);
|
|
142
|
+
const timeY = min(1, (currentTime - startTime) / mappedDuration.y);
|
|
143
|
+
const easedTimeX = easing(timeX);
|
|
144
|
+
const easedTimeY = easing(timeY);
|
|
145
|
+
const minTime = Math.min(easedTimeX, easedTimeY);
|
|
146
|
+
parent.scroll({
|
|
147
|
+
left: minTime * (left - fromX) + fromX,
|
|
148
|
+
top: minTime * (top - fromY) + fromY
|
|
149
|
+
});
|
|
150
|
+
if (easedTimeX < 1 || easedTimeY < 1) {
|
|
151
|
+
requestAnimationFrame(scroll);
|
|
152
|
+
} else if (callback) {
|
|
153
|
+
callback();
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
requestAnimationFrame(scroll);
|
|
157
|
+
}
|
|
158
|
+
function scrollToTarget({
|
|
159
|
+
target,
|
|
160
|
+
parent = document.documentElement || document.body,
|
|
161
|
+
offset = {},
|
|
162
|
+
speed = 500,
|
|
163
|
+
easing = easings.easeOutQuad
|
|
164
|
+
}) {
|
|
165
|
+
let parentEl = unwrapParent(parent);
|
|
166
|
+
if (!parentEl)
|
|
167
|
+
return;
|
|
168
|
+
let targetEl = unwrapTarget(target, parentEl);
|
|
169
|
+
if (!targetEl)
|
|
170
|
+
return;
|
|
171
|
+
const mappedOffset = { x: 0, y: 0, ...offset };
|
|
172
|
+
const distance = getDistance(targetEl);
|
|
173
|
+
const leftDistance = distance.left - mappedOffset.x;
|
|
174
|
+
const topDistance = distance.top - mappedOffset.y;
|
|
175
|
+
const scrollDuration = getScrollDuration({
|
|
176
|
+
parent: parentEl,
|
|
177
|
+
left: leftDistance,
|
|
178
|
+
top: topDistance,
|
|
179
|
+
speed
|
|
180
|
+
});
|
|
181
|
+
scrollTo({
|
|
182
|
+
parent: parentEl,
|
|
183
|
+
left: leftDistance,
|
|
184
|
+
top: topDistance,
|
|
185
|
+
duration: scrollDuration,
|
|
186
|
+
easing
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
return {
|
|
190
|
+
getScrollPosition,
|
|
191
|
+
getDistance,
|
|
192
|
+
getScrollDuration,
|
|
193
|
+
scrollTo,
|
|
194
|
+
scrollToTarget
|
|
195
|
+
};
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// useViewportDimensions/index.ts
|
|
199
|
+
import { onMounted, onUnmounted } from "vue";
|
|
200
|
+
function useViewportDimensions(options) {
|
|
201
|
+
const mappedOptions = {
|
|
202
|
+
width: "--vw",
|
|
203
|
+
height: "--vh",
|
|
204
|
+
initialWidth: "--initial-vw",
|
|
205
|
+
initialHeight: "--initial-vh",
|
|
206
|
+
...options
|
|
207
|
+
};
|
|
208
|
+
const setViewportWidth = (initial) => {
|
|
209
|
+
const vw = Number(window.innerWidth * 0.01).toFixed(2);
|
|
210
|
+
if (mappedOptions.width) {
|
|
211
|
+
document.documentElement.style.setProperty(mappedOptions.width, `${vw}px`);
|
|
212
|
+
}
|
|
213
|
+
if (initial && mappedOptions.initialWidth) {
|
|
214
|
+
document.documentElement.style.setProperty(
|
|
215
|
+
mappedOptions.initialWidth,
|
|
216
|
+
`${vw}px`
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
};
|
|
220
|
+
const setViewportHeight = (initial) => {
|
|
221
|
+
const vh = Number(window.innerHeight * 0.01).toFixed(2);
|
|
222
|
+
if (mappedOptions.height) {
|
|
223
|
+
document.documentElement.style.setProperty(
|
|
224
|
+
mappedOptions.height || "--vh",
|
|
225
|
+
`${vh}px`
|
|
226
|
+
);
|
|
227
|
+
}
|
|
228
|
+
if (initial && mappedOptions.initialHeight) {
|
|
229
|
+
document.documentElement.style.setProperty(
|
|
230
|
+
mappedOptions.initialHeight || "--initial-vh",
|
|
231
|
+
`${vh}px`
|
|
232
|
+
);
|
|
233
|
+
}
|
|
234
|
+
};
|
|
235
|
+
const setDimensions = () => {
|
|
236
|
+
setViewportWidth();
|
|
237
|
+
setViewportHeight();
|
|
238
|
+
};
|
|
239
|
+
onMounted(() => {
|
|
240
|
+
setViewportWidth(true);
|
|
241
|
+
setViewportHeight(true);
|
|
242
|
+
window.addEventListener("resize", setDimensions, { passive: true });
|
|
243
|
+
});
|
|
244
|
+
onUnmounted(() => {
|
|
245
|
+
window.addEventListener("resize", setDimensions, { passive: true });
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
export {
|
|
249
|
+
useEasings,
|
|
250
|
+
useGlyphToSvg,
|
|
251
|
+
useScrollTo,
|
|
252
|
+
useViewportDimensions
|
|
253
|
+
};
|
|
2
254
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../packages/composables/useEasings/index.ts","../../packages/composables/useGlyphToSvg/index.ts","../../packages/composables/useScrollTo/index.ts","../../packages/composables/useViewportDimensions/index.ts"],"sourcesContent":["export type EasingKey =\n | 'linear'\n | 'easeInQuad'\n | 'easeOutQuad'\n | 'easeInOutQuad'\n | 'easeInCubic'\n | 'easeOutCubic'\n | 'easeInOutCubic'\n | 'easeInQuart'\n | 'easeOutQuart'\n | 'easeInOutQuart'\n | 'easeInQuint'\n | 'easeOutQuint'\n | 'easeInOutQuint'\n\nexport type EasingFunction = (t: number) => number\n\nexport function useEasings() {\n const easings = {\n linear: (t: number) => t,\n easeInQuad: (t: number) => t * t,\n easeOutQuad: (t: number) => t * (2 - t),\n easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n easeInCubic: (t: number) => t * t * t,\n easeOutCubic: (t: number) => --t * t * t + 1,\n easeInOutCubic: (t: number) =>\n t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,\n easeInQuart: (t: number) => t * t * t * t,\n easeOutQuart: (t: number) => 1 - --t * t * t * t,\n easeInOutQuart: (t: number) =>\n t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,\n easeInQuint: (t: number) => t * t * t * t * t,\n easeOutQuint: (t: number) => 1 + --t * t * t * t * t,\n easeInOutQuint: (t: number) =>\n t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,\n }\n\n return easings\n}\n","import { useClipboard } from '@vueuse/core'\nimport { unref } from 'vue'\n\nimport type { Ref } from 'vue'\nimport type { Font } from 'fontkit'\n\nexport type useGlyphToSvgOptions = {\n fontSize: Ref<number> | number\n fontWeight: Ref<number> | number\n fontFile: Ref<Font> | Font\n}\n\nexport function useGlyphToSvg({\n fontSize,\n fontWeight,\n fontFile,\n}: useGlyphToSvgOptions) {\n const { copy } = useClipboard()\n const mappedFontFile = unref(fontFile)\n const mappedFontSize = unref(fontSize)\n const mappedFontWeight = unref(fontWeight)\n\n const loadVariableFont = () => {\n // @ts-ignore\n const variableFont = mappedFontFile.getVariation({\n wght: mappedFontWeight,\n })\n return variableFont\n }\n\n const convertToSvg = (glyph: any) => {\n // Scale according to current font size\n const scale = mappedFontSize / mappedFontFile.unitsPerEm\n const path = glyph.path.scale(scale, scale).scale(-1, 1).rotate(Math.PI)\n\n // Center inside square bounding box\n const bbox = path.bbox\n const minX = bbox.minX\n const minY = bbox.minY\n const height = bbox.height\n const width = bbox.width\n const dims = unref(fontSize)\n\n const centeredY = (height - dims) / 2 + minY\n const centeredX = (width - dims) / 2 + minX\n\n const viewBox = `${centeredX} ${centeredY} ${dims} ${dims}`\n\n let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"${viewBox}\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">`\n svg += `<path d=\"${path.toSVG()}\" fill=\"currentColor\" />`\n svg += '</svg>'\n\n return svg\n }\n\n const renderSvg = async (codePoint: string) => {\n const font = await loadVariableFont()\n const glyph = font.glyphForCodePoint(codePoint)\n const svg = convertToSvg(glyph)\n return svg\n }\n\n const copySvg = async (codePoint: string) => {\n const svg = await renderSvg(codePoint)\n copy(svg)\n }\n\n return { copySvg, renderSvg }\n}\n","import { useEasings } from '../useEasings'\nimport { unrefElement } from '@vueuse/core'\nimport type { EasingFunction } from '../useEasings'\nimport type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'\n\nexport type ScrollToTarget =\n | string\n | Element\n | MaybeElement\n | MaybeComputedElementRef\n\nexport type ScrollToParent = ScrollToTarget | Window\n\nexport type ScrollToParams = {\n parent?: Element | Window\n left: number\n top: number\n duration?: { x?: number; y?: number }\n easing?: EasingFunction\n callback?: () => void\n}\n\nexport type getScrollDurationParams = {\n parent: Element | Window\n left: number\n top: number\n speed: number\n}\n\nexport type scrollToTargetParams = {\n target: ScrollToTarget\n parent?: ScrollToParent\n offset?: {\n x?: number\n y?: number\n }\n speed?: number\n easing?: EasingFunction\n}\n\nconst easings = useEasings()\n\nfunction min(a: number, b: number) {\n return a < b ? a : b\n}\n\nfunction unwrapParent(parent: ScrollToParent) {\n if (parent === window) {\n return parent\n } else if (typeof parent === 'string') {\n return document.querySelector(parent) || document.documentElement\n } else {\n return (\n unrefElement(parent as MaybeComputedElementRef<MaybeElement>) ||\n document.documentElement\n )\n }\n}\n\nfunction unwrapTarget(target: ScrollToTarget, parentEl: Element | Window) {\n if (typeof target === 'string') {\n const queryTarget = parentEl === window ? document : (parentEl as Element)\n return queryTarget.querySelector(target)\n } else {\n return unrefElement(target as MaybeComputedElementRef<MaybeElement>)\n }\n}\n\nexport function useScrollTo() {\n function getScrollPosition(element: Element | Window): {\n x: number\n y: number\n } {\n if (element === window) {\n return { x: window.pageXOffset, y: window.pageYOffset }\n } else if (element instanceof Element) {\n return { x: element.scrollLeft, y: element.scrollTop }\n } else {\n return { x: 0, y: 0 }\n }\n }\n\n function getDistance(element: Element): { top: number; left: number } {\n const rect = element.getBoundingClientRect()\n const scrollEl = document.scrollingElement || document.documentElement\n\n return {\n top: rect.top + scrollEl.scrollTop,\n left: rect.left + scrollEl.scrollLeft,\n }\n }\n\n function getScrollDuration({\n parent = document.documentElement || document.body,\n left = 0,\n top = 0,\n speed = 500,\n }: getScrollDurationParams) {\n const currentPos = getScrollPosition(parent)\n const distanceX = currentPos.x - left\n const distanceY = currentPos.y - top\n const durationX = Math.abs((distanceX / speed) * 100)\n const durationY = Math.abs((distanceY / speed) * 100)\n\n return { x: durationX, y: durationY }\n }\n\n function scrollTo({\n parent = document.documentElement || document.body,\n top,\n left,\n duration = {},\n easing = easings.easeOutQuad,\n callback,\n }: ScrollToParams) {\n const startTime = Date.now()\n const { x: fromX, y: fromY } = getScrollPosition(parent)\n\n if (fromX === top && fromY === left) {\n if (callback) callback()\n return\n }\n\n const mappedDuration = { x: 500, y: 500, ...duration }\n\n const scroll = () => {\n const currentTime = Date.now()\n\n const timeX = min(1, (currentTime - startTime) / mappedDuration.x)\n const timeY = min(1, (currentTime - startTime) / mappedDuration.y)\n const easedTimeX = easing(timeX)\n const easedTimeY = easing(timeY)\n\n // We use the min of the two times to make sure we scroll at the same speed\n const minTime = Math.min(easedTimeX, easedTimeY)\n\n parent.scroll({\n left: minTime * (left - fromX) + fromX,\n top: minTime * (top - fromY) + fromY,\n })\n\n if (easedTimeX < 1 || easedTimeY < 1) {\n requestAnimationFrame(scroll)\n } else if (callback) {\n callback()\n }\n }\n\n requestAnimationFrame(scroll)\n }\n\n function scrollToTarget({\n target,\n parent = document.documentElement || document.body,\n offset = {},\n speed = 500,\n easing = easings.easeOutQuad,\n }: scrollToTargetParams) {\n let parentEl = unwrapParent(parent)\n if (!parentEl) return\n let targetEl = unwrapTarget(target, parentEl)\n if (!targetEl) return\n\n const mappedOffset = { x: 0, y: 0, ...offset }\n const distance = getDistance(targetEl)\n const leftDistance = distance.left - mappedOffset.x\n const topDistance = distance.top - mappedOffset.y\n\n const scrollDuration = getScrollDuration({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n speed: speed,\n })\n\n scrollTo({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n duration: scrollDuration,\n easing: easing,\n })\n }\n\n return {\n getScrollPosition,\n getDistance,\n getScrollDuration,\n scrollTo,\n scrollToTarget,\n }\n}\n","import { onMounted, onUnmounted } from 'vue'\n\nexport type UseViewportDimensionsOptions = {\n width?: false | string\n height?: false | string\n initialWidth?: false | string\n initialHeight?: false | string\n}\n\nexport function useViewportDimensions(options?: UseViewportDimensionsOptions) {\n const mappedOptions = {\n width: '--vw',\n height: '--vh',\n initialWidth: '--initial-vw',\n initialHeight: '--initial-vh',\n ...options,\n }\n\n const setViewportWidth = (initial?: boolean) => {\n const vw = Number(window.innerWidth * 0.01).toFixed(2)\n\n if (mappedOptions.width) {\n document.documentElement.style.setProperty(mappedOptions.width, `${vw}px`)\n }\n\n if (initial && mappedOptions.initialWidth) {\n document.documentElement.style.setProperty(\n mappedOptions.initialWidth,\n `${vw}px`\n )\n }\n }\n\n const setViewportHeight = (initial?: boolean) => {\n const vh = Number(window.innerHeight * 0.01).toFixed(2)\n\n if (mappedOptions.height) {\n document.documentElement.style.setProperty(\n mappedOptions.height || '--vh',\n `${vh}px`\n )\n }\n\n if (initial && mappedOptions.initialHeight) {\n document.documentElement.style.setProperty(\n mappedOptions.initialHeight || '--initial-vh',\n `${vh}px`\n )\n }\n }\n\n const setDimensions = () => {\n setViewportWidth()\n setViewportHeight()\n }\n\n onMounted(() => {\n setViewportWidth(true)\n setViewportHeight(true)\n\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n\n onUnmounted(() => {\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n}\n"],"mappings":"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","names":["useEasings","t","useClipboard","unref","useGlyphToSvg","fontSize","fontWeight","fontFile","copy","mappedFontFile","mappedFontSize","mappedFontWeight","loadVariableFont","convertToSvg","glyph","scale","path","bbox","minX","minY","height","width","dims","centeredY","svg","renderSvg","codePoint","unrefElement","easings","useEasings","min","a","b","unwrapParent","parent","unwrapTarget","target","parentEl","useScrollTo","getScrollPosition","element","getDistance","rect","scrollEl","getScrollDuration","left","top","speed","currentPos","distanceX","distanceY","durationX","durationY","scrollTo","duration","easing","callback","startTime","fromX","fromY","mappedDuration","scroll","currentTime","timeX","timeY","easedTimeX","easedTimeY","minTime","scrollToTarget","offset","targetEl","mappedOffset","distance","leftDistance","topDistance","scrollDuration","onMounted","onUnmounted","useViewportDimensions","options","mappedOptions","setViewportWidth","initial","vw","setViewportHeight","vh","setDimensions"]}
|
|
1
|
+
{"version":3,"sources":["../../packages/composables/useEasings/index.ts","../../packages/composables/useGlyphToSvg/index.ts","../../packages/composables/useScrollTo/index.ts","../../packages/composables/useViewportDimensions/index.ts"],"sourcesContent":["export type EasingKey =\n | 'linear'\n | 'easeInQuad'\n | 'easeOutQuad'\n | 'easeInOutQuad'\n | 'easeInCubic'\n | 'easeOutCubic'\n | 'easeInOutCubic'\n | 'easeInQuart'\n | 'easeOutQuart'\n | 'easeInOutQuart'\n | 'easeInQuint'\n | 'easeOutQuint'\n | 'easeInOutQuint'\n\nexport type EasingFunction = (t: number) => number\n\nexport function useEasings() {\n const easings = {\n linear: (t: number) => t,\n easeInQuad: (t: number) => t * t,\n easeOutQuad: (t: number) => t * (2 - t),\n easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n easeInCubic: (t: number) => t * t * t,\n easeOutCubic: (t: number) => --t * t * t + 1,\n easeInOutCubic: (t: number) =>\n t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,\n easeInQuart: (t: number) => t * t * t * t,\n easeOutQuart: (t: number) => 1 - --t * t * t * t,\n easeInOutQuart: (t: number) =>\n t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,\n easeInQuint: (t: number) => t * t * t * t * t,\n easeOutQuint: (t: number) => 1 + --t * t * t * t * t,\n easeInOutQuint: (t: number) =>\n t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,\n }\n\n return easings\n}\n","import { useClipboard } from '@vueuse/core'\nimport { unref } from 'vue'\n\nimport type { Ref } from 'vue'\nimport type { Font } from 'fontkit'\n\nexport type useGlyphToSvgOptions = {\n fontSize: Ref<number> | number\n fontWeight: Ref<number> | number\n fontFile: Ref<Font> | Font\n}\n\nexport function useGlyphToSvg({\n fontSize,\n fontWeight,\n fontFile,\n}: useGlyphToSvgOptions) {\n const { copy } = useClipboard()\n const mappedFontFile = unref(fontFile)\n const mappedFontSize = unref(fontSize)\n const mappedFontWeight = unref(fontWeight)\n\n const loadVariableFont = () => {\n // @ts-ignore\n const variableFont = mappedFontFile.getVariation({\n wght: mappedFontWeight,\n })\n return variableFont\n }\n\n const convertToSvg = (glyph: any) => {\n // Scale according to current font size\n const scale = mappedFontSize / mappedFontFile.unitsPerEm\n const path = glyph.path.scale(scale, scale).scale(-1, 1).rotate(Math.PI)\n\n // Center inside square bounding box\n const bbox = path.bbox\n const minX = bbox.minX\n const minY = bbox.minY\n const height = bbox.height\n const width = bbox.width\n const dims = unref(fontSize)\n\n const centeredY = (height - dims) / 2 + minY\n const centeredX = (width - dims) / 2 + minX\n\n const viewBox = `${centeredX} ${centeredY} ${dims} ${dims}`\n\n let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"${viewBox}\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">`\n svg += `<path d=\"${path.toSVG()}\" fill=\"currentColor\" />`\n svg += '</svg>'\n\n return svg\n }\n\n const renderSvg = async (codePoint: string) => {\n const font = await loadVariableFont()\n const glyph = font.glyphForCodePoint(codePoint)\n const svg = convertToSvg(glyph)\n return svg\n }\n\n const copySvg = async (codePoint: string) => {\n const svg = await renderSvg(codePoint)\n copy(svg)\n }\n\n return { copySvg, renderSvg }\n}\n","import { useEasings } from '../useEasings'\nimport { unrefElement } from '@vueuse/core'\nimport type { EasingFunction } from '../useEasings'\nimport type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'\n\nexport type ScrollToTarget =\n | string\n | Element\n | MaybeElement\n | MaybeComputedElementRef\n\nexport type ScrollToParent = ScrollToTarget | Window\n\nexport type ScrollToParams = {\n parent?: Element | Window\n left: number\n top: number\n duration?: { x?: number; y?: number }\n easing?: EasingFunction\n callback?: () => void\n}\n\nexport type getScrollDurationParams = {\n parent: Element | Window\n left: number\n top: number\n speed: number\n}\n\nexport type scrollToTargetParams = {\n target: ScrollToTarget\n parent?: ScrollToParent\n offset?: {\n x?: number\n y?: number\n }\n speed?: number\n easing?: EasingFunction\n}\n\nconst easings = useEasings()\n\nfunction min(a: number, b: number) {\n return a < b ? a : b\n}\n\nfunction unwrapParent(parent: ScrollToParent) {\n if (parent === window) {\n return parent\n } else if (typeof parent === 'string') {\n return document.querySelector(parent) || document.documentElement\n } else {\n return (\n unrefElement(parent as MaybeComputedElementRef<MaybeElement>) ||\n document.documentElement\n )\n }\n}\n\nfunction unwrapTarget(target: ScrollToTarget, parentEl: Element | Window) {\n if (typeof target === 'string') {\n const queryTarget = parentEl === window ? document : (parentEl as Element)\n return queryTarget.querySelector(target)\n } else {\n return unrefElement(target as MaybeComputedElementRef<MaybeElement>)\n }\n}\n\nexport function useScrollTo() {\n function getScrollPosition(element: Element | Window): {\n x: number\n y: number\n } {\n if (element === window) {\n return { x: window.pageXOffset, y: window.pageYOffset }\n } else if (element instanceof Element) {\n return { x: element.scrollLeft, y: element.scrollTop }\n } else {\n return { x: 0, y: 0 }\n }\n }\n\n function getDistance(element: Element): { top: number; left: number } {\n const rect = element.getBoundingClientRect()\n const scrollEl = document.scrollingElement || document.documentElement\n\n return {\n top: rect.top + scrollEl.scrollTop,\n left: rect.left + scrollEl.scrollLeft,\n }\n }\n\n function getScrollDuration({\n parent = document.documentElement || document.body,\n left = 0,\n top = 0,\n speed = 500,\n }: getScrollDurationParams) {\n const currentPos = getScrollPosition(parent)\n const distanceX = currentPos.x - left\n const distanceY = currentPos.y - top\n const durationX = Math.abs((distanceX / speed) * 100)\n const durationY = Math.abs((distanceY / speed) * 100)\n\n return { x: durationX, y: durationY }\n }\n\n function scrollTo({\n parent = document.documentElement || document.body,\n top,\n left,\n duration = {},\n easing = easings.easeOutQuad,\n callback,\n }: ScrollToParams) {\n const startTime = Date.now()\n const { x: fromX, y: fromY } = getScrollPosition(parent)\n\n if (fromX === top && fromY === left) {\n if (callback) callback()\n return\n }\n\n const mappedDuration = { x: 500, y: 500, ...duration }\n\n const scroll = () => {\n const currentTime = Date.now()\n\n const timeX = min(1, (currentTime - startTime) / mappedDuration.x)\n const timeY = min(1, (currentTime - startTime) / mappedDuration.y)\n const easedTimeX = easing(timeX)\n const easedTimeY = easing(timeY)\n\n // We use the min of the two times to make sure we scroll at the same speed\n const minTime = Math.min(easedTimeX, easedTimeY)\n\n parent.scroll({\n left: minTime * (left - fromX) + fromX,\n top: minTime * (top - fromY) + fromY,\n })\n\n if (easedTimeX < 1 || easedTimeY < 1) {\n requestAnimationFrame(scroll)\n } else if (callback) {\n callback()\n }\n }\n\n requestAnimationFrame(scroll)\n }\n\n function scrollToTarget({\n target,\n parent = document.documentElement || document.body,\n offset = {},\n speed = 500,\n easing = easings.easeOutQuad,\n }: scrollToTargetParams) {\n let parentEl = unwrapParent(parent)\n if (!parentEl) return\n let targetEl = unwrapTarget(target, parentEl)\n if (!targetEl) return\n\n const mappedOffset = { x: 0, y: 0, ...offset }\n const distance = getDistance(targetEl)\n const leftDistance = distance.left - mappedOffset.x\n const topDistance = distance.top - mappedOffset.y\n\n const scrollDuration = getScrollDuration({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n speed: speed,\n })\n\n scrollTo({\n parent: parentEl,\n left: leftDistance,\n top: topDistance,\n duration: scrollDuration,\n easing: easing,\n })\n }\n\n return {\n getScrollPosition,\n getDistance,\n getScrollDuration,\n scrollTo,\n scrollToTarget,\n }\n}\n","import { onMounted, onUnmounted } from 'vue'\n\nexport type UseViewportDimensionsOptions = {\n width?: false | string\n height?: false | string\n initialWidth?: false | string\n initialHeight?: false | string\n}\n\nexport function useViewportDimensions(options?: UseViewportDimensionsOptions) {\n const mappedOptions = {\n width: '--vw',\n height: '--vh',\n initialWidth: '--initial-vw',\n initialHeight: '--initial-vh',\n ...options,\n }\n\n const setViewportWidth = (initial?: boolean) => {\n const vw = Number(window.innerWidth * 0.01).toFixed(2)\n\n if (mappedOptions.width) {\n document.documentElement.style.setProperty(mappedOptions.width, `${vw}px`)\n }\n\n if (initial && mappedOptions.initialWidth) {\n document.documentElement.style.setProperty(\n mappedOptions.initialWidth,\n `${vw}px`\n )\n }\n }\n\n const setViewportHeight = (initial?: boolean) => {\n const vh = Number(window.innerHeight * 0.01).toFixed(2)\n\n if (mappedOptions.height) {\n document.documentElement.style.setProperty(\n mappedOptions.height || '--vh',\n `${vh}px`\n )\n }\n\n if (initial && mappedOptions.initialHeight) {\n document.documentElement.style.setProperty(\n mappedOptions.initialHeight || '--initial-vh',\n `${vh}px`\n )\n }\n }\n\n const setDimensions = () => {\n setViewportWidth()\n setViewportHeight()\n }\n\n onMounted(() => {\n setViewportWidth(true)\n setViewportHeight(true)\n\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n\n onUnmounted(() => {\n window.addEventListener('resize', setDimensions, { passive: true })\n })\n}\n"],"mappings":"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","names":["easings"]}
|
package/dist/nuxt/module.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import * as _nuxt_schema from '@nuxt/schema';
|
|
2
2
|
|
|
3
3
|
interface ModuleOptions {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
plugins?: string[];
|
|
7
|
-
composables?: string[];
|
|
4
|
+
plugins?: string[] | boolean;
|
|
5
|
+
composables?: string[] | boolean;
|
|
8
6
|
}
|
|
9
7
|
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
|
10
8
|
|
package/dist/nuxt/module.json
CHANGED
package/dist/nuxt/module.mjs
CHANGED
|
@@ -18,7 +18,7 @@ const functions = [
|
|
|
18
18
|
{
|
|
19
19
|
name: "MagicModal",
|
|
20
20
|
"package": "plugins",
|
|
21
|
-
lastUpdated:
|
|
21
|
+
lastUpdated: 1691152994000,
|
|
22
22
|
docs: "https://maas.egineering/vue-equipment/plugins/MagicModal/",
|
|
23
23
|
description: "modal"
|
|
24
24
|
},
|
|
@@ -32,7 +32,7 @@ const functions = [
|
|
|
32
32
|
{
|
|
33
33
|
name: "MagicScroll",
|
|
34
34
|
"package": "plugins",
|
|
35
|
-
lastUpdated:
|
|
35
|
+
lastUpdated: 1691152994000,
|
|
36
36
|
docs: "https://maas.egineering/vue-equipment/plugins/MagicScroll/",
|
|
37
37
|
description: "scroll"
|
|
38
38
|
},
|
|
@@ -76,10 +76,8 @@ const module = defineNuxtModule({
|
|
|
76
76
|
configKey: "vueEquipment"
|
|
77
77
|
},
|
|
78
78
|
defaults: {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
plugins: [],
|
|
82
|
-
composables: []
|
|
79
|
+
plugins: true,
|
|
80
|
+
composables: true
|
|
83
81
|
},
|
|
84
82
|
async setup(options, nuxt) {
|
|
85
83
|
let plugins;
|
|
@@ -91,7 +89,7 @@ const module = defineNuxtModule({
|
|
|
91
89
|
packages.forEach((pkg) => {
|
|
92
90
|
nuxt.options.alias[`@maas/vue-equipment/${pkg}`] = nuxt.options.alias[`@maas/vue-equipment/${pkg}`] || resolver.resolve(`../${pkg}`);
|
|
93
91
|
});
|
|
94
|
-
if (options.
|
|
92
|
+
if (options.plugins === true) {
|
|
95
93
|
plugins = metadata.functions.filter((fn) => fn.package === "plugins").map((fn) => fn.name);
|
|
96
94
|
} else {
|
|
97
95
|
plugins = options.plugins || [];
|
|
@@ -100,15 +98,15 @@ const module = defineNuxtModule({
|
|
|
100
98
|
const nuxtPlugin = await resolver.resolvePath(
|
|
101
99
|
`@maas/vue-equipment/plugins/${plugin}/nuxt`
|
|
102
100
|
);
|
|
103
|
-
const
|
|
101
|
+
const pluginComposablesDir = await resolver.resolvePath(
|
|
104
102
|
`@maas/vue-equipment/plugins/${plugin}/src/composables`
|
|
105
103
|
);
|
|
106
104
|
addPlugin(nuxtPlugin);
|
|
107
|
-
addImportsDir(
|
|
105
|
+
addImportsDir(pluginComposablesDir, {
|
|
108
106
|
prepend: true
|
|
109
107
|
});
|
|
110
108
|
}
|
|
111
|
-
if (options.
|
|
109
|
+
if (options.composables === true) {
|
|
112
110
|
composables = metadata.functions.filter((fn) => fn.package === "composables").map((fn) => fn.name);
|
|
113
111
|
} else {
|
|
114
112
|
composables = options.composables || [];
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useModalApi } from './src/composables/useModalApi.js';
|
|
2
|
+
import { useModalEmitter } from './src/composables/useModalEmitter.js';
|
|
2
3
|
import type { Plugin } from 'vue';
|
|
3
4
|
declare const MagicModal: Plugin;
|
|
4
|
-
export { MagicModal, useModalApi };
|
|
5
|
+
export { MagicModal, useModalEmitter, useModalApi };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import MagicModalComponent from "./src/components/MagicModal.vue";
|
|
2
2
|
import { useModalApi } from "./src/composables/useModalApi.mjs";
|
|
3
|
+
import { useModalEmitter } from "./src/composables/useModalEmitter.mjs";
|
|
3
4
|
const MagicModal = {
|
|
4
5
|
install: (app) => {
|
|
5
6
|
app.component("MagicModal", MagicModalComponent);
|
|
6
7
|
}
|
|
7
8
|
};
|
|
8
|
-
export { MagicModal, useModalApi };
|
|
9
|
+
export { MagicModal, useModalEmitter, useModalApi };
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
</transition>
|
|
24
24
|
<transition
|
|
25
25
|
:name="mappedOptions.transitions?.content"
|
|
26
|
+
@before-leave="onBeforeLeave"
|
|
26
27
|
@after-leave="onAfterLeave"
|
|
28
|
+
@before-enter="onBeforeEnter"
|
|
27
29
|
@after-enter="onAfterEnter"
|
|
28
30
|
>
|
|
29
31
|
<div
|
|
@@ -49,7 +51,9 @@
|
|
|
49
51
|
import { ref, watch, nextTick } from 'vue'
|
|
50
52
|
import { useModalApi } from './../composables/useModalApi'
|
|
51
53
|
import { onKeyStroke } from '@vueuse/core'
|
|
54
|
+
import { toValue } from '@vueuse/shared'
|
|
52
55
|
import { defaultOptions } from './../utils/defaultOptions'
|
|
56
|
+
import { useModalEmitter } from './../composables/useModalEmitter'
|
|
53
57
|
|
|
54
58
|
import type { MaybeRef } from '@vueuse/core'
|
|
55
59
|
import type { DefaultOptions } from './../types/index'
|
|
@@ -102,6 +106,10 @@ function onClose() {
|
|
|
102
106
|
}
|
|
103
107
|
|
|
104
108
|
// Transition Callbacks
|
|
109
|
+
function onBeforeEnter() {
|
|
110
|
+
useModalEmitter().emit('beforeEnter', toValue(props.id))
|
|
111
|
+
}
|
|
112
|
+
|
|
105
113
|
async function onAfterEnter() {
|
|
106
114
|
if (mappedOptions.scrollLock) {
|
|
107
115
|
if (mappedOptions.scrollLockPadding) {
|
|
@@ -115,6 +123,12 @@ async function onAfterEnter() {
|
|
|
115
123
|
await nextTick()
|
|
116
124
|
trapFocus()
|
|
117
125
|
}
|
|
126
|
+
|
|
127
|
+
useModalEmitter().emit('afterEnter', toValue(props.id))
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
function onBeforeLeave() {
|
|
131
|
+
useModalEmitter().emit('beforeLeave', toValue(props.id))
|
|
118
132
|
}
|
|
119
133
|
|
|
120
134
|
function onAfterLeave() {
|
|
@@ -130,6 +144,7 @@ function onAfterLeave() {
|
|
|
130
144
|
}
|
|
131
145
|
|
|
132
146
|
wrapperActive.value = false
|
|
147
|
+
useModalEmitter().emit('afterLeave', toValue(props.id))
|
|
133
148
|
}
|
|
134
149
|
|
|
135
150
|
onKeyStroke('Escape', (e) => {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ModalEvents } from '../types.js';
|
|
2
|
+
export declare function useModalEmitter(): {
|
|
3
|
+
on: {
|
|
4
|
+
<Key extends keyof ModalEvents>(type: Key, handler: import("mitt").Handler<ModalEvents[Key]>): void;
|
|
5
|
+
(type: "*", handler: import("mitt").WildcardHandler<ModalEvents>): void;
|
|
6
|
+
};
|
|
7
|
+
off: {
|
|
8
|
+
<Key_1 extends keyof ModalEvents>(type: Key_1, handler?: import("mitt").Handler<ModalEvents[Key_1]> | undefined): void;
|
|
9
|
+
(type: "*", handler: import("mitt").WildcardHandler<ModalEvents>): void;
|
|
10
|
+
};
|
|
11
|
+
emit: {
|
|
12
|
+
<Key_2 extends keyof ModalEvents>(type: Key_2, event: ModalEvents[Key_2]): void;
|
|
13
|
+
<Key_3 extends keyof ModalEvents>(type: undefined extends ModalEvents[Key_3] ? Key_3 : never): void;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
@@ -12,4 +12,10 @@ type DefaultOptions = {
|
|
|
12
12
|
backdrop?: string;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
|
|
15
|
+
type ModalEvents = {
|
|
16
|
+
afterEnter: string;
|
|
17
|
+
afterLeave: string;
|
|
18
|
+
beforeEnter: string;
|
|
19
|
+
beforeLeave: string;
|
|
20
|
+
};
|
|
21
|
+
export type { DefaultOptions, ModalEvents };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useCollisionEmitter } from './src/composables/useCollisionEmitter.js';
|
|
2
2
|
import { useProgress } from './src/composables/useProgress.js';
|
|
3
3
|
import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
|
|
4
4
|
import type { Plugin } from 'vue';
|
|
5
5
|
export type * from './src/types';
|
|
6
6
|
declare const MagicScroll: Plugin;
|
|
7
|
-
export { MagicScroll,
|
|
7
|
+
export { MagicScroll, useCollisionEmitter, useProgress, useCollisionDetect };
|
|
@@ -3,7 +3,7 @@ import MagicScrollScene from "./src/components/MagicScrollScene.vue";
|
|
|
3
3
|
import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
|
|
4
4
|
import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
|
|
5
5
|
import { magicScrollStore } from "./src/store/index.mjs";
|
|
6
|
-
import {
|
|
6
|
+
import { useCollisionEmitter } from "./src/composables/useCollisionEmitter.mjs";
|
|
7
7
|
import { useProgress } from "./src/composables/useProgress.mjs";
|
|
8
8
|
import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
|
|
9
9
|
import { StoreKey } from "./src/types/index.mjs";
|
|
@@ -16,4 +16,4 @@ const MagicScroll = {
|
|
|
16
16
|
app.provide(StoreKey, magicScrollStore);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
export { MagicScroll,
|
|
19
|
+
export { MagicScroll, useCollisionEmitter, useProgress, useCollisionDetect };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ref, watch, unref, computed } from "vue";
|
|
2
2
|
import { useIntersectionObserver } from "@vueuse/core";
|
|
3
|
-
import {
|
|
3
|
+
import { useCollisionEmitter } from "./useCollisionEmitter.mjs";
|
|
4
4
|
export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntries, parent) {
|
|
5
5
|
const scrolled = ref(0);
|
|
6
6
|
const intersecting = ref();
|
|
@@ -85,7 +85,7 @@ export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntri
|
|
|
85
85
|
return;
|
|
86
86
|
if (dir === "down" && boundingRect[pos] <= offset || dir === "up" && boundingRect[pos] >= offset) {
|
|
87
87
|
entry.alerted[dir][pos] = true;
|
|
88
|
-
|
|
88
|
+
useCollisionEmitter().emit("collision", {
|
|
89
89
|
dir,
|
|
90
90
|
pos,
|
|
91
91
|
el: entry.element,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { CollisionEvents } from '../types.js';
|
|
2
|
+
export declare function useCollisionEmitter(): {
|
|
3
|
+
on: {
|
|
4
|
+
<Key extends "collision">(type: Key, handler: import("mitt").Handler<CollisionEvents[Key]>): void;
|
|
5
|
+
(type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
|
|
6
|
+
};
|
|
7
|
+
off: {
|
|
8
|
+
<Key_1 extends "collision">(type: Key_1, handler?: import("mitt").Handler<CollisionEvents[Key_1]> | undefined): void;
|
|
9
|
+
(type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
|
|
10
|
+
};
|
|
11
|
+
emit: {
|
|
12
|
+
<Key_2 extends "collision">(type: Key_2, event: CollisionEvents[Key_2]): void;
|
|
13
|
+
<Key_3 extends "collision">(type: undefined extends CollisionEvents[Key_3] ? Key_3 : never): void;
|
|
14
|
+
};
|
|
15
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maas/vue-equipment",
|
|
3
3
|
"description": "A magic collection of Vue composables, plugins, components and directives",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.0",
|
|
5
5
|
"author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
|
|
6
6
|
"devDependencies": {
|
|
7
7
|
"@antfu/ni": "^0.21.5",
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
"@rollup/plugin-json": "^6.0.0",
|
|
11
11
|
"@types/fs-extra": "^11.0.1",
|
|
12
12
|
"@types/node": "^20.4.5",
|
|
13
|
-
"@types/prettier": "^3.0.0",
|
|
14
13
|
"@vitejs/plugin-vue": "^4.2.3",
|
|
15
14
|
"@vue/compiler-sfc": "^3.3.4",
|
|
16
15
|
"@vue/tsconfig": "^0.4.0",
|
|
@@ -88,20 +87,17 @@
|
|
|
88
87
|
}
|
|
89
88
|
},
|
|
90
89
|
"scripts": {
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"dev": "nr metadata:update && nr docs:dev",
|
|
90
|
+
"dev": "nr dev:docs",
|
|
91
|
+
"dev:docs": "turbo run t:docs:dev && vitepress dev packages",
|
|
94
92
|
"dev:nuxt": "turbo run dev --filter=nuxt",
|
|
95
|
-
"
|
|
96
|
-
"
|
|
93
|
+
"build": "turbo run build",
|
|
94
|
+
"build:types": "turbo run build:types",
|
|
95
|
+
"docs:build": "turbo run t:docs:build && vitepress build packages",
|
|
97
96
|
"docs:preview": "vitepress preview packages",
|
|
98
97
|
"metadata:update": "nr -C packages/metadata update",
|
|
99
|
-
"module:dev": "cd packages/nuxt && nr dev",
|
|
100
98
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
101
99
|
"uninstall": "nlx rimraf --glob ./**/node_modules --glob ./**/pnpm-lock.yaml",
|
|
102
|
-
"release": "turbo run release
|
|
103
|
-
"prepare": "nr build",
|
|
104
|
-
"prepublishOnly": "nr build"
|
|
100
|
+
"release": "turbo run t:release && release-it"
|
|
105
101
|
},
|
|
106
102
|
"types": "./dist/nuxt/types.d.ts",
|
|
107
103
|
"volta": {
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { CollisionEvents } from '../types.js';
|
|
2
|
-
export declare function useEmitter(): {
|
|
3
|
-
on: {
|
|
4
|
-
<Key extends "magic-scroll:collision">(type: Key, handler: import("mitt").Handler<CollisionEvents[Key]>): void;
|
|
5
|
-
(type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
|
|
6
|
-
};
|
|
7
|
-
off: {
|
|
8
|
-
<Key_1 extends "magic-scroll:collision">(type: Key_1, handler?: import("mitt").Handler<CollisionEvents[Key_1]> | undefined): void;
|
|
9
|
-
(type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
|
|
10
|
-
};
|
|
11
|
-
emit: {
|
|
12
|
-
<Key_2 extends "magic-scroll:collision">(type: Key_2, event: CollisionEvents[Key_2]): void;
|
|
13
|
-
<Key_3 extends "magic-scroll:collision">(type: undefined extends CollisionEvents[Key_3] ? Key_3 : never): void;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
File without changes
|
|
File without changes
|