@vnejs/uis.react.backdrop 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/Backdrop.d.ts +1 -1
  2. package/dist/Backdrop.d.ts.map +1 -1
  3. package/dist/Backdrop.js +41 -4
  4. package/dist/Backdrop.js.map +1 -1
  5. package/dist/Backdrop.styles.js +36 -37
  6. package/dist/Backdrop.styles.js.map +1 -1
  7. package/dist/Backdrop.types.d.ts +10 -2
  8. package/dist/Backdrop.types.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/Backdrop.stories.tsx +15 -3
  11. package/src/Backdrop.styles.ts +36 -38
  12. package/src/Backdrop.tsx +52 -6
  13. package/src/Backdrop.types.tsx +10 -2
package/dist/Backdrop.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BackdropType, type BackdropProps } from "./Backdrop.types.js";
2
- export declare function Backdrop({ zIndex, transition, type, size, opacity, color1, color2, className, children, }: BackdropProps): import("react").JSX.Element;
2
+ export declare function Backdrop({ zIndex, transition, type, opacity, color1, color2, stop1, stop2, scaleX, scaleY, transformOriginX, transformOriginY, translateX, translateY, borderRadius, className, children, }: BackdropProps): import("react").JSX.Element;
3
3
  export declare namespace Backdrop {
4
4
  export { BackdropType as TYPE };
5
5
  }
package/dist/Backdrop.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;iCAI9C,EACvB,MAAa,EACb,UAAiB,EACjB,IAAS,EACT,IAAU,EACV,OAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,aAAa;;aAkCA,YAAY"}
1
+ {"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;iCAkB9C,EACvB,MAAa,EACb,UAAiB,EACjB,IAAS,EACT,OAAW,EACX,MAAM,EACN,MAAM,EACN,KAAS,EACT,KAAW,EACX,MAAU,EACV,MAAU,EACV,gBAAsB,EACtB,gBAAoB,EACpB,UAAiB,EACjB,UAAiB,EACjB,YAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa;;aA0DA,YAAY"}
package/dist/Backdrop.js CHANGED
@@ -3,7 +3,20 @@ import { useMemo } from "react";
3
3
  import { getVneLength } from "@vnejs/uis.utils";
4
4
  import { BackdropType } from "./Backdrop.types.js";
5
5
  import { b } from "./Backdrop.styles.js";
6
- export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 360, opacity = 1, color1, color2, className, children, }) => {
6
+ const setLengthField = (result, field, value) => {
7
+ if (value === null || value === undefined)
8
+ return;
9
+ if (value === 0) {
10
+ result[field] = "0";
11
+ return;
12
+ }
13
+ if (typeof value === "string") {
14
+ result[field] = value;
15
+ return;
16
+ }
17
+ result[field] = getVneLength(value);
18
+ };
19
+ export const Backdrop = ({ zIndex = null, transition = null, type = "", opacity = 1, color1, color2, stop1 = 0, stop2 = 100, scaleX = 1, scaleY = 1, transformOriginX = 0.5, transformOriginY = 1, translateX = null, translateY = null, borderRadius = null, className, children, }) => {
7
20
  const style = useMemo(() => {
8
21
  const TYPE_TO_DEGREE = {
9
22
  [BackdropType.BOTTOM]: 0,
@@ -13,9 +26,14 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 3
13
26
  };
14
27
  const result = {
15
28
  ["--vne-backdrop-degree"]: `${TYPE_TO_DEGREE[type || BackdropType.TOP]}deg`,
29
+ ["--vne-backdrop-stop-1"]: `${stop1 ?? 0}%`,
30
+ ["--vne-backdrop-stop-2"]: `${stop2 ?? 100}%`,
31
+ ["--vne-backdrop-scale-x"]: scaleX ?? 1,
32
+ ["--vne-backdrop-scale-y"]: scaleY ?? 1,
33
+ ["--vne-backdrop-transform-origin-x"]: transformOriginX ?? 0.5,
34
+ ["--vne-backdrop-transform-origin-y"]: transformOriginY ?? 1,
16
35
  opacity,
17
36
  };
18
- result["--vne-backdrop-length"] = getVneLength(size);
19
37
  if (color1)
20
38
  result["--vne-backdrop-color-1"] = color1;
21
39
  if (color2)
@@ -24,9 +42,28 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 3
24
42
  result.zIndex = zIndex;
25
43
  if (transition !== null)
26
44
  result.transition = transition === 0 ? "none" : `${transition}ms`;
45
+ setLengthField(result, "--vne-backdrop-translate-x", translateX);
46
+ setLengthField(result, "--vne-backdrop-translate-y", translateY);
47
+ setLengthField(result, "--vne-backdrop-border-radius", borderRadius);
27
48
  return result;
28
- }, [zIndex, size, type, color1, color2, opacity]);
29
- return (_jsx("div", { className: b({ type }, [className]), style: style, children: children }));
49
+ }, [
50
+ zIndex,
51
+ type,
52
+ color1,
53
+ color2,
54
+ stop1,
55
+ stop2,
56
+ opacity,
57
+ transition,
58
+ scaleX,
59
+ scaleY,
60
+ transformOriginX,
61
+ transformOriginY,
62
+ translateX,
63
+ translateY,
64
+ borderRadius,
65
+ ]);
66
+ return (_jsx("div", { className: b({}, [className]), style: style, children: children }));
30
67
  };
