fix: make CPopper's modifiers to be correctly merged

[MaySoMusician]

Description

(edited) fix #414

Added a function for merging Modifiers of CPopper, that will merge the destination item of an array of modifiers into the corresponding (i.e. having the same name) item of the source array of modifiers, with _.merge()

Motivation and Context

The original _.merge() does never know which item of the destination array should be merge into an item of the source array, but simply merge them according to the order. For example:

merge(
  [
    { name: "preventOverflow", options: { boundary: "window", }, },
    { name: "offset", options: { offset: [0, 10], }, },
    { name: "arrow", options: { element: "[data-popper-arrow]", transform: "rotate(45deg)", }, },
  ],
  [
    { name: "offset", options: { offset: [0, 20], }, },
  ]
)

should be merged into

[
  { name: 'preventOverflow', options: { boundary: 'window' } },
  { name: 'offset', options: { offset: [ 0, 20 ] } },
  { name: 'arrow', options: { element: '[data-popper-arrow]', transform: 'rotate(45deg)' } }
]

but you will actually get

[
  { name: 'offset', options: { boundary: 'window', offset: [ 0, 20 ] } },
  { name: 'offset', options: { offset: [ 0, 10 ] } },
  { name: 'arrow', options: { element: '[data-popper-arrow]', transform: 'rotate(45deg)' } }
]

How Has This Been Tested?

CPopper doesn't have tests currently, and I don't know how to write tests for Vue components, so I ran the code below and confirmed if the output is the same as the example as I mentioned above.

const merge = require("lodash/merge");

function mergeModifiers(object, source) {
  if (!Array.isArray(object)) throw new Error("`object` must be an array");

  const _source = Array.isArray(source) ? source : [source];

  object.forEach((o) => {
    const { name } = o;
    const _s = _source.find((s) => s.name === name);
    if (_s) merge(o, _s);
  });

  return object;
}

console.dir(
  mergeModifiers(
    [
      { name: "preventOverflow", options: { boundary: "window", },},
      { name: "offset", options: { offset: [0, 10], }, },
      { name: "arrow", options: { element: "[data-popper-arrow]", transform: "rotate(45deg)", }, },
    ],
    [
      { name: "offset", options: { offset: [0, 20], }, },
    ]
  ),
  { depth: null }
);

Screenshots (if appropriate):

n/a

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[changeset-bot]

⚠️ No Changeset found

Latest commit: cd16a51

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@MaySoMusician is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui-vue – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/CaCVNVLgt7TU8bt7yy5Xmcz29pDd
✅ Preview: https://chakra-ui-vue-git-fork-maysomusician-feature-fix-cpoppe-7bbbca.vercel.app

[codebender828]

Thank you @MaySoMusician

[codebender828]

@all-contributors please add @MaySoMusician for code

[allcontributors]

@codebender828

I've put up a pull request to add @MaySoMusician! 🎉