vuestic-ui/dist/esm-node/src/components/va-dropdown/hooks/useDropdown.mjs.map

Vue 3 UI Framework

{"version":3,"file":"useDropdown.mjs","sources":["../../../../../../src/components/va-dropdown/hooks/useDropdown.ts"],"sourcesContent":["import { computed, ref, Ref } from 'vue'\nimport {\n  autoUpdate,\n  flip,\n  offset, Placement,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/vue'\nimport { CursorAnchor, DropdownOffsetProp } from '../types'\nimport { PlacementWithAlias, usePlacementAliases } from '../../../composables'\n\ntype useDropdownOptions = {\n  placement: PlacementWithAlias,\n  offset: DropdownOffsetProp,\n  autoPlacement: boolean,\n  stickToEdges: boolean,\n  keepAnchorWidth: boolean,\n  verticalScrollOnOverflow: boolean,\n}\n\nexport const useDropdown = (\n  anchorComputed: Ref<HTMLElement| CursorAnchor | undefined>,\n  floating: Ref<HTMLElement | undefined>,\n  target: Ref<HTMLElement | undefined>,\n  options: Ref<useDropdownOptions>,\n) => {\n  const placementComputed = computed(() => {\n    const { position, align } = usePlacementAliases({ placement: options.value.placement })\n\n    return `${position.value}-${align.value}` as Placement\n  })\n\n  const offsetComputed = computed(() => {\n    const dropdownOffset = options.value.offset\n    const result = { mainAxis: 0, crossAxis: 0 }\n    if (Array.isArray(dropdownOffset)) {\n      result.mainAxis = dropdownOffset[0]\n      result.crossAxis = dropdownOffset[1]\n    }\n\n    if (typeof dropdownOffset === 'number') {\n      result.mainAxis = dropdownOffset\n    }\n\n    return result\n  })\n\n  const middlewareComputed = computed(() => {\n    const { autoPlacement, stickToEdges, keepAnchorWidth, verticalScrollOnOverflow } = options.value\n    const result = [\n      offset(offsetComputed.value),\n    ]\n\n    if (autoPlacement) {\n      result.push(\n        // boundary doesn't work with ssr (trying to access document)\n        flip({\n          boundary: target.value,\n        }),\n      )\n    }\n\n    if (stickToEdges) {\n      result.push(\n        shift(),\n      )\n    }\n\n    if (keepAnchorWidth || verticalScrollOnOverflow) {\n      result.push(size({\n        apply ({ elements, availableHeight }) {\n          if (keepAnchorWidth) {\n            const reference = elements.reference\n            const availableWidth = reference.getBoundingClientRect().width\n            Object.assign(elements.floating.style, {\n              // Don't set width here, because some plugin applies width 100% and it breaks layout\n              maxWidth: `${availableWidth}px`,\n              minWidth: `${availableWidth}px`,\n            })\n          }\n\n          if (verticalScrollOnOverflow) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${availableHeight}px`,\n            })\n          }\n        },\n      }))\n    }\n\n    return result\n  })\n\n  const { floatingStyles, isPositioned } = typeof document === 'undefined'\n    ? { floatingStyles: {}, isPositioned: ref(false) }\n    : useFloating(anchorComputed, floating, {\n      placement: placementComputed,\n      whileElementsMounted: autoUpdate,\n      middleware: middlewareComputed,\n      transform: true,\n    })\n\n  return {\n    // Because floating ui by default set top and left to 0 before position calculated, dropdown jumps to the left top corner\n    // If user wants to make focus on el as soon as Dropdown is opened, page will be scrolled on the left top corner\n    floatingStyles: computed(() => {\n      // If position is not calculated yet, we need to set position to fixed to prevent page scrolling\n      if (!isPositioned.value) {\n        return {\n          position: 'fixed',\n        }\n      }\n\n      return floatingStyles.value\n    }),\n\n    isPositioned,\n  }\n}\n"],"names":[],"mappings":";;;AAqBO,MAAM,cAAc,CACzB,gBACA,UACA,QACA,YACG;AACG,QAAA,oBAAoB,SAAS,MAAM;AACjC,UAAA,EAAE,UAAU,MAAA,IAAU,oBAAoB,EAAE,WAAW,QAAQ,MAAM,UAAA,CAAW;AAEtF,WAAO,GAAG,SAAS,KAAK,IAAI,MAAM,KAAK;AAAA,EAAA,CACxC;AAEK,QAAA,iBAAiB,SAAS,MAAM;AAC9B,UAAA,iBAAiB,QAAQ,MAAM;AACrC,UAAM,SAAS,EAAE,UAAU,GAAG,WAAW,EAAE;AACvC,QAAA,MAAM,QAAQ,cAAc,GAAG;AAC1B,aAAA,WAAW,eAAe,CAAC;AAC3B,aAAA,YAAY,eAAe,CAAC;AAAA,IACrC;AAEI,QAAA,OAAO,mBAAmB,UAAU;AACtC,aAAO,WAAW;AAAA,IACpB;AAEO,WAAA;AAAA,EAAA,CACR;AAEK,QAAA,qBAAqB,SAAS,MAAM;AACxC,UAAM,EAAE,eAAe,cAAc,iBAAiB,6BAA6B,QAAQ;AAC3F,UAAM,SAAS;AAAA,MACb,OAAO,eAAe,KAAK;AAAA,IAAA;AAG7B,QAAI,eAAe;AACV,aAAA;AAAA;AAAA,QAEL,KAAK;AAAA,UACH,UAAU,OAAO;AAAA,QAAA,CAClB;AAAA,MAAA;AAAA,IAEL;AAEA,QAAI,cAAc;AACT,aAAA;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IAEV;AAEA,QAAI,mBAAmB,0BAA0B;AAC/C,aAAO,KAAK,KAAK;AAAA,QACf,MAAO,EAAE,UAAU,mBAAmB;AACpC,cAAI,iBAAiB;AACnB,kBAAM,YAAY,SAAS;AACrB,kBAAA,iBAAiB,UAAU,sBAAA,EAAwB;AAClD,mBAAA,OAAO,SAAS,SAAS,OAAO;AAAA;AAAA,cAErC,UAAU,GAAG,cAAc;AAAA,cAC3B,UAAU,GAAG,cAAc;AAAA,YAAA,CAC5B;AAAA,UACH;AAEA,cAAI,0BAA0B;AACrB,mBAAA,OAAO,SAAS,SAAS,OAAO;AAAA,cACrC,WAAW,GAAG,eAAe;AAAA,YAAA,CAC9B;AAAA,UACH;AAAA,QACF;AAAA,MACD,CAAA,CAAC;AAAA,IACJ;AAEO,WAAA;AAAA,EAAA,CACR;AAED,QAAM,EAAE,gBAAgB,aAAA,IAAiB,OAAO,aAAa,cACzD,EAAE,gBAAgB,CAAC,GAAG,cAAc,IAAI,KAAK,EAC7C,IAAA,YAAY,gBAAgB,UAAU;AAAA,IACtC,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA,CACZ;AAEI,SAAA;AAAA;AAAA;AAAA,IAGL,gBAAgB,SAAS,MAAM;AAEzB,UAAA,CAAC,aAAa,OAAO;AAChB,eAAA;AAAA,UACL,UAAU;AAAA,QAAA;AAAA,MAEd;AAEA,aAAO,eAAe;AAAA,IAAA,CACvB;AAAA,IAED;AAAA,EAAA;AAEJ;"}