AvocadoVenom

const supportedScreenOrientation =
  (screen?.orientation || {}).type ?? (screen as any).mozOrientation ?? (screen as any).msOrientation
  
const safariScreenOrientation: OrientationType =
  !screen?.orientation && matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary'

const initialScreenOrientation = supportedScreenOrientation ?? safariScreenOrientation ?? 'portrait-primary'
let screenOrientation: OrientationType = initialScreenOrientation

if (screen.orientation) {

AvocadoVenom

enum MobileOS {
  Android = 'android',
  iOS = 'ios',
  Unknown = 'unknown',
  WindowsPhone = 'Windows Phone'
}

/**
 * https://stackoverflow.com/a/21742107
 * Determine the mobile operating system.

AvocadoVenom

export interface DeviceState {
  isDesktop: boolean
  desktopOS: DesktopOS | undefined
  isWindowsDesktop: boolean
  isLinuxOrUnixDesktop: boolean

  isMobile: boolean
  mobileOS: MobileOS | undefined
  isAndroidDevice: boolean
  isAppleDevice: boolean

AvocadoVenom

const userAgent: string = navigator.userAgent || navigator.vendor || window.opera

const isMobileDevice = (): boolean => {
  const regexs = [/(Android)(.+)(Mobile)/i, /BlackBerry/i, /iPhone|iPod/i, /Opera Mini/i, /IEMobile/i]
  return regexs.some((b) => userAgent.match(b))
}

const isTabletDevice = (): boolean => {
  const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/
  return regex.test(userAgent.toLowerCase())

AvocadoVenom

<template>
  <div class="block-content">
    <transition
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @after-enter="onAfterEnter"
      @before-leave="onBeforeLeave"
      @leave="onLeave"
      mode="out-in"
    >

AvocadoVenom

<template>
  <div class="block-content">
    <transition
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @after-enter="onAfterEnter"
      @before-leave="onBeforeLeave"
      @leave="onLeave"
      mode="out-in"
    >

AvocadoVenom

<template>
  <div class="block-content">
    <button
      type="button"
      class="block-content__button"
      aria-label="Toggle button"
      @click="isExpanded = !isExpanded"
    >
      {{ toggleCtaLabel }}
    </button>

AvocadoVenom

<template>
  <div class="block-content">
    <button
      type="button"
      class="block-content__button"
      aria-label="Toggle button"
      @click="isExpanded = !isExpanded"
    >
      {{ toggleCtaLabel }}
    </button>

AvocadoVenom

{
  // ...
  "postversion": "git push --follow-tags && yarn run generate-changelog",
  "generate-changelog": "node ./scripts/gitlab/gitlab-changelog.js"
}

AvocadoVenom

stages:
# - ...
  - tag

changelog:
  stage: tag
  image: curlimages/curl:7.79.1
  only:
    - dev # Feel free to update this condition
  script: