diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 7153de3..28d39ce 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -291,8 +291,7 @@ const UI = ({

🍃 Tailwind

- Current width range: - 5xs and below + Current width range: 5xs and below 5xs to 4xs 4xs to 3xs 3xs to 2xs @@ -308,8 +307,7 @@ const UI = ({ 5xl and up
- Current height range: - 5xs and below + Current height range: 5xs and below 5xs to 4xs 4xs to 3xs 3xs to 2xs diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html index 1138edc..027a328 100644 --- a/examples/vanilla/index.html +++ b/examples/vanilla/index.html @@ -1,12 +1,18 @@ - + - - - Vanilla + Mana Potion – Vanilla + + + + + - +
diff --git a/examples/vanilla/public/favicon.ico b/examples/vanilla/public/favicon.ico new file mode 100644 index 0000000..224c949 Binary files /dev/null and b/examples/vanilla/public/favicon.ico differ diff --git a/examples/vanilla/public/icon-180.png b/examples/vanilla/public/icon-180.png new file mode 100644 index 0000000..8ecb203 Binary files /dev/null and b/examples/vanilla/public/icon-180.png differ diff --git a/examples/vanilla/public/icon-192.png b/examples/vanilla/public/icon-192.png new file mode 100644 index 0000000..2ad1ceb Binary files /dev/null and b/examples/vanilla/public/icon-192.png differ diff --git a/examples/vanilla/public/icon-512.png b/examples/vanilla/public/icon-512.png new file mode 100644 index 0000000..16147b3 Binary files /dev/null and b/examples/vanilla/public/icon-512.png differ diff --git a/examples/vanilla/public/mana-potion.webp b/examples/vanilla/public/mana-potion.webp new file mode 100644 index 0000000..633ef00 Binary files /dev/null and b/examples/vanilla/public/mana-potion.webp differ diff --git a/examples/vanilla/public/manifest.json b/examples/vanilla/public/manifest.json new file mode 100644 index 0000000..4a0a541 --- /dev/null +++ b/examples/vanilla/public/manifest.json @@ -0,0 +1,12 @@ +{ + "short_name": "Mana Potion Svelte", + "name": "Mana Potion Svelte", + "start_url": "/", + "background_color": "#333", + "theme_color": "#333", + "display": "standalone", + "icons": [ + { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, + { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } + ] +} diff --git a/examples/vanilla/src/App.ts b/examples/vanilla/src/App.ts new file mode 100644 index 0000000..5aef6af --- /dev/null +++ b/examples/vanilla/src/App.ts @@ -0,0 +1,305 @@ +import { + DeviceTypeChangePayload, + enterFullscreen, + exitFullscreen, + FullscreenChangePayload, + getBrowser, + getMouse, + LeftMouseButtonDownPayload, + LeftMouseButtonUpPayload, + listeners, + lockKeys, + lockOrientation, + lockPointer, + MiddleMouseButtonDownPayload, + MiddleMouseButtonUpPayload, + MouseMovePayload, + MouseScrollPayload, + PageFocusChangePayload, + PageVisibilityPayload, + PointerLockChangePayload, + ResizePayload, + RightMouseButtonDownPayload, + RightMouseButtonUpPayload, + ScreenOrientationChangePayload, + unlockKeys, + unlockOrientation, + unlockPointer, +} from '@manapotion/vanilla' + +import { DiscordIcon, GitHubIcon, TwitterIcon } from './components/icons' +import Item from './components/Item' +import html from './html' + +const getLabelValue = (value: boolean) => + value === true ? 'Yes' : value === false ? 'No' : 'Unknown' + +const getLabelClass = (value: boolean) => + `label ${value === true ? 'label--positive' : value === false ? 'label--negative' : 'label--unknown'}` + +document.addEventListener('DOMContentLoaded', () => { + const mouseLeft = document.getElementById('mouse-left')! + mouseLeft.textContent = getLabelValue(false) + mouseLeft.className = getLabelClass(false) + + const mouseMiddle = document.getElementById('mouse-middle')! + mouseMiddle.textContent = getLabelValue(false) + mouseMiddle.className = getLabelClass(false) + + const mouseRight = document.getElementById('mouse-right')! + mouseRight.textContent = getLabelValue(false) + mouseRight.className = getLabelClass(false) + + listeners({ + onFullscreenChange: ({ isFullscreen }: FullscreenChangePayload) => { + const el = document.getElementById('isFullscreen')! + const btn = document.getElementById('fullscreenButton')! + el.textContent = getLabelValue(isFullscreen) + el.className = getLabelClass(isFullscreen) + btn.textContent = isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' + }, + onPageVisibilityChange: ({ isPageVisible }: PageVisibilityPayload) => { + const el = document.getElementById('isPageVisible')! + el.textContent = getLabelValue(isPageVisible) + el.className = getLabelClass(isPageVisible) + }, + onPageFocusChange: ({ isPageFocused }: PageFocusChangePayload) => { + const el = document.getElementById('isPageFocused')! + el.textContent = getLabelValue(isPageFocused) + el.className = getLabelClass(isPageFocused) + }, + onDeviceTypeChange: ({ isDesktop, isMobile }: DeviceTypeChangePayload) => { + const elDesktop = document.getElementById('isDesktop')! + elDesktop.textContent = getLabelValue(isDesktop) + elDesktop.className = getLabelClass(isDesktop) + + const elMobile = document.getElementById('isMobile')! + elMobile.textContent = getLabelValue(isMobile) + elMobile.className = getLabelClass(isMobile) + }, + onScreenOrientationChange: ({ isPortrait, isLandscape }: ScreenOrientationChangePayload) => { + const elPortrait = document.getElementById('isPortrait')! + elPortrait.textContent = getLabelValue(isPortrait) + elPortrait.className = getLabelClass(isPortrait) + + const elLandscape = document.getElementById('isLandscape')! + elLandscape.textContent = getLabelValue(isLandscape) + elLandscape.className = getLabelClass(isLandscape) + }, + onResize: ({ width, height }: ResizePayload) => { + const el = document.getElementById('windowSize')! + el.textContent = `${width}x${height}` + }, + onPointerLockChange: ({ isPointerLocked }: PointerLockChangePayload) => { + const el = document.getElementById('isMouseLocked')! + el.textContent = getLabelValue(isPointerLocked) + el.className = getLabelClass(isPointerLocked) + const btn = document.getElementById('mouseLockButton')! + btn.textContent = isPointerLocked ? 'Unlock' : 'Lock' + }, + onLeftMouseButtonDown: (_: LeftMouseButtonDownPayload) => { + const el = document.getElementById('mouse-left')! + el.textContent = getLabelValue(true) + el.className = getLabelClass(true) + }, + onMiddleMouseButtonDown: (_: MiddleMouseButtonDownPayload) => { + const el = document.getElementById('mouse-middle')! + el.textContent = getLabelValue(true) + el.className = getLabelClass(true) + }, + onRightMouseButtonDown: (_: RightMouseButtonDownPayload) => { + const el = document.getElementById('mouse-right')! + el.textContent = getLabelValue(true) + el.className = getLabelClass(true) + }, + onLeftMouseButtonUp: (_: LeftMouseButtonUpPayload) => { + const el = document.getElementById('mouse-left')! + el.textContent = getLabelValue(false) + el.className = getLabelClass(false) + }, + onMiddleMouseButtonUp: (_: MiddleMouseButtonUpPayload) => { + const el = document.getElementById('mouse-middle')! + el.textContent = getLabelValue(false) + el.className = getLabelClass(false) + }, + onRightMouseButtonUp: (_: RightMouseButtonUpPayload) => { + const el = document.getElementById('mouse-right')! + el.textContent = getLabelValue(false) + el.className = getLabelClass(false) + }, + onMouseMove: ({ position, movement }: MouseMovePayload) => { + const elPos = document.getElementById('mouse-position')! + elPos.textContent = `${position.x}, ${position.y}` + + const elMove = document.getElementById('mouse-movement')! + elMove.textContent = `${movement.x}, ${movement.y}` + }, + onScroll: ({ y }: MouseScrollPayload) => { + const el = document.getElementById('mouse-scroll-y')! + el.textContent = String(Math.round(y)) + }, + }) +}) + +// @ts-expect-error should define this function in the global scope +window.handleToggleFullscreen = () => + getBrowser().isFullscreen ? exitFullscreen() : enterFullscreen() +// @ts-expect-error should define this function in the global scope +window.handleTogglePointerLock = () => (getMouse().locked ? unlockPointer() : lockPointer()) +// @ts-expect-error should define this function in the global scope +window.lockOrientation = lockOrientation +// @ts-expect-error should define this function in the global scope +window.unlockOrientation = unlockOrientation +// @ts-expect-error should define this function in the global scope +window.lockKeys = lockKeys +// @ts-expect-error should define this function in the global scope +window.unlockKeys = unlockKeys + +export const App = html` +
+
+ Logo +
+

Mana Potion

+

+ Toolkit for JavaScript game development and interactive experiences with + React, + Vue, + Svelte, and + vanilla JS + support. +

+
+ + ${GitHubIcon} GitHub + + + ${TwitterIcon} Twitter + + + ${DiscordIcon} Discord + +
+
+
+
+
⚡️ Reactive (re-renders components on changes)
+
🗿 Non-reactive (managed by events or animation frame)
+
+ +
+
+

🌐 Browser

+ ${Item({ + name: 'isFullscreen', + label: html``, + extra: html``, + })} + ${Item({ + name: 'isPageVisible', + label: html``, + })} + ${Item({ + name: 'isPageFocused', + label: html``, + })} + ${Item({ + name: 'isDesktop', + label: html``, + })} + ${Item({ + name: 'isMobile', + label: html``, + })} + ${Item({ + name: 'isPortrait', + label: html``, + extra: html`Ratio-based`, + })} + ${Item({ + name: 'isLandscape', + label: html``, + extra: html`Ratio-based`, + })} + ${Item({ + name: 'width,height', + value: html``, + })} +
+

Force mobile orientation (use after fullscreen)

+
+ + + +
+
+
+

Keyboard lock (use after fullscreen on desktop)

+
+ + +
+
+
+
+

🖱️ Mouse

+ ${Item({ + name: 'locked', + label: html``, + extra: html``, + })} + ${Item({ + name: 'buttons.left', + label: html``, + })} + ${Item({ + name: 'buttons.middle', + label: html``, + })} + ${Item({ + name: 'buttons.right', + label: html``, + })} + ${Item({ + name: 'position', + value: html``, + })} + ${Item({ + name: 'movement', + value: html``, + })} + ${Item({ + name: 'wheel.y', + value: html``, + })} +
+
+
+` diff --git a/examples/vanilla/src/components/Item.ts b/examples/vanilla/src/components/Item.ts new file mode 100644 index 0000000..4e8ed76 --- /dev/null +++ b/examples/vanilla/src/components/Item.ts @@ -0,0 +1,23 @@ +import html from '../html' + +const Item = ({ + name, + label, + value, + extra, +}: { + name: string + value?: string + label?: string + extra?: string +}) => + html`
+ 🗿 + + ${name} + ${label ?? ''}${value ?? ''} + + ${extra ?? ''} +
` + +export default Item diff --git a/examples/vanilla/src/components/icons.ts b/examples/vanilla/src/components/icons.ts new file mode 100644 index 0000000..d905bc8 --- /dev/null +++ b/examples/vanilla/src/components/icons.ts @@ -0,0 +1,25 @@ +import html from '../html' + +export const GitHubIcon = html` + + + +` + +export const TwitterIcon = html` + +` + +export const DiscordIcon = html` + + + +` diff --git a/examples/vanilla/src/counter.ts b/examples/vanilla/src/counter.ts deleted file mode 100644 index 09e5afd..0000000 --- a/examples/vanilla/src/counter.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element: HTMLButtonElement) { - let counter = 0 - const setCounter = (count: number) => { - counter = count - element.innerHTML = `count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/examples/vanilla/src/html.ts b/examples/vanilla/src/html.ts new file mode 100644 index 0000000..ff7d19d --- /dev/null +++ b/examples/vanilla/src/html.ts @@ -0,0 +1,14 @@ +// https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html +// https://github.com/fabiospampinato/noop-tag +const html = (strings: TemplateStringsArray, ...expressions: unknown[]): string => { + let result = strings[0] + + for (let i = 1, l = strings.length; i < l; i++) { + result += expressions[i - 1] + result += strings[i] + } + + return result +} + +export default html diff --git a/examples/vanilla/src/index.css b/examples/vanilla/src/index.css index b5c61c9..dda28b4 100644 --- a/examples/vanilla/src/index.css +++ b/examples/vanilla/src/index.css @@ -1,3 +1,39 @@ @tailwind base; @tailwind components; @tailwind utilities; + +.section-heading { + @apply mb-3 text-2xl; +} + +.label { + @apply inline-block w-9 rounded text-center text-sm; +} + +.label--positive { + @apply bg-green-200 text-green-800; +} + +.label--negative { + @apply bg-red-200 text-red-800; +} + +.label--unknown { + @apply bg-gray-200 text-gray-800; +} + +.item { + @apply flex flex-wrap items-center gap-2; +} + +.item--main { + @apply flex flex-row-reverse items-center justify-between gap-2 2xs:w-48 2xs:flex-row; +} + +.item--name { + @apply font-mono text-sm; +} + +.btn { + @apply inline-block rounded bg-white/15 px-2 py-1 text-sm text-white hover:bg-white/5; +} diff --git a/examples/vanilla/src/main.ts b/examples/vanilla/src/main.ts index f0839a4..df75dae 100644 --- a/examples/vanilla/src/main.ts +++ b/examples/vanilla/src/main.ts @@ -1,26 +1,5 @@ -import { listeners, startAnimationFrame } from '@manapotion/vanilla' - -import { setupCounter } from './counter.ts' - import './index.css' -document.querySelector('#app')!.innerHTML = ` -
-

Vite + TypeScript

-
- -
-
-` - -listeners({ - onMouseMove: ({ position }) => console.log('mouse moved', position.x, position.y), -}) - -setupCounter(document.querySelector('#counter')!) - -const unsub = startAnimationFrame(dt => console.log(dt)) +import { App } from './App.ts' -setTimeout(() => { - unsub() -}, 2000) +document.querySelector('#app')!.innerHTML = App diff --git a/examples/vanilla/tailwind.config.ts b/examples/vanilla/tailwind.config.ts index 2301950..6a75c43 100644 --- a/examples/vanilla/tailwind.config.ts +++ b/examples/vanilla/tailwind.config.ts @@ -3,7 +3,7 @@ import { tailwindTheme as manapotionTheme } from '@manapotion/vanilla' import type { Config } from 'tailwindcss' export default { - content: ['./index.html', './src/**/*.vue'], + content: ['./index.html', './src/**/*.ts'], theme: { screens: manapotionTheme.screens, extend: { diff --git a/packages/core/src/listeners/mousemove.ts b/packages/core/src/listeners/mousemove.ts index 3ef0e8f..36bfeb4 100644 --- a/packages/core/src/listeners/mousemove.ts +++ b/packages/core/src/listeners/mousemove.ts @@ -18,7 +18,7 @@ type Mutable = { export const mountMouseMoveListener = ({ onMouseMove, - mouseMovementResetDelay, + mouseMovementResetDelay = 30, }: MouseMoveListenerProps) => { const payload = { position: { x: 0, y: 0 }, movement: { x: 0, y: 0 } } diff --git a/packages/core/src/listeners/mousescroll.ts b/packages/core/src/listeners/mousescroll.ts index 9d555db..82fced0 100644 --- a/packages/core/src/listeners/mousescroll.ts +++ b/packages/core/src/listeners/mousescroll.ts @@ -15,7 +15,7 @@ type Mutable = { export const mountMouseScrollListener = ({ onScroll, - mouseScrollResetDelay, + mouseScrollResetDelay = 100, }: MouseScrollListenerProps) => { const payload = { y: 0 } diff --git a/packages/core/src/listeners/pagefocus.ts b/packages/core/src/listeners/pagefocus.ts index 8fb37fb..498c517 100644 --- a/packages/core/src/listeners/pagefocus.ts +++ b/packages/core/src/listeners/pagefocus.ts @@ -6,28 +6,20 @@ export type PageFocusListenerProps = { onPageFocusChange?: (payload: PageFocusChangePayload) => void } -export const mountBlurListener = ({ onPageFocusChange }: PageFocusListenerProps) => { +export const mountPageFocusListener = ({ onPageFocusChange }: PageFocusListenerProps) => { const handler = () => { - browserStore.setState(s => ({ ...s, isPageFocused: false })) - onPageFocusChange?.({ isPageFocused: false }) + const isPageFocused = document.hasFocus() + browserStore.setState(s => ({ ...s, isPageFocused })) + onPageFocusChange?.({ isPageFocused }) } - window.addEventListener('blur', handler) - - return () => { - window.removeEventListener('blur', handler) - } -} - -export const mountFocusListener = ({ onPageFocusChange }: PageFocusListenerProps) => { - const handler = () => { - browserStore.setState(s => ({ ...s, isPageFocused: true })) - onPageFocusChange?.({ isPageFocused: true }) - } + handler() window.addEventListener('focus', handler) + window.addEventListener('blur', handler) return () => { window.removeEventListener('focus', handler) + window.removeEventListener('blur', handler) } } diff --git a/packages/react/src/listeners/MouseMoveListener.tsx b/packages/react/src/listeners/MouseMoveListener.tsx index 9846a95..b18878c 100644 --- a/packages/react/src/listeners/MouseMoveListener.tsx +++ b/packages/react/src/listeners/MouseMoveListener.tsx @@ -3,7 +3,7 @@ import { useEffect } from 'react' import { mountMouseMoveListener, MouseMoveListenerProps } from '@manapotion/core' export const MouseMoveListener = ({ - mouseMovementResetDelay = 30, + mouseMovementResetDelay, onMouseMove, }: MouseMoveListenerProps) => { useEffect( diff --git a/packages/react/src/listeners/MouseScrollListener.tsx b/packages/react/src/listeners/MouseScrollListener.tsx index 9eb4045..00b43c1 100644 --- a/packages/react/src/listeners/MouseScrollListener.tsx +++ b/packages/react/src/listeners/MouseScrollListener.tsx @@ -4,7 +4,7 @@ import { mountMouseScrollListener, MouseScrollListenerProps } from '@manapotion/ export const MouseScrollListener = ({ onScroll, - mouseScrollResetDelay = 100, + mouseScrollResetDelay, }: MouseScrollListenerProps) => { useEffect( () => mountMouseScrollListener({ onScroll, mouseScrollResetDelay }), diff --git a/packages/react/src/listeners/PageFocusListener.tsx b/packages/react/src/listeners/PageFocusListener.tsx index 42e6659..ceca681 100644 --- a/packages/react/src/listeners/PageFocusListener.tsx +++ b/packages/react/src/listeners/PageFocusListener.tsx @@ -1,12 +1,10 @@ import { useEffect } from 'react' -import { mountBlurListener, mountFocusListener, PageFocusListenerProps } from '@manapotion/core' +import { mountPageFocusListener, PageFocusListenerProps } from '@manapotion/core' export const PageFocusListener = ({ onPageFocusChange }: PageFocusListenerProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => mountBlurListener({ onPageFocusChange }), []) - // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => mountFocusListener({ onPageFocusChange }), []) + useEffect(() => mountPageFocusListener({ onPageFocusChange }), []) return null } diff --git a/packages/svelte/src/Listeners.svelte b/packages/svelte/src/Listeners.svelte index 523f10c..9f87da9 100644 --- a/packages/svelte/src/Listeners.svelte +++ b/packages/svelte/src/Listeners.svelte @@ -53,8 +53,8 @@ screenOrientationChange: ScreenOrientationChangePayload }>() - export let mouseScrollResetDelay = 100 - export let mouseMovementResetDelay = 30 + export let mouseScrollResetDelay: number + export let mouseMovementResetDelay: number dispatch('deviceTypeChange', e.detail)} /> diff --git a/packages/svelte/src/listeners/MouseMoveListener.svelte b/packages/svelte/src/listeners/MouseMoveListener.svelte index 5b995c6..af32359 100644 --- a/packages/svelte/src/listeners/MouseMoveListener.svelte +++ b/packages/svelte/src/listeners/MouseMoveListener.svelte @@ -7,7 +7,7 @@ const dispatch = createEventDispatcher<{ mouseMove: MouseMovePayload }>() - export let mouseMovementResetDelay = 30 + export let mouseMovementResetDelay: number onMount(() => mountMouseMoveListener({ diff --git a/packages/svelte/src/listeners/MouseScrollListener.svelte b/packages/svelte/src/listeners/MouseScrollListener.svelte index 676e46e..2161189 100644 --- a/packages/svelte/src/listeners/MouseScrollListener.svelte +++ b/packages/svelte/src/listeners/MouseScrollListener.svelte @@ -7,7 +7,7 @@ const dispatch = createEventDispatcher<{ scroll: MouseScrollPayload }>() - export let mouseScrollResetDelay = 100 + export let mouseScrollResetDelay: number onMount(() => mountMouseScrollListener({ diff --git a/packages/svelte/src/listeners/PageFocusListener.svelte b/packages/svelte/src/listeners/PageFocusListener.svelte index 11fa28d..a592a27 100644 --- a/packages/svelte/src/listeners/PageFocusListener.svelte +++ b/packages/svelte/src/listeners/PageFocusListener.svelte @@ -1,23 +1,15 @@ diff --git a/packages/vanilla/src/listeners.ts b/packages/vanilla/src/listeners.ts index 2755229..2a0e440 100644 --- a/packages/vanilla/src/listeners.ts +++ b/packages/vanilla/src/listeners.ts @@ -2,14 +2,13 @@ import { DeviceTypeListenerProps, FullscreenListenerProps, KeyboardListenerProps, - mountBlurListener, mountDeviceTypeListener, - mountFocusListener, mountFullscreenListener, mountKeyboardListener, mountMouseButtonsListener, mountMouseMoveListener, mountMouseScrollListener, + mountPageFocusListener, mountPageVisibilityListener, mountPointerLockListener, mountResizeListener, @@ -58,8 +57,7 @@ export const listeners = ({ onKeyUp, }: ListenersProps) => { const unsubDeviceType = mountDeviceTypeListener({ onDeviceTypeChange }) - const unsubBlur = mountBlurListener({ onPageFocusChange }) - const unsubFocus = mountFocusListener({ onPageFocusChange }) + const unsubPageFocus = mountPageFocusListener({ onPageFocusChange }) const unsubFullscreen = mountFullscreenListener({ onFullscreenChange }) const unsubMouseButtons = mountMouseButtonsListener({ onLeftMouseButtonDown, @@ -79,8 +77,7 @@ export const listeners = ({ return () => { unsubDeviceType() - unsubBlur() - unsubFocus() + unsubPageFocus() unsubFullscreen() unsubMouseButtons() unsubMouseMove() diff --git a/packages/vue/src/Listeners.vue.ts b/packages/vue/src/Listeners.vue.ts index 48b65ab..6a9bc96 100644 --- a/packages/vue/src/Listeners.vue.ts +++ b/packages/vue/src/Listeners.vue.ts @@ -34,8 +34,10 @@ import { ScreenOrientationListener } from './listeners/ScreenOrientationListener export const Listeners = defineComponent({ props: { - mouseMovementResetDelay: { type: Number, default: 30 }, - mouseScrollResetDelay: { type: Number, default: 100 }, + // eslint-disable-next-line vue/require-default-prop + mouseMovementResetDelay: { type: Number }, + // eslint-disable-next-line vue/require-default-prop + mouseScrollResetDelay: { type: Number }, }, emits: { mouseMove: (payload: MouseMovePayload) => payload, diff --git a/packages/vue/src/listeners/MouseMoveListener.vue.ts b/packages/vue/src/listeners/MouseMoveListener.vue.ts index 90bf519..609cfcc 100644 --- a/packages/vue/src/listeners/MouseMoveListener.vue.ts +++ b/packages/vue/src/listeners/MouseMoveListener.vue.ts @@ -3,7 +3,8 @@ import { defineComponent, onMounted, onUnmounted, watch } from 'vue' import { mountMouseMoveListener, MouseMovePayload } from '@manapotion/core' export const MouseMoveListener = defineComponent({ - props: { mouseMovementResetDelay: { type: Number, default: 30 } }, + // eslint-disable-next-line vue/require-default-prop + props: { mouseMovementResetDelay: { type: Number } }, emits: { mouseMove: (payload: MouseMovePayload) => payload }, setup: (props, { emit }) => { onMounted(() => { diff --git a/packages/vue/src/listeners/MouseScrollListener.vue.ts b/packages/vue/src/listeners/MouseScrollListener.vue.ts index b6e4441..773cd66 100644 --- a/packages/vue/src/listeners/MouseScrollListener.vue.ts +++ b/packages/vue/src/listeners/MouseScrollListener.vue.ts @@ -3,7 +3,8 @@ import { defineComponent, onMounted, onUnmounted, watch } from 'vue' import { mountMouseScrollListener, MouseScrollPayload } from '@manapotion/core' export const MouseScrollListener = defineComponent({ - props: { mouseScrollResetDelay: { type: Number, default: 100 } }, + // eslint-disable-next-line vue/require-default-prop + props: { mouseScrollResetDelay: { type: Number } }, emits: { scroll: (payload: MouseScrollPayload) => payload }, setup: (props, { emit }) => { onMounted(() => { diff --git a/packages/vue/src/listeners/PageFocusListener.vue.ts b/packages/vue/src/listeners/PageFocusListener.vue.ts index 0e80979..f3eff37 100644 --- a/packages/vue/src/listeners/PageFocusListener.vue.ts +++ b/packages/vue/src/listeners/PageFocusListener.vue.ts @@ -1,21 +1,15 @@ import { defineComponent, onMounted, onUnmounted } from 'vue' -import { mountBlurListener, mountFocusListener, PageFocusChangePayload } from '@manapotion/core' +import { mountPageFocusListener, PageFocusChangePayload } from '@manapotion/core' export const PageFocusListener = defineComponent({ emits: { pageFocusChange: (payload: PageFocusChangePayload) => payload }, setup: (_, { emit }) => { onMounted(() => { - const unsubBlur = mountBlurListener({ + const unsub = mountPageFocusListener({ onPageFocusChange: payload => emit('pageFocusChange', payload), }) - const unsubFocus = mountFocusListener({ - onPageFocusChange: payload => emit('pageFocusChange', payload), - }) - onUnmounted(() => { - unsubBlur() - unsubFocus() - }) + onUnmounted(unsub) }) }, render: () => null,