@bildvitta/quasar-ui-asteroid 3.8.0-beta.3 → 3.8.0-beta.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.8.0-beta.3",
+  "version": "3.8.0-beta.5",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -35,7 +35,7 @@
     "autoprefixer": "^10.4.2",
     "core-js": "^3.20.2",
     "postcss": "^8.4.5",
-    "quasar": "^2.11.5",
+    "quasar": "^2.11.10",
     "rimraf": "^3.0.2",
     "rollup": "^2.66.0",
     "rollup-plugin-local-resolve": "^1.0.7",

package/src/components/app-menu/QasAppMenu.vue

@@ -1,81 +1,106 @@
 <template>
-  <q-drawer v-model="model" :behavior="behavior" :width="drawerWidth">
-    <div class="column full-height justify-between qas-app-menu">
-      <div class="full-width">
-        <!-- Brand -->
-        <div v-if="!$qas.screen.untilLarge" class="q-pt-xl q-px-lg">
-          <router-link class="block q-toolbar__title relative-position text-no-decoration" :to="rootRoute">
-            <img v-if="brand" :alt="title" class="qas-app-menu__brand" :src="brand">
-            <span v-else class="ellipsis text-bold text-primary">{{ title }}</span>
-            <q-badge v-if="hasDevelopmentBadge" color="red" floating :label="developmentBadgeLabel" />
-          </router-link>
-        </div>
+  <div class="qas-app-menu">
+    <q-drawer v-model="model" :behavior="behavior" class="shadow-2" :mini="isMiniMode" :mini-width="88" show-if-above :width="drawerWidth" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent">
+      <div class="column full-height justify-between no-wrap">
+        <div class="full-width">
+          <!-- Brand -->
+          <div v-if="!isUntilLarge" class="q-mb-xl q-pt-xl qas-app-menu__label" :class="spacedItemClass">
+            <router-link class="flex relative-position text-no-decoration" :class="brandPositionClass" :to="rootRoute">
+              <q-img v-if="normalizedBrand" :alt="title" class="qas-app-menu__brand qas-app-menu__label" :class="brandClass" height="40px" no-spinner :src="normalizedBrand" />
+
+              <span v-else-if="!isMiniMode" class="ellipsis text-bold text-primary text-subtitle2">{{ title }}</span>
+
+              <q-badge v-if="hasDevelopmentBadge" color="red" floating :label="developmentBadgeLabel" />
+            </router-link>
+          </div>
 
-        <!-- Module -->
-        <div v-if="displayModuleSection" class="items-center justify-between no-wrap q-mt-xl q-px-lg qas-app-menu__module row">
-          <div class="full-width">
-            <qas-select v-model="module" borderless class="q-py-xs qas-app-menu__select shadow-2" dense input-class="q-px-md" :options="defaultModules" :outlined="false" :use-search="false" @update:model-value="redirectHandler(currentModelOption)" />
+          <div v-if="normalizedBrand" class="qas-app-menu__label" :class="spacedItemClass">
+            <q-separator />
           </div>
 
-          <div v-if="$qas.screen.isSmall" class="q-ml-xl">
+          <div v-if="isUntilLarge" class="q-pr-xl q-pt-md text-right">
             <qas-btn color="grey-9" icon="sym_r_close" variant="tertiary" @click="closeDrawer" />
           </div>
-        </div>
 
-        <!-- Menu -->
-        <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-9">
-          <template v-for="(menuItem, index) in items">
-            <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content">
-              <q-item class="items-center q-pb-none q-pt-md qas-app-menu__item qas-app-menu__item--label text-weight-bold">
-                {{ menuItem.label }}
-              </q-item>
+          <!-- Module -->
+          <div v-if="displayModuleSection" class="items-center justify-between no-wrap q-mt-xl qas-app-menu__label qas-app-menu__module row" :class="spacedItemClass">
+            <div class="full-width text-center">
+              <pv-app-menu-dropdown v-bind="appMenuDropdownProps" />
+            </div>
+          </div>
 
