@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

package/src/components/alert/QasAlert.vue

@@ -1,110 +1,110 @@
-<template>
-  <div v-if="show" class="inline-block">
-    <div class="bg-dark flex justify-between no-wrap q-pa-md qas-alert relative-position">
-      <div class="qas-alert__border-left" :class="borderClass" />
-
-      <div class="text-body1 text-white">
-        <slot>
-          {{ props.text }}
-        </slot>
-      </div>
-
-      <qas-btn
-        class="q-ml-xs qas-alert__close"
-        color="white"
-        icon="sym_r_close"
-        :use-hover-on-white-color="false"
-        @click="close"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { LocalStorage } from 'quasar'
-import { Status, StatusColor } from '../../enums/Status'
-import { computed, watch, ref } from 'vue'
-
-defineOptions({ name: 'QasAlert' })
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: true
-  },
-
-  text: {
-    type: String,
-    default: ''
-  },
-
-  storageKey: {
-    type: String,
-    default: ''
-  },
-
-  status: {
-    type: String,
-    default: Status.Info,
-    validator: value => Object.values(Status).includes(value)
-  },
-
-  usePersistentModelOnClose: {
-    type: Boolean
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const model = ref(props.modelValue)
-
-watch(() => props.modelValue, value => {
-  model.value = value
-})
-
-const colorByStatus = computed(() => {
-  const status = Object.keys(Status).find(key => Status[key] === props.status)
-  return StatusColor[status]
-})
-
-const borderClass = computed(() => `bg-${colorByStatus.value}`)
-
-const storageClosedKey = computed(() => `alert-${props.storageKey}-closed`)
-
-const isClosed = computed(() => {
-  return props.usePersistentModelOnClose && LocalStorage.getItem(storageClosedKey.value)
-})
-
-const show = computed(() => !isClosed.value && model.value)
-
-function close () {
-  if (props.usePersistentModelOnClose) {
-    LocalStorage.set(storageClosedKey.value, true)
-  }
-
-  model.value = false
-
-  emit('update:modelValue', model.value)
-}
-
-</script>
-
-<style lang="scss">
-.qas-alert {
-  border-radius: var(--qas-generic-border-radius);
-
-  &__border-left {
-    border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
-    bottom: 0;
-    content: '';
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 4px;
-  }
-
-  &__close {
-    top: calc(var(--qas-spacing-sm) * -1);
-  }
-}
-</style>
+<template>
+  <div v-if="show" class="inline-block">
+    <div class="bg-dark flex justify-between no-wrap q-pa-md qas-alert relative-position">
+      <div class="qas-alert__border-left" :class="borderClass" />
+
+      <div class="text-body1 text-white">
+        <slot>
+          {{ props.text }}
+        </slot>
+      </div>
+
+      <qas-btn
+        class="q-ml-xs qas-alert__close"
+        color="white"
+        icon="sym_r_close"
+        :use-hover-on-white-color="false"
+        @click="close"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { LocalStorage } from 'quasar'
+import { Status, StatusColor } from '../../enums/Status'
+import { computed, watch, ref } from 'vue'
+
+defineOptions({ name: 'QasAlert' })
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+
+  text: {
+    type: String,
+    default: ''
+  },
+
+  storageKey: {
+    type: String,
+    default: ''
+  },
+
+  status: {
+    type: String,
+    default: Status.Info,
+    validator: value => Object.values(Status).includes(value)
+  },
+
+  usePersistentModelOnClose: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = ref(props.modelValue)
+
+watch(() => props.modelValue, value => {
+  model.value = value
+})
+
+const colorByStatus = computed(() => {
+  const status = Object.keys(Status).find(key => Status[key] === props.status)
+  return StatusColor[status]
+})
+
+const borderClass = computed(() => `bg-${colorByStatus.value}`)
+
+const storageClosedKey = computed(() => `alert-${props.storageKey}-closed`)
+
+const isClosed = computed(() => {
+  return props.usePersistentModelOnClose && LocalStorage.getItem(storageClosedKey.value)
+})
+
+const show = computed(() => !isClosed.value && model.value)
+
+function close () {
+  if (props.usePersistentModelOnClose) {
+    LocalStorage.set(storageClosedKey.value, true)
+  }
+
+  model.value = false
+
+  emit('update:modelValue', model.value)
+}
+
+</script>
+
+<style lang="scss">
+.qas-alert {
+  border-radius: var(--qas-generic-border-radius);
+
+  &__border-left {
+    border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 4px;
+  }
+
+  &__close {
+    top: calc(var(--qas-spacing-sm) * -1);
+  }
+}
+</style>

package/src/components/alert/QasAlert.yml

@@ -1,39 +1,39 @@
-type: component
-
-meta:
-  desc: Cria um seção para alertar sobre um conteúdo.
-
-props:
-  model-value:
-    desc: Model do componente, controla se o componente aparece ou não.
-    default: true
-    type: Boolean
-
-  text:
-    desc: Texto do componente.
-    type: String
-
-  status:
-    desc: Status do alerta.
-    type: String
-    examples: ['error', 'info']
-
-  storage-key:
-    desc: Chave a ser salva no localStorage, necessário caso esteja usando mais de um QasAlert na aplicação e ambos estejam com a prop "use-persist-model-on-close" ativada.
-    type: String
-
-  use-persistent-model-on-close:
-    desc: Habilita salvar o model em localStorage ao fechar o alerta para não aparecer novamente.
-    type: Boolean
-
-slots:
-  default:
-    desc: 'Slot para acessar o conteúdo gerado pela prop "text"'
-
-events:
-  '@update:model-value -> function(value)':
-    desc: Dispara quando o model-value altera, também usado para v-model.
-    params:
-      value:
-        desc: Novo valor do model.
-        type: Boolean
+type: component
+
+meta:
+  desc: Cria um seção para alertar sobre um conteúdo.
+
+props:
+  model-value:
+    desc: Model do componente, controla se o componente aparece ou não.
+    default: true
+    type: Boolean
+
+  text:
+    desc: Texto do componente.
+    type: String
+
+  status:
+    desc: Status do alerta.
+    type: String
+    examples: ['error', 'info']
+
+  storage-key:
+    desc: Chave a ser salva no localStorage, necessário caso esteja usando mais de um QasAlert na aplicação e ambos estejam com a prop "use-persist-model-on-close" ativada.
+    type: String
+
+  use-persistent-model-on-close:
+    desc: Habilita salvar o model em localStorage ao fechar o alerta para não aparecer novamente.
+    type: Boolean
+
+slots:
+  default:
+    desc: 'Slot para acessar o conteúdo gerado pela prop "text"'
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean

package/src/components/app-bar/QasAppBar.vue

@@ -1,119 +1,119 @@
-<template>
-  <q-header class="qas-app-bar shadow-2" height-hint="56">
-    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-10">
-      <qas-btn color="grey-10" icon="sym_r_menu" variant="tertiary" @click="toggleMenuDrawer" />
-
-      <q-toolbar-title>
-        <router-link class="flex items-center no-wrap text-no-decoration" :class="routerLinkClass" :to="rootRoute">
-          <img v-if="props.brand" :alt="props.title" class="qas-app-bar__brand" :src="props.brand">
-
-          <span v-else class="ellipsis text-bold text-primary">{{ props.title }}</span>
-
-          <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
-        </router-link>
-      </q-toolbar-title>
-
-      <slot v-if="hasUser" name="user">
-        <qas-app-user v-bind="defaultAppUserProps" />
-      </slot>
-    </q-toolbar>
-  </q-header>
-</template>
-
-<script setup>
-import QasAppUser from '../app-user/QasAppUser.vue'
-import QasBtn from '../btn/QasBtn.vue'
-
-import { useScreen } from '../../composables'
-
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-defineOptions({ name: 'QasAppBar' })
-
-const props = defineProps({
-  appUserProps: {
-    type: Object,
-    required: true,
-    default: () => ({})
-  },
-
-  brand: {
-    default: '',
-    type: String
-  },
-
-  notifications: {
-    default: () => ({}),
-    type: Object
-  },
-
-  title: {
-    required: true,
-    type: String
-  }
-})
-
-const emit = defineEmits(['sign-out', 'toggle-menu', 'toggle-notifications'])
-
-const router = useRouter()
-const screen = useScreen()
-
-const defaultAppUserProps = computed(() => {
-  return {
-    menuProps: {
-      anchor: 'bottom end',
-      offset: [0, 5],
-      self: 'top end'
-    },
-
-    onSignOut: signOut,
-    onToggleNotifications: toggleNotifications,
-    ...props.appUserProps
-  }
-})
-
-const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
-
-const developmentBadgeLabel = computed(() => {
-  const hosts = {
-    localhost: 'Local',
-    '.dev.': 'Develop'
-  }
-
-  if (process.env.DEV) return hosts.localhost
-
-  const current = Object.keys(hosts).find(host => location.hostname.includes(host))
-
-  return current ? hosts[current] : ''
-})
-
-const hasDevelopmentBadge = computed(() => !!developmentBadgeLabel.value)
-const hasUser = computed(() => !!Object.keys(defaultAppUserProps.value.user || {}).length)
-
-const routerLinkClass = computed(() => screen.isSmall && 'justify-center')
-
-function signOut () {
-  emit('sign-out')
-}
-
-function toggleNotifications () {
-  emit('toggle-notifications')
-}
-
-function toggleMenuDrawer () {
-  emit('toggle-menu')
-}
-</script>
-
-<style lang="scss">
-.qas-app-bar {
-  &__toolbar {
-    height: 56px;
-  }
-
-  &__brand {
-    max-width: 115px;
-  }
-}
-</style>
+<template>
+  <q-header class="qas-app-bar shadow-2" height-hint="56">
+    <q-toolbar class="bg-white qas-app-bar__toolbar text-grey-10">
+      <qas-btn color="grey-10" icon="sym_r_menu" variant="tertiary" @click="toggleMenuDrawer" />
+
+      <q-toolbar-title>
+        <router-link class="flex items-center no-wrap text-no-decoration" :class="routerLinkClass" :to="rootRoute">
+          <img v-if="props.brand" :alt="props.title" class="qas-app-bar__brand" :src="props.brand">
+
+          <span v-else class="ellipsis text-bold text-primary">{{ props.title }}</span>
+
+          <q-badge v-if="hasDevelopmentBadge" class="q-ml-sm" color="red" :label="developmentBadgeLabel" />
+        </router-link>
+      </q-toolbar-title>
+
+      <slot v-if="hasUser" name="user">
+        <qas-app-user v-bind="defaultAppUserProps" />
+      </slot>
+    </q-toolbar>
+  </q-header>
+</template>
+
+<script setup>
+import QasAppUser from '../app-user/QasAppUser.vue'
+import QasBtn from '../btn/QasBtn.vue'
+
+import { useScreen } from '../../composables'
+
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+defineOptions({ name: 'QasAppBar' })
+
+const props = defineProps({
+  appUserProps: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+
+  brand: {
+    default: '',
+    type: String
+  },
+
+  notifications: {
+    default: () => ({}),
+    type: Object
+  },
+
+  title: {
+    required: true,
+    type: String
+  }
+})
+
+const emit = defineEmits(['sign-out', 'toggle-menu', 'toggle-notifications'])
+
+const router = useRouter()
+const screen = useScreen()
+
+const defaultAppUserProps = computed(() => {
+  return {
+    menuProps: {
+      anchor: 'bottom end',
+      offset: [0, 5],
+      self: 'top end'
+    },
+
+    onSignOut: signOut,
+    onToggleNotifications: toggleNotifications,
+    ...props.appUserProps
+  }
+})
+
+const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
+
+const developmentBadgeLabel = computed(() => {
+  const hosts = {
+    localhost: 'Local',
+    '.dev.': 'Develop'
+  }
+
+  if (process.env.DEV) return hosts.localhost
+
+  const current = Object.keys(hosts).find(host => location.hostname.includes(host))
+
+  return current ? hosts[current] : ''
+})
+
+const hasDevelopmentBadge = computed(() => !!developmentBadgeLabel.value)
+const hasUser = computed(() => !!Object.keys(defaultAppUserProps.value.user || {}).length)
+
+const routerLinkClass = computed(() => screen.isSmall && 'justify-center')
+
+function signOut () {
+  emit('sign-out')
+}
+
+function toggleNotifications () {
+  emit('toggle-notifications')
+}
+
+function toggleMenuDrawer () {
+  emit('toggle-menu')
+}
+</script>
+
+<style lang="scss">
+.qas-app-bar {
+  &__toolbar {
+    height: 56px;
+  }
+
+  &__brand {
+    max-width: 115px;
+  }
+}
+</style>

package/src/components/app-bar/QasAppBar.yml

@@ -1,44 +1,44 @@
-type: component
-
-meta:
-  desc: Gerencia a barra superior da aplicação
-
-props:
-  app-user-props:
-    desc: Props repassadas para o QasAppUser.
-    default: {}
-    type: Object
-    required: true
-
-  brand:
-    desc: Path do logotipo.
-    type: String
-
-  notifications:
-    desc: Lista com as notificações do usuário.
-    type: Object
-    default: {}
-
-  title:
-    desc: Título da aplicação.
-    required: true
-    type: String
-
-slots:
-  user:
-    desc: Slot para acessar o menu de usuário.
-    scope:
-      user:
-        desc: Informações do usuário, recebe o objeto "user".
-        type: Object
-        default: {}
-
-events:
-  '@sign-out -> function()':
-    desc: Dispara quando o botão de "sair" é clicado.
-
-  '@toggle-menu -> function()':
-    desc: Dispara quando o botão de "hambúrguer" é clicado para abrir o menu lateral.
-
-  '@toggle-notifications -> function()':
-    desc: Dispara quando o botão de "Notificações" é clicado.
+type: component
+
+meta:
+  desc: Gerencia a barra superior da aplicação
+
+props:
+  app-user-props:
+    desc: Props repassadas para o QasAppUser.
+    default: {}
+    type: Object
+    required: true
+
+  brand:
+    desc: Path do logotipo.
+    type: String
+
+  notifications:
+    desc: Lista com as notificações do usuário.
+    type: Object
+    default: {}
+
+  title:
+    desc: Título da aplicação.
+    required: true
+    type: String
+
+slots:
+  user:
+    desc: Slot para acessar o menu de usuário.
+    scope:
+      user:
+        desc: Informações do usuário, recebe o objeto "user".
+        type: Object
+        default: {}
+
+events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.
+
+  '@toggle-menu -> function()':
+    desc: Dispara quando o botão de "hambúrguer" é clicado para abrir o menu lateral.
+
+  '@toggle-notifications -> function()':
+    desc: Dispara quando o botão de "Notificações" é clicado.