Dodging Wrapper wrapper

The wrapped element will start dodging around, just like... ԅ( ˘ω˘ԅ)

Tech Keywords

Name	Description
Matter-js	2D physics engine
Pointer Events	Detects pointer movement, clicks, hovers, and more, providing coordinates and target information

Usage Examples

Basic Usage

Once enabled, the wrapped element will dodge with pinpoint accuracy, just like those colleagues who maxed out their evasion stats. (。-`ω´-)

Enable Dodging

「This is a bug Codfish asked me to write ( ◔ ௰◔) 」

View example source code

<template>
  <div class="w-full flex flex-col items-center gap-4 py-10">
    <div class="example-ctrl flex flex-col gap-4">
      <base-checkbox
        v-model="enable"
        :label="t('enableDodging')"
      />
    </div>

    <div class="w-full flex justify-center">
      <wrapper-dodging
        class="w-full"
        :enable
      >
        <div class="w-full border p-2 text-center">
          {{ t('bugMessage') }}
        </div>
      </wrapper-dodging>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseCheckbox from '../../base-checkbox.vue'
import WrapperDodging from '../wrapper-dodging.vue'

const { t } = useI18n()
const enable = ref(true)
</script>

Confidential Data

So confidential you can't even touch it. (́⊙◞౪◟⊙‵)

Super Secret Token

Cannot be viewed again

View example source code

<template>
  <div class="w-full flex flex-center flex-col gap-4 p-6">
    <div class="flex justify-center">
      <label>
        <div class="mb-1">
          <div class="font-bold">
            {{ t('superSecretToken') }}
          </div>

          <div class="text-xs opacity-50">
            {{ t('cannotViewAgain') }}
          </div>
        </div>

        <wrapper-dodging class="w-full">
          <div class="border rounded">
            <input
              type="password"
              class="w-full cursor-not-allowed p-2 tracking-tighter"
              :value="t('passwordValue')"
            >
          </div>
        </wrapper-dodging>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import WrapperDodging from '../wrapper-dodging.vue'

const { t } = useI18n()
</script>

Pointless Survey

A survey about whether to get drinks in the afternoon. ♪( ◜ω◝و(و

Order Drinks?

Yes, absolutely!

No, thanks

If someone's treating, I'm in!

Maybe later

Depends on the brand

Colleague: "This is basically forcing us to get drinks! Σ(ˊДˋ;)"

View example source code

<template>
  <div class="w-full flex justify-center p-6">
    <div class="flex flex-col items-start gap-4 example-wrap px-10">
      <div class="text-xl font-bold">
        {{ t('title') }}
      </div>

      <div class="w-full flex flex-col flex-wrap select-none justify-between gap-4 whitespace-nowrap">
        <label class="flex items-center gap-2 text-lg">
          <input
            v-model="value"
            type="radio"
            value="yes"
            class="size-6"
          >
          {{ t('drinkOption.yes') }}
        </label>

        <div
          v-for="optionKey in ['no', 'onTheHouse', 'later', 'dependsOnBrand']"
          :key="optionKey"
          class="flex gap-2 text-lg"
        >
          <wrapper-dodging class="flex items-center">
            <input
              v-model="value"
              type="radio"
              :value="t(`drinkOption.${optionKey}`)"
              class="pointer-events-none size-6"
            >
          </wrapper-dodging>
          {{ t(`drinkOption.${optionKey}`) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import WrapperDodging from '../wrapper-dodging.vue'

const value = ref('')
const { t } = useI18n()
</script>

How It Works

Uses Matter.js to achieve physics simulation effects.

The implementation is an extension based on Text Hate Mouse, the main difference being that the object's shape is rectangular, requiring additional handling of rotation issues.

Source Code

Component

、Examples

API

Props

interface Props {
  enable?: boolean;
}

Slots

interface Slots {
  default?: (params: { style?: CSSProperties }) => VNode[];
}