The decoration prop needs a value that can be set for it instead of null. When a wrapper is applied to the class with a different default value then vue spews errors when null/empty string is passed for the decoration property value.

Example wrapper definition

<template>
  <q-ribbon
    :position="position"
    :color="color"
    :background-color="backgroundColor"
    :leaf-position="leafPosition"
    :leaf-color="leafColor"
    :decoration="decoration"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <slot></slot>
  </q-ribbon>
</template>

export default {
  name: 'Ribbon',
  props: {
    position: { default: 'left' },
    color: { default: '#ffffff' },
    backgroundColor: { default: 'primary' },
    leafPosition: { default: 'bottom' },
    leafColor: { default: 'accent' },
    decoration: { default: 'point-in', validator: prop => typeof prop === 'string' || prop === null }
  },

  data () {
    return {}
  }
}

Example desired usage

<ribbon
  size="full"
  decoration="leaf" <!-- or even "default" -->
>
    My Ribbon Text
</ribbon>

When build with Quasar V2, an error showed up:
Extension(@quasar/qribbon): is not compatible with quasar v2.0.0-beta.8. Required version: ^1.5.1

Describe the bug
Link to the examples has a wrong target to
https://quasarframework.github.io/app-extension-qribbon/examples instead of
https://quasarframework.github.io/quasar-ui-qribbon/examples

To Reproduce

1. Go to Documentation Page
2. Click on Examples can be found here

Expected behavior
Open live examples https://quasarframework.github.io/quasar-ui-qribbon/examples

While the instruction says quasar ext add @quasar/qribbon is the command to install, there is a dependency to @quasar/colorize that requires manual add, or it fails.

Maybe the instruction can be improved or quasar ext add can become smarter to detect the dependencies and install them automatically.

Describe the bug
is there something wrong with sass?

Screenshots

Why are we using css color codes instead of quasar colors and vars?

QRibbon needs updating to bring it up to date with the latest UI kit.

I'd like to have the q-card with ribbon and no horisontal scroll bar. But ribbon leafs dissapeared when adding the "overflow-x: hidden;" as below. What I'm doing wrong ?

<q-card class="bg-grey-2" style="overflow-x: hidden; max-width: 85vw; max-height: 85vh;">
      <div class="box-ribbon-wrapper">
        <div class="flex justify-between q-pt-xl">
          <q-ribbon class="q-pb-md" background-color="primary" size="full" style="width: 100%; font-size: 3vh" glow glow-iteration count="1" inline>Ribbon Text</q-ribbon>
        </div>
      </div>
</q-card>

Real quick, the links to both the example and demo for the ribbon from https://quasarframework.github.io/quasar-ui-qribbon/docs do not work.

LINKS
https://quasarframework.github.io/app-extension-qribbon/examples
http://quasarframework.github.io/app-extension-qribbon/builder

BUTTONS
https://quasarframework.github.io/quasar-ui-qribbon/examples - Works
https://quasarframework.github.io/quasar-ui-qribbon/demo - Does not work

[Vue warn]: Invalid prop: custom validator check failed for prop "decoration".

found in

---> <QRibbon>

This is regardless of the value or options given.

eg:

<q-ribbon decoration="point-out" >Blah</q-ribbon>