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

package/src/components/label/QasLabel.vue

@@ -1,61 +1,61 @@
-<template>
-  <component :is="props.typography" :class="classes">
-    <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
-  </component>
-</template>
-
-<script setup>
-import { Spacing } from '../../enums/Spacing'
-import { addCounterSuffix, getRequiredLabel } from '../../helpers'
-
-import { computed } from 'vue'
-
-defineOptions({ name: 'QasLabel' })
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'grey-10'
-  },
-
-  count: {
-    default: 0,
-    type: [Number, String]
-  },
-
-  label: {
-    default: '',
-    type: String
-  },
-
-  margin: {
-    default: Spacing.Md,
-    type: String,
-    validator: value => Object.values(Spacing).includes(value)
-  },
-
-  required: {
-    type: Boolean
-  },
-
-  typography: {
-    default: 'h4',
-    type: String,
-    validator: value => ['h4', 'h5'].includes(value)
-  }
-})
-
-const classes = computed(() => {
-  return [
-    `q-mb-${props.margin}`,
-    `text-${props.color}`,
-    `text-${props.typography}`
-  ]
-})
-
-const labelWithSuffix = computed(() => addCounterSuffix(props.label, parseFloat(props.count)))
-
-const formattedLabel = computed(() => {
-  return getRequiredLabel({ label: labelWithSuffix.value, required: props.required })
-})
-</script>
+<template>
+  <component :is="props.typography" :class="classes">
+    <slot :label-with-suffix="formattedLabel">{{ formattedLabel }}</slot>
+  </component>
+</template>
+
+<script setup>
+import { Spacing } from '../../enums/Spacing'
+import { addCounterSuffix, getRequiredLabel } from '../../helpers'
+
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasLabel' })
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'grey-10'
+  },
+
+  count: {
+    default: 0,
+    type: [Number, String]
+  },
+
+  label: {
+    default: '',
+    type: String
+  },
+
+  margin: {
+    default: Spacing.Md,
+    type: String,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
+  required: {
+    type: Boolean
+  },
+
+  typography: {
+    default: 'h4',
+    type: String,
+    validator: value => ['h4', 'h5'].includes(value)
+  }
+})
+
+const classes = computed(() => {
+  return [
+    `q-mb-${props.margin}`,
+    `text-${props.color}`,
+    `text-${props.typography}`
+  ]
+})
+
+const labelWithSuffix = computed(() => addCounterSuffix(props.label, parseFloat(props.count)))
+
+const formattedLabel = computed(() => {
+  return getRequiredLabel({ label: labelWithSuffix.value, required: props.required })
+})
+</script>

package/src/components/label/QasLabel.yml

@@ -1,44 +1,44 @@
-type: component
-
-meta:
-  desc: Componente para controlar textos que separam conteúdos, formatando com um sufixo quando existe um contador.
-
-props:
-  color:
-    desc: Cor do texto.
-    default: grey-10
-    type: String
-
-  count:
-    desc: Contador que vai ficar ao lado do texto.
-    default: 0
-    type: Number
-
-  label:
-    desc: Texto a ser exibido.
-    type: String
-
-  margin:
-    desc: Espaçamento entre o texto e o contador.
-    default: sm
-    type: String
-    examples: [xs, sm, md, lg, xl]
-
-  required:
-    desc: Controla se exibirá o sufixo "*" ao lado do texto.
-    default: false
-    type: Boolean
-
-  typography:
-    desc: Controla qual a tipografia do texto.
-    default: h4
-    type: String
-    examples: [h4, h5]
-
-slots:
-  default:
-    desc: Slot para acessar elemento do texto.
-    scope:
-      label-with-suffix:
-        desc: Objeto com texto formatado contendo ou não um sufixo
-        type: String
+type: component
+
+meta:
+  desc: Componente para controlar textos que separam conteúdos, formatando com um sufixo quando existe um contador.
+
+props:
+  color:
+    desc: Cor do texto.
+    default: grey-10
+    type: String
+
+  count:
+    desc: Contador que vai ficar ao lado do texto.
+    default: 0
+    type: Number
+
+  label:
+    desc: Texto a ser exibido.
+    type: String
+
+  margin:
+    desc: Espaçamento entre o texto e o contador.
+    default: sm
+    type: String
+    examples: [xs, sm, md, lg, xl]
+
+  required:
+    desc: Controla se exibirá o sufixo "*" ao lado do texto.
+    default: false
+    type: Boolean
+
+  typography:
+    desc: Controla qual a tipografia do texto.
+    default: h4
+    type: String
+    examples: [h4, h5]
+
+slots:
+  default:
+    desc: Slot para acessar elemento do texto.
+    scope:
+      label-with-suffix:
+        desc: Objeto com texto formatado contendo ou não um sufixo
+        type: String