31
68
  Backdrop.TYPE = BackdropType;
32
69
  //# sourceMappingURL=Backdrop.js.map
package/dist/Backdrop.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAEvE,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,GAAG,EACV,OAAO,GAAG,CAAC,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACM,EAAE,EAAE;IAClB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,cAAc,GAAG;YACrB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE;YACvB,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG;YACvB,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,GAAG;SAC1B,CAAC;QAEF,MAAM,MAAM,GAAwB;YAClC,CAAC,uBAAuB,CAAC,EAAE,GAAG,cAAc,CAAC,IAAI,IAAI,YAAY,CAAC,GAAG,CAAC,KAAK;YAC3E,OAAO;SACR,CAAC;QAEF,MAAM,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAErD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5C,IAAI,UAAU,KAAK,IAAI;YAAE,MAAM,CAAC,UAAU,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EACnC,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC"}
1
+ {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"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"}
package/dist/Backdrop.styles.js CHANGED
@@ -1,51 +1,50 @@
1
1
  import { cn, injectStyles, sel } from "@vnejs/uis.utils";
2
2
  export const b = cn("Backdrop");
3
- const typeTop = sel(b({ type: "top" }));
4
- const typeRight = sel(b({ type: "right" }));
5
- const typeBottom = sel(b({ type: "bottom" }));
6
- const typeLeft = sel(b({ type: "left" }));
7
3
  const CSS = `
4
+ @property --vne-backdrop-color-1 {
5
+ syntax: "<color>";
6
+ inherits: true;
7
+ initial-value: rgba(0, 0, 0, 0.85);
8
+ }
9
+ @property --vne-backdrop-color-2 {
10
+ syntax: "<color>";
11
+ inherits: true;
12
+ initial-value: rgba(0, 0, 0, 0);
13
+ }
14
+ @property --vne-backdrop-stop-1 {
15
+ syntax: "<percentage>";
16
+ inherits: true;
17
+ initial-value: 0%;
18
+ }
19
+ @property --vne-backdrop-stop-2 {
20
+ syntax: "<percentage>";
21
+ inherits: true;
22
+ initial-value: 100%;
23
+ }
24
+
8
25
  ${sel(b())} {
9
- --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
10
- --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
26
+ --vne-backdrop-color-1: rgba(0, 0, 0, 0.85);
27
+ --vne-backdrop-color-2: rgba(0, 0, 0, 0);
11
28
  --vne-backdrop-degree: 0deg;
29
+ --vne-backdrop-stop-1: 0%;
30
+ --vne-backdrop-stop-2: 100%;
31
+ --vne-backdrop-scale-x: 1;
32
+ --vne-backdrop-scale-y: 1;
33
+ --vne-backdrop-transform-origin-x: 0.5;
34
+ --vne-backdrop-transform-origin-y: 1;
35
+ --vne-backdrop-translate-x: 0;
36
+ --vne-backdrop-translate-y: 0;
37
+ --vne-backdrop-border-radius: 0;
12
38
  display: block;
13
39
  position: absolute;
14
- background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%);
15
- }
16
-
17
- ${typeTop},
18
- ${typeRight},
19
- ${typeLeft} {
20
40
  top: 0;
21
- }
22
-
23
- ${typeTop},
24
- ${typeRight},
25
- ${typeBottom} {
26
41
  right: 0;
27
- }
28
-
29
- ${typeRight},
30
- ${typeBottom},
31
- ${typeLeft} {
32
42
  bottom: 0;
33
- }
34
-
35
- ${typeTop},
36
- ${typeBottom},
37
- ${typeLeft} {
38
43
  left: 0;
39
- }
40
-
41
- ${typeTop},
42
- ${typeBottom} {
43
- height: var(--vne-backdrop-length);
44
- }
45
-
46
- ${typeRight},
47
- ${typeLeft} {
48
- width: var(--vne-backdrop-length);
44
+ background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) var(--vne-backdrop-stop-1), var(--vne-backdrop-color-2) var(--vne-backdrop-stop-2));
45
+ border-radius: var(--vne-backdrop-border-radius);
46
+ transform: translate(var(--vne-backdrop-translate-x), var(--vne-backdrop-translate-y)) scaleX(var(--vne-backdrop-scale-x)) scaleY(var(--vne-backdrop-scale-y));
47
+ transform-origin: calc(var(--vne-backdrop-transform-origin-x) * 100%) calc(var(--vne-backdrop-transform-origin-y) * 100%);
49
48
  }
50
49
  `;
