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;AACtC,SAAO,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,GAAG,UAAU,MAAM,iBAC9C,QAAQ,EACT;;CAGH,SAAS,gBAAgB,OAAkB,OAAe;AACxD,kBAAgB;AAChB,gBAAc,WAAW,MAAO,cAC9B,gBAAgB,MAAM,CACvB;AAED,MAAI,YACF,aAAY,MAAM,UAAU;AAE9B,QAAM,aAAc,gBAAgB;;CAGtC,SAAS,eAAe,OAAkB,OAAe;AACvD,cAAY;AACZ,QAAM,gBAAgB;AACtB,QAAM,aAAc,aAAa;AAEjC,MAAI,YAAY,cAAc,IAAI,kBAAkB,OAAO;AACzD,qBAAkB,QAAQ;AAC1B;;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;AAEtD,MAAI,YAAY,aAAa,QAAQ,YACnC,YAAW;WACF,WAAW,aAAa,QAAQ,YACzC,YAAW;MAEX,YAAW;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;AAEpB,MAAI,aAAa,SACf,iBAAgB,KAAK,IACnB,aAAa,OAAO,cAAc,OAAO,KACzC,KAAK,MAAM,CAAC,MAAM,EAAE,CACrB;WACQ,aAAa,SAAS;GAC/B,MAAM,OAAO,aAAa,QAAQ,cAAc;AAChD,mBACE,QAAQ,cAAc,UAAU,OAAO,KAAK,MAAM,MAAM,EAAE,GAAG;;AAGjE,WAAS,iBAAiB,OAAQ;GAChC,KAAK,GAAG,aAAa;GACrB,MAAM,GAAG,cAAc;GACxB,CAAC;AACF,oBAAkB,QAAQ,CAAC,CAAC;;CAG9B,SAAS,cAAc,OAAkB;AACvC,QAAM,gBAAgB;AAEtB,MAAI,YACF,aAAY,MAAM,UAAU;AAG9B,MACE,YACA,CAAC,YAAY,cAAc,IAC3B,CAAC,YAAY,UAAU,IACvB,kBAAkB,UAElB,eAAc,eAAe,WAAW,SAAS;AAGnD,oBAAkB,QAAQ;AAC1B,kBAAgB;AAChB,gBAAc;AACd,cAAY;AACZ,aAAW;AACX,kBAAgB;;AAGlB,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}