:keyContainer="document" 를 추가하면 에러가 나서 키이벤트를 사용할 수 없습니다

[Chloe-Bang]

Environments

• Framework name: vue3
• Framework version: ^3.2.38
• Component name: vue3-selecto
• Component version: ^1.8.7

Description

SPA방식으로 typescript를 사용해서 개발하고 있습니다.
vue3-selecto에 Key 이벤트를 사용하고 싶은데, 예제에 있는 :keyContainer="document"를 추가하면
"[vue-tsc] Property 'document' does not exist on type 'ProductItems'." 에러 메세지가 나오고 이벤트 바인딩도 안되는데 어떻게 해결해야할까요?

원하는 동작은 다음과 같습니다.
vue3-selecto를 통해 드래그 또는 클릭해서 선택한 영역들을 esc키를 누르면 모두 선택 해지하고 싶습니다.

감사합니다.

Sample Source

<vue-selecto 
     ref="dragSelecto"
     dragContainer=".drag-table"
     :keyContainer="document"
     :selectableTargets='[".draggable-area .uid-td"]'
     :hitRate='10'
     :selectByClick='true'
     :selectFromInside='true'
     :toggleContinueSelect='["shift"]'
     @select="selectUids"
     @keyup="test"
/>
<table class='drag-container draggable-area'>
...//
  <tbody>
     <tr @click="testClick">
         <td class='test-id'></td>
      </tr>
   </tbody>
</table>

[daybrush]

@Chloe-Bang

안녕하세요.

template에서는 document, window 변수를 따로 등록해줘야 합니다.
또한 document, window 같은 경우 node 환경에서 존재하지 않기 때문에 다음과 같이 사용해보시길 바랍니다.

return {
   document: typeof document !== "undefiend" && document
   window: typeof window !== "undefiend" && window,
};

[Chloe-Bang]

답변 감사합니다!!
위 문제는 해결했으나 @keyup="" 이벤트를 사용해보니 키를 눌렀을때 아무것도 감지하지 못했습니다.
:toggleContinueSelect 의 설정된 키를 눌렀을 때만 keyup 이벤트에 들어오길래 keycode값으로 구분해서 처리하려고 하니 keycode 값이 없어서 제가 원하는 기능을 구현할 수 없어 한가지 더 여쭤봅니다.

선택된 영역을 모두 선택 해제하고 싶을 때 컨테이너 영역 클릭 말고 이와 똑같이 동작하는 리셋할 수 있는 �메소드가 있나요?

감사합니다 :)

[daybrush]

@Chloe-Bang

selecto에는 keycon 모듈이 내장되어 있습니다.

keycon 모듈 또는 vue3용 keycon 을 사용해보시길 바랍니다.

• keycon: https://www.npmjs.com/package/keycon
• vue3 keycon: https://www.npmjs.com/package/vue-keycon

또한 전체 해제하고 싶다면
.setSelectedTargets 를 사용하시길 바랍니다.
결과값이 onSelect 파라미터와 유사하지만 이벤트를 발생시키지 않기 때문에 수동으로 처리해줘야 합니다.

const { added, removed } = selecto.setSelectedTargets(targets);

[Chloe-Bang]

빠른 답변 감사합니다:)
덕분에 해결했습니다 감사합니다