@levita-js/vue 0.3.0 → 0.3.1

package/README.md

@@ -5,7 +5,7 @@
 ## Installation
 
 ```bash
-npm install levita-js @levita-js/vue
+npm install @levita-js/vue
 ```
 
 ## Quick Start
@@ -13,7 +13,7 @@ npm install levita-js @levita-js/vue
 ```vue
 <script setup>
 import { Tilt } from "@levita-js/vue";
-import "levita-js/style.css";
+import "@levita-js/vue/style.css";
 </script>
 
 <template>

package/dist/index.cjs

@@ -16,7 +16,7 @@ let vue = require("vue");
 * ```vue
 * <script setup>
 * import { Tilt } from '@levita-js/vue';
-* import 'levita-js/style.css';
+* import '@levita-js/vue/style.css';
 * <\/script>
 *
 * <template>

package/dist/index.d.cts

@@ -16,7 +16,7 @@ import { Axis, GyroscopeMode } from "levita-js";
  * ```vue
  * <script setup>
  * import { Tilt } from '@levita-js/vue';
- * import 'levita-js/style.css';
+ * import '@levita-js/vue/style.css';
  * </script>
  *
  * <template>

package/dist/index.d.mts

@@ -16,7 +16,7 @@ import { PropType, SlotsType } from "vue";
  * ```vue
  * <script setup>
  * import { Tilt } from '@levita-js/vue';
- * import 'levita-js/style.css';
+ * import '@levita-js/vue/style.css';
  * </script>
  *
  * <template>

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
 * ```vue
 * <script setup>
 * import { Tilt } from '@levita-js/vue';
-* import 'levita-js/style.css';
+* import '@levita-js/vue/style.css';
 * <\/script>
 *
 * <template>

package/dist/index.mjs.map

@@ -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\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"}
+{"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/vue/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/dist/style.css

@@ -0,0 +1,57 @@
+.levita {
+	--levita-x: 0deg;
+	--levita-y: 0deg;
+	--levita-scale: 1;
+	--levita-perspective: 1000px;
+	--levita-speed: 0ms;
+	--levita-easing: ease-out;
+
+	transform: perspective(var(--levita-perspective)) rotateX(var(--levita-x))
+		rotateY(var(--levita-y)) scale3d(var(--levita-scale), var(--levita-scale), var(--levita-scale));
+	transform-style: preserve-3d;
+	transition: transform var(--levita-speed) var(--levita-easing);
+	will-change: transform;
+	touch-action: pinch-zoom;
+}
+
+/* Glare overlay */
+.levita-glare {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	pointer-events: none;
+	border-radius: inherit;
+}
+
+.levita-glare-inner {
+	--levita-glare-opacity: 0;
+	--levita-glare-x: 50%;
+	--levita-glare-y: 50%;
+
+	position: absolute;
+	inset: -50%;
+	background: radial-gradient(
+		circle at var(--levita-glare-x) var(--levita-glare-y),
+		rgba(255, 255, 255, var(--levita-glare-opacity)),
+		transparent 60%
+	);
+	transition: opacity var(--levita-speed) var(--levita-easing);
+}
+
+/* Dynamic shadow */
+.levita-shadow {
+	--levita-shadow-x: 0px;
+	--levita-shadow-y: 0px;
+
+	filter: drop-shadow(var(--levita-shadow-x) var(--levita-shadow-y) 20px rgba(0, 0, 0, 0.2));
+}
+
+/* Layers */
+[data-levita-offset] {
+	--levita-offset-x: calc(var(--levita-percent-x, 0) * var(--levita-offset, 0) * 0.15px);
+	--levita-offset-y: calc(var(--levita-percent-y, 0) * var(--levita-offset, 0) * 0.15px);
+	--levita-offset-z: calc(var(--levita-offset, 0) * 1px);
+
+	transform: translate3d(var(--levita-offset-x), var(--levita-offset-y), var(--levita-offset-z));
+	transition: transform var(--levita-speed) var(--levita-easing);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levita-js/vue",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Vue wrapper for Levita 3D tilt & parallax",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,7 +16,8 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    }
+    },
+    "./style.css": "./dist/style.css"
   },
   "files": [
     "dist"
@@ -25,12 +26,14 @@
     "access": "public",
     "provenance": true
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "peerDependencies": {
     "vue": ">=3.3"
   },
   "dependencies": {
-    "levita-js": "0.3.0"
+    "levita-js": "0.3.1"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
@@ -46,7 +49,7 @@
   },
   "homepage": "https://github.com/Jeromearsene/levita#readme",
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && cp ../core/src/style.css dist/style.css",
     "type-check": "vue-tsc --noEmit"
   }
 }