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","names":[],"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"],"mappings":";;;;;AAkBA,SAAgB,WAAW,EACzB,YACA,eACA,gBACoB;CACpB,MAAM,KAAK,aAAa,YAAY;CACpC,MAAM,mBAAmB,YAAyB;CAClD,MAAM,oBAAoB,IAAI,MAAM;CAEpC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,SAAS,gBAAgB,OAAe;EACtC,OAAO,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,GAAG,UAAU,MAAM,iBAC9C,QAAQ,EACT;;CAGH,SAAS,gBAAgB,OAAkB,OAAe;EACxD,gBAAgB;EAChB,cAAc,WAAW,MAAO,cAC9B,gBAAgB,MAAM,CACvB;EAED,IAAI,aACF,YAAY,MAAM,UAAU;EAE9B,MAAM,aAAc,gBAAgB;;CAGtC,SAAS,eAAe,OAAkB,OAAe;EACvD,YAAY;EACZ,MAAM,gBAAgB;EACtB,MAAM,aAAc,aAAa;EAEjC,IAAI,YAAY,cAAc,IAAI,kBAAkB,OAAO;GACzD,kBAAkB,QAAQ;GAC1B;;EAGF,MAAM,eAAe,WAClB,MAAO,cAA2B,gBAAgB,MAAM,CAAC,CACzD,uBAAuB;EAC1B,MAAM,WAAW,EAAE,gBAAgB,MAAM;EACzC,MAAM,WAAW,EAAE,gBAAgB,MAAM;EACzC,MAAM,WAAW,MAAM,UAAU,aAAa;EAC9C,MAAM,cAAc,WAAY,WAAW,KAAM,IAAK;EACtD,MAAM,cAAc,WAAY,WAAW,KAAM,IAAK;EAEtD,IAAI,YAAY,aAAa,QAAQ,aACnC,WAAW;OACN,IAAI,WAAW,aAAa,QAAQ,aACzC,WAAW;OAEX,WAAW,KAAA;EAGb,MAAM,UAAU,WAAW,MAAO,cAChC,IAAI,GAAG,EAAE,QAAQ,GAClB;EACD,MAAM,gBAAgB,QAAQ,uBAAuB;EACrD,MAAM,MAAM,OAAO,WAAW,SAAS,SAAS,MAAM,CAAC,GAAG;EAE1D,MAAM,eAAe,aAAa,MAAM,cAAc;EACtD,IAAI,gBAAgB;EAEpB,IAAI,aAAa,UACf,gBAAgB,KAAK,IACnB,aAAa,OAAO,cAAc,OAAO,KACzC,KAAK,MAAM,CAAC,MAAM,EAAE,CACrB;OACI,IAAI,aAAa,SAAS;GAC/B,MAAM,OAAO,aAAa,QAAQ,cAAc;GAChD,gBACE,QAAQ,cAAc,UAAU,OAAO,KAAK,MAAM,MAAM,EAAE,GAAG;;EAGjE,SAAS,iBAAiB,OAAQ;GAChC,KAAK,GAAG,aAAa;GACrB,MAAM,GAAG,cAAc;GACxB,CAAC;EACF,kBAAkB,QAAQ,CAAC,CAAC;;CAG9B,SAAS,cAAc,OAAkB;EACvC,MAAM,gBAAgB;EAEtB,IAAI,aACF,YAAY,MAAM,UAAU;EAG9B,IACE,YACA,CAAC,YAAY,cAAc,IAC3B,CAAC,YAAY,UAAU,IACvB,kBAAkB,WAElB,cAAc,eAAe,WAAW,SAAS;EAGnD,kBAAkB,QAAQ;EAC1B,gBAAgB,KAAA;EAChB,cAAc;EACd,YAAY,KAAA;EACZ,WAAW,KAAA;EACX,gBAAgB;;CAGlB,OAAO;EACL;EACA;EACA;EACA;EACA;EACD"}