<template>
  <div>
    <h-button @click="handleClick">Click</h-button>
    <h-modal
      :force-render="true"
      :visible="state.visible"
      @ok="
        () => {
          state.visible = false;
        }
      "
    >
      <template #title>
        <div v-drag>Basic Modal</div>
      </template>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </h-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      visible: false,
    });

    const handleClick = () => {
      state.visible = !state.visible;
    };
    return {
      state,
      handleClick,
    };
  },
});
</script>
