element-plus/es/components/tree/src/model/useKeydown.mjs.map

A Component Library for Vue 3

{"version":3,"file":"useKeydown.mjs","sources":["../../../../../../../packages/components/tree/src/model/useKeydown.ts"],"sourcesContent":["import { onMounted, onUpdated, onBeforeUnmount, watch, shallowRef } from 'vue'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { on, off } from '@element-plus/utils/dom'\nimport type TreeStore from './tree-store'\n\nimport type { Ref } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\n\ninterface UseKeydownOption {\n  el$: Ref<HTMLElement>\n}\nexport function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {\n  const treeItems = shallowRef<Nullable<HTMLElement>[]>([])\n  const checkboxItems = shallowRef<Nullable<HTMLElement>[]>([])\n\n  onMounted(() => {\n    initTabIndex()\n    on(el$.value, 'keydown', handleKeydown)\n  })\n\n  onBeforeUnmount(() => {\n    off(el$.value, 'keydown', handleKeydown)\n  })\n\n  onUpdated(() => {\n    treeItems.value = Array.from(el$.value.querySelectorAll('[role=treeitem]'))\n    checkboxItems.value = Array.from(\n      el$.value.querySelectorAll('input[type=checkbox]')\n    )\n  })\n\n  watch(checkboxItems, (val) => {\n    val.forEach((checkbox) => {\n      checkbox.setAttribute('tabindex', '-1')\n    })\n  })\n\n  const handleKeydown = (ev: KeyboardEvent): void => {\n    const currentItem = ev.target as HTMLElement\n    if (currentItem.className.indexOf('el-tree-node') === -1) return\n    const code = ev.code\n    treeItems.value = Array.from(\n      el$.value.querySelectorAll('.is-focusable[role=treeitem]')\n    )\n    const currentIndex = treeItems.value.indexOf(currentItem)\n    let nextIndex\n    if ([EVENT_CODE.up, EVENT_CODE.down].indexOf(code) > -1) {\n      ev.preventDefault()\n      if (code === EVENT_CODE.up) {\n        nextIndex =\n          currentIndex === -1\n            ? 0\n            : currentIndex !== 0\n            ? currentIndex - 1\n            : treeItems.value.length - 1\n        const startIndex = nextIndex\n        while (true) {\n          if (\n            store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus\n          )\n            break\n          nextIndex--\n          if (nextIndex === startIndex) {\n            nextIndex = -1\n            break\n          }\n          if (nextIndex < 0) {\n            nextIndex = treeItems.value.length - 1\n          }\n        }\n      } else {\n        nextIndex =\n          currentIndex === -1\n            ? 0\n            : currentIndex < treeItems.value.length - 1\n            ? currentIndex + 1\n            : 0\n        const startIndex = nextIndex\n        while (true) {\n          if (\n            store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus\n          )\n            break\n          nextIndex++\n          if (nextIndex === startIndex) {\n            nextIndex = -1\n            break\n          }\n          if (nextIndex >= treeItems.value.length) {\n            nextIndex = 0\n          }\n        }\n      }\n      nextIndex !== -1 && treeItems.value[nextIndex].focus()\n    }\n    if ([EVENT_CODE.left, EVENT_CODE.right].indexOf(code) > -1) {\n      ev.preventDefault()\n      currentItem.click()\n    }\n    const hasInput = currentItem.querySelector(\n      '[type=\"checkbox\"]'\n    ) as Nullable<HTMLInputElement>\n    if ([EVENT_CODE.enter, EVENT_CODE.space].indexOf(code) > -1 && hasInput) {\n      ev.preventDefault()\n      hasInput.click()\n    }\n  }\n\n  const initTabIndex = (): void => {\n    treeItems.value = Array.from(\n      el$.value.querySelectorAll('.is-focusable[role=treeitem]')\n    )\n    checkboxItems.value = Array.from(\n      el$.value.querySelectorAll('input[type=checkbox]')\n    )\n    const checkedItem = el$.value.querySelectorAll('.is-checked[role=treeitem]')\n    if (checkedItem.length) {\n      checkedItem[0].setAttribute('tabindex', '0')\n      return\n    }\n    treeItems.value[0]?.setAttribute('tabindex', '0')\n  }\n}\n"],"names":[],"mappings":";;;;oBAW2B,EAAE,OAAyB,OAAuB;AAC3E,QAAM,YAAY,WAAoC;AACtD,QAAM,gBAAgB,WAAoC;AAE1D,YAAU,MAAM;AACd;AACA,OAAG,IAAI,OAAO,WAAW;AAAA;AAG3B,kBAAgB,MAAM;AACpB,QAAI,IAAI,OAAO,WAAW;AAAA;AAG5B,YAAU,MAAM;AACd,cAAU,QAAQ,MAAM,KAAK,IAAI,MAAM,iBAAiB;AACxD,kBAAc,QAAQ,MAAM,KAC1B,IAAI,MAAM,iBAAiB;AAAA;AAI/B,QAAM,eAAe,CAAC,QAAQ;AAC5B,QAAI,QAAQ,CAAC,aAAa;AACxB,eAAS,aAAa,YAAY;AAAA;AAAA;AAItC,QAAM,gBAAgB,CAAC,OAA4B;AACjD,UAAM,cAAc,GAAG;AACvB,QAAI,YAAY,UAAU,QAAQ,oBAAoB;AAAI;AAC1D,UAAM,OAAO,GAAG;AAChB,cAAU,QAAQ,MAAM,KACtB,IAAI,MAAM,iBAAiB;AAE7B,UAAM,eAAe,UAAU,MAAM,QAAQ;AAC7C,QAAI;AACJ,QAAI,CAAC,WAAW,IAAI,WAAW,MAAM,QAAQ,QAAQ,IAAI;AACvD,SAAG;AACH,UAAI,SAAS,WAAW,IAAI;AAC1B,oBACE,iBAAiB,KACb,IACA,iBAAiB,IACjB,eAAe,IACf,UAAU,MAAM,SAAS;AAC/B,cAAM,aAAa;AACnB,eAAO,MAAM;AACX,cACE,MAAM,MAAM,QAAQ,UAAU,MAAM,WAAW,QAAQ,KAAK;AAE5D;AACF;AACA,cAAI,cAAc,YAAY;AAC5B,wBAAY;AACZ;AAAA;AAEF,cAAI,YAAY,GAAG;AACjB,wBAAY,UAAU,MAAM,SAAS;AAAA;AAAA;AAAA,aAGpC;AACL,oBACE,iBAAiB,KACb,IACA,eAAe,UAAU,MAAM,SAAS,IACxC,eAAe,IACf;AACN,cAAM,aAAa;AACnB,eAAO,MAAM;AACX,cACE,MAAM,MAAM,QAAQ,UAAU,MAAM,WAAW,QAAQ,KAAK;AAE5D;AACF;AACA,cAAI,cAAc,YAAY;AAC5B,wBAAY;AACZ;AAAA;AAEF,cAAI,aAAa,UAAU,MAAM,QAAQ;AACvC,wBAAY;AAAA;AAAA;AAAA;AAIlB,oBAAc,MAAM,UAAU,MAAM,WAAW;AAAA;AAEjD,QAAI,CAAC,WAAW,MAAM,WAAW,OAAO,QAAQ,QAAQ,IAAI;AAC1D,SAAG;AACH,kBAAY;AAAA;AAEd,UAAM,WAAW,YAAY,cAC3B;AAEF,QAAI,CAAC,WAAW,OAAO,WAAW,OAAO,QAAQ,QAAQ,MAAM,UAAU;AACvE,SAAG;AACH,eAAS;AAAA;AAAA;AAIb,QAAM,eAAe,MAAY;AA5GnC;AA6GI,cAAU,QAAQ,MAAM,KACtB,IAAI,MAAM,iBAAiB;AAE7B,kBAAc,QAAQ,MAAM,KAC1B,IAAI,MAAM,iBAAiB;AAE7B,UAAM,cAAc,IAAI,MAAM,iBAAiB;AAC/C,QAAI,YAAY,QAAQ;AACtB,kBAAY,GAAG,aAAa,YAAY;AACxC;AAAA;AAEF,oBAAU,MAAM,OAAhB,mBAAoB,aAAa,YAAY;AAAA;AAAA;;;;"}