search

epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.52k stars 340 forks source link

Added ability to apply multiple presets #4303

Closed Fsss126 closed 5 months ago

Fsss126 commented 5 months ago

What was done

Description

Multiple presets can be applied to component by passing an array, support for passing a string as it was before remains

<VaButton
    :preset="['addToCart', 'promotion']"
/>
createVuestic({
  components: {
    presets: {
      VaButton: {
        addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
        promotion: { gradient: true, color: 'primary' }
      },
    },
  },
})

Presets can extend each other - if one preset specifies preset prop they will be recursively applied. This code will produce the same as above

createVuestic({
  components: {
    presets: {
      VaButton: {
        addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
        promotion: { preset: 'addToCart', gradient: true, color: 'primary' }
      },
    },
  },
})
<VaButton
    preset="promotion"
/>

Extending multiple presets is also supported.

Types of changes