element-plus/es/components/input-tag/src/composables/use-drag-tag.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-drag-tag.mjs","sources":["../../../../../../../packages/components/input-tag/src/composables/use-drag-tag.ts"],"sourcesContent":["import { ref, shallowRef } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle, isUndefined, setStyle } from '@element-plus/utils'\n\nimport type { ShallowRef } from 'vue'\n\ntype DropType = 'before' | 'after'\n\ninterface UseDragTagOptions {\n  wrapperRef: ShallowRef<HTMLElement | undefined>\n  handleDragged: (\n    draggingIndex: number,\n    dropIndex: number,\n    type: DropType\n  ) => void\n  afterDragged?: () => void\n}\n\nexport function useDragTag({\n  wrapperRef,\n  handleDragged,\n  afterDragged,\n}: UseDragTagOptions) {\n  const ns = useNamespace('input-tag')\n  const dropIndicatorRef = shallowRef<HTMLElement>()\n  const showDropIndicator = ref(false)\n\n  let draggingIndex: number | undefined\n  let draggingTag: HTMLElement | null\n  let dropIndex: number | undefined\n  let dropType: DropType | undefined\n\n  function getTagClassName(index: number) {\n    return `.${ns.e('inner')} .${ns.namespace.value}-tag:nth-child(${\n      index + 1\n    })`\n  }\n\n  function handleDragStart(event: DragEvent, index: number) {\n    draggingIndex = index\n    draggingTag = wrapperRef.value!.querySelector<HTMLElement>(\n      getTagClassName(index)\n    )\n\n    if (draggingTag) {\n      draggingTag.style.opacity = '0.5'\n    }\n    event.dataTransfer!.effectAllowed = 'move'\n  }\n\n  function handleDragOver(event: DragEvent, index: number) {\n    dropIndex = index\n    event.preventDefault()\n    event.dataTransfer!.dropEffect = 'move'\n\n    if (isUndefined(draggingIndex) || draggingIndex === index) {\n      showDropIndicator.value = false\n      return\n    }\n\n    const dropPosition = wrapperRef\n      .value!.querySelector<HTMLElement>(getTagClassName(index))!\n      .getBoundingClientRect()\n    const dropPrev = !(draggingIndex + 1 === index)\n    const dropNext = !(draggingIndex - 1 === index)\n    const distance = event.clientX - dropPosition.left\n    const prevPercent = dropPrev ? (dropNext ? 0.5 : 1) : -1\n    const nextPercent = dropNext ? (dropPrev ? 0.5 : 0) : 1\n\n    if (distance <= dropPosition.width * prevPercent) {\n      dropType = 'before'\n    } else if (distance > dropPosition.width * nextPercent) {\n      dropType = 'after'\n    } else {\n      dropType = undefined\n    }\n\n    const innerEl = wrapperRef.value!.querySelector<HTMLElement>(\n      `.${ns.e('inner')}`\n    )!\n    const innerPosition = innerEl.getBoundingClientRect()\n    const gap = Number.parseFloat(getStyle(innerEl, 'gap')) / 2\n\n    const indicatorTop = dropPosition.top - innerPosition.top\n    let indicatorLeft = -9999\n\n    if (dropType === 'before') {\n      indicatorLeft = Math.max(\n        dropPosition.left - innerPosition.left - gap,\n        Math.floor(-gap / 2)\n      )\n    } else if (dropType === 'after') {\n      const left = dropPosition.right - innerPosition.left\n      indicatorLeft =\n        left + (innerPosition.width === left ? Math.floor(gap / 2) : gap)\n    }\n\n    setStyle(dropIndicatorRef.value!, {\n      top: `${indicatorTop}px`,\n      left: `${indicatorLeft}px`,\n    })\n    showDropIndicator.value = !!dropType\n  }\n\n  function handleDragEnd(event: DragEvent) {\n    event.preventDefault()\n\n    if (draggingTag) {\n      draggingTag.style.opacity = ''\n    }\n\n    if (\n      dropType &&\n      !isUndefined(draggingIndex) &&\n      !isUndefined(dropIndex) &&\n      draggingIndex !== dropIndex\n    ) {\n      handleDragged(draggingIndex, dropIndex, dropType)\n    }\n\n    showDropIndicator.value = false\n    draggingIndex = undefined\n    draggingTag = null\n    dropIndex = undefined\n    dropType = undefined\n    afterDragged?.()\n  }\n\n  return {\n    dropIndicatorRef,\n    showDropIndicator,\n    handleDragStart,\n    handleDragOver,\n    handleDragEnd,\n  }\n}\n"],"names":[],"mappings":";;;;;AAkBO,SAAS,UAAW,CAAA;AAAA,EACzB,UAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AACF,CAAsB,EAAA;AACpB,EAAM,MAAA,EAAA,GAAK,aAAa,WAAW,CAAA,CAAA;AACnC,EAAA,MAAM,mBAAmB,UAAwB,EAAA,CAAA;AACjD,EAAM,MAAA,iBAAA,GAAoB,IAAI,KAAK,CAAA,CAAA;AAEnC,EAAI,IAAA,aAAA,CAAA;AACJ,EAAI,IAAA,WAAA,CAAA;AACJ,EAAI,IAAA,SAAA,CAAA;AACJ,EAAI,IAAA,QAAA,CAAA;AAEJ,EAAA,SAAS,gBAAgB,KAAe,EAAA;AACtC,IAAO,OAAA,CAAA,CAAA,EAAI,GAAG,CAAE,CAAA,OAAO,MAAM,EAAG,CAAA,SAAA,CAAU,uBACxC,KAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAEZ;AAEA,EAAS,SAAA,eAAA,CAAgB,OAAkB,KAAe,EAAA;AACxD,IAAgB,aAAA,GAAA,KAAA,CAAA;AAChB,IAAA,WAAA,GAAc,WAAW,KAAO,CAAA,aAAA;AAAA,MAC9B,gBAAgB,KAAK,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,WAAA,CAAY,MAAM,OAAU,GAAA,KAAA,CAAA;AAAA,KAC9B;AACA,IAAA,KAAA,CAAM,aAAc,aAAgB,GAAA,MAAA,CAAA;AAAA,GACtC;AAEA,EAAS,SAAA,cAAA,CAAe,OAAkB,KAAe,EAAA;AACvD,IAAY,SAAA,GAAA,KAAA,CAAA;AACZ,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,KAAA,CAAM,aAAc,UAAa,GAAA,MAAA,CAAA;AAEjC,IAAA,IAAI,WAAY,CAAA,aAAa,CAAK,IAAA,aAAA,KAAkB,KAAO,EAAA;AACzD,MAAA,iBAAA,CAAkB,KAAQ,GAAA,KAAA,CAAA;AAC1B,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,YAAA,GAAe,WAClB,KAAO,CAAA,aAAA,CAA2B,gBAAgB,KAAK,CAAC,EACxD,qBAAsB,EAAA,CAAA;AACzB,IAAM,MAAA,QAAA,GAAW,EAAE,aAAA,GAAgB,CAAM,KAAA,KAAA,CAAA,CAAA;AACzC,IAAM,MAAA,QAAA,GAAW,EAAE,aAAA,GAAgB,CAAM,KAAA,KAAA,CAAA,CAAA;AACzC,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,OAAA,GAAU,YAAa,CAAA,IAAA,CAAA;AAC9C,IAAA,MAAM,WAAc,GAAA,QAAA,GAAY,QAAW,GAAA,GAAA,GAAM,CAAK,GAAA,CAAA,CAAA,CAAA;AACtD,IAAA,MAAM,WAAc,GAAA,QAAA,GAAY,QAAW,GAAA,GAAA,GAAM,CAAK,GAAA,CAAA,CAAA;AAEtD,IAAI,IAAA,QAAA,IAAY,YAAa,CAAA,KAAA,GAAQ,WAAa,EAAA;AAChD,MAAW,QAAA,GAAA,QAAA,CAAA;AAAA,KACF,MAAA,IAAA,QAAA,GAAW,YAAa,CAAA,KAAA,GAAQ,WAAa,EAAA;AACtD,MAAW,QAAA,GAAA,OAAA,CAAA;AAAA,KACN,MAAA;AACL,MAAW,QAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACb;AAEA,IAAM,MAAA,OAAA,GAAU,WAAW,KAAO,CAAA,aAAA;AAAA,MAChC,CAAA,CAAA,EAAI,EAAG,CAAA,CAAA,CAAE,OAAO,CAAA,CAAA,CAAA;AAAA,KAClB,CAAA;AACA,IAAM,MAAA,aAAA,GAAgB,QAAQ,qBAAsB,EAAA,CAAA;AACpD,IAAA,MAAM,MAAM,MAAO,CAAA,UAAA,CAAW,SAAS,OAAS,EAAA,KAAK,CAAC,CAAI,GAAA,CAAA,CAAA;AAE1D,IAAM,MAAA,YAAA,GAAe,YAAa,CAAA,GAAA,GAAM,aAAc,CAAA,GAAA,CAAA;AACtD,IAAA,IAAI,aAAgB,GAAA,CAAA,IAAA,CAAA;AAEpB,IAAA,IAAI,aAAa,QAAU,EAAA;AACzB,MAAA,aAAA,GAAgB,IAAK,CAAA,GAAA;AAAA,QACnB,YAAA,CAAa,IAAO,GAAA,aAAA,CAAc,IAAO,GAAA,GAAA;AAAA,QACzC,IAAK,CAAA,KAAA,CAAM,CAAC,GAAA,GAAM,CAAC,CAAA;AAAA,OACrB,CAAA;AAAA,KACF,MAAA,IAAW,aAAa,OAAS,EAAA;AAC/B,MAAM,MAAA,IAAA,GAAO,YAAa,CAAA,KAAA,GAAQ,aAAc,CAAA,IAAA,CAAA;AAChD,MACE,aAAA,GAAA,IAAA,IAAQ,cAAc,KAAU,KAAA,IAAA,GAAO,KAAK,KAAM,CAAA,GAAA,GAAM,CAAC,CAAI,GAAA,GAAA,CAAA,CAAA;AAAA,KACjE;AAEA,IAAA,QAAA,CAAS,iBAAiB,KAAQ,EAAA;AAAA,MAChC,KAAK,CAAG,EAAA,YAAA,CAAA,EAAA,CAAA;AAAA,MACR,MAAM,CAAG,EAAA,aAAA,CAAA,EAAA,CAAA;AAAA,KACV,CAAA,CAAA;AACD,IAAkB,iBAAA,CAAA,KAAA,GAAQ,CAAC,CAAC,QAAA,CAAA;AAAA,GAC9B;AAEA,EAAA,SAAS,cAAc,KAAkB,EAAA;AACvC,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,WAAA,CAAY,MAAM,OAAU,GAAA,EAAA,CAAA;AAAA,KAC9B;AAEA,IACE,IAAA,QAAA,IACA,CAAC,WAAA,CAAY,aAAa,CAAA,IAC1B,CAAC,WAAY,CAAA,SAAS,CACtB,IAAA,aAAA,KAAkB,SAClB,EAAA;AACA,MAAc,aAAA,CAAA,aAAA,EAAe,WAAW,QAAQ,CAAA,CAAA;AAAA,KAClD;AAEA,IAAA,iBAAA,CAAkB,KAAQ,GAAA,KAAA,CAAA;AAC1B,IAAgB,aAAA,GAAA,KAAA,CAAA,CAAA;AAChB,IAAc,WAAA,GAAA,IAAA,CAAA;AACd,IAAY,SAAA,GAAA,KAAA,CAAA,CAAA;AACZ,IAAW,QAAA,GAAA,KAAA,CAAA,CAAA;AACX,IAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,EAAA,CAAA;AAAA,GACF;AAEA,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,GACF,CAAA;AACF;;;;"}