-              <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item qas-app-menu__item--children" :to="getRouterRedirect(menuChildItem)">
-                <q-item-section v-if="menuChildItem.icon" avatar>
-                  <q-icon :name="menuChildItem.icon" />
+          <!-- List -->
+          <q-list v-if="items.length" class="q-mt-xl qas-app-menu__menu text-grey-9">
+            <template v-for="(menuItem, index) in items">
+              <div v-if="hasChildren(menuItem)" :key="`children-${index}`" class="qas-app-menu__content" :class="contentClass">
+                <q-item class="ellipsis items-center q-py-none qas-app-menu__item qas-app-menu__item--label-mini text-weight-bold">
+                  <div class="ellipsis qas-app-menu__label text-grey-9 text-subtitle2" :class="spacedItemClass">
+                    {{ menuItem.label }}
+                  </div>
+                </q-item>
+
+                <q-item v-for="(menuChildItem, childIndex) in menuItem.children" :key="childIndex" :active="isActive(menuChildItem)" class="qas-app-menu__children qas-app-menu__item qas-app-menu__item--children" :to="getRouterRedirect(menuChildItem)">
+                  <q-item-section v-if="menuChildItem.icon" avatar>
+                    <q-icon :name="menuChildItem.icon" />
+                  </q-item-section>
+
+                  <q-item-section>
+                    <q-item-label>
+                      <div class="ellipsis text-subtitle2">
+                        {{ menuChildItem.label }}
+                      </div>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </div>
+
+              <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
+                <q-item-section v-if="menuItem.icon" avatar>
+                  <q-icon :name="menuItem.icon" />
                 </q-item-section>
 
                 <q-item-section>
-                  <q-item-label>{{ menuChildItem.label }}</q-item-label>
+                  <q-item-label>
+                    <div class="ellipsis text-subtitle2">
+                      {{ menuItem.label }}
+                    </div>
+                  </q-item-label>
                 </q-item-section>
               </q-item>
