@plasmicpkgs/react-parallax-tilt 0.0.1 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +6 -1
- package/dist/react-parallax-tilt.cjs.development.js +94 -46
- package/dist/react-parallax-tilt.cjs.development.js.map +1 -1
- package/dist/react-parallax-tilt.cjs.production.min.js +1 -1
- package/dist/react-parallax-tilt.cjs.production.min.js.map +1 -1
- package/dist/react-parallax-tilt.esm.js +94 -46
- package/dist/react-parallax-tilt.esm.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
|
|
1
2
|
import { ComponentProps } from "react";
|
|
2
3
|
import ReactParallaxTilt from "react-parallax-tilt";
|
|
3
|
-
export
|
|
4
|
+
export declare type TiltProps = ComponentProps<typeof ReactParallaxTilt>;
|
|
5
|
+
export default function Tilt(props: TiltProps): JSX.Element;
|
|
6
|
+
export declare function registerTilt(loader?: {
|
|
7
|
+
registerComponent: typeof registerComponent;
|
|
8
|
+
}, customTiltMeta?: ComponentMeta<TiltProps>): void;
|
|
@@ -35,8 +35,10 @@ function Tilt(props) {
|
|
|
35
35
|
}, (_props$style = props.style) != null ? _props$style : {})
|
|
36
36
|
}));
|
|
37
37
|
}
|
|
38
|
-
|
|
39
|
-
name: "
|
|
38
|
+
var parallaxTiltMeta = {
|
|
39
|
+
name: "hostless-parallax-tilt",
|
|
40
|
+
displayName: "Tilt",
|
|
41
|
+
importName: "Tilt",
|
|
40
42
|
importPath: "@plasmicpkgs/react-parallax-tilt",
|
|
41
43
|
props: {
|
|
42
44
|
children: {
|
|
@@ -51,122 +53,168 @@ registerComponent(Tilt, {
|
|
|
51
53
|
},
|
|
52
54
|
tiltEnable: {
|
|
53
55
|
type: "boolean",
|
|
54
|
-
|
|
55
|
-
description: "Enable tilt effect"
|
|
56
|
+
defaultValueHint: true,
|
|
57
|
+
description: "Enable tilt effect",
|
|
58
|
+
displayName: "Enable"
|
|
56
59
|
},
|
|
57
60
|
tiltReverse: {
|
|
58
61
|
type: "boolean",
|
|
59
|
-
|
|
60
|
-
description: "Reverse tilt direction"
|
|
62
|
+
defaultValueHint: false,
|
|
63
|
+
description: "Reverse tilt direction",
|
|
64
|
+
displayName: "Reverse"
|
|
61
65
|
},
|
|
62
66
|
tiltAngleXInitial: {
|
|
63
67
|
type: "number",
|
|
64
|
-
|
|
65
|
-
description: "Initial tilt angle in degrees on X axis"
|
|
68
|
+
defaultValueHint: 0,
|
|
69
|
+
description: "Initial tilt angle in degrees on X axis",
|
|
70
|
+
displayName: "Angle X Initial"
|
|
66
71
|
},
|
|
67
72
|
tiltAngleYInitial: {
|
|
68
73
|
type: "number",
|
|
69
|
-
|
|
70
|
-
description: "Initial tilt angle in degrees on Y axis"
|
|
74
|
+
defaultValueHint: 0,
|
|
75
|
+
description: "Initial tilt angle in degrees on Y axis",
|
|
76
|
+
displayName: "Angle Y Initial"
|
|
71
77
|
},
|
|
72
78
|
tiltMaxAngleX: {
|
|
73
79
|
type: "number",
|
|
74
|
-
|
|
75
|
-
description: "Maximum tilt angle in degrees on X axis"
|
|
80
|
+
defaultValueHint: 20,
|
|
81
|
+
description: "Maximum tilt angle in degrees on X axis",
|
|
82
|
+
displayName: "Max Angle X"
|
|
76
83
|
},
|
|
77
84
|
tiltMaxAngleY: {
|
|
78
85
|
type: "number",
|
|
79
|
-
|
|
80
|
-
description: "Maximum tilt angle in degrees on Y axis"
|
|
86
|
+
defaultValueHint: 20,
|
|
87
|
+
description: "Maximum tilt angle in degrees on Y axis",
|
|
88
|
+
displayName: "Max Angle Y"
|
|
81
89
|
},
|
|
82
90
|
tiltAxis: {
|
|
83
91
|
type: "choice",
|
|
84
92
|
options: ["x", "y"],
|
|
85
|
-
description: "Which axis should be enabled
|
|
93
|
+
description: "Which axis should be enabled",
|
|
94
|
+
defaultValueHint: "both",
|
|
95
|
+
displayName: "Axis"
|
|
86
96
|
},
|
|
87
97
|
glareEnable: {
|
|
88
98
|
type: "boolean",
|
|
89
|
-
|
|
90
|
-
description: "Enable glare effect"
|
|
99
|
+
defaultValueHint: false,
|
|
100
|
+
description: "Enable glare effect",
|
|
101
|
+
displayName: "Glare Enable"
|
|
91
102
|
},
|
|
92
103
|
glareMaxOpacity: {
|
|
93
104
|
type: "number",
|
|
94
|
-
|
|
95
|
-
description: "Maximum opacity of glare effect"
|
|
105
|
+
defaultValueHint: 0.7,
|
|
106
|
+
description: "Maximum opacity of glare effect",
|
|
107
|
+
displayName: "Glare Max Opacity",
|
|
108
|
+
hidden: function hidden(props) {
|
|
109
|
+
return !props.glareEnable;
|
|
110
|
+
}
|
|
96
111
|
},
|
|
97
112
|
glareColor: {
|
|
98
113
|
// TODO replace with color picker
|
|
99
114
|
type: "string",
|
|
100
|
-
|
|
101
|
-
description: "Color of glare effect"
|
|
115
|
+
defaultValueHint: "#ffffff",
|
|
116
|
+
description: "Color of glare effect",
|
|
117
|
+
displayName: "Glare Color",
|
|
118
|
+
hidden: function hidden(props) {
|
|
119
|
+
return !props.glareEnable;
|
|
120
|
+
}
|
|
102
121
|
},
|
|
103
122
|
glareBorderRadius: {
|
|
104
123
|
type: "string",
|
|
105
|
-
|
|
106
|
-
description: "Border radius of glare effect"
|
|
124
|
+
defaultValueHint: '0',
|
|
125
|
+
description: "Border radius of glare effect",
|
|
126
|
+
displayName: "Glare Border Radius",
|
|
127
|
+
hidden: function hidden(props) {
|
|
128
|
+
return !props.glareEnable;
|
|
129
|
+
}
|
|
107
130
|
},
|
|
108
131
|
glarePosition: {
|
|
109
132
|
type: "choice",
|
|
110
133
|
options: ["top", "bottom", "left", "right", "all"],
|
|
111
|
-
|
|
112
|
-
description: "Position of the glare effect"
|
|
134
|
+
defaultValueHint: 'bottom',
|
|
135
|
+
description: "Position of the glare effect",
|
|
136
|
+
displayName: "Glare Position",
|
|
137
|
+
hidden: function hidden(props) {
|
|
138
|
+
return !props.glareEnable;
|
|
139
|
+
}
|
|
113
140
|
},
|
|
114
141
|
glareReverse: {
|
|
115
142
|
type: "boolean",
|
|
116
|
-
|
|
117
|
-
description: "Reverse glare direction"
|
|
143
|
+
defaultValueHint: false,
|
|
144
|
+
description: "Reverse glare direction",
|
|
145
|
+
displayName: "Glare Reverse",
|
|
146
|
+
hidden: function hidden(props) {
|
|
147
|
+
return !props.glareEnable;
|
|
148
|
+
}
|
|
118
149
|
},
|
|
119
150
|
scale: {
|
|
120
151
|
type: "number",
|
|
121
|
-
|
|
122
|
-
description: "Scale of the element"
|
|
152
|
+
defaultValueHint: 1,
|
|
153
|
+
description: "Scale of the element",
|
|
154
|
+
displayName: "Scale"
|
|
123
155
|
},
|
|
124
156
|
perspective: {
|
|
125
157
|
type: "number",
|
|
126
|
-
|
|
127
|
-
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets."
|
|
158
|
+
defaultValueHint: 1000,
|
|
159
|
+
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.",
|
|
160
|
+
displayName: "Perspective"
|
|
128
161
|
},
|
|
129
162
|
flipVertically: {
|
|
130
163
|
type: "boolean",
|
|
131
|
-
|
|
132
|
-
description: "Flip the element vertically"
|
|
164
|
+
defaultValueHint: false,
|
|
165
|
+
description: "Flip the element vertically",
|
|
166
|
+
displayName: "Flip Vertically"
|
|
133
167
|
},
|
|
134
168
|
flipHorizontally: {
|
|
135
169
|
type: "boolean",
|
|
136
|
-
|
|
137
|
-
description: "Flip the element horizontally"
|
|
170
|
+
defaultValueHint: false,
|
|
171
|
+
description: "Flip the element horizontally",
|
|
172
|
+
displayName: "Flip Horizontally"
|
|
138
173
|
},
|
|
139
174
|
reset: {
|
|
140
175
|
type: "boolean",
|
|
141
|
-
|
|
142
|
-
description: "Reset the element to its original state"
|
|
176
|
+
defaultValueHint: false,
|
|
177
|
+
description: "Reset the element to its original state",
|
|
178
|
+
displayName: "Reset"
|
|
143
179
|
},
|
|
144
180
|
transitionEasing: {
|
|
145
181
|
type: "string",
|
|
146
|
-
|
|
147
|
-
description: "Easing function for the transition"
|
|
182
|
+
defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',
|
|
183
|
+
description: "Easing function for the transition",
|
|
184
|
+
displayName: "Transition Easing"
|
|
148
185
|
},
|
|
149
186
|
transitionSpeed: {
|
|
150
187
|
type: "number",
|
|
151
|
-
|
|
152
|
-
description: "Transition speed in milliseconds"
|
|
188
|
+
defaultValueHint: 400,
|
|
189
|
+
description: "Transition speed in milliseconds",
|
|
190
|
+
displayName: "Transition Speed"
|
|
153
191
|
},
|
|
154
192
|
trackOnWindow: {
|
|
155
193
|
type: "boolean",
|
|
156
|
-
|
|
157
|
-
description: "Track the mouse position on the whole window, not just on the element"
|
|
194
|
+
defaultValueHint: false,
|
|
195
|
+
description: "Track the mouse position on the whole window, not just on the element",
|
|
196
|
+
displayName: "Track On Window"
|
|
158
197
|
},
|
|
159
198
|
gyroscope: {
|
|
160
199
|
type: "boolean",
|
|
161
|
-
|
|
162
|
-
description: "Enable device orientation detection"
|
|
200
|
+
defaultValueHint: false,
|
|
201
|
+
description: "Enable device orientation detection",
|
|
202
|
+
displayName: "Gyroscope"
|
|
163
203
|
}
|
|
164
204
|
},
|
|
165
205
|
isDefaultExport: true,
|
|
166
206
|
defaultStyles: {
|
|
167
207
|
maxWidth: "100%"
|
|
168
208
|
}
|
|
169
|
-
}
|
|
209
|
+
};
|
|
210
|
+
function registerTilt(loader, customTiltMeta) {
|
|
211
|
+
if (loader) {
|
|
212
|
+
loader.registerComponent(Tilt, customTiltMeta != null ? customTiltMeta : parallaxTiltMeta);
|
|
213
|
+
} else {
|
|
214
|
+
registerComponent(Tilt, customTiltMeta != null ? customTiltMeta : parallaxTiltMeta);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
170
217
|
|
|
171
218
|
exports.default = Tilt;
|
|
219
|
+
exports.registerTilt = registerTilt;
|
|
172
220
|
//# sourceMappingURL=react-parallax-tilt.cjs.development.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-parallax-tilt.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport default function Tilt(props: ComponentProps<typeof ReactParallaxTilt>) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nregisterComponent(Tilt, {\n name: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n // defaultValueHint: true,\n description: \"Enable tilt effect\",\n },\n tiltReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse tilt direction\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description:\n \"Which axis should be enabled (unset means both are enabled)\",\n },\n glareEnable: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable glare effect\",\n },\n glareMaxOpacity: {\n type: \"number\",\n // defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n // defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n },\n glareBorderRadius: {\n type: \"string\",\n // defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n // defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n },\n glareReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse glare direction\",\n },\n scale: {\n type: \"number\",\n // defaultValueHint: 1,\n description: \"Scale of the element\",\n },\n perspective: {\n type: \"number\",\n // defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n },\n flipVertically: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element horizontally\",\n },\n reset: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reset the element to its original state\",\n },\n transitionEasing: {\n type: \"string\",\n // defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n },\n transitionSpeed: {\n type: \"number\",\n // defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n },\n trackOnWindow: {\n type: \"boolean\",\n // defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n },\n gyroscope: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable device orientation detection\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n});\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","registerComponent","name","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-parallax-tilt.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n defaultValueHint: true,\n description: \"Enable tilt effect\",\n displayName: \"Enable\",\n },\n tiltReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse tilt direction\",\n displayName: \"Reverse\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n displayName: \"Angle X Initial\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n displayName: \"Angle Y Initial\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n displayName: \"Max Angle X\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n displayName: \"Max Angle Y\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description: \"Which axis should be enabled\",\n defaultValueHint: \"both\",\n displayName: \"Axis\",\n },\n glareEnable: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable glare effect\",\n displayName: \"Glare Enable\",\n },\n glareMaxOpacity: {\n type: \"number\",\n defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n displayName: \"Glare Max Opacity\",\n hidden: (props) => !props.glareEnable,\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n displayName: \"Glare Color\",\n hidden: (props) => !props.glareEnable,\n },\n glareBorderRadius: {\n type: \"string\",\n defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n displayName: \"Glare Border Radius\",\n hidden: (props) => !props.glareEnable,\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n displayName: \"Glare Position\",\n hidden: (props) => !props.glareEnable,\n },\n glareReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse glare direction\",\n displayName: \"Glare Reverse\",\n hidden: (props) => !props.glareEnable,\n },\n scale: {\n type: \"number\",\n defaultValueHint: 1,\n description: \"Scale of the element\",\n displayName: \"Scale\",\n },\n perspective: {\n type: \"number\",\n defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n displayName: \"Perspective\",\n },\n flipVertically: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element vertically\",\n displayName: \"Flip Vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element horizontally\",\n displayName: \"Flip Horizontally\",\n },\n reset: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reset the element to its original state\",\n displayName: \"Reset\",\n },\n transitionEasing: {\n type: \"string\",\n defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n displayName: \"Transition Easing\",\n },\n transitionSpeed: {\n type: \"number\",\n defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n displayName: \"Transition Speed\",\n },\n trackOnWindow: {\n type: \"boolean\",\n defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n displayName: \"Track On Window\",\n },\n gyroscope: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable device orientation detection\",\n displayName: \"Gyroscope\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","defaultValueHint","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","hidden","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","registerTilt","loader","customTiltMeta","registerComponent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),i=e(require("react")),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),i=e(require("react")),a=e(require("react-parallax-tilt"));function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a])}return e}).apply(this,arguments)}function n(e){var t;return i.createElement(a,Object.assign({},e,{style:l({transformStyle:"preserve-3d"},null!=(t=e.style)?t:{})}))}var r={name:"hostless-parallax-tilt",displayName:"Tilt",importName:"Tilt",importPath:"@plasmicpkgs/react-parallax-tilt",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},tiltEnable:{type:"boolean",defaultValueHint:!0,description:"Enable tilt effect",displayName:"Enable"},tiltReverse:{type:"boolean",defaultValueHint:!1,description:"Reverse tilt direction",displayName:"Reverse"},tiltAngleXInitial:{type:"number",defaultValueHint:0,description:"Initial tilt angle in degrees on X axis",displayName:"Angle X Initial"},tiltAngleYInitial:{type:"number",defaultValueHint:0,description:"Initial tilt angle in degrees on Y axis",displayName:"Angle Y Initial"},tiltMaxAngleX:{type:"number",defaultValueHint:20,description:"Maximum tilt angle in degrees on X axis",displayName:"Max Angle X"},tiltMaxAngleY:{type:"number",defaultValueHint:20,description:"Maximum tilt angle in degrees on Y axis",displayName:"Max Angle Y"},tiltAxis:{type:"choice",options:["x","y"],description:"Which axis should be enabled",defaultValueHint:"both",displayName:"Axis"},glareEnable:{type:"boolean",defaultValueHint:!1,description:"Enable glare effect",displayName:"Glare Enable"},glareMaxOpacity:{type:"number",defaultValueHint:.7,description:"Maximum opacity of glare effect",displayName:"Glare Max Opacity",hidden:function(e){return!e.glareEnable}},glareColor:{type:"string",defaultValueHint:"#ffffff",description:"Color of glare effect",displayName:"Glare Color",hidden:function(e){return!e.glareEnable}},glareBorderRadius:{type:"string",defaultValueHint:"0",description:"Border radius of glare effect",displayName:"Glare Border Radius",hidden:function(e){return!e.glareEnable}},glarePosition:{type:"choice",options:["top","bottom","left","right","all"],defaultValueHint:"bottom",description:"Position of the glare effect",displayName:"Glare Position",hidden:function(e){return!e.glareEnable}},glareReverse:{type:"boolean",defaultValueHint:!1,description:"Reverse glare direction",displayName:"Glare Reverse",hidden:function(e){return!e.glareEnable}},scale:{type:"number",defaultValueHint:1,description:"Scale of the element",displayName:"Scale"},perspective:{type:"number",defaultValueHint:1e3,description:"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.",displayName:"Perspective"},flipVertically:{type:"boolean",defaultValueHint:!1,description:"Flip the element vertically",displayName:"Flip Vertically"},flipHorizontally:{type:"boolean",defaultValueHint:!1,description:"Flip the element horizontally",displayName:"Flip Horizontally"},reset:{type:"boolean",defaultValueHint:!1,description:"Reset the element to its original state",displayName:"Reset"},transitionEasing:{type:"string",defaultValueHint:"cubic-bezier(.03,.98,.52,.99)",description:"Easing function for the transition",displayName:"Transition Easing"},transitionSpeed:{type:"number",defaultValueHint:400,description:"Transition speed in milliseconds",displayName:"Transition Speed"},trackOnWindow:{type:"boolean",defaultValueHint:!1,description:"Track the mouse position on the whole window, not just on the element",displayName:"Track On Window"},gyroscope:{type:"boolean",defaultValueHint:!1,description:"Enable device orientation detection",displayName:"Gyroscope"}},isDefaultExport:!0,defaultStyles:{maxWidth:"100%"}};exports.default=n,exports.registerTilt=function(e,i){e?e.registerComponent(n,null!=i?i:r):t(n,null!=i?i:r)};
|
|
2
2
|
//# sourceMappingURL=react-parallax-tilt.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-parallax-tilt.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport default function Tilt(props:
|
|
1
|
+
{"version":3,"file":"react-parallax-tilt.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n defaultValueHint: true,\n description: \"Enable tilt effect\",\n displayName: \"Enable\",\n },\n tiltReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse tilt direction\",\n displayName: \"Reverse\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n displayName: \"Angle X Initial\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n displayName: \"Angle Y Initial\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n displayName: \"Max Angle X\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n displayName: \"Max Angle Y\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description: \"Which axis should be enabled\",\n defaultValueHint: \"both\",\n displayName: \"Axis\",\n },\n glareEnable: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable glare effect\",\n displayName: \"Glare Enable\",\n },\n glareMaxOpacity: {\n type: \"number\",\n defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n displayName: \"Glare Max Opacity\",\n hidden: (props) => !props.glareEnable,\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n displayName: \"Glare Color\",\n hidden: (props) => !props.glareEnable,\n },\n glareBorderRadius: {\n type: \"string\",\n defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n displayName: \"Glare Border Radius\",\n hidden: (props) => !props.glareEnable,\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n displayName: \"Glare Position\",\n hidden: (props) => !props.glareEnable,\n },\n glareReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse glare direction\",\n displayName: \"Glare Reverse\",\n hidden: (props) => !props.glareEnable,\n },\n scale: {\n type: \"number\",\n defaultValueHint: 1,\n description: \"Scale of the element\",\n displayName: \"Scale\",\n },\n perspective: {\n type: \"number\",\n defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n displayName: \"Perspective\",\n },\n flipVertically: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element vertically\",\n displayName: \"Flip Vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element horizontally\",\n displayName: \"Flip Horizontally\",\n },\n reset: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reset the element to its original state\",\n displayName: \"Reset\",\n },\n transitionEasing: {\n type: \"string\",\n defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n displayName: \"Transition Easing\",\n },\n transitionSpeed: {\n type: \"number\",\n defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n displayName: \"Transition Speed\",\n },\n trackOnWindow: {\n type: \"boolean\",\n defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n displayName: \"Track On Window\",\n },\n gyroscope: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable device orientation detection\",\n displayName: \"Gyroscope\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","defaultValueHint","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","hidden","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","loader","customTiltMeta","registerComponent"],"mappings":"mdAQwBA,EAAKC,gBAEzBC,gBAACC,mBACKF,GACJG,SACEC,eAAgB,wBACZJ,EAAMG,SAAS,OAM3B,IAAME,EAA6C,CACjDC,KAAM,yBACNC,YAAa,OACbC,WAAY,OACZC,WAAY,mCACZT,MAAO,CACLU,SAAU,CACRC,KAAM,OACNC,aAAc,CACZD,KAAM,MACNE,IAAK,kCACLV,MAAO,CACLW,SAAU,UAIhBC,WAAY,CACVJ,KAAM,UACNK,kBAAkB,EAClBC,YAAa,qBACbV,YAAa,UAEfW,YAAa,CACXP,KAAM,UACNK,kBAAkB,EAClBC,YAAa,yBACbV,YAAa,WAEfY,kBAAmB,CACjBR,KAAM,SACNK,iBAAkB,EAClBC,YAAa,0CACbV,YAAa,mBAEfa,kBAAmB,CACjBT,KAAM,SACNK,iBAAkB,EAClBC,YAAa,0CACbV,YAAa,mBAEfc,cAAe,CACbV,KAAM,SACNK,iBAAkB,GAClBC,YAAa,0CACbV,YAAa,eAEfe,cAAe,CACbX,KAAM,SACNK,iBAAkB,GAClBC,YAAa,0CACbV,YAAa,eAEfgB,SAAU,CACRZ,KAAM,SACNa,QAAS,CAAC,IAAK,KACfP,YAAa,+BACbD,iBAAkB,OAClBT,YAAa,QAEfkB,YAAa,CACXd,KAAM,UACNK,kBAAkB,EAClBC,YAAa,sBACbV,YAAa,gBAEfmB,gBAAiB,CACff,KAAM,SACNK,iBAAkB,GAClBC,YAAa,kCACbV,YAAa,oBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BG,WAAY,CAEVjB,KAAM,SACNK,iBAAkB,UAClBC,YAAa,wBACbV,YAAa,cACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BI,kBAAmB,CACjBlB,KAAM,SACNK,iBAAkB,IAClBC,YAAa,gCACbV,YAAa,sBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BK,cAAe,CACbnB,KAAM,SACNa,QAAS,CAAC,MAAO,SAAU,OAAQ,QAAS,OAC5CR,iBAAkB,SAClBC,YAAa,+BACbV,YAAa,iBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BM,aAAc,CACZpB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,0BACbV,YAAa,gBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BO,MAAO,CACLrB,KAAM,SACNK,iBAAkB,EAClBC,YAAa,uBACbV,YAAa,SAEf0B,YAAa,CACXtB,KAAM,SACNK,iBAAkB,IAClBC,YACE,iJACFV,YAAa,eAEf2B,eAAgB,CACdvB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,8BACbV,YAAa,mBAEf4B,iBAAkB,CAChBxB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,gCACbV,YAAa,qBAEf6B,MAAO,CACLzB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,0CACbV,YAAa,SAEf8B,iBAAkB,CAChB1B,KAAM,SACNK,iBAAkB,gCAClBC,YAAa,qCACbV,YAAa,qBAEf+B,gBAAiB,CACf3B,KAAM,SACNK,iBAAkB,IAClBC,YAAa,mCACbV,YAAa,oBAEfgC,cAAe,CACb5B,KAAM,UACNK,kBAAkB,EAClBC,YACE,wEACFV,YAAa,mBAEfiC,UAAW,CACT7B,KAAM,UACNK,kBAAkB,EAClBC,YAAa,sCACbV,YAAa,cAGjBkC,iBAAiB,EACjBC,cAAe,CACb5B,SAAU,yDAKZ6B,EACAC,GAEID,EACFA,EAAOE,kBAAkB9C,QAAM6C,EAAAA,EAAkBvC,GAEjDwC,EAAkB9C,QAAM6C,EAAAA,EAAkBvC"}
|
|
@@ -29,8 +29,10 @@ function Tilt(props) {
|
|
|
29
29
|
}, (_props$style = props.style) != null ? _props$style : {})
|
|
30
30
|
}));
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
name: "
|
|
32
|
+
var parallaxTiltMeta = {
|
|
33
|
+
name: "hostless-parallax-tilt",
|
|
34
|
+
displayName: "Tilt",
|
|
35
|
+
importName: "Tilt",
|
|
34
36
|
importPath: "@plasmicpkgs/react-parallax-tilt",
|
|
35
37
|
props: {
|
|
36
38
|
children: {
|
|
@@ -45,122 +47,168 @@ registerComponent(Tilt, {
|
|
|
45
47
|
},
|
|
46
48
|
tiltEnable: {
|
|
47
49
|
type: "boolean",
|
|
48
|
-
|
|
49
|
-
description: "Enable tilt effect"
|
|
50
|
+
defaultValueHint: true,
|
|
51
|
+
description: "Enable tilt effect",
|
|
52
|
+
displayName: "Enable"
|
|
50
53
|
},
|
|
51
54
|
tiltReverse: {
|
|
52
55
|
type: "boolean",
|
|
53
|
-
|
|
54
|
-
description: "Reverse tilt direction"
|
|
56
|
+
defaultValueHint: false,
|
|
57
|
+
description: "Reverse tilt direction",
|
|
58
|
+
displayName: "Reverse"
|
|
55
59
|
},
|
|
56
60
|
tiltAngleXInitial: {
|
|
57
61
|
type: "number",
|
|
58
|
-
|
|
59
|
-
description: "Initial tilt angle in degrees on X axis"
|
|
62
|
+
defaultValueHint: 0,
|
|
63
|
+
description: "Initial tilt angle in degrees on X axis",
|
|
64
|
+
displayName: "Angle X Initial"
|
|
60
65
|
},
|
|
61
66
|
tiltAngleYInitial: {
|
|
62
67
|
type: "number",
|
|
63
|
-
|
|
64
|
-
description: "Initial tilt angle in degrees on Y axis"
|
|
68
|
+
defaultValueHint: 0,
|
|
69
|
+
description: "Initial tilt angle in degrees on Y axis",
|
|
70
|
+
displayName: "Angle Y Initial"
|
|
65
71
|
},
|
|
66
72
|
tiltMaxAngleX: {
|
|
67
73
|
type: "number",
|
|
68
|
-
|
|
69
|
-
description: "Maximum tilt angle in degrees on X axis"
|
|
74
|
+
defaultValueHint: 20,
|
|
75
|
+
description: "Maximum tilt angle in degrees on X axis",
|
|
76
|
+
displayName: "Max Angle X"
|
|
70
77
|
},
|
|
71
78
|
tiltMaxAngleY: {
|
|
72
79
|
type: "number",
|
|
73
|
-
|
|
74
|
-
description: "Maximum tilt angle in degrees on Y axis"
|
|
80
|
+
defaultValueHint: 20,
|
|
81
|
+
description: "Maximum tilt angle in degrees on Y axis",
|
|
82
|
+
displayName: "Max Angle Y"
|
|
75
83
|
},
|
|
76
84
|
tiltAxis: {
|
|
77
85
|
type: "choice",
|
|
78
86
|
options: ["x", "y"],
|
|
79
|
-
description: "Which axis should be enabled
|
|
87
|
+
description: "Which axis should be enabled",
|
|
88
|
+
defaultValueHint: "both",
|
|
89
|
+
displayName: "Axis"
|
|
80
90
|
},
|
|
81
91
|
glareEnable: {
|
|
82
92
|
type: "boolean",
|
|
83
|
-
|
|
84
|
-
description: "Enable glare effect"
|
|
93
|
+
defaultValueHint: false,
|
|
94
|
+
description: "Enable glare effect",
|
|
95
|
+
displayName: "Glare Enable"
|
|
85
96
|
},
|
|
86
97
|
glareMaxOpacity: {
|
|
87
98
|
type: "number",
|
|
88
|
-
|
|
89
|
-
description: "Maximum opacity of glare effect"
|
|
99
|
+
defaultValueHint: 0.7,
|
|
100
|
+
description: "Maximum opacity of glare effect",
|
|
101
|
+
displayName: "Glare Max Opacity",
|
|
102
|
+
hidden: function hidden(props) {
|
|
103
|
+
return !props.glareEnable;
|
|
104
|
+
}
|
|
90
105
|
},
|
|
91
106
|
glareColor: {
|
|
92
107
|
// TODO replace with color picker
|
|
93
108
|
type: "string",
|
|
94
|
-
|
|
95
|
-
description: "Color of glare effect"
|
|
109
|
+
defaultValueHint: "#ffffff",
|
|
110
|
+
description: "Color of glare effect",
|
|
111
|
+
displayName: "Glare Color",
|
|
112
|
+
hidden: function hidden(props) {
|
|
113
|
+
return !props.glareEnable;
|
|
114
|
+
}
|
|
96
115
|
},
|
|
97
116
|
glareBorderRadius: {
|
|
98
117
|
type: "string",
|
|
99
|
-
|
|
100
|
-
description: "Border radius of glare effect"
|
|
118
|
+
defaultValueHint: '0',
|
|
119
|
+
description: "Border radius of glare effect",
|
|
120
|
+
displayName: "Glare Border Radius",
|
|
121
|
+
hidden: function hidden(props) {
|
|
122
|
+
return !props.glareEnable;
|
|
123
|
+
}
|
|
101
124
|
},
|
|
102
125
|
glarePosition: {
|
|
103
126
|
type: "choice",
|
|
104
127
|
options: ["top", "bottom", "left", "right", "all"],
|
|
105
|
-
|
|
106
|
-
description: "Position of the glare effect"
|
|
128
|
+
defaultValueHint: 'bottom',
|
|
129
|
+
description: "Position of the glare effect",
|
|
130
|
+
displayName: "Glare Position",
|
|
131
|
+
hidden: function hidden(props) {
|
|
132
|
+
return !props.glareEnable;
|
|
133
|
+
}
|
|
107
134
|
},
|
|
108
135
|
glareReverse: {
|
|
109
136
|
type: "boolean",
|
|
110
|
-
|
|
111
|
-
description: "Reverse glare direction"
|
|
137
|
+
defaultValueHint: false,
|
|
138
|
+
description: "Reverse glare direction",
|
|
139
|
+
displayName: "Glare Reverse",
|
|
140
|
+
hidden: function hidden(props) {
|
|
141
|
+
return !props.glareEnable;
|
|
142
|
+
}
|
|
112
143
|
},
|
|
113
144
|
scale: {
|
|
114
145
|
type: "number",
|
|
115
|
-
|
|
116
|
-
description: "Scale of the element"
|
|
146
|
+
defaultValueHint: 1,
|
|
147
|
+
description: "Scale of the element",
|
|
148
|
+
displayName: "Scale"
|
|
117
149
|
},
|
|
118
150
|
perspective: {
|
|
119
151
|
type: "number",
|
|
120
|
-
|
|
121
|
-
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets."
|
|
152
|
+
defaultValueHint: 1000,
|
|
153
|
+
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.",
|
|
154
|
+
displayName: "Perspective"
|
|
122
155
|
},
|
|
123
156
|
flipVertically: {
|
|
124
157
|
type: "boolean",
|
|
125
|
-
|
|
126
|
-
description: "Flip the element vertically"
|
|
158
|
+
defaultValueHint: false,
|
|
159
|
+
description: "Flip the element vertically",
|
|
160
|
+
displayName: "Flip Vertically"
|
|
127
161
|
},
|
|
128
162
|
flipHorizontally: {
|
|
129
163
|
type: "boolean",
|
|
130
|
-
|
|
131
|
-
description: "Flip the element horizontally"
|
|
164
|
+
defaultValueHint: false,
|
|
165
|
+
description: "Flip the element horizontally",
|
|
166
|
+
displayName: "Flip Horizontally"
|
|
132
167
|
},
|
|
133
168
|
reset: {
|
|
134
169
|
type: "boolean",
|
|
135
|
-
|
|
136
|
-
description: "Reset the element to its original state"
|
|
170
|
+
defaultValueHint: false,
|
|
171
|
+
description: "Reset the element to its original state",
|
|
172
|
+
displayName: "Reset"
|
|
137
173
|
},
|
|
138
174
|
transitionEasing: {
|
|
139
175
|
type: "string",
|
|
140
|
-
|
|
141
|
-
description: "Easing function for the transition"
|
|
176
|
+
defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',
|
|
177
|
+
description: "Easing function for the transition",
|
|
178
|
+
displayName: "Transition Easing"
|
|
142
179
|
},
|
|
143
180
|
transitionSpeed: {
|
|
144
181
|
type: "number",
|
|
145
|
-
|
|
146
|
-
description: "Transition speed in milliseconds"
|
|
182
|
+
defaultValueHint: 400,
|
|
183
|
+
description: "Transition speed in milliseconds",
|
|
184
|
+
displayName: "Transition Speed"
|
|
147
185
|
},
|
|
148
186
|
trackOnWindow: {
|
|
149
187
|
type: "boolean",
|
|
150
|
-
|
|
151
|
-
description: "Track the mouse position on the whole window, not just on the element"
|
|
188
|
+
defaultValueHint: false,
|
|
189
|
+
description: "Track the mouse position on the whole window, not just on the element",
|
|
190
|
+
displayName: "Track On Window"
|
|
152
191
|
},
|
|
153
192
|
gyroscope: {
|
|
154
193
|
type: "boolean",
|
|
155
|
-
|
|
156
|
-
description: "Enable device orientation detection"
|
|
194
|
+
defaultValueHint: false,
|
|
195
|
+
description: "Enable device orientation detection",
|
|
196
|
+
displayName: "Gyroscope"
|
|
157
197
|
}
|
|
158
198
|
},
|
|
159
199
|
isDefaultExport: true,
|
|
160
200
|
defaultStyles: {
|
|
161
201
|
maxWidth: "100%"
|
|
162
202
|
}
|
|
163
|
-
}
|
|
203
|
+
};
|
|
204
|
+
function registerTilt(loader, customTiltMeta) {
|
|
205
|
+
if (loader) {
|
|
206
|
+
loader.registerComponent(Tilt, customTiltMeta != null ? customTiltMeta : parallaxTiltMeta);
|
|
207
|
+
} else {
|
|
208
|
+
registerComponent(Tilt, customTiltMeta != null ? customTiltMeta : parallaxTiltMeta);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
164
211
|
|
|
165
212
|
export default Tilt;
|
|
213
|
+
export { registerTilt };
|
|
166
214
|
//# sourceMappingURL=react-parallax-tilt.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-parallax-tilt.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport default function Tilt(props: ComponentProps<typeof ReactParallaxTilt>) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nregisterComponent(Tilt, {\n name: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n // defaultValueHint: true,\n description: \"Enable tilt effect\",\n },\n tiltReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse tilt direction\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description:\n \"Which axis should be enabled (unset means both are enabled)\",\n },\n glareEnable: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable glare effect\",\n },\n glareMaxOpacity: {\n type: \"number\",\n // defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n // defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n },\n glareBorderRadius: {\n type: \"string\",\n // defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n // defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n },\n glareReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse glare direction\",\n },\n scale: {\n type: \"number\",\n // defaultValueHint: 1,\n description: \"Scale of the element\",\n },\n perspective: {\n type: \"number\",\n // defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n },\n flipVertically: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element horizontally\",\n },\n reset: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reset the element to its original state\",\n },\n transitionEasing: {\n type: \"string\",\n // defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n },\n transitionSpeed: {\n type: \"number\",\n // defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n },\n trackOnWindow: {\n type: \"boolean\",\n // defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n },\n gyroscope: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable device orientation detection\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n});\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","registerComponent","name","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-parallax-tilt.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n defaultValueHint: true,\n description: \"Enable tilt effect\",\n displayName: \"Enable\",\n },\n tiltReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse tilt direction\",\n displayName: \"Reverse\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n displayName: \"Angle X Initial\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n displayName: \"Angle Y Initial\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n displayName: \"Max Angle X\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n displayName: \"Max Angle Y\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description: \"Which axis should be enabled\",\n defaultValueHint: \"both\",\n displayName: \"Axis\",\n },\n glareEnable: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable glare effect\",\n displayName: \"Glare Enable\",\n },\n glareMaxOpacity: {\n type: \"number\",\n defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n displayName: \"Glare Max Opacity\",\n hidden: (props) => !props.glareEnable,\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n displayName: \"Glare Color\",\n hidden: (props) => !props.glareEnable,\n },\n glareBorderRadius: {\n type: \"string\",\n defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n displayName: \"Glare Border Radius\",\n hidden: (props) => !props.glareEnable,\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n displayName: \"Glare Position\",\n hidden: (props) => !props.glareEnable,\n },\n glareReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse glare direction\",\n displayName: \"Glare Reverse\",\n hidden: (props) => !props.glareEnable,\n },\n scale: {\n type: \"number\",\n defaultValueHint: 1,\n description: \"Scale of the element\",\n displayName: \"Scale\",\n },\n perspective: {\n type: \"number\",\n defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n displayName: \"Perspective\",\n },\n flipVertically: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element vertically\",\n displayName: \"Flip Vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element horizontally\",\n displayName: \"Flip Horizontally\",\n },\n reset: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reset the element to its original state\",\n displayName: \"Reset\",\n },\n transitionEasing: {\n type: \"string\",\n defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n displayName: \"Transition Easing\",\n },\n transitionSpeed: {\n type: \"number\",\n defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n displayName: \"Transition Speed\",\n },\n trackOnWindow: {\n type: \"boolean\",\n defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n displayName: \"Track On Window\",\n },\n gyroscope: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable device orientation detection\",\n displayName: \"Gyroscope\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","defaultValueHint","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","hidden","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","registerTilt","loader","customTiltMeta","registerComponent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-parallax-tilt",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Plasmic registration call for the HTML5 video element",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"typescript": "^3.9.7"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@plasmicapp/host": "^0.0.32",
|
|
40
39
|
"react-parallax-tilt": "^1.5.74"
|
|
41
40
|
},
|
|
42
41
|
"peerDependencies": {
|
|
42
|
+
"@plasmicapp/host": "^1.0.0",
|
|
43
43
|
"react": ">=16.8.0",
|
|
44
44
|
"react-dom": ">=16.8.0"
|
|
45
45
|
}
|