@levita-js/vue 0.1.6 → 0.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/index.cjs +5 -2
- package/dist/index.mjs +5 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -4
package/dist/index.cjs
CHANGED
|
@@ -87,7 +87,7 @@ const Tilt = (0, vue.defineComponent)({
|
|
|
87
87
|
}
|
|
88
88
|
},
|
|
89
89
|
slots: Object,
|
|
90
|
-
setup(props, { slots, expose }) {
|
|
90
|
+
setup(props, { slots, attrs, expose }) {
|
|
91
91
|
const elRef = (0, vue.ref)(null);
|
|
92
92
|
let instance = null;
|
|
93
93
|
/** Create a fresh Levita instance on the container element. */
|
|
@@ -115,7 +115,10 @@ const Tilt = (0, vue.defineComponent)({
|
|
|
115
115
|
instance = null;
|
|
116
116
|
});
|
|
117
117
|
(0, vue.watch)(() => levita_js.OPTION_KEYS.map((k) => props[k]), () => init());
|
|
118
|
-
return () => (0, vue.h)("div", {
|
|
118
|
+
return () => (0, vue.h)("div", {
|
|
119
|
+
...attrs,
|
|
120
|
+
ref: elRef
|
|
121
|
+
}, slots.default?.({}));
|
|
119
122
|
}
|
|
120
123
|
});
|
|
121
124
|
|
package/dist/index.mjs
CHANGED
|
@@ -86,7 +86,7 @@ const Tilt = defineComponent({
|
|
|
86
86
|
}
|
|
87
87
|
},
|
|
88
88
|
slots: Object,
|
|
89
|
-
setup(props, { slots, expose }) {
|
|
89
|
+
setup(props, { slots, attrs, expose }) {
|
|
90
90
|
const elRef = ref(null);
|
|
91
91
|
let instance = null;
|
|
92
92
|
/** Create a fresh Levita instance on the container element. */
|
|
@@ -114,7 +114,10 @@ const Tilt = defineComponent({
|
|
|
114
114
|
instance = null;
|
|
115
115
|
});
|
|
116
116
|
watch(() => OPTION_KEYS.map((k) => props[k]), () => init());
|
|
117
|
-
return () => h("div", {
|
|
117
|
+
return () => h("div", {
|
|
118
|
+
...attrs,
|
|
119
|
+
ref: elRef
|
|
120
|
+
}, slots.default?.({}));
|
|
118
121
|
}
|
|
119
122
|
});
|
|
120
123
|
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { Axis, GyroscopeMode } from \"levita-js\";\nimport { buildOptions, Levita, OPTION_KEYS } from \"levita-js\";\nimport {\n\tdefineComponent,\n\th,\n\tonMounted,\n\tonUnmounted,\n\ttype PropType,\n\tref,\n\ttype SlotsType,\n\twatch,\n} from \"vue\";\n\n/**\n * Vue 3 wrapper for the Levita 3D tilt effect.\n *\n * Accepts all `LevitaOptions` as props. The Levita instance is created\n * on mount and destroyed on unmount. Changing any tilt prop recreates\n * the instance.\n *\n * Exposes `element`, `instance`, and `requestPermission()` via template ref.\n *\n * @example\n * ```vue\n * <script setup>\n * import { Tilt } from '@levita-js/vue';\n * import 'levita-js/style.css';\n * </script>\n *\n * <template>\n * <Tilt :glare=\"true\" :shadow=\"true\" :max=\"20\">\n * <h1>Hello</h1>\n * </Tilt>\n * </template>\n * ```\n */\nexport const Tilt = defineComponent({\n\tname: \"Tilt\",\n\n\tprops: {\n\t\tmax: { type: Number, default: undefined },\n\t\tperspective: { type: Number, default: undefined },\n\t\tscale: { type: Number, default: undefined },\n\t\tspeed: { type: Number, default: undefined },\n\t\teasing: { type: String, default: undefined },\n\t\treverse: { type: Boolean, default: undefined },\n\t\taxis: { type: String as PropType<Axis>, default: undefined },\n\t\treset: { type: Boolean, default: undefined },\n\t\tglare: { type: Boolean, default: undefined },\n\t\tmaxGlare: { type: Number, default: undefined },\n\t\tshadow: { type: Boolean, default: undefined },\n\t\tgyroscope: {\n\t\t\ttype: [String, Boolean] as PropType<GyroscopeMode>,\n\t\t\tdefault: undefined,\n\t\t},\n\t\tdisabled: { type: Boolean, default: undefined },\n\t\teventsEl: { type: Object as PropType<HTMLElement | null>, default: undefined },\n\t},\n\n\tslots: Object as SlotsType<{ default: Record<string, never> }>,\n\n\tsetup(props, { slots, expose }) {\n\t\tconst elRef = ref<HTMLElement | null>(null);\n\t\tlet instance: Levita | null = null;\n\n\t\t/** Create a fresh Levita instance on the container element. */\n\t\tconst init = () => {\n\t\t\tif (!elRef.value) return;\n\t\t\tinstance?.destroy();\n\t\t\tinstance = new Levita(elRef.value, buildOptions(props));\n\t\t};\n\n\t\t/** Request accelerometer permission (must be called from a user gesture on iOS). */\n\t\tconst requestPermission = async (): Promise<boolean> => {\n\t\t\treturn (await instance?.requestPermission()) ?? false;\n\t\t};\n\n\t\texpose({\n\t\t\t/** The underlying DOM element. */\n\t\t\tget element() {\n\t\t\t\treturn elRef.value;\n\t\t\t},\n\t\t\t/** The Levita instance driving the tilt effect. */\n\t\t\tget instance() {\n\t\t\t\treturn instance;\n\t\t\t},\n\t\t\trequestPermission,\n\t\t});\n\n\t\tonMounted(init);\n\n\t\tonUnmounted(() => {\n\t\t\tinstance?.destroy();\n\t\t\tinstance = null;\n\t\t});\n\n\t\twatch(\n\t\t\t() => OPTION_KEYS.map((k) => props[k]),\n\t\t\t() => init(),\n\t\t);\n\n\t\treturn () => h(\"div\", { ref: elRef }, slots.default?.({}));\n\t},\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,OAAO,gBAAgB;CACnC,MAAM;CAEN,OAAO;EACN,KAAK;GAAE,MAAM;GAAQ,SAAS;GAAW;EACzC,aAAa;GAAE,MAAM;GAAQ,SAAS;GAAW;EACjD,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC3C,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC3C,QAAQ;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC5C,SAAS;GAAE,MAAM;GAAS,SAAS;GAAW;EAC9C,MAAM;GAAE,MAAM;GAA0B,SAAS;GAAW;EAC5D,OAAO;GAAE,MAAM;GAAS,SAAS;GAAW;EAC5C,OAAO;GAAE,MAAM;GAAS,SAAS;GAAW;EAC5C,UAAU;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC9C,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAW;EAC7C,WAAW;GACV,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACT;EACD,UAAU;GAAE,MAAM;GAAS,SAAS;GAAW;EAC/C,UAAU;GAAE,MAAM;GAAwC,SAAS;GAAW;EAC9E;CAED,OAAO;CAEP,MAAM,OAAO,EAAE,OAAO,UAAU;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { Axis, GyroscopeMode } from \"levita-js\";\nimport { buildOptions, Levita, OPTION_KEYS } from \"levita-js\";\nimport {\n\tdefineComponent,\n\th,\n\tonMounted,\n\tonUnmounted,\n\ttype PropType,\n\tref,\n\ttype SlotsType,\n\twatch,\n} from \"vue\";\n\n/**\n * Vue 3 wrapper for the Levita 3D tilt effect.\n *\n * Accepts all `LevitaOptions` as props. The Levita instance is created\n * on mount and destroyed on unmount. Changing any tilt prop recreates\n * the instance.\n *\n * Exposes `element`, `instance`, and `requestPermission()` via template ref.\n *\n * @example\n * ```vue\n * <script setup>\n * import { Tilt } from '@levita-js/vue';\n * import 'levita-js/style.css';\n * </script>\n *\n * <template>\n * <Tilt :glare=\"true\" :shadow=\"true\" :max=\"20\">\n * <h1>Hello</h1>\n * </Tilt>\n * </template>\n * ```\n */\nexport const Tilt = defineComponent({\n\tname: \"Tilt\",\n\n\tprops: {\n\t\tmax: { type: Number, default: undefined },\n\t\tperspective: { type: Number, default: undefined },\n\t\tscale: { type: Number, default: undefined },\n\t\tspeed: { type: Number, default: undefined },\n\t\teasing: { type: String, default: undefined },\n\t\treverse: { type: Boolean, default: undefined },\n\t\taxis: { type: String as PropType<Axis>, default: undefined },\n\t\treset: { type: Boolean, default: undefined },\n\t\tglare: { type: Boolean, default: undefined },\n\t\tmaxGlare: { type: Number, default: undefined },\n\t\tshadow: { type: Boolean, default: undefined },\n\t\tgyroscope: {\n\t\t\ttype: [String, Boolean] as PropType<GyroscopeMode>,\n\t\t\tdefault: undefined,\n\t\t},\n\t\tdisabled: { type: Boolean, default: undefined },\n\t\teventsEl: { type: Object as PropType<HTMLElement | null>, default: undefined },\n\t},\n\n\tslots: Object as SlotsType<{ default: Record<string, never> }>,\n\n\tsetup(props, { slots, attrs, expose }) {\n\t\tconst elRef = ref<HTMLElement | null>(null);\n\t\tlet instance: Levita | null = null;\n\n\t\t/** Create a fresh Levita instance on the container element. */\n\t\tconst init = () => {\n\t\t\tif (!elRef.value) return;\n\t\t\tinstance?.destroy();\n\t\t\tinstance = new Levita(elRef.value, buildOptions(props));\n\t\t};\n\n\t\t/** Request accelerometer permission (must be called from a user gesture on iOS). */\n\t\tconst requestPermission = async (): Promise<boolean> => {\n\t\t\treturn (await instance?.requestPermission()) ?? false;\n\t\t};\n\n\t\texpose({\n\t\t\t/** The underlying DOM element. */\n\t\t\tget element() {\n\t\t\t\treturn elRef.value;\n\t\t\t},\n\t\t\t/** The Levita instance driving the tilt effect. */\n\t\t\tget instance() {\n\t\t\t\treturn instance;\n\t\t\t},\n\t\t\trequestPermission,\n\t\t});\n\n\t\tonMounted(init);\n\n\t\tonUnmounted(() => {\n\t\t\tinstance?.destroy();\n\t\t\tinstance = null;\n\t\t});\n\n\t\twatch(\n\t\t\t() => OPTION_KEYS.map((k) => props[k]),\n\t\t\t() => init(),\n\t\t);\n\n\t\treturn () => h(\"div\", { ...attrs, ref: elRef }, slots.default?.({}));\n\t},\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,OAAO,gBAAgB;CACnC,MAAM;CAEN,OAAO;EACN,KAAK;GAAE,MAAM;GAAQ,SAAS;GAAW;EACzC,aAAa;GAAE,MAAM;GAAQ,SAAS;GAAW;EACjD,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC3C,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC3C,QAAQ;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC5C,SAAS;GAAE,MAAM;GAAS,SAAS;GAAW;EAC9C,MAAM;GAAE,MAAM;GAA0B,SAAS;GAAW;EAC5D,OAAO;GAAE,MAAM;GAAS,SAAS;GAAW;EAC5C,OAAO;GAAE,MAAM;GAAS,SAAS;GAAW;EAC5C,UAAU;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC9C,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAW;EAC7C,WAAW;GACV,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACT;EACD,UAAU;GAAE,MAAM;GAAS,SAAS;GAAW;EAC/C,UAAU;GAAE,MAAM;GAAwC,SAAS;GAAW;EAC9E;CAED,OAAO;CAEP,MAAM,OAAO,EAAE,OAAO,OAAO,UAAU;EACtC,MAAM,QAAQ,IAAwB,KAAK;EAC3C,IAAI,WAA0B;;EAG9B,MAAM,aAAa;AAClB,OAAI,CAAC,MAAM,MAAO;AAClB,aAAU,SAAS;AACnB,cAAW,IAAI,OAAO,MAAM,OAAO,aAAa,MAAM,CAAC;;;EAIxD,MAAM,oBAAoB,YAA8B;AACvD,UAAQ,MAAM,UAAU,mBAAmB,IAAK;;AAGjD,SAAO;GAEN,IAAI,UAAU;AACb,WAAO,MAAM;;GAGd,IAAI,WAAW;AACd,WAAO;;GAER;GACA,CAAC;AAEF,YAAU,KAAK;AAEf,oBAAkB;AACjB,aAAU,SAAS;AACnB,cAAW;IACV;AAEF,cACO,YAAY,KAAK,MAAM,MAAM,GAAG,QAChC,MAAM,CACZ;AAED,eAAa,EAAE,OAAO;GAAE,GAAG;GAAO,KAAK;GAAO,EAAE,MAAM,UAAU,EAAE,CAAC,CAAC;;CAErE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@levita-js/vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Vue wrapper for Levita 3D tilt & parallax",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -30,12 +30,13 @@
|
|
|
30
30
|
"vue": ">=3.3"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"levita-js": "0.
|
|
33
|
+
"levita-js": "0.2.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@vue/test-utils": "^2.4.6",
|
|
37
37
|
"tsdown": "^0.20.3",
|
|
38
|
-
"vue": "^3.5.0"
|
|
38
|
+
"vue": "^3.5.0",
|
|
39
|
+
"vue-tsc": "^2.2.0"
|
|
39
40
|
},
|
|
40
41
|
"license": "MIT",
|
|
41
42
|
"repository": {
|
|
@@ -45,6 +46,7 @@
|
|
|
45
46
|
},
|
|
46
47
|
"homepage": "https://github.com/Jeromearsene/levita#readme",
|
|
47
48
|
"scripts": {
|
|
48
|
-
"build": "tsdown"
|
|
49
|
+
"build": "tsdown",
|
|
50
|
+
"type-check": "vue-tsc --noEmit"
|
|
49
51
|
}
|
|
50
52
|
}
|