-            </div>
-
-            <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
-              <q-item-section v-if="menuItem.icon" avatar>
-                <q-icon :name="menuItem.icon" />
-              </q-item-section>
-
-              <q-item-section>
-                <q-item-label>{{ menuItem.label }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-list>
-      </div>
+            </template>
+          </q-list>
+        </div>
 
-      <!-- User -->
-      <div v-if="showUser" class="full-width q-pb-lg q-px-lg">
-        <qas-app-user avatar-size="48px" :user="user" @sign-out="signOut" />
+        <!-- User -->
+        <div v-if="showUser" class="full-width q-pb-lg q-px-lg">
+          <qas-app-user v-bind="appUserProps" />
+        </div>
       </div>
-    </div>
-  </q-drawer>
+    </q-drawer>
+  </div>
 </template>
 
 <script>
+import PvAppMenuDropdown from './private/PvAppMenuDropdown.vue'
+
 import QasAppUser from '../app-user/QasAppUser.vue'
+
 import { isLocalDevelopment } from '../../helpers'
 
 export default {
   name: 'QasAppMenu',
 
   components: {
+    PvAppMenuDropdown,
     QasAppUser
   },
 
+  inheritAttrs: false,
+
   props: {
     brand: {
       default: '',
+      required: true,
       type: String
     },
 
@@ -84,6 +109,12 @@ export default {
       type: Array
     },
 
+    miniBrand: {
+      type: String,
+      required: true,
+      default: ''
+    },
+
     modelValue: {
       default: true,
       type: Boolean
@@ -101,7 +132,6 @@ export default {
 
     title: {
       default: '',
-      required: true,
       type: String
     },
 
@@ -116,13 +146,58 @@ export default {
 
   data () {
     return {
+      hasOpenedMenu: false,
+      isMini: this.$qas.screen.isLarge,
       module: ''
     }
   },
 
   computed: {
+    appMenuDropdownProps () {
+      return {
+        buttonDropdownProps: {
+          'onUpdate:menu': this.setHasOpenedMenu
+        },
+
+        currentModule: this.currentModelOption,
+        modules: this.defaultModules
+      }
+    },
+
+    appUserProps () {
+      return {
+        avatarSize: '40px',
+        user: this.user,
+
+        menuProps: {
+          'onUpdate:modelValue': this.setHasOpenedMenu
+        },
+
+        // eventos
+        onSignOut: this.signOut
+      }
+    },
+
     behavior () {
-      return this.$qas.screen.untilLarge ? 'mobile' : 'desktop'
+      return this.isUntilLarge ? 'mobile' : 'desktop'
+    },
+
+    brandClass () {
+      return {
+        'qas-app-menu__brand--spaced': !this.isMiniMode
+      }
+    },
+
+    brandPositionClass () {
+      return {
+        'justify-center': this.isMiniMode
+      }
+    },
+
+    contentClass () {
+      return {
+        'qas-app-menu__content--spaced': !this.isMiniMode
+      }
     },
 
     currentModelOption () {
@@ -144,6 +219,7 @@ export default {
       // Add a default module called "Localhost" when app is running in local development.
       defaultModules.unshift({
         label: `Localhost ${this.title ? `(${this.title})` : ''}`,
+        icon: 'sym_r_home',
         value
       })
 
@@ -172,13 +248,25 @@ export default {
     },
 
     drawerWidth () {
-      return this.$qas.screen.isSmall ? 320 : 280
+      return this.isUntilLarge ? 320 : 280
     },
 
     hasDevelopmentBadge () {
       return !!this.developmentBadgeLabel
     },
 
+    isLargeScreen () {
+      return this.$qas.screen.isLarge
+    },
+
+    isMiniMode () {
+      return this.isLargeScreen && this.isMini && !this.hasOpenedMenu
+    },
+
+    isUntilLarge () {
+      return this.$qas.screen.untilLarge
+    },
+
     model: {
       get () {
         return this.modelValue
@@ -189,12 +277,22 @@ export default {
       }
     },
 
+    normalizedBrand () {
+      return this.isMiniMode ? this.miniBrand : this.brand
+    },
+
     rootRoute () {
       return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
     },
 
     showUser () {
-      return this.hasUser && !this.$qas.screen.untilLarge
+      return this.hasUser && !this.isUntilLarge
+    },
+
+    spacedItemClass () {
+      return {
+        'qas-app-menu__label--spaced': !this.isMiniMode
+      }
     }
   },
 
@@ -209,6 +307,10 @@ export default {
   },
 
   methods: {
+    closeDrawer () {
+      this.$emit('update:modelValue', false)
+    },
+
     getNormalizedPath (path) {
       return path.split('/').filter(Boolean)?.[0]
     },
@@ -239,24 +341,28 @@ export default {
       return currentPath === itemPath
     },
 
-    redirectHandler ({ value }) {
-      if (!value.includes(window.location.host)) {
-        window.location.href = value
-      }
+    onMouseEvent ({ type }) {
+      if (!this.isLargeScreen) return
+
+      const isMouseLeave = type === 'mouseleave'
+
+      this.isMini = isMouseLeave
+
+      this.model = false
     },
 
     signOut () {
       this.$emit('sign-out')
     },
 
-    closeDrawer () {
-      this.$emit('update:modelValue', false)
+    setHasOpenedMenu (value) {
+      this.hasOpenedMenu = value
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .qas-app-menu {
   // Workaround para alterar o padding interno do QSelect sem influenciar na caixa de opções.
   &__module {
@@ -269,15 +375,6 @@ export default {
     }
   }
 
-  &__brand {
-    max-width: 208px;
-    width: 100%;
-  }
-
-  &__menu .q-item {
-    padding-left: var(--qas-spacing-lg);
-  }
-
   &__select {
     border-radius: var(--qas-generic-border-radius);
   }
@@ -287,25 +384,72 @@ export default {
       margin-top: var(--qas-spacing-sm);
     }
 
-    &--label {
-      margin-bottom: var(--qas-spacing-md);
-      min-height: 0;
-      padding-top: 0;
-    }
-
     &--children.q-item {
-      padding-left: calc(var(--qas-spacing-xl) + var(--qas-spacing-sm));
-
       & + & {
         margin-top: var(--qas-spacing-sm);
       }
     }
   }
 
+  &__label {
+    padding-left: var(--qas-spacing-md) !important;
+    padding-right: var(--qas-spacing-md) !important;
+    transition: padding 120ms; // 120ms é o mesmo tempo utilizado na abertura do QDrawer.
+    will-change: auto;
+
+    &--spaced {
+      padding-left: var(--qas-spacing-xl) !important;
+      padding-right: var(--qas-spacing-xl) !important;
+    }
+  }
+
+  &__brand {
+    width: 40px;
+
+    &--spaced {
+      width: 208px;
+    }
+  }
+
+  &__item--label-mini {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .q-item:not(&__item--label-mini) {
+    padding-left: var(--qas-spacing-xl) !important;
+    padding-right: var(--qas-spacing-xl) !important;
+  }
+
+  &__content .q-item {
+    // padding-top: 0;
+  }
+
+  &__content + &__content {
+    position: relative;
+    transition: left 120ms, right 120ms;
+
+    &--spaced::before {
+      left: var(--qas-spacing-xl) !important;
+      right: var(--qas-spacing-xl) !important;
+    }
+
+    &::before {
+      background-color: $separator-color;
+      content: '';
+      height: 1px;
+      left: var(--qas-spacing-md);
+      position: absolute;
+      right: var(--qas-spacing-md);
+      top: calc(var(--qas-spacing-xs) * -1);
+      transition: left 120ms, right 120ms;
+    }
+  }
+
   &__content + &__content,
   &__item + &__content,
   &__content + &__item {
-    margin-top: var(--qas-spacing-lg);
+    margin-top: var(--qas-spacing-sm);
   }
 
   // User
@@ -315,7 +459,6 @@ export default {
 
   // Media: untilLarge
   @media (min-width: $breakpoint-sm-max) {
-    // Menu
     &__menu {
       max-height: calc(100vh - 310px);
       overflow-x: auto;

package/src/components/app-menu/QasAppMenu.yml

@@ -5,13 +5,20 @@ meta:
 
 props:
   brand:
-    desc: Path do logotipo.
+    desc: Logotipo quando menu esta aberto.
     type: String
+    required: true
+
   items:
     desc: Itens do menu.
     type: Array
     default: []
 
+  mini-brand:
+    desc: Logotipo quando em modo "mini".
+    type: String
+    required: true
+
   model-value:
     desc: Model do componente, controla quando o menu lateral é aberto e fechado.
     default: true
@@ -29,7 +36,6 @@ props:
 
   title:
     desc: Título que vai ficar no label do select de módulos.
-    required: true
     type: String
 
   user:

package/src/components/app-menu/private/PvAppMenuDropdown.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="pv-app-menu-dropdown">
+    <qas-btn-dropdown v-bind="defaultButtonDropdownProps">
+      <q-list>
+        <q-item v-for="item in modules" :key="item" :active="isActive(item)" active-class="text-primary" :href="item.value">
+          <q-item-section v-if="item.icon" avatar>
+            <q-icon :name="item.icon" />
+          </q-item-section>
+
+          <q-item-section>
+            <div>{{ item.label }}</div>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </qas-btn-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PvAppMenuDropdown',
+
+  props: {
+    buttonDropdownProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    currentModule: {
+      type: Object,
+      default: () => ({})
+    },
+
+    modules: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  computed: {
+    defaultButtonDropdownProps () {
+      return {
+        ...this.buttonDropdownProps,
+
+        buttonProps: {
+          align: 'between',
+          class: 'text-subtitle2',
+          color: 'primary',
+          iconRight: 'sym_r_expand_more',
+          label: this.currentModule.label,
+          useEllipsis: true,
+          useLabelOnSmallScreen: true
+        }
+      }
+    }
+  },
+
+  methods: {
+    isActive ({ value }) {
+      const { host, protocol } = window.location
+      const url = `${protocol}//${host}`
+
+      return url.includes(value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pv-app-menu-dropdown {
+  .qas-btn .q-icon {
+    font-size: 1.125rem !important;
+  }
+}
+</style>

package/src/components/btn/QasBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn class="qas-btn" v-bind="attributes">
+  <q-btn ref="button" class="qas-btn" v-bind="attributes">
     <slot />
 
     <template v-for="(_, name) in slots" #[name]="context">
@@ -36,11 +36,6 @@ export default {
       type: Boolean
     },
 
-    useHoverOnWhiteColor: {
-      default: true,
-      type: Boolean
-    },
-
     label: {
       default: '',
       type: String
@@ -54,13 +49,21 @@ export default {
 
         return variants.includes(value)
       }
+    },
+
+    useEllipsis: {
+      type: Boolean
+    },
+
+    useHoverOnWhiteColor: {
+      default: true,
+      type: Boolean
     }
   },
 
   computed: {
     attributes () {
       const {
-        align,
         dense,
         fab,
         fabMini,
@@ -116,7 +119,10 @@ export default {
         'qas-btn--tertiary-icon-only': this.hasIconOnly && this.isTertiary,
 
         // hover
-        'qas-btn--no-hover-on-white': !this.useHoverOnWhiteColor
+        'qas-btn--no-hover-on-white': !this.useHoverOnWhiteColor,
+
+        // ellipsis
+        'qas-btn--ellipsis': this.useEllipsis
       }
     },
 

package/src/components/btn/QasBtn.yml

@@ -21,6 +21,11 @@ props:
     desc: Ícone a direita.
     type: String
 
+  use-ellipsis:
+    desc: adiciona ellipsis no label caso o label seja maior que a área total do botão.
+    default: false
+    type: Boolean
+
   use-hover-on-white-color:
     desc: Quando usamos a cor branca para contrast, em alguns casos podemos não querer ter um hover de outra cor justamente por conta do contraste, esta propriedade só funciona com variante "tertiary" e cor "white", para remover o hover sete o valor para "false".
     default: true

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex inline items-center qas-btn-dropdown">
+  <div class="qas-btn-dropdown" :class="classes">
     <div v-if="hasLeftButton" :class="leftSideClasses">
       <slot name="left-button">
         <qas-btn variant="tertiary" v-bind="defaultButtonProps" @click="$emit('click', $event)">
-          <q-menu v-if="hasMenuOnLeftSide" anchor="bottom right" auto-close self="top right">
+          <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
             <div :class="menuContentClasses">
               <slot />
             </div>
@@ -49,12 +49,28 @@ export default {
 
     useMenuPadding: {
       type: Boolean
+    },
+
+    menu: {
+      type: Boolean
     }
   },
 
-  emits: ['click'],
+  emits: ['click', 'update:menu'],
+
+  data () {
+    return {
+      isMenuOpened: false
+    }
+  },
 
   computed: {
+    classes () {
+      return {
+        'flex inline items-center': this.useSplit
+      }
+    },
+
     leftSideClasses () {
       return {
         'q-mr-sm': this.useSplit
@@ -107,6 +123,22 @@ export default {
     hasSeparator () {
       return !this.isSmall && this.useSplit
     }
+  },
+
+  watch: {
+    menu: {
+      handler (value) {
+        this.isMenuOpened = value
+      },
+
+      immediate: true
+    }
+  },
+
+  methods: {
+    onUpdateMenuValue (value) {
+      this.$emit('update:menu', value)
+    }
   }
 }
 </script>

package/src/components/btn-dropdown/QasBtnDropdown.yml

@@ -15,16 +15,22 @@ props:
     default: sym_r_more_vert
     type: String
 
-  use-split:
-    desc: Divide o componente em 2 ações, o primeiro (direita) é um botão padrão, o segundo (esquerda) é um botão com ícone que abre o dropdown, criando uma separação com o QSeparator.
+  menu:
+    desc: Model do menu de dropdown.
     default: false
     type: Boolean
+    model: true
 
   use-menu-padding:
     desc: Habilita o espaçamento dentro do menu de 16px (q-pa-md).
     default: false
     type: Boolean
 
+  use-split:
+    desc: Divide o componente em 2 ações, o primeiro (direita) é um botão padrão, o segundo (esquerda) é um botão com ícone que abre o dropdown, criando uma separação com o QSeparator.
+    default: false
+    type: Boolean
+
 slots:
   default:
     desc: Slot para passar o conteúdo do dropdown (menu)
@@ -33,10 +39,17 @@ slots:
     desc: Slot para substituir o botão a esquerda.
 
 events:
-  'click':
+  '@click -> function (event)':
     desc: Caso não tenha "useSplit", o evento é disparado ao clicar no componente como um todo, caso tenha "useSplit", o evento é disparado ao clicar no botão a esquerda.
     params:
       event:
         desc: Evento nativo de click.
         type: Object
 
+  '@update:menu -> function (isMenuOpened)':
+    desc: Retorna toda vez que o menu é aberto ou fechado
+    params:
+      isMenuOpened:
+        desc: Estado do menu.
+        default: false
+        type: Boolean

package/src/components/form-view/QasFormView.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mx_componentTag" class="qas-form-view" :class="mx_componentClass">
+  <div class="qas-form-view" :class="mx_componentClass">
     <header v-if="mx_hasHeaderSlot">
       <slot name="header" />
     </header>
@@ -29,7 +29,7 @@
     <q-inner-loading :showing="mx_isFetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
-  </component>
+  </div>
 </template>
 
 <script>

package/src/components/layout/QasLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="hHh Lpr lFf">
+  <q-layout view="hHh Lpr lff">
     <slot v-if="$qas.screen.untilLarge" name="app-bar">
       <qas-app-bar v-bind="appBarProps" @sign-out="signOut" @toggle-menu="toggleMenuDrawer" />
     </slot>
@@ -10,7 +10,7 @@
 
     <slot>
       <q-page-container>
-        <q-page padding>
+        <q-page>
           <router-view />
         </q-page>
       </q-page-container>

package/src/components/list-view/QasListView.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mx_componentTag" :class="mx_componentClass">
+  <div :class="mx_componentClass">
     <q-pull-to-refresh :disable="!useRefresh" @refresh="refresh">
       <header v-if="hasHeaderSlot">
         <slot name="header" />
@@ -37,7 +37,7 @@
     </q-pull-to-refresh>
 
     <slot name="footer" />
-  </component>
+  </div>
 </template>
 
 <script>

package/src/components/single-view/QasSingleView.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mx_componentTag" :class="mx_componentClass">
+  <div :class="mx_componentClass">
     <header v-if="mx_hasHeaderSlot">
       <slot name="header" />
     </header>
@@ -20,7 +20,7 @@
     <q-inner-loading :showing="mx_isFetching">
       <q-spinner color="grey" size="3em" />
     </q-inner-loading>
-  </component>
+  </div>
 </template>
 
 <script>

package/src/css/components/button.scss

@@ -81,6 +81,20 @@
     }
   }
 
+  &--ellipsis {
+    width: 100%;
+
+    .q-btn__content {
+      flex-wrap: nowrap;
+
+      .block {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
   &.q-btn {
     &::before {
       display: none;

package/src/css/mixins/set-button.scss

@@ -1,4 +1,10 @@
-@mixin set-button($variant, $icon-only: false, $no-hover-on-white: false, $color: false) {
+@mixin set-button(
+  $variant,
+  $icon-only: false,
+  $no-hover-on-white: false,
+  $color: false,
+  $ellipsis: false
+) {
   @extend .qas-btn;
   @extend .qas-btn--#{$variant};
 
@@ -13,4 +19,8 @@
   @if $no-hover-on-white {
     @extend .qas-btn--no-hover-on-white;
   }
+
+  @if $ellipsis {
+    @extend .qas-btn--ellipsis;
+  }
 }

package/src/css/utils/container.scss

@@ -15,7 +15,7 @@
   }
 
   @media (max-width: $breakpoint-xs) {
-    width: calc(100% - 20px);
+    width: calc(100% - var(--qas-spacing-2xl));
   }
 }
 

package/src/mixins/view.js

@@ -67,10 +67,6 @@ export default {
   },
 
   computed: {
-    mx_componentTag () {
-      return this.useBoundary ? 'q-page' : 'div'
-    },
-
     mx_componentClass () {
       return this.useBoundary && 'container spaced'
     },