@vnejs/uis.react.backdrop 0.2.1 → 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 (12) hide show
  1. package/dist/Backdrop.d.ts +1 -1
  2. package/dist/Backdrop.d.ts.map +1 -1
  3. package/dist/Backdrop.js +20 -2
  4. package/dist/Backdrop.js.map +1 -1
  5. package/dist/Backdrop.styles.js +3 -1
  6. package/dist/Backdrop.styles.js.map +1 -1
  7. package/dist/Backdrop.types.d.ts +2 -0
  8. package/dist/Backdrop.types.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/Backdrop.styles.ts +3 -1
  11. package/src/Backdrop.tsx +21 -1
  12. package/src/Backdrop.types.tsx +2 -0
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, opacity, color1, color2, stop1, stop2, scaleX, scaleY, translateX, translateY, borderRadius, 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;iCAkB9C,EACvB,MAAa,EACb,UAAiB,EACjB,IAAS,EACT,OAAW,EACX,MAAM,EACN,MAAM,EACN,KAAS,EACT,KAAW,EACX,MAAU,EACV,MAAU,EACV,UAAiB,EACjB,UAAiB,EACjB,YAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa;;aAwCA,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
@@ -16,7 +16,7 @@ const setLengthField = (result, field, value) => {
16
16
  }
17
17
  result[field] = getVneLength(value);
18
18
  };
19
- export const Backdrop = ({ zIndex = null, transition = null, type = "", opacity = 1, color1, color2, stop1 = 0, stop2 = 100, scaleX = 1, scaleY = 1, translateX = null, translateY = null, borderRadius = null, className, children, }) => {
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, }) => {
20
20
  const style = useMemo(() => {
21
21
  const TYPE_TO_DEGREE = {
22
22
  [BackdropType.BOTTOM]: 0,
@@ -30,6 +30,8 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", opacity
30
30
  ["--vne-backdrop-stop-2"]: `${stop2 ?? 100}%`,
31
31
  ["--vne-backdrop-scale-x"]: scaleX ?? 1,
32
32
  ["--vne-backdrop-scale-y"]: scaleY ?? 1,
33
+ ["--vne-backdrop-transform-origin-x"]: transformOriginX ?? 0.5,
34
+ ["--vne-backdrop-transform-origin-y"]: transformOriginY ?? 1,
33
35
  opacity,
34
36
  };
35
37
  if (color1)
@@ -44,7 +46,23 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", opacity
44
46
  setLengthField(result, "--vne-backdrop-translate-y", translateY);
45
47
  setLengthField(result, "--vne-backdrop-border-radius", borderRadius);
46
48
  return result;
47
- }, [zIndex, type, color1, color2, stop1, stop2, opacity, transition, scaleX, scaleY, translateX, translateY, borderRadius]);
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
+ ]);
48
66
  return (_jsx("div", { className: b({}, [className]), style: style, children: children }));
49
67
  };
50
68
  Backdrop.TYPE = BackdropType;
package/dist/Backdrop.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"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"}
package/dist/Backdrop.styles.js CHANGED
@@ -30,6 +30,8 @@ ${sel(b())} {
30
30
  --vne-backdrop-stop-2: 100%;
31
31
  --vne-backdrop-scale-x: 1;
32
32
  --vne-backdrop-scale-y: 1;
33
+ --vne-backdrop-transform-origin-x: 0.5;
34
+ --vne-backdrop-transform-origin-y: 1;
33
35
  --vne-backdrop-translate-x: 0;
34
36
  --vne-backdrop-translate-y: 0;
35
37
  --vne-backdrop-border-radius: 0;
@@ -42,7 +44,7 @@ ${sel(b())} {
42
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));
43
45
  border-radius: var(--vne-backdrop-border-radius);
44
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));
45
- transform-origin: 50% 50%;
47
+ transform-origin: calc(var(--vne-backdrop-transform-origin-x) * 100%) calc(var(--vne-backdrop-transform-origin-y) * 100%);
46
48
  }
47
49
  `;
48
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,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;EAsBV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBT,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
@@ -18,6 +18,8 @@ export type BackdropProps = {
18
18
  stop2?: CssInsertValueNumber;
19
19
  scaleX?: CssInsertValueNumber;
20
20
  scaleY?: CssInsertValueNumber;
21
+ transformOriginX?: CssInsertValueNumber;
22
+ transformOriginY?: CssInsertValueNumber;
21
23
  translateX?: CssInsertValue;
22
24
  translateY?: CssInsertValue;
23
25
  borderRadius?: CssInsertValue;
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,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,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"}
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.1",
3
+ "version": "0.2.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/Backdrop.styles.ts CHANGED
@@ -32,6 +32,8 @@ ${sel(b())} {
32
32
  --vne-backdrop-stop-2: 100%;
33
33
  --vne-backdrop-scale-x: 1;
34
34
  --vne-backdrop-scale-y: 1;
35
+ --vne-backdrop-transform-origin-x: 0.5;
36
+ --vne-backdrop-transform-origin-y: 1;
35
37
  --vne-backdrop-translate-x: 0;
36
38
  --vne-backdrop-translate-y: 0;
37
39
  --vne-backdrop-border-radius: 0;
@@ -44,7 +46,7 @@ ${sel(b())} {
44
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));
45
47
  border-radius: var(--vne-backdrop-border-radius);
46
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));
47
- transform-origin: 50% 50%;
49
+ transform-origin: calc(var(--vne-backdrop-transform-origin-x) * 100%) calc(var(--vne-backdrop-transform-origin-y) * 100%);
48
50
  }
49
51
  `;
50
52
 
package/src/Backdrop.tsx CHANGED
@@ -31,6 +31,8 @@ export const Backdrop = ({
31
31
  stop2 = 100,
32
32
  scaleX = 1,
33
33
  scaleY = 1,
34
+ transformOriginX = 0.5,
35
+ transformOriginY = 1,
34
36
  translateX = null,
35
37
  translateY = null,
36
38
  borderRadius = null,
@@ -51,6 +53,8 @@ export const Backdrop = ({
51
53
  ["--vne-backdrop-stop-2"]: `${stop2 ?? 100}%`,
52
54
  ["--vne-backdrop-scale-x"]: scaleX ?? 1,
53
55
  ["--vne-backdrop-scale-y"]: scaleY ?? 1,
56
+ ["--vne-backdrop-transform-origin-x"]: transformOriginX ?? 0.5,
57
+ ["--vne-backdrop-transform-origin-y"]: transformOriginY ?? 1,
54
58
  opacity,
55
59
  };
56
60
 
@@ -64,7 +68,23 @@ export const Backdrop = ({
64
68
  setLengthField(result, "--vne-backdrop-border-radius", borderRadius);
65
69
 
66
70
  return result;
67
- }, [zIndex, type, color1, color2, stop1, stop2, opacity, transition, scaleX, scaleY, translateX, translateY, borderRadius]);
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
+ ]);
68
88
 
69
89
  return (
70
90
  <div
package/src/Backdrop.types.tsx CHANGED
@@ -22,6 +22,8 @@ export type BackdropProps = {
22
22
  stop2?: CssInsertValueNumber;
23
23
  scaleX?: CssInsertValueNumber;
24
24
  scaleY?: CssInsertValueNumber;
25
+ transformOriginX?: CssInsertValueNumber;
26
+ transformOriginY?: CssInsertValueNumber;
25
27
  translateX?: CssInsertValue;
26
28
  translateY?: CssInsertValue;
27
29
  borderRadius?: CssInsertValue;