Dodging Wrapper wrapper

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

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="flex flex-col gap-4 border rounded">
      <base-checkbox
        v-model="enable"
        :label="t('enableDodging')"
        class="p-4"
      />
    </div>

    <div class="w-full flex justify-center">
      <wrapper-dodging
        class="w-full"
        :enable
      >
        <div class="w-full border bg-white 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

<!-- #region main-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 bg-white">
            <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>
<!-- #endregion main-code -->

<i18n lang="json">
{
  "zh-TW": {
    "superSecretToken": "超機密 token",
    "cannotViewAgain": "已無法再次觀看",
    "passwordValue": "鱈魚超超超超超超超超超超超超超超超胖"
  },
  "en": {
    "superSecretToken": "Super Secret Token",
    "cannotViewAgain": "Cannot be viewed again",
    "passwordValue": "Codfish is super super super super super super super super super super super super super super fat"
  }
}
</i18n>

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 border border-gray-300 rounded-xl p-6 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[];
}