51
50
  injectStyles(CSS);
package/dist/Backdrop.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Backdrop.styles.js","sourceRoot":"","sources":["../src/Backdrop.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhC,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACxC,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;AAC5C,MAAM,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AAC9C,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAE1C,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;EASR,OAAO;EACP,SAAS;EACT,QAAQ;;;;EAIR,OAAO;EACP,SAAS;EACT,UAAU;;;;EAIV,SAAS;EACT,UAAU;EACV,QAAQ;;;;EAIR,OAAO;EACP,UAAU;EACV,QAAQ;;;;EAIR,OAAO;EACP,UAAU;;;;EAIV,SAAS;EACT,QAAQ;;;CAGT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
1
+ {"version":3,"file":"Backdrop.styles.js","sourceRoot":"","sources":["../src/Backdrop.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhC,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;EAsBV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
package/dist/Backdrop.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
- import type { CssInsertValueLength, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
2
+ import type { CssInsertValue, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
3
3
  export declare const BackdropType: {
4
4
  readonly TOP: "top";
5
5
  readonly RIGHT: "right";
@@ -11,10 +11,18 @@ export type BackdropProps = {
11
11
  zIndex?: CssInsertValueNumber;
12
12
  transition?: CssInsertValueNumber;
13
13
  type?: BackdropTypeValue | "";
14
- size?: CssInsertValueLength;
15
14
  opacity?: CssInsertValueNumber;
16
15
  color1?: CssInsertValueString;
17
16
  color2?: CssInsertValueString;
17
+ stop1?: CssInsertValueNumber;
18
+ stop2?: CssInsertValueNumber;
19
+ scaleX?: CssInsertValueNumber;
20
+ scaleY?: CssInsertValueNumber;
21
+ transformOriginX?: CssInsertValueNumber;
22
+ transformOriginY?: CssInsertValueNumber;
23
+ translateX?: CssInsertValue;
24
+ translateY?: CssInsertValue;
25
+ borderRadius?: CssInsertValue;
18
26
  className?: string;
19
27
  children?: ReactNode;
20
28
  };
package/dist/Backdrop.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Backdrop.types.d.ts","sourceRoot":"","sources":["../src/Backdrop.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEzG,eAAO,MAAM,YAAY;aACvB,GAAG,EAAE,KAAK;aACV,KAAK,EAAE,OAAO;aACd,MAAM,EAAE,QAAQ;aAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAEjF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,IAAI,CAAC,EAAE,iBAAiB,GAAG,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
1
+ {"version":3,"file":"Backdrop.types.d.ts","sourceRoot":"","sources":["../src/Backdrop.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEnG,eAAO,MAAM,YAAY;aACvB,GAAG,EAAE,KAAK;aACV,KAAK,EAAE,OAAO;aACd,MAAM,EAAE,QAAQ;aAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAEjF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,IAAI,CAAC,EAAE,iBAAiB,GAAG,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vnejs/uis.react.backdrop",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/Backdrop.stories.tsx CHANGED
@@ -4,9 +4,15 @@ import { Backdrop } from "./Backdrop.js";
4
4
  export const Common = {
5
5
  args: {
6
6
  vneHeight: 720,
7
- type: Backdrop.TYPE.TOP,
7
+ type: Backdrop.TYPE.BOTTOM,
8
8
  zIndex: 10,
9
- size: 180,
9
+ scaleX: 1,
10
+ scaleY: 600 / 2160,
11
+ translateX: 0,
12
+ translateY: 1560,
13
+ stop1: 0,
14
+ stop2: 100,
15
+ borderRadius: 0,
10
16
  },
11
17
  };
12
18
 
@@ -24,9 +30,15 @@ export default {
24
30
  // Backdrop
25
31
  zIndex: { control: { type: "number", min: -100, max: 100, step: 5 } },
26
32
  type: { control: { type: "select" }, options: Object.values(Backdrop.TYPE) },
27
- size: { control: { type: "number", min: 120, max: 600, step: 12 } },
28
33
  color1: { control: { type: "select" }, options: ["", "red", "green", "blue", "black"] },
29
34
  color2: { control: { type: "select" }, options: ["", "red", "green", "blue", "black"] },
30
35
  transition: { control: { type: "number", min: 0, max: 600, step: 30 } },
36
+ scaleX: { control: { type: "number", min: 0, max: 1, step: 0.01 } },
37
+ scaleY: { control: { type: "number", min: 0, max: 1, step: 0.01 } },
38
+ translateX: { control: { type: "number", min: -2160, max: 2160, step: 12 } },
39
+ translateY: { control: { type: "number", min: -2160, max: 2160, step: 12 } },
40
+ stop1: { control: { type: "number", min: 0, max: 100, step: 1 } },
41
+ stop2: { control: { type: "number", min: 0, max: 100, step: 1 } },
42
+ borderRadius: { control: { type: "number", min: 0, max: 120, step: 6 } },
31
43
  },
32
44
  };
package/src/Backdrop.styles.ts CHANGED
@@ -2,53 +2,51 @@ import { cn, injectStyles, sel } from "@vnejs/uis.utils";
2
2
 
3
3
  export const b = cn("Backdrop");
4
4
 
5
- const typeTop = sel(b({ type: "top" }));
6
- const typeRight = sel(b({ type: "right" }));
7
- const typeBottom = sel(b({ type: "bottom" }));
8
- const typeLeft = sel(b({ type: "left" }));
9
-
10
5
  const CSS = `
6
+ @property --vne-backdrop-color-1 {
7
+ syntax: "<color>";
8
+ inherits: true;
9
+ initial-value: rgba(0, 0, 0, 0.85);
10
+ }
11
+ @property --vne-backdrop-color-2 {
12
+ syntax: "<color>";
13
+ inherits: true;
14
+ initial-value: rgba(0, 0, 0, 0);
15
+ }
16
+ @property --vne-backdrop-stop-1 {
17
+ syntax: "<percentage>";
18
+ inherits: true;
19
+ initial-value: 0%;
20
+ }
21
+ @property --vne-backdrop-stop-2 {
22
+ syntax: "<percentage>";
23
+ inherits: true;
24
+ initial-value: 100%;
25
+ }
26
+
11
27
  ${sel(b())} {
12
- --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
13
- --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
28
+ --vne-backdrop-color-1: rgba(0, 0, 0, 0.85);
29
+ --vne-backdrop-color-2: rgba(0, 0, 0, 0);
14
30
  --vne-backdrop-degree: 0deg;
31
+ --vne-backdrop-stop-1: 0%;
32
+ --vne-backdrop-stop-2: 100%;
33
+ --vne-backdrop-scale-x: 1;
34
+ --vne-backdrop-scale-y: 1;
35
+ --vne-backdrop-transform-origin-x: 0.5;
36
+ --vne-backdrop-transform-origin-y: 1;
37
+ --vne-backdrop-translate-x: 0;
38
+ --vne-backdrop-translate-y: 0;
39
+ --vne-backdrop-border-radius: 0;
15
40
  display: block;
16
41
  position: absolute;
17
- background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%);
18
- }
19
-
20
- ${typeTop},
21
- ${typeRight},
22
- ${typeLeft} {
23
42
  top: 0;
24
- }
25
-
26
- ${typeTop},
27
- ${typeRight},
28
- ${typeBottom} {
29
43
  right: 0;
30
- }
31
-
32
- ${typeRight},
33
- ${typeBottom},
34
- ${typeLeft} {
35
44
  bottom: 0;
36
- }
37
-
38
- ${typeTop},
39
- ${typeBottom},
40
- ${typeLeft} {
41
45
  left: 0;
42
- }
43
-
44
- ${typeTop},
45
- ${typeBottom} {
46
- height: var(--vne-backdrop-length);
47
- }
48
-
49
- ${typeRight},
50
- ${typeLeft} {
51
- width: var(--vne-backdrop-length);
46
+ background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) var(--vne-backdrop-stop-1), var(--vne-backdrop-color-2) var(--vne-backdrop-stop-2));
47
+ border-radius: var(--vne-backdrop-border-radius);
48
+ transform: translate(var(--vne-backdrop-translate-x), var(--vne-backdrop-translate-y)) scaleX(var(--vne-backdrop-scale-x)) scaleY(var(--vne-backdrop-scale-y));
49
+ transform-origin: calc(var(--vne-backdrop-transform-origin-x) * 100%) calc(var(--vne-backdrop-transform-origin-y) * 100%);
52
50
  }
53
51
  `;
54
52
 
package/src/Backdrop.tsx CHANGED
@@ -1,19 +1,41 @@
1
1
  import { useMemo } from "react";
2
2
 
3
- import { getVneLength } from "@vnejs/uis.utils";
3
+ import { getVneLength, type CssInsertValue } from "@vnejs/uis.utils";
4
4
 
5
5
  import { BackdropType, type BackdropProps } from "./Backdrop.types.js";
6
6
 
7
7
  import { b } from "./Backdrop.styles.js";
8
8
 
9
+ const setLengthField = (result: Record<string, string>, field: string, value: CssInsertValue) => {
10
+ if (value === null || value === undefined) return;
11
+ if (value === 0) {
12
+ result[field] = "0";
13
+ return;
14
+ }
15
+ if (typeof value === "string") {
16
+ result[field] = value;
17
+ return;
18
+ }
19
+
20
+ result[field] = getVneLength(value);
21
+ };
22
+
9
23
  export const Backdrop = ({
10
24
  zIndex = null,
11
25
  transition = null,
12
26
  type = "",
13
- size = 360,
14
27
  opacity = 1,
15
28
  color1,
16
29
  color2,
30
+ stop1 = 0,
31
+ stop2 = 100,
32
+ scaleX = 1,
33
+ scaleY = 1,
34
+ transformOriginX = 0.5,
35
+ transformOriginY = 1,
36
+ translateX = null,
37
+ translateY = null,
38
+ borderRadius = null,
17
39
  className,
18
40
  children,
19
41
  }: BackdropProps) => {
@@ -27,22 +49,46 @@ export const Backdrop = ({
27
49
 
28
50
  const result: Record<string, any> = {
29
51
  ["--vne-backdrop-degree"]: `${TYPE_TO_DEGREE[type || BackdropType.TOP]}deg`,
52
+ ["--vne-backdrop-stop-1"]: `${stop1 ?? 0}%`,
53
+ ["--vne-backdrop-stop-2"]: `${stop2 ?? 100}%`,
54
+ ["--vne-backdrop-scale-x"]: scaleX ?? 1,
55
+ ["--vne-backdrop-scale-y"]: scaleY ?? 1,
56
+ ["--vne-backdrop-transform-origin-x"]: transformOriginX ?? 0.5,
57
+ ["--vne-backdrop-transform-origin-y"]: transformOriginY ?? 1,
30
58
  opacity,
31
59
  };
32
60
 
33
- result["--vne-backdrop-length"] = getVneLength(size);
34
-
35
61
  if (color1) result["--vne-backdrop-color-1"] = color1;
36
62
  if (color2) result["--vne-backdrop-color-2"] = color2;
37
63
  if (zIndex !== null) result.zIndex = zIndex;
38
64
  if (transition !== null) result.transition = transition === 0 ? "none" : `${transition}ms`;
39
65
 
66
+ setLengthField(result, "--vne-backdrop-translate-x", translateX);
67
+ setLengthField(result, "--vne-backdrop-translate-y", translateY);
68
+ setLengthField(result, "--vne-backdrop-border-radius", borderRadius);
69
+
40
70
  return result;
41
- }, [zIndex, size, type, color1, color2, opacity]);
71
+ }, [
72
+ zIndex,
73
+ type,
74
+ color1,
75
+ color2,
76
+ stop1,
77
+ stop2,
78
+ opacity,
79
+ transition,
80
+ scaleX,
81
+ scaleY,
82
+ transformOriginX,
83
+ transformOriginY,
84
+ translateX,
85
+ translateY,
86
+ borderRadius,
87
+ ]);
42
88
 
43
89
  return (
44
90
  <div
45
- className={b({ type }, [className])}
91
+ className={b({}, [className])}
46
92
  style={style}
47
93
  >
48
94
  {children}
package/src/Backdrop.types.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { ReactNode } from "react";
2
2
 
3
- import type { CssInsertValueLength, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
3
+ import type { CssInsertValue, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
4
4
 
5
5
  export const BackdropType = {
6
6
  TOP: "top",
@@ -15,10 +15,18 @@ export type BackdropProps = {
15
15
  zIndex?: CssInsertValueNumber;
16
16
  transition?: CssInsertValueNumber;
17
17
  type?: BackdropTypeValue | "";
18
- size?: CssInsertValueLength;
19
18
  opacity?: CssInsertValueNumber;
20
19
  color1?: CssInsertValueString;
21
20
  color2?: CssInsertValueString;
21
+ stop1?: CssInsertValueNumber;
22
+ stop2?: CssInsertValueNumber;
23
+ scaleX?: CssInsertValueNumber;
24
+ scaleY?: CssInsertValueNumber;
25
+ transformOriginX?: CssInsertValueNumber;
26
+ transformOriginY?: CssInsertValueNumber;
27
+ translateX?: CssInsertValue;
28
+ translateY?: CssInsertValue;
29
+ borderRadius?: CssInsertValue;
22
30
  className?: string;
23
31
  children?: ReactNode;
24
32
  };