@maxpike/vue/src/utils/popper.ts

Vue VariantJS: Fully configurable Vue 3 components styled with TailwindCSS

import { Modifier, ModifierArguments } from '@popperjs/core';
import { Data } from '@variantjs/core';

const sameWidthModifier: Modifier<'sameWidth', Data> = {
  name: 'sameWidth',
  enabled: true,
  phase: 'beforeWrite',
  requires: ['computeStyles'],
  fn: (options: ModifierArguments<Data>): void => {
    const { state } = options;
    state.styles.popper.width = `${state.rects.reference.width}px`;
  },
  effect: (options: ModifierArguments<Data>): void => {
    const { state } = options;
    const reference = state.elements.reference as HTMLElement;
    state.elements.popper.style.width = `${reference.offsetWidth}px`;
  },
};

// eslint-disable-next-line import/prefer-default-export
export { sameWidthModifier };