3.0.0-beta.2

• Fix package exports: #251

Vue 3 - Next (beta)

Menu

• Replacing the style calculation for background (#246).

before

.vsm-background {
  transform: translate(152px, 0px) scaleX(1.08421) scaleY(1.2125);
}

after

.vsm-background {
  transform: translate(246px, 10px);
  width: 409px;
  height: 485px;
}

• Build files

before

dist/demo.html
dist/vue-stripe-menu.common.js
dist/vue-stripe-menu.common.js.map
dist/vue-stripe-menu.css
dist/vue-stripe-menu.umd.js
dist/vue-stripe-menu.umd.js.map
dist/vue-stripe-menu.umd.min.js
dist/vue-stripe-menu.umd.min.js.map

after

dist/vue-stripe-menu.css
dist/vue-stripe-menu.es.js
dist/vue-stripe-menu.umd.js

Internal

• TypeScript added.
• Improved ESLint configs, added Prettier and Stylelint.
• Added Github documents: code of conduct, contributors and issue templates.
• Installed Node.js as core 16.15.0.
• Replaced yarn with pnpm.
• Replaced CircleCI with Github Actions.
• Removed build documentation files from the repository. The current build is in the gh-pages branch.
• Added more workflows:
  • Additional code check using CodeQL.
  • Automatic publishing to npm from main branch.

Vue 3

CHANGELOG v2.0.0

Many BREAK CHANGES Sorry, I couldn't stop..

Global changes

To reduce the number of override styles, unnecessary classes and so on, many styles/classes have been added/changed or removed!

• Added the ability to customize styles in realtime via Demo Website
• Added a simplified demo of the component to the #Install section
• Replace default bundle from vue-stripe-menu.common.js to vue-stripe-menu.umd.min.js
• Fixed animation with problematic dropdown-transition (see new transition-timeout props)
• Now, when the screen width changes window.addEventListener('resize'), the following happens:
  • dropdown is open - location is being recalculated (resizeDropdown function)
  • dropdown is closed - improved logic of instant destruction of styles
• Added the ability not to install the component globally:

import { VsmMenu, VsmMob } from 'vue-stripe-menu'

export default {
  components: {
    VsmMenu, VsmMob
  }
}

• Add styles:

// These default values have been removed from the library (default font-size is yours)
.vsm-link, .vsm-mob-content__wrap {
  font-size: 17px;
  font-weight: 500;
}

.vsm-root > li {
  // display: flex; // <-- default display removed
  // All override classes from .vsm-section
}

// Change 768px on your value from $vsm-media, if set
@media screen and (max-width: 768px) {
  .vsm-mob-show {
    display: block;
  }
  .vsm-mob-hide {
    display: none;
  }
  .vsm-mob-full {
    flex-grow: 1;
  }
}

• Change the code/styles according to the changes below

Style changes

• Removed cursor: default from dropdown buttons with HTML element <a href="" />
• Removed @media styles
• Removed predefined font-size: 17px and font-weight: 500
• Renamed variables:
  • $vsm-menu-border-radius > $vsm-border-radius
  • $vsm-menu-transform-content > $vsm-transform-content
  • $vsm-menu-link-height > $vsm-link-height
  • $vsm-menu-arrow-shadow > $vsm-arrow-shadow
  • $vsm-mob-size > $vsm-mob-hamburger-size
• Added variables:
  • Menu: $vsm-arrow-size, $vsm-arrow-shadow, $vsm-arrow-border-radius, $vsm-index, $vsm-background,
    $vsm-background-alt, $vsm-background-arrow, $vsm-link-padding
  • Mob: $vsm-mob-dropdown-offset, $vsm-mob-dropdown-border-radius, $vsm-mob-close-weight, $vsm-mob-close-color,
    $vsm-mob-close-color-hover, $vsm-mob-link-offset, $vsm-mob-background, $vsm-mob-shadow, $vsm-mob-transition,
    $vsm-mob-transition-link

Classes changes

• Removed
  • vsm-section (now list-style: none set from parent .vsm-root > li)
• Renamed
  • vsm-section_menu > vsm-link-container
  • vsm-section_mob > vsm-mob-container

Components

Menu

• Attribute added to each link tabindex="0"

Props

These 2 properties have been removed due to unnecessary use, as well as dependence on css styles (width and height are overridden on the first interaction)

• Removed base-width
• Removed base-height

Added the ability to indent the dropdown menu from links

• Added dropdown-offset
• Added transition-timeout

Methods

When changing dynamic content inside dropdown, you can now call resizeDropdown via $refs, resizing and relocating the dropdown

• Added resizeDropdown

Properties

• Removed hasDropdownEls
• Removed $refs.links
• Added itemsWithDropdown
• Added elementsWithDropdown
• Added dropdownContainerItems

Mob

Slots

Added the ability to replace the close button after opening the dropdown menu

• Added close

Other

Classes

• Removed vsm-mob-full
• Added vsm-mob-show

v1.5.0

Added closeDropdown() method for Mobile component #194

v1.4.0

• Delete core-js library from dependecies #191

v1.3.1

• Bump devDependencies
• Fix hide dropdown after scroll on mobile browser

v1.3.0

• New handler props
• Bump libraries + audit fix

v1.2.12

Bump libraries + audit fix

v1.2.11

• Bump libraries + audit fix
• Update demo code
• Fix execute tests