@nemigo/svelte 2.1.1 → 2.2.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/kit/navigation.js +3 -1
- package/dist/loader.d.ts +1 -1
- package/dist/loader.js +3 -1
- package/dist/state.svelte.d.ts +3 -7
- package/dist/state.svelte.js +2 -4
- package/dist/transitions.d.ts +27 -17
- package/dist/transitions.js +22 -26
- package/package.json +11 -13
package/dist/kit/navigation.js
CHANGED
package/dist/loader.d.ts
CHANGED
|
@@ -46,7 +46,7 @@ export type { LoaderHook } from "@nemigo/helpers/async/loader";
|
|
|
46
46
|
*/
|
|
47
47
|
export declare class LoaderStore<State extends IState<boolean> = ISvelteState<boolean>> extends Loader {
|
|
48
48
|
state: State;
|
|
49
|
-
static default(init?: boolean): LoaderStore
|
|
49
|
+
static default(init?: boolean): LoaderStore;
|
|
50
50
|
constructor(state: State);
|
|
51
51
|
/**
|
|
52
52
|
* Создаёт {@link onMount} проверку, если в стейте значение `true`
|
package/dist/loader.js
CHANGED
package/dist/state.svelte.d.ts
CHANGED
|
@@ -21,20 +21,16 @@ export interface ISvelteState<V = boolean | undefined> extends IState<V> {
|
|
|
21
21
|
untrack<R>(call: (state: V) => R): R;
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
|
-
* Создание $state-хранилища значения
|
|
25
|
-
*
|
|
26
24
|
* @template T - Тип значения
|
|
27
|
-
* @
|
|
25
|
+
* @returns {ISvelteState<T | undefined>} $state-хранилище значения
|
|
28
26
|
*
|
|
29
27
|
* @see https://svelte.dev/docs/svelte/what-are-runes
|
|
30
28
|
*/
|
|
31
29
|
declare function createSvelteState<T = boolean>(): ISvelteState<T | undefined>;
|
|
32
30
|
/**
|
|
33
|
-
* Создание $state-хранилища значения
|
|
34
|
-
*
|
|
35
31
|
* @template T - Тип значения
|
|
36
|
-
* @param {T} initial
|
|
37
|
-
* @
|
|
32
|
+
* @param {T} initial - Начальное значение
|
|
33
|
+
* @returns {ISvelteState<T>} $state-хранилище значения
|
|
38
34
|
*
|
|
39
35
|
* @see https://svelte.dev/docs/svelte/what-are-runes
|
|
40
36
|
*/
|
package/dist/state.svelte.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { untrack } from "svelte";
|
|
2
2
|
/**
|
|
3
|
-
* Создание $state-хранилища значения
|
|
4
|
-
*
|
|
5
3
|
* @template T - Тип значения
|
|
6
|
-
* @param {T}
|
|
7
|
-
* @
|
|
4
|
+
* @param {T} initial - Начальное значение
|
|
5
|
+
* @returns {ISvelteState<T>} $state-хранилище значения
|
|
8
6
|
*
|
|
9
7
|
* @see https://svelte.dev/docs/svelte/what-are-runes
|
|
10
8
|
*/
|
package/dist/transitions.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { Property } from "csstype";
|
|
2
|
-
import {
|
|
3
|
-
import type { FlyParams, SlideParams, TransitionConfig } from "svelte/transition";
|
|
2
|
+
import type { EasingFunction, SlideParams, TransitionConfig } from "svelte/transition";
|
|
4
3
|
export interface ClassNameTransitionParams {
|
|
5
4
|
animationClassName: string;
|
|
6
5
|
/**
|
|
@@ -20,28 +19,39 @@ export declare const classNameTransition: (node: HTMLElement, { animationClassNa
|
|
|
20
19
|
/**
|
|
21
20
|
* Слайд-анимация с добавлением лёгкого fade-эффекта
|
|
22
21
|
*/
|
|
23
|
-
export declare
|
|
22
|
+
export declare const slide: (node: Element, { delay, duration, easing, axis, classic }?: SlideParams & {
|
|
24
23
|
classic?: boolean;
|
|
25
|
-
})
|
|
24
|
+
}) => TransitionConfig;
|
|
25
|
+
export interface BloopParams {
|
|
26
|
+
delay?: number;
|
|
27
|
+
duration?: number;
|
|
28
|
+
x?: number | string;
|
|
29
|
+
y?: number | string;
|
|
30
|
+
easing?: EasingFunction;
|
|
31
|
+
opacity?: number;
|
|
32
|
+
}
|
|
26
33
|
/**
|
|
27
34
|
* Анимация всплытия (scale + fly)
|
|
28
35
|
*/
|
|
29
|
-
export declare const bloop: (node: Element, { delay, duration, easing, x, y, opacity }?:
|
|
36
|
+
export declare const bloop: (node: Element, { delay, duration, easing, x, y, opacity }?: BloopParams) => TransitionConfig;
|
|
37
|
+
export interface UpperParams {
|
|
38
|
+
delay?: number;
|
|
39
|
+
duration?: number;
|
|
40
|
+
x?: number;
|
|
41
|
+
y?: number;
|
|
42
|
+
easing?: EasingFunction;
|
|
43
|
+
opacity?: number;
|
|
44
|
+
}
|
|
30
45
|
/**
|
|
31
46
|
* Микс-анимация из scale и translate с добавлением лёгкого fade-эффекта
|
|
32
47
|
*/
|
|
33
|
-
export declare const upper: (node: HTMLElement, { delay, duration, x, y, opacity }
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}) => TransitionConfig;
|
|
48
|
+
export declare const upper: (node: HTMLElement, { delay, duration, x, y, opacity, easing }?: UpperParams) => TransitionConfig;
|
|
49
|
+
export interface FontSizeScaleParams {
|
|
50
|
+
delay?: number;
|
|
51
|
+
duration?: number;
|
|
52
|
+
easing?: EasingFunction;
|
|
53
|
+
}
|
|
40
54
|
/**
|
|
41
55
|
* Просто анимация изменения размера через font-size (0 ~ 1)
|
|
42
56
|
*/
|
|
43
|
-
export declare const fontSizeScale: (_: HTMLElement, { delay, duration, easing }?:
|
|
44
|
-
delay?: number | undefined;
|
|
45
|
-
duration?: number | undefined;
|
|
46
|
-
easing?: typeof linear | undefined;
|
|
47
|
-
}) => TransitionConfig;
|
|
57
|
+
export declare const fontSizeScale: (_: HTMLElement, { delay, duration, easing }?: FontSizeScaleParams) => TransitionConfig;
|
package/dist/transitions.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { round } from "@nemigo/helpers/phymath";
|
|
2
|
+
import { toCapitalCase } from "@nemigo/helpers/string";
|
|
2
3
|
import { linear, quadInOut, quadOut } from "svelte/easing";
|
|
3
4
|
import { slide as svelte_slide } from "svelte/transition";
|
|
4
5
|
export const classNameTransition = (node, { animationClassName, reverseDirectionStyle = "reverse", normalDirectionStyle = "", duration = 325 }) => {
|
|
@@ -35,10 +36,8 @@ export const classNameTransition = (node, { animationClassName, reverseDirection
|
|
|
35
36
|
if (reversed)
|
|
36
37
|
unreverse();
|
|
37
38
|
}
|
|
38
|
-
else
|
|
39
|
-
|
|
40
|
-
reverse();
|
|
41
|
-
}
|
|
39
|
+
else if (!reversed)
|
|
40
|
+
reverse();
|
|
42
41
|
}
|
|
43
42
|
before = t;
|
|
44
43
|
},
|
|
@@ -62,22 +61,24 @@ const css_boost = (t, v = 1 / 3) => {
|
|
|
62
61
|
/**
|
|
63
62
|
* Слайд-анимация с добавлением лёгкого fade-эффекта
|
|
64
63
|
*/
|
|
65
|
-
export
|
|
64
|
+
export const slide = (node, { delay = 0, duration = 325, easing, axis = "y", classic } = {}) => {
|
|
66
65
|
if (classic)
|
|
67
66
|
return svelte_slide(node, { delay, duration, easing, axis });
|
|
67
|
+
// oxlint-disable-next-line no-param-reassign
|
|
68
|
+
// eslint-disable-next-line no-param-reassign
|
|
68
69
|
if (!easing)
|
|
69
70
|
easing = quadInOut;
|
|
70
71
|
const style = getComputedStyle(node);
|
|
71
72
|
const prop = axis === "y" ? "height" : "width";
|
|
72
|
-
const propValue = parseFloat(style[prop]);
|
|
73
|
+
const propValue = Number.parseFloat(style[prop]);
|
|
73
74
|
const secProps = axis === "y" ? ["top", "bottom"] : ["left", "right"];
|
|
74
|
-
const capSecProps = secProps.map(
|
|
75
|
-
const padStart = parseFloat(style[`padding${capSecProps[0]}`]);
|
|
76
|
-
const padEnd = parseFloat(style[`padding${capSecProps[1]}`]);
|
|
77
|
-
const marStart = parseFloat(style[`margin${capSecProps[0]}`]);
|
|
78
|
-
const marEnd = parseFloat(style[`margin${capSecProps[1]}`]);
|
|
79
|
-
const borStart = parseFloat(style[`border${capSecProps[0]}Width`]);
|
|
80
|
-
const borEnd = parseFloat(style[`border${capSecProps[1]}Width`]);
|
|
75
|
+
const capSecProps = secProps.map(toCapitalCase);
|
|
76
|
+
const padStart = Number.parseFloat(style[`padding${capSecProps[0]}`]);
|
|
77
|
+
const padEnd = Number.parseFloat(style[`padding${capSecProps[1]}`]);
|
|
78
|
+
const marStart = Number.parseFloat(style[`margin${capSecProps[0]}`]);
|
|
79
|
+
const marEnd = Number.parseFloat(style[`margin${capSecProps[1]}`]);
|
|
80
|
+
const borStart = Number.parseFloat(style[`border${capSecProps[0]}Width`]);
|
|
81
|
+
const borEnd = Number.parseFloat(style[`border${capSecProps[1]}Width`]);
|
|
81
82
|
return {
|
|
82
83
|
delay,
|
|
83
84
|
duration,
|
|
@@ -99,18 +100,18 @@ export function slide(node, { delay = 0, duration = 325, easing, axis = "y", cla
|
|
|
99
100
|
`;
|
|
100
101
|
},
|
|
101
102
|
};
|
|
102
|
-
}
|
|
103
|
+
};
|
|
103
104
|
//...
|
|
104
105
|
const split_css_unit = (value) => {
|
|
105
|
-
const split = typeof value === "string" && value.match(/^\s*(
|
|
106
|
-
return split ? [parseFloat(split
|
|
106
|
+
const split = typeof value === "string" && value.match(/^\s*(?<value>-?[\d.]+)(?<unit>\S*)\s*$/u);
|
|
107
|
+
return split && split.groups?.value ? [Number.parseFloat(split.groups.value), split.groups.unit || "px"] : [Number(value), "px"];
|
|
107
108
|
};
|
|
108
109
|
/**
|
|
109
110
|
* Анимация всплытия (scale + fly)
|
|
110
111
|
*/
|
|
111
112
|
export const bloop = (node, { delay = 0, duration = 325, easing = quadInOut, x = 0, y = 0, opacity = 0 } = {}) => {
|
|
112
113
|
const style = getComputedStyle(node);
|
|
113
|
-
const target_opacity =
|
|
114
|
+
const target_opacity = Number(style.opacity);
|
|
114
115
|
const transform = style.transform === "none" ? "" : style.transform;
|
|
115
116
|
const od = target_opacity * (1 - opacity);
|
|
116
117
|
const { 0: x_value, 1: x_unit } = split_css_unit(x);
|
|
@@ -131,20 +132,15 @@ export const bloop = (node, { delay = 0, duration = 325, easing = quadInOut, x =
|
|
|
131
132
|
/**
|
|
132
133
|
* Микс-анимация из scale и translate с добавлением лёгкого fade-эффекта
|
|
133
134
|
*/
|
|
134
|
-
export const upper = (node, { delay = 0, duration = 400, x = 0, y = 0, opacity = 0 }) => {
|
|
135
|
+
export const upper = (node, { delay = 0, duration = 400, x = 0, y = 0, opacity = 0, easing = quadOut } = {}) => {
|
|
135
136
|
const style = getComputedStyle(node);
|
|
136
|
-
const target_opacity =
|
|
137
|
+
const target_opacity = Number(style.opacity);
|
|
137
138
|
const od = target_opacity * (1 - opacity);
|
|
138
139
|
return {
|
|
139
140
|
delay,
|
|
140
141
|
duration,
|
|
141
|
-
easing
|
|
142
|
-
css: (t, u) => {
|
|
143
|
-
return `
|
|
144
|
-
transform: scale(${round(0.6 + t / 2.5, 5)}) translate(${round((1 - t) * x)}px, ${round((1 - t) * y)}px);
|
|
145
|
-
opacity: ${round(target_opacity - od * u)};
|
|
146
|
-
`;
|
|
147
|
-
},
|
|
142
|
+
easing,
|
|
143
|
+
css: (t, u) => `transform: scale(${round(0.6 + t / 2.5, 5)}) translate(${round((1 - t) * x)}px, ${round((1 - t) * y)}px);opacity: ${round(target_opacity - od * u)};`,
|
|
148
144
|
};
|
|
149
145
|
};
|
|
150
146
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nemigo/svelte",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Vlad Logvin",
|
|
@@ -8,14 +8,12 @@
|
|
|
8
8
|
},
|
|
9
9
|
"type": "module",
|
|
10
10
|
"scripts": {
|
|
11
|
-
"build": "svelte-package && rimraf .svelte-kit",
|
|
11
|
+
"build": "bunx --bun svelte-package && bunx --bun rimraf .svelte-kit",
|
|
12
12
|
"check": "bunx --bun tsc --noemit",
|
|
13
13
|
"eslint": "bunx --bun eslint ./",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"lint:fix:unsafe": "biome lint --fix --unsafe",
|
|
18
|
-
"format": "biome check --write --linter-enabled=false"
|
|
14
|
+
"oxlint": "bunx --bun oxlint --config .././../oxlintrc.jsonc --ignore-path ../configs/.eslint.ignore ./",
|
|
15
|
+
"bilint": "bunx --bun biome lint",
|
|
16
|
+
"format": "bunx --bun biome check --write --linter-enabled=false"
|
|
19
17
|
},
|
|
20
18
|
"exports": {
|
|
21
19
|
".": {
|
|
@@ -36,9 +34,9 @@
|
|
|
36
34
|
}
|
|
37
35
|
},
|
|
38
36
|
"peerDependencies": {
|
|
39
|
-
"@nemigo/helpers": ">=2.
|
|
40
|
-
"@sveltejs/kit": ">=2.
|
|
41
|
-
"svelte": ">=5.
|
|
37
|
+
"@nemigo/helpers": ">=2.2.0",
|
|
38
|
+
"@sveltejs/kit": ">=2.49.0",
|
|
39
|
+
"svelte": ">=5.44.0"
|
|
42
40
|
},
|
|
43
41
|
"peerDependenciesMeta": {
|
|
44
42
|
"@sveltejs/kit": {
|
|
@@ -46,10 +44,10 @@
|
|
|
46
44
|
}
|
|
47
45
|
},
|
|
48
46
|
"dependencies": {
|
|
49
|
-
"csstype": ">=3.
|
|
47
|
+
"csstype": ">=3.2.0"
|
|
50
48
|
},
|
|
51
49
|
"devDependencies": {
|
|
52
|
-
"@nemigo/configs": "2.
|
|
53
|
-
"@nemigo/helpers": "2.0
|
|
50
|
+
"@nemigo/configs": "2.2.0",
|
|
51
|
+
"@nemigo/helpers": "2.2.0"
|
|
54
52
|
}
|
|
55
53
|
}
|