<commit_before><template>
  <div class="q-layout-padding row justify-center" style="width: 500px; max-width: 90vw;">
    <div class="fixed-center z-max">
      <div class="row group">
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('top-left')">
            <q-icon name="arrow_back" class="rotate-45" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('top')">
            <q-icon name="arrow_upward" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('top-right')">
            <q-icon name="arrow_upward" class="rotate-45" />
          </q-btn>
        </div>
      </div>
      <div class="row group">
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('left')">
            <q-icon name="arrow_back" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('center')">
            <q-icon name="fullscreen_exit" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('right')">
            <q-icon name="arrow_forward" />
          </q-btn>
        </div>
      </div>
      <div class="row group">
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('bottom-left')">
            <q-icon name="arrow_forward" class="rotate-135" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('bottom')">
            <q-icon name="arrow_downward" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('bottom-right')">
            <q-icon name="arrow_forward" class="rotate-45" />
          </q-btn>
        </div>
      </div>
    </div>

    <q-btn round icon="touch_app" @click="showGroup" color="primary" class="absolute-top-left" />
  </div>
</template>

<script>
const alerts = [
  { color: 'negative', message: 'Woah! Danger! You are getting good at this!', icon: 'report_problem' },
  { message: 'You need to know about this!', icon: 'warning' },
  { message: 'Wow! Nice job!', icon: 'thumb_up' },
  { color: 'teal', message: 'Quasar is cool! Right?', icon: 'tag_faces' },
  { color: 'purple', message: 'Jim just pinged you', avatar: 'https://cdn.quasar.dev/img/boy-avatar.png' },
  { multiLine: true, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quisquam non ad sit assumenda consequuntur esse inventore officia. Corrupti reiciendis impedit vel, fugit odit quisquam quae porro exercitationem eveniet quasi.' }
]

export default {
  data () {
    return {
      visible: true,
      visible2: true
    }
  },
  methods: {
    showGroup () {
      this.$q.notify({
        message: 'Grouped message ' + Math.random(),
        group: 'some-group',
        badge: {
          color: 'teal'
        }
      })
    },

    alertAsMethod (position) {
      const { color, textColor, multiLine, icon, message, avatar } = alerts[ Math.floor(Math.random(alerts.length) * 10) % alerts.length ]
      const random = Math.random() * 100

      const twoActions = random > 70
      const buttonColor = color ? 'white' : void 0

      this.$q.notify({<commit_msg>chore(ui/dev): add one more test-case to notify page<commit_after><template>
  <div class="q-layout-padding row justify-center" style="width: 500px; max-width: 90vw;">
    <div class="fixed-center z-max">
      <div class="row group">
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('top-left')">
            <q-icon name="arrow_back" class="rotate-45" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('top')">
            <q-icon name="arrow_upward" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('top-right')">
            <q-icon name="arrow_upward" class="rotate-45" />
          </q-btn>
        </div>
      </div>
      <div class="row group">
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('left')">
            <q-icon name="arrow_back" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('center')">
            <q-icon name="fullscreen_exit" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('right')">
            <q-icon name="arrow_forward" />
          </q-btn>
        </div>
      </div>
      <div class="row group">
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('bottom-left')">
            <q-icon name="arrow_forward" class="rotate-135" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="accent" @click="alertAsMethod('bottom')">
            <q-icon name="arrow_downward" />
          </q-btn>
        </div>
        <div>
          <q-btn round size="sm" color="secondary" @click="alertAsMethod('bottom-right')">
            <q-icon name="arrow_forward" class="rotate-45" />
          </q-btn>
        </div>
      </div>
    </div>

    <q-btn round icon="touch_app" @click="showGroup1" color="primary" class="absolute-top-left" />
    <q-btn round icon="touch_app" @click="showGroup2" color="secondary" class="absolute-bottom-left" />
  </div>
</template>

<script>
const alerts = [
  { color: 'negative', message: 'Woah! Danger! You are getting good at this!', icon: 'report_problem' },
  { message: 'You need to know about this!', icon: 'warning' },
  { message: 'Wow! Nice job!', icon: 'thumb_up' },
  { color: 'teal', message: 'Quasar is cool! Right?', icon: 'tag_faces' },
  { color: 'purple', message: 'Jim just pinged you', avatar: 'https://cdn.quasar.dev/img/boy-avatar.png' },
  { multiLine: true, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quisquam non ad sit assumenda consequuntur esse inventore officia. Corrupti reiciendis impedit vel, fugit odit quisquam quae porro exercitationem eveniet quasi.' }
]

export default {
  data () {
    return {
      visible: true,
      visible2: true
    }
  },
  methods: {
    showGroup1 () {
      this.$q.notify({
        message: 'Grouped message ' + Math.random(),
        group: 'some-group',
        badge: {
          color: 'teal'
        }
      })
    },

    showGroup2 () {
      this.$q.notify('Some message')
    },

    alertAsMethod (position) {
      const { color, textColor, multiLine, icon, message, avatar } = alerts[ Math.floor(Math.random(alerts.length) * 10) % alerts.length ]
      const random = Math.random() * 100

      const twoActions = random > 70
      const buttonColor = color ? 'white' : void 0

      this.$q.notify({
{'fraction_non_alphanumeric': 0.17, 'fraction_numerical': 0.007142857142857143, 'mean_word_length': 2.308601134215501, 'pattern_counts': {'":': 0, '<': 122, '<?xml version=': 0, '>': 124, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6941111', 'n_tokens_mistral': 2357, 'n_tokens_neox': 2281, 'n_words': 529}