useJdModalFocusTrap

기본으로 포커스 트랩은(focus trap) 사용되며 옵션은 usedFocusTrap 입니다.
usedFocusTrap을 false로 하고 모달 내에서 useJdModalFocusTrap을 사용할 수도 있습니다.
포커스 트랩 사용 여부와 관계없이 기본적으로 모달이 열릴때(모달로 포커스) 닫힐 때(모달을 열때) 포커스로 이동이 되도록 되어 있습니다.

Example.vueModal.vue

vue

<template>
  <div>
    <el-input v-model="state.test1" />
    <el-input v-model="state.test1" />
    <el-input v-model="state.test1" />
    <div>
      <el-checkbox v-model="state.usedFocusTrap">기본 포커스 트랩 사용 여부</el-checkbox>
    </div>
    <el-button type="primary" @click="onOpen">onOpen</el-button>
    <el-input v-model="state.test1" />
    <el-input v-model="state.test1" />
    <el-input v-model="state.test1" />
  </div>
</template>

<script lang="ts" setup>
import { useJdModalService } from '@jood/v-modal';
import OpenModal from './OpenModal.vue';
import { onBeforeMount, onBeforeUnmount, reactive } from 'vue';

const modalService = useJdModalService();

const state = reactive({
  test1: '',
  usedFocusTrap: true,
});

const onOpen = () => {
  modalService.open({
    component: OpenModal,
    overlayClose: true,
    usedFocusTrap: state.usedFocusTrap,
  });
};

// vitepress 리마운트 문제로 특정 예제에서는 historyStrategy 해제
onBeforeMount(() => {
  modalService.setUseHistoryStrategy(false);
});

onBeforeUnmount(() => {
  modalService.setUseHistoryStrategy(true);
  modalService.closeAll();
});
</script>

<style lang="scss" scoped></style>

vue

<template>
  <div class="example-modal">
    <div class="body-panel">
      <el-input v-model="state.test1" />
      <el-input v-model="state.test1" />
      <el-input v-model="state.test1" />
    </div>
    <div class="foot-actions">
      <el-button type="primary" @click="onClose">닫기1</el-button>
      <el-button type="primary" @click="onClose">닫기2</el-button>
      <el-button type="primary" @click="onClose">닫기3</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useJdModalRef } from '@jood/v-modal';
import { reactive } from 'vue';

const state = reactive({
  test1: '',
});

const modalRef = useJdModalRef<{ count: number }>();

const onClose = () => {
  modalRef.close();
};
</script>

<style lang="scss" scoped>
.example-modal {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 95vw;
  max-width: 480px;
  max-height: 80vh;
  box-sizing: border-box;
  .body-panel {
    flex: 1;
    overflow: auto;
    .scroll-box {
      margin: 10px;
      padding: 100px 20px;
      border: 1px dashed #ccc;
    }
  }
  .foot-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    .spacer {
      flex: 1;
    }
  }
}
</style>

useJdModalFocusTrap ​

useJdModalFocusTrap