@levita-js/vue 0.2.1 → 0.3.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.
Files changed (8) hide show
  1. package/dist/index.cjs +8 -0
  2. package/dist/index.d.cts +18 -0
  3. package/dist/index.d.cts.map +1 -1
  4. package/dist/index.d.mts +18 -0
  5. package/dist/index.d.mts.map +1 -1
  6. package/dist/index.mjs +8 -0
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -77,6 +77,14 @@ const Tilt = (0, vue.defineComponent)({
77
77
  type: [String, Boolean],
78
78
  default: void 0
79
79
  },
80
+ gyroRange: {
81
+ type: Number,
82
+ default: void 0
83
+ },
84
+ gyroSmoothing: {
85
+ type: Number,
86
+ default: void 0
87
+ },
80
88
  disabled: {
81
89
  type: Boolean,
82
90
  default: void 0
package/dist/index.d.cts CHANGED
@@ -75,6 +75,14 @@ declare const Tilt: vue.DefineComponent<vue.ExtractPropTypes<{
75
75
  type: PropType<GyroscopeMode>;
76
76
  default: undefined;
77
77
  };
78
+ gyroRange: {
79
+ type: NumberConstructor;
80
+ default: undefined;
81
+ };
82
+ gyroSmoothing: {
83
+ type: NumberConstructor;
84
+ default: undefined;
85
+ };
78
86
  disabled: {
79
87
  type: BooleanConstructor;
80
88
  default: undefined;
@@ -134,6 +142,14 @@ declare const Tilt: vue.DefineComponent<vue.ExtractPropTypes<{
134
142
  type: PropType<GyroscopeMode>;
135
143
  default: undefined;
136
144
  };
145
+ gyroRange: {
146
+ type: NumberConstructor;
147
+ default: undefined;
148
+ };
149
+ gyroSmoothing: {
150
+ type: NumberConstructor;
151
+ default: undefined;
152
+ };
137
153
  disabled: {
138
154
  type: BooleanConstructor;
139
155
  default: undefined;
@@ -155,6 +171,8 @@ declare const Tilt: vue.DefineComponent<vue.ExtractPropTypes<{
155
171
  maxGlare: number;
156
172
  shadow: boolean;
157
173
  gyroscope: GyroscopeMode;
174
+ gyroRange: number;
175
+ gyroSmoothing: number;
158
176
  disabled: boolean;
159
177
  eventsEl: HTMLElement | null;
160
178
  }, SlotsType<{
package/dist/index.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;;AAoCA;;;;;;;;;;;;;;;;;;;;cAAa,IAAA,MAAI,eAAA,CAoBqB,GAAA,CApBrB,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAUS,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;UAIT,QAAA,CAAS,WAAA;;;oBApBtB,GAAA,CAAA,YAAA;;4GAoBqB,GAAA,CAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAVZ,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;UAIT,QAAA,CAAS,WAAA;;;;;;;;;;;;;;;;;;;WAGA,MAAA;AAAA"}
1
+ {"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;;AAoCA;;;;;;;;;;;;;;;;;;;;cAAa,IAAA,MAAI,eAAA,CAsBqB,GAAA,CAtBrB,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAUS,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;;;;;;;;;UAMT,QAAA,CAAS,WAAA;;;oBAtBtB,GAAA,CAAA,YAAA;;4GAsBqB,GAAA,CAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAZZ,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;;;;;;;;;UAMT,QAAA,CAAS,WAAA;;;;;;;;;;;;;;;;;;;;;WAGA,MAAA;AAAA"}
package/dist/index.d.mts CHANGED
@@ -75,6 +75,14 @@ declare const Tilt: vue.DefineComponent<vue.ExtractPropTypes<{
75
75
  type: PropType<GyroscopeMode>;
76
76
  default: undefined;
77
77
  };
78
+ gyroRange: {
79
+ type: NumberConstructor;
80
+ default: undefined;
81
+ };
82
+ gyroSmoothing: {
83
+ type: NumberConstructor;
84
+ default: undefined;
85
+ };
78
86
  disabled: {
79
87
  type: BooleanConstructor;
80
88
  default: undefined;
@@ -134,6 +142,14 @@ declare const Tilt: vue.DefineComponent<vue.ExtractPropTypes<{
134
142
  type: PropType<GyroscopeMode>;
135
143
  default: undefined;
136
144
  };
145
+ gyroRange: {
146
+ type: NumberConstructor;
147
+ default: undefined;
148
+ };
149
+ gyroSmoothing: {
150
+ type: NumberConstructor;
151
+ default: undefined;
152
+ };
137
153
  disabled: {
138
154
  type: BooleanConstructor;
139
155
  default: undefined;
@@ -155,6 +171,8 @@ declare const Tilt: vue.DefineComponent<vue.ExtractPropTypes<{
155
171
  maxGlare: number;
156
172
  shadow: boolean;
157
173
  gyroscope: GyroscopeMode;
174
+ gyroRange: number;
175
+ gyroSmoothing: number;
158
176
  disabled: boolean;
159
177
  eventsEl: HTMLElement | null;
160
178
  }, SlotsType<{
package/dist/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;;AAoCA;;;;;;;;;;;;;;;;;;;;cAAa,IAAA,MAAI,eAAA,CAoBqB,GAAA,CApBrB,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAUS,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;UAIT,QAAA,CAAS,WAAA;;;oBApBtB,GAAA,CAAA,YAAA;;4GAoBqB,GAAA,CAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAVZ,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;UAIT,QAAA,CAAS,WAAA;;;;;;;;;;;;;;;;;;;WAGA,MAAA;AAAA"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"mappings":";;;;;;;;AAoCA;;;;;;;;;;;;;;;;;;;;cAAa,IAAA,MAAI,eAAA,CAsBqB,GAAA,CAtBrB,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAUS,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;;;;;;;;;UAMT,QAAA,CAAS,WAAA;;;oBAtBtB,GAAA,CAAA,YAAA;;4GAsBqB,GAAA,CAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;UAZZ,QAAA,CAAS,IAAA;;;;;;;;;;;;;;;;;;;;UAML,QAAA,CAAS,aAAA;;;;;;;;;;;;;;;;UAMT,QAAA,CAAS,WAAA;;;;;;;;;;;;;;;;;;;;;WAGA,MAAA;AAAA"}
package/dist/index.mjs CHANGED
@@ -76,6 +76,14 @@ const Tilt = defineComponent({
76
76
  type: [String, Boolean],
77
77
  default: void 0
78
78
  },
79
+ gyroRange: {
80
+ type: Number,
81
+ default: void 0
82
+ },
83
+ gyroSmoothing: {
84
+ type: Number,
85
+ default: void 0
86
+ },
79
87
  disabled: {
80
88
  type: Boolean,
81
89
  default: void 0
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, 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"}
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\tgyroRange: { type: Number, default: undefined },\n\t\tgyroSmoothing: { type: Number, default: undefined },\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,WAAW;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC/C,eAAe;GAAE,MAAM;GAAQ,SAAS;GAAW;EACnD,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.2.1",
3
+ "version": "0.3.0",
4
4
  "description": "Vue wrapper for Levita 3D tilt & parallax",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -30,7 +30,7 @@
30
30
  "vue": ">=3.3"
31
31
  },
32
32
  "dependencies": {
33
- "levita-js": "0.2.1"
33
+ "levita-js": "0.3.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@vue/test-utils": "^2.4.6",