Skip to content

Vue 3

Latest
Latest
Compare
Choose a tag to compare
@oleksiikhr oleksiikhr released this 09 Apr 14:01
v2.0.0
c5316e7

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

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
Assets 2
Loading