ResizeBox ​

<template>
  <tu-resize-box
    style="
      width: 300px;
      min-width: 200px;
      max-width: 100%;
      height: 150px;
      min-height: 50px;
      text-align: center;
    "
    :directions="['right', 'bottom', 'top', 'left']"
  >
    <p>
      Stay organized, reduce stress, and accomplish personal and business goals
      with a daily schedule template.
    </p>
  </tu-resize-box>
</template>

<template>
  <tu-resize-box
    style="
      width: 300px;
      min-width: 200px;
      max-width: 100%;
      height: 150px;
      min-height: 50px;
      text-align: center;
    "
    :directions="['right', 'bottom', 'top', 'left']"
  >
    <p>
      Stay organized, reduce stress, and accomplish personal and business goals
      with a daily schedule template.
    </p>
  </tu-resize-box>
</template>

<template>
  <tu-resize-box
    style="
      min-width: 200px;
      max-width: 100%;
      min-height: 50px;
      text-align: center;
    "
    :directions="['right', 'bottom', 'top', 'left']"
    v-model:width="width"
    v-model:height="height"
  >
    <p>
      Stay organized, reduce stress, and accomplish personal and business goals
      with a daily schedule template.
    </p>
  </tu-resize-box>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const width = ref(300);
const height = ref(150);
</script>

<template>
  <tu-resize-box
    style="
      min-width: 200px;
      max-width: 100%;
      min-height: 50px;
      text-align: center;
    "
    :directions="['right', 'bottom', 'top', 'left']"
    v-model:width="width"
    v-model:height="height"
  >
    <p>
      Stay organized, reduce stress, and accomplish personal and business goals
      with a daily schedule template.
    </p>
  </tu-resize-box>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const width = ref(300);
const height = ref(150);
</script>