package/src/components/layout/QasLayout.vue

@@ -1,101 +1,101 @@
-<template>
-  <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" @toggle-notifications="toggleNotificationsDrawer" />
-    </slot>
-
-    <slot name="app-menu">
-      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @toggle-notifications="toggleNotificationsDrawer" @update:model-value="updateMenuDrawer" />
-    </slot>
-
-    <slot>
-      <q-page-container>
-        <q-page>
-          <router-view />
-        </q-page>
-      </q-page-container>
-    </slot>
-
-    <q-ajax-bar color="primary" position="bottom" size="2px" />
-
-    <pv-layout-notifications-drawer v-if="isNotificationsEnabled" v-model="notificationsDrawer" />
-  </q-layout>
-</template>
-
-<script setup>
-import PvLayoutNotificationsDrawer from './private/PvLayoutNotificationsDrawer.vue'
-import QasAppBar from '../app-bar/QasAppBar.vue'
-import QasAppMenu from '../app-menu/QasAppMenu.vue'
-
-import useScreen from '../../composables/use-screen'
-import useNotifications from '../../composables/use-notifications'
-
-import { computed, ref, watch } from 'vue'
-
-defineOptions({ name: 'QasLayout' })
-
-const props = defineProps({
-  appBarProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  appMenuProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  initialUnreadNotificationsCount: {
-    type: Number,
-    default: 0
-  },
-
-  modelValue: {
-    default: true,
-    type: Boolean
-  }
-})
-
-const emit = defineEmits(['sign-out', 'update:modelValue'])
-
-// expondo método "toggleNotificationsDrawer" para fora do componente.
-defineExpose({ toggleNotificationsDrawer })
-
-const screen = useScreen()
-
-const { isNotificationsEnabled, setUnreadNotificationsCount } = useNotifications()
-
-const menuDrawer = ref(false)
-const notificationsDrawer = ref(false)
-
-// computed
-const defaultAppMenuProps = computed(() => {
-  return {
-    ...props.appBarProps,
-    ...props.appMenuProps
-  }
-})
-
-const showMenuDrawer = computed(() => !screen.untilLarge || menuDrawer.value)
-
-watch(() => props.initialUnreadNotificationsCount, setUnreadNotificationsCount, { immediate: true })
-
-// functions
-function signOut () {
-  emit('sign-out')
-}
-
-function toggleMenuDrawer () {
-  updateMenuDrawer(!menuDrawer.value)
-}
-
-function updateMenuDrawer (value) {
-  menuDrawer.value = value
-
-  emit('update:modelValue', value)
-}
-
-function toggleNotificationsDrawer () {
-  notificationsDrawer.value = !notificationsDrawer.value
-}
-</script>
+<template>
+  <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" @toggle-notifications="toggleNotificationsDrawer" />
+    </slot>
+
+    <slot name="app-menu">
+      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @toggle-notifications="toggleNotificationsDrawer" @update:model-value="updateMenuDrawer" />
+    </slot>
+
+    <slot>
+      <q-page-container>
+        <q-page>
+          <router-view />
+        </q-page>
+      </q-page-container>
+    </slot>
+
+    <q-ajax-bar color="primary" position="bottom" size="2px" />
+
+    <pv-layout-notifications-drawer v-if="isNotificationsEnabled" v-model="notificationsDrawer" />
+  </q-layout>
+</template>
+
+<script setup>
+import PvLayoutNotificationsDrawer from './private/PvLayoutNotificationsDrawer.vue'
+import QasAppBar from '../app-bar/QasAppBar.vue'
+import QasAppMenu from '../app-menu/QasAppMenu.vue'
+
+import useScreen from '../../composables/use-screen'
+import useNotifications from '../../composables/use-notifications'
+
+import { computed, ref, watch } from 'vue'
+
+defineOptions({ name: 'QasLayout' })
+
+const props = defineProps({
+  appBarProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  appMenuProps: {
+    default: () => ({}),
+    type: Object
+  },
+
+  initialUnreadNotificationsCount: {
+    type: Number,
+    default: 0
+  },
+
+  modelValue: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['sign-out', 'update:modelValue'])
+
+// expondo método "toggleNotificationsDrawer" para fora do componente.
+defineExpose({ toggleNotificationsDrawer })
+
+const screen = useScreen()
+
+const { isNotificationsEnabled, setUnreadNotificationsCount } = useNotifications()
+
+const menuDrawer = ref(false)
+const notificationsDrawer = ref(false)
+
+// computed
+const defaultAppMenuProps = computed(() => {
+  return {
+    ...props.appBarProps,
+    ...props.appMenuProps
+  }
+})
+
+const showMenuDrawer = computed(() => !screen.untilLarge || menuDrawer.value)
+
+watch(() => props.initialUnreadNotificationsCount, setUnreadNotificationsCount, { immediate: true })
+
+// functions
+function signOut () {
+  emit('sign-out')
+}
+
+function toggleMenuDrawer () {
+  updateMenuDrawer(!menuDrawer.value)
+}
+
+function updateMenuDrawer (value) {
+  menuDrawer.value = value
+
+  emit('update:modelValue', value)
+}
+
+function toggleNotificationsDrawer () {
+  notificationsDrawer.value = !notificationsDrawer.value
+}
+</script>

package/src/components/layout/QasLayout.yml

@@ -1,46 +1,46 @@
-type: component
-
-meta:
-  desc: Componente de layout que engloba o "QasAppBar" e "QasAppMenu".
-
-props:
-  app-bar-props:
-    desc: Propriedades do "QasAppBar".
-    default: {}
-    type: Object
-
-  app-menu-props:
-    desc: Propriedades do "QasAppMenu".
-    default: { animation: 500 }
-    type: Object
-
-  initial-unread-notifications-count:
-    desc: Propriedade para indicar quantas notificações não lidas existem.
-    default: 0
-    type: Number
-
-  model-value:
-    desc: Model do componente, responsável por abrir/fechar menu lateral.
-    default: true
-    type: Boolean
-
-slots:
-  app-bar:
-    desc: Slot para substituir o "QasAppBar".
-
-  app-menu:
-    desc: Slot para substituir o "QasAppMenu".
-
-  default:
-    desc: Slot para substituir o "QPageContainer".
-
-events:
-  '@sign-out -> function()':
-    desc: Dispara quando o botão de "sair" é clicado.
-
-  '@update:model-value -> function(value)':
-    desc: Dispara quando o model-value altera, também usado para v-model.
-    params:
-      value:
-        desc: Valor do mode-value.
-        type: Boolean
+type: component
+
+meta:
+  desc: Componente de layout que engloba o "QasAppBar" e "QasAppMenu".
+
+props:
+  app-bar-props:
+    desc: Propriedades do "QasAppBar".
+    default: {}
+    type: Object
+
+  app-menu-props:
+    desc: Propriedades do "QasAppMenu".
+    default: { animation: 500 }
+    type: Object
+
+  initial-unread-notifications-count:
+    desc: Propriedade para indicar quantas notificações não lidas existem.
+    default: 0
+    type: Number
+
+  model-value:
+    desc: Model do componente, responsável por abrir/fechar menu lateral.
+    default: true
+    type: Boolean
+
+slots:
+  app-bar:
+    desc: Slot para substituir o "QasAppBar".
+
+  app-menu:
+    desc: Slot para substituir o "QasAppMenu".
+
+  default:
+    desc: Slot para substituir o "QPageContainer".
+
+events:
+  '@sign-out -> function()':
+    desc: Dispara quando o botão de "sair" é clicado.
+
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Valor do mode-value.
+        type: Boolean

package/src/components/layout/private/PvLayoutNotificationCard.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="items-center justify-between no-wrap row">
-    <div class="items-center row">
-      <div class="q-mr-sm">
-        <q-icon :color="iconColor" name="sym_r_info" size="md" />
-      </div>
-
-      <div>
-        <span class="text-caption text-grey-6">
-          {{ dateLabel }}
-        </span>
-
-        <div class="items-center q-mt-xs row">
-          <h6 class="text-subtitle1" :class="titleClass">
-            {{ props.notification.title }}
-          </h6>
-
-          <div v-if="hasBadge" class="q-ml-sm">
-            <qas-badge color="indigo-1" label="Nova" text-color="grey-10" />
-          </div>
-        </div>
-
-        <div class="q-mt-xs text-body1 text-grey-8">
-          {{ props.notification.message }}
-        </div>
-      </div>
-    </div>
-
-    <qas-btn v-if="props.notification.link" v-bind="buttonProps" />
-  </div>
-</template>
-
-<script setup>
-import { dateTime } from '../../../helpers/filters'
-
-import { computed } from 'vue'
-import { date } from 'quasar'
-
-defineOptions({ name: 'PvLayoutNotificationCard' })
-
-const props = defineProps({
-  notification: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const markedAsRead = computed(() => props.notification.isRead)
-
-const iconColor = computed(() => markedAsRead.value ? 'grey-8' : 'primary')
-const titleClass = computed(() => markedAsRead.value ? 'text-grey-8' : 'text-grey-10')
-
-const isRecentNotification = computed(() => {
-  const currentDate = new Date().toISOString()
-
-  return date.getDateDiff(currentDate, props.notification.createdAt, 'minutes') < 10
-})
-
-const hasBadge = computed(() => isRecentNotification.value && !markedAsRead.value)
-
-const dateLabel = computed(() => {
-  return isRecentNotification.value
-    ? 'Agora mesmo'
-    : dateTime(props.notification.createdAt, 'dd/MM/yyyy HH:mm')
-})
-
-const buttonProps = computed(() => {
-  const { link } = props.notification
-
-  const urlFromLink = new URL(link)
-
-  const isExternalURL = urlFromLink.host !== location.host
-
-  return {
-    icon: 'sym_r_chevron_right',
-    color: markedAsRead.value ? 'grey-10' : 'primary',
-
-    /**
-     * Se for uma url externa, diferente da URL que ele esta acessando no momento,
-     * é adicionado um "href" porque é um link para outro modulo, caso seja para o mesmo modulo,
-     * é adicionado um "to" para não recarregar a pagina.
-     */
-    ...(isExternalURL ? { href: link } : { to: urlFromLink.pathname })
-  }
-})
-</script>
+<template>
+  <div class="items-center justify-between no-wrap row">
+    <div class="items-center row">
+      <div class="q-mr-sm">
+        <q-icon :color="iconColor" name="sym_r_info" size="md" />
+      </div>
+
+      <div>
+        <span class="text-caption text-grey-6">
+          {{ dateLabel }}
+        </span>
+
+        <div class="items-center q-mt-xs row">
+          <h6 class="text-subtitle1" :class="titleClass">
+            {{ props.notification.title }}
+          </h6>
+
+          <div v-if="hasBadge" class="q-ml-sm">
+            <qas-badge color="indigo-1" label="Nova" text-color="grey-10" />
+          </div>
+        </div>
+
+        <div class="q-mt-xs text-body1 text-grey-8">
+          {{ props.notification.message }}
+        </div>
+      </div>
+    </div>
+
+    <qas-btn v-if="props.notification.link" v-bind="buttonProps" />
+  </div>
+</template>
+
+<script setup>
+import { dateTime } from '../../../helpers/filters'
+
+import { computed } from 'vue'
+import { date } from 'quasar'
+
+defineOptions({ name: 'PvLayoutNotificationCard' })
+
+const props = defineProps({
+  notification: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const markedAsRead = computed(() => props.notification.isRead)
+
+const iconColor = computed(() => markedAsRead.value ? 'grey-8' : 'primary')
+const titleClass = computed(() => markedAsRead.value ? 'text-grey-8' : 'text-grey-10')
+
+const isRecentNotification = computed(() => {
+  const currentDate = new Date().toISOString()
+
+  return date.getDateDiff(currentDate, props.notification.createdAt, 'minutes') < 10
+})
+
+const hasBadge = computed(() => isRecentNotification.value && !markedAsRead.value)
+
+const dateLabel = computed(() => {
+  return isRecentNotification.value
+    ? 'Agora mesmo'
+    : dateTime(props.notification.createdAt, 'dd/MM/yyyy HH:mm')
+})
+
+const buttonProps = computed(() => {
+  const { link } = props.notification
+
+  const urlFromLink = new URL(link)
+
+  const isExternalURL = urlFromLink.host !== location.host
+
+  return {
+    icon: 'sym_r_chevron_right',
+    color: markedAsRead.value ? 'grey-10' : 'primary',
+
+    /**
+     * Se for uma url externa, diferente da URL que ele esta acessando no momento,
+     * é adicionado um "href" porque é um link para outro modulo, caso seja para o mesmo modulo,
+     * é adicionado um "to" para não recarregar a pagina.
+     */
+    ...(isExternalURL ? { href: link } : { to: urlFromLink.pathname })
+  }
+})
+</script>