@bildvitta/quasar-ui-asteroid 3.9.0 → 3.10.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.9.0",
+  "version": "3.10.0-beta.0",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/date/QasDate.vue

@@ -0,0 +1,412 @@
+<template>
+  <q-date
+    v-model="model"
+    v-bind="attributes"
+  />
+</template>
+
+<script>
+import { date } from 'quasar'
+import { date as asteroidDate } from '../../helpers/filters'
+
+const MaskOptions = {
+  Dash: 'YYYY-MM-DD',
+  Slash: 'YYYY/MM/DD',
+  SlashPtBR: 'DD/MM/YYYY',
+  SlashDateAndHourPtBR: 'DD/MM/YYYY HH:mm'
+}
+
+export default {
+  name: 'QasDate',
+
+  inheritAttrs: false,
+
+  props: {
+    events: {
+      type: [Array, Function],
+      default: () => []
+    },
+
+    mask: {
+      type: String,
+      default: MaskOptions.Dash,
+      validator: value => Object.values(MaskOptions).includes(value)
+    },
+
+    modelValue: {
+      type: [String, Array],
+      default: ''
+    },
+
+    multiple: {
+      type: Boolean
+    },
+
+    options: {
+      type: [Array, Function],
+      default: undefined
+    },
+
+    useIso: {
+      type: Boolean
+    },
+
+    useInactiveDates: {
+      default: true,
+      type: Boolean
+    },
+
+    useUnmaskEvents: {
+      default: true,
+      type: Boolean
+    },
+
+    useUnmaskOptions: {
+      default: true,
+      type: Boolean
+    },
+
+    width: {
+      type: String,
+      default: ''
+    }
+  },
+
+  emits: [
+    'update:modelValue',
+    'navigation'
+  ],
+
+  data () {
+    return {
+      currentDate: {}
+    }
+  },
+
+  computed: {
+    attributes () {
+      const {
+        color,
+        minimal,
+        textColor,
+        ...attributes
+      } = this.$attrs
+
+      return {
+        class: this.classes,
+        color: 'primary',
+        events: this.normalizedEvents,
+        mask: this.mask,
+        minimal: true,
+        multiple: this.multiple,
+        options: this.normalizedOptions,
+        ref: 'date',
+        style: this.styles,
+        textColor: 'white',
+        eventColor: this.getEventColor,
+
+        // events
+        onNavigation: this.onNavigation,
+
+        ...attributes
+      }
+    },
+
+    classes () {
+      return ['qas-date', 'shadow-2', { 'qas-date--inative': this.useInactiveDates }]
+    },
+
+    hasEvents () {
+      return !!Object.keys(this.events)?.length
+    },
+
+    hasModelValue () {
+      return this.multiple ? !!this.modelValue.length : !!this.modelValue
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.$emit('update:modelValue', this.useIso ? this.getISODate(value) : value)
+      }
+    },
+
+    styles () {
+      return {
+        ...(this.width && { width: this.width })
+      }
+    },
+
+    normalizedEvents () {
+      return this.useUnmaskEvents ? this.getUnmaskedList(this.events) : this.events
+    },
+
+    normalizedOptions () {
+      return this.useUnmaskOptions ? this.getUnmaskedList(this.options) : this.options
+    }
+  },
+
+  watch: {
+    events () {
+      if (this.useInactiveDates) this.setInactiveEvents(this.currentDate)
+    }
+  },
+
+  mounted () {
+    this.setNewNavigatorDisplay()
+
+    if (this.useInactiveDates) {
+      this.currentDate = this.getCurrentDate()
+      this.setInactiveEvents(this.currentDate)
+    }
+  },
+
+  methods: {
+    getCurrentDate () {
+      const modelDate = this.multiple ? this.modelValue[0] : this.modelValue
+      const extractedDate = this.hasModelValue ? date.extractDate(modelDate, this.mask) : new Date()
+
+      return this.getDate(extractedDate)
+    },
+
+    getDate (date) {
+      return {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        day: date.getDate()
+      }
+    },
+
+    getEventColor (currentDate) {
+      if (!this.modelValue) return 'primary'
+
+      const model = this.multiple ? this.modelValue : [this.modelValue]
+
+      const extractedModel = model.filter(Boolean).map(dateItem => {
+        const extractedDate = date.extractDate(dateItem, this.mask)
+        return asteroidDate(extractedDate, 'yyyy/MM/dd')
+      })
+
+      return extractedModel.includes(currentDate) ? 'white' : 'primary'
+    },
+
+    getISODate (value) {
+      if (!value || (this.multiple && !value.length)) return value
+
+      return this.multiple
+        ? value.map(dateItem => date.extractDate(dateItem, this.mask).toISOString())
+        : date.extractDate(value, this.mask).toISOString()
+    },
+
+    getUnmaskedList (list) {
+      const invalidTypes = ['function', 'undefined']
+
+      return invalidTypes.includes(typeof list)
+        ? list
+        : list.map(dateItem => asteroidDate(dateItem, 'yyyy/MM/dd'))
+    },
+
+    async setInactiveEvents ({ year, month }) {
+      if (!this.hasEvents) return
+
+      const previousMonth = month - 1
+
+      const dateElement = this.$refs.date.$el
+      const inativeDays = dateElement.querySelectorAll('.q-date__calendar-item--fill')
+      const inativeList = Array.from(inativeDays)
+
+      let monthIncrement = 0
+
+      inativeList.forEach((inativeElement, index) => {
+        const [child] = inativeElement.children
+        const previousDay = inativeList?.[index - 1]?.innerText || 0
+        const inactiveDay = child.innerText
+
+        /*
+          * Se o dia anterior for 31 e o dia atual for 1, por exemplo, significa que estamos nos referindo ao próximo mês.
+          * Como o mês começa no mês anterior, por exemplo, em 31 de janeiro, o mês atual seria fevereiro.
+          * Portanto, o mês correspondente ao dia 1 seria março e, para alcançá-lo, seria necessário incrementar 2 meses.
+        */
+        if (inactiveDay < previousDay) {
+          monthIncrement += 2
+        }
+
+        const normalizedMonth = previousMonth + monthIncrement
+        const newDate = date.buildDate({ year, month: normalizedMonth, day: inactiveDay })
+        const normalizedDate = asteroidDate(newDate, 'yyyy/MM/dd')
+
+        const hasCallbackInactiveEvent = typeof this.events === 'function' && this.events(normalizedDate)
+        const hasArrayInactiveEvent = Array.isArray(this.events) && this.normalizedEvents.includes(normalizedDate)
+
+        if (hasArrayInactiveEvent || hasCallbackInactiveEvent) {
+          const divElement = document.createElement('div')
+          divElement.classList.add('q-date__event', 'qas-date__event-inactive')
+
+          inativeElement.appendChild(divElement)
+        }
+      })
+    },
+
+    setNewNavigatorDisplay () {
+      const dateElement = this.$refs.date.$el
+      const navigationElement = dateElement.querySelector('.q-date__navigation')
+      const navigationChildren = navigationElement?.children || []
+
+      const nodesList = Array.from(navigationChildren)
+
+      if (nodesList.length <= 2) return
+
+      const firstDivElement = document.createElement('div')
+      const secondDivElement = document.createElement('div')
+
+      firstDivElement.classList.add('flex')
+      secondDivElement.classList.add('flex')
+
+      const firstList = nodesList.slice(0, 3)
+      const secondList = nodesList.slice(3, 6)
+
+      const newFirstElement = navigationElement.appendChild(firstDivElement)
+      const newSecondElement = navigationElement.appendChild(secondDivElement)
+
+      this.$nextTick(() => firstList.forEach(node => newFirstElement.appendChild(node)))
+      this.$nextTick(() => secondList.forEach(node => newSecondElement.appendChild(node)))
+    },
+
+    async onNavigation (date) {
+      this.$emit('navigation', date)
+
+      /*
+        * O componente QDate usa um vue transition de 3ms, como estamos manipulando o DOM, precisamos esperar essa
+        * transição terminar para que possamos fazer a logica, com isto precisamos sempre ficar atentos a atualizações
+        * do componente QDate para assegurar que esta logica não quebre.
+      */
+      if (this.useInactiveDates) setTimeout(() => { this.setInactiveEvents(date) }, 350)
+
+      this.$nextTick(() => this.setNewNavigatorDisplay())
+    },
+
+    toNumberValues (objet) {
+      const normalizedObjet = {}
+
+      for (const key in objet) {
+        normalizedObjet[key] = Number(objet[key])
+      }
+
+      return normalizedObjet
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.qas-date {
+  // $
+  min-width: 100%;
+  width: 100%;
+
+  &__event-inactive {
+    background-color: $grey-4;
+    bottom: 4px !important;
+  }
+
+  &--inative {
+    .q-date {
+      &__calendar-item--fill {
+        @include set-typography($subtitle2);
+
+        color: $grey-4;
+        visibility: unset;
+      }
+    }
+  }
+
+  .q-date__navigation > div:last-child,
+  .q-date__navigation > div:first-child {
+    min-width: auto;
+    width: auto;
+  }
+
+  .q-date {
+    &__navigation {
+      justify-content: space-between;
+
+      .q-btn {
+        @include set-button(tertiary, false, false, grey-9);
+        @include set-typography($subtitle2);
+
+        .q-icon {
+          @include set-typography($subtitle1, true);
+        }
+      }
+    }
+
+    &__calendar-weekdays {
+      color: $grey-8;
+
+      > div {
+        @include set-typography($caption);
+
+        opacity: 1;
+      }
+    }
+
+    &__calendar-item--out {
+      color: $grey-4;
+      opacity: 1;
+    }
+
+    &__event {
+      bottom: -1;
+      height: 6px;
+      width: 6px;
+    }
+
+    &__months,
+    &__years {
+      .q-btn {
+        background-color: white !important;
+
+        &.bg-primary {
+          color: $primary !important;
+        }
+
+        @include set-button(tertiary, false, false, grey-9);
+      }
+    }
+
+    &__view {
+      min-height: 230px;
+    }
+
+    &__calendar-days-container {
+      color: $grey-9;
+      min-height: auto;
+
+      .q-btn {
+        border: 0;
+        box-shadow: none;
+        color: $grey-9;
+        height: 30px !important;
+        min-height: 30px;
+        min-width: 30px;
+        transition: color var(--qas-generic-transition);
+        width: 30px !important;
+
+        .q-ripple,
+        .q-focus-helper {
+          display: none !important;
+        }
+
+        &:hover {
+          color: var(--q-primary-contrast);
+        }
+
+        @include set-typography($subtitle2);
+      }
+    }
+  }
+}
+</style>

package/src/components/date/QasDate.yml

@@ -0,0 +1,69 @@
+type: component
+
+meta:
+  desc: Componente wrapper do QDate, com estilização própria e funcionalidades extras.
+
+props:
+  events:
+    desc: Marcador de eventos do calendário (repassada para o quasar).
+    default: []
+    type: [Array, Function]
+
+  mask:
+    desc: Máscara do model (repassada para o quasar).
+    default: YYYY-MM-DD
+    type: String
+    examples: [YYYY-MM-DD, YYYY/MM/DD, DD/MM/YYYY, DD/MM/YYYY HH:mm]
+
+  model-value:
+    desc: Model do componente, usado para v-model (repassada para o quasar).
+    default: ''
+    type: [String, Array]
+    model: true
+
+  multiple:
+    desc: Habilita a seleção múltipla de datas, tornando o model em array (repassada para o quasar).
+    default: false
+    type: Boolean
+
+  options:
+    desc: Controla quais datas estão habilitadas (repassada para o quasar).
+    default: []
+    type: [Array, Function]
+
+  use-iso:
+    desc: Transforma o valor das datas do model no padrão ISO 8601.
+    type: Boolean
+
+  use-inactive-dates:
+    desc: Habilita o componente a renderizar datas passadas e futuras com seus respectivos eventos.
+    default: true
+    type: Boolean
+
+  use-unmask-events:
+    desc: A propriedade 'events' do Quasar só funciona com a formatação '/' mesmo que seja passada uma outra máscara. Esta propriedade transforma a formatação da propriedade 'events' de '-' em '/' (mas só funciona caso 'events' seja um Array).
+    default: true
+    type: Boolean
+
+  use-unmask-options:
+    desc: A propriedade 'options' do Quasar só funciona com a formatação '/' mesmo que seja passada uma outra máscara. Esta propriedade transforma a formatação da propriedade 'options' de '-' em '/' (mas só funciona caso 'options' seja um Array).
+    default: true
+    type: Boolean
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: [String, Array]
+
+  '@navigation -> function ({ month, year })':
+    desc: Dispara toda vez que muda de mês/ano.
+    params:
+      month:
+        desc: Mês atual
+        type: Number
+      year:
+        desc: Ano atual
+        type: Number

package/src/components/date-time-input/QasDateTimeInput.vue

@@ -3,7 +3,7 @@
     <template #append>
       <qas-btn v-if="!useTimeOnly" color="grey-9" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale">
-          <q-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" @update:model-value="updateModelValue" />
+          <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 

package/src/components/filters/QasFilters.vue

@@ -1,27 +1,16 @@
 <template>
-  <section class="qas-filters" :class="filtersClass">
+  <section :class="filtersClass">
     <div v-if="showFilters" class="q-col-gutter-x-md row">
       <div v-if="showSearch" class="col-12 col-md-6">
         <slot :filter="filter" name="search">
           <q-form v-if="useSearch" @submit.prevent="filter()">
-            <div class="qas-filters__input-content">
-              <qas-input v-model="search" class="bg-white q-px-sm rounded-borders-sm shadow-2" data-cy="filters-search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" :outlined="false" :placeholder="searchPlaceholder" type="search" @update:model-value="onSearch">
-                <template #prepend>
-                  <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
-                  <qas-btn v-else color="grey-9" icon="sym_r_search" variant="tertiary" @click="filter()" />
-                </template>
-
-                <template #append>
-                  <qas-btn v-if="hasSearch" class="q-mr-sm" color="grey-9" icon="sym_r_clear" variant="tertiary" @click="clearSearch" />
-
-                  <template v-if="showFilterButton">
-                    <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
-                      <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="filters" v-bind="filterButtonProps" />
-                    </slot>
-                  </template>
-                </template>
-              </qas-input>
-            </div>
+            <qas-search-input v-model="search" :placeholder="searchPlaceholder" :use-search-on-type="useSearchOnType" @filter="filter()" @update:model-value="onSearch">
+              <template v-if="showFilterButton" #after-clear>
+                <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
+                  <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="filters" v-bind="filterButtonProps" />
+                </slot>
+              </template>
+            </qas-search-input>
           </q-form>
         </slot>
       </div>
@@ -39,7 +28,9 @@
 
     <div v-if="hasChip" class="q-mt-md">
       <!-- TODO rever com novo estilo -->
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="sym_r_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ getChipValue(filterItem.value) }}</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="white" :data-cy="`filters-${filterItem.value}-chip`" dense icon-remove="sym_r_close" removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">
+        {{ getChipValue(filterItem.value) }}
+      </q-chip>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -47,7 +38,6 @@
 </template>
 
 <script>
-import QasBtn from '../btn/QasBtn.vue'
 import PvFiltersButton from './private/PvFiltersButton.vue'
 
 import { camelize, camelizeKeys } from 'humps'
@@ -59,7 +49,6 @@ export default {
   name: 'QasFilters',
 
   components: {
-    QasBtn,
     PvFiltersButton
   },
 
@@ -158,10 +147,6 @@ export default {
       return activeFilters
     },
 
-    debounce () {
-      return this.useSearchOnType ? '1200' : ''
-    },
-
     fields () {
       return getState.call(this, { entity: this.entity, key: 'filters' })
     },
@@ -197,10 +182,6 @@ export default {
       return !!Object.keys(this.fields || {}).length
     },
 
-    hasSearch () {
-      return this.search.length
-    },
-
     showFilterButton () {
       return !!this.$slots.filterButton || this.useFilterButton
     },
@@ -388,7 +369,7 @@ export default {
     },
 
     onSearch () {
-      if (this.debounce) {
+      if (this.useSearchOnType) {
         this.filter()
       }
     },
@@ -400,48 +381,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-// TODO rever
-.qas-filters {
-  &__input-content {
-    .q-field {
-      &::before {
-        border: 2px solid transparent;
-        border-radius: var(--qas-generic-border-radius);
-        bottom: 0;
-        content: '';
-        left: 0;
-        pointer-events: none;
-        position: absolute;
-        right: 0;
-        top: 0;
-        transition: border-color var(--qas-generic-transition);
-      }
-
-      &--dense .q-field__prepend {
-        padding-right: var(--qas-spacing-xs);
-      }
-
-      &--dense .q-field__append {
-        padding-left: var(--qas-spacing-sm);
-      }
-
-      &--focused::before {
-        border-color: var(--q-primary);
-        color: var(--q-primary);
-      }
-
-      &__control::after,
-      &__control::before {
-        display: none !important;
-      }
-
-      &__native {
-        padding-bottom: var(--qas-spacing-sm);
-        padding-top: var(--qas-spacing-sm);
-      }
-    }
-  }
-}
-</style>

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

@@ -9,11 +9,11 @@
 
       <slot v-if="useActions" name="actions">
         <qas-actions>
-          <template #primary>
+          <template v-if="useSubmitButton" #primary>
             <qas-btn class="qas-form-view__btn" :data-cy="`btnSave-${entity}`" :disable="disable" :label="submitButtonLabel" :loading="isSubmitting" type="submit" variant="primary" />
           </template>
 
-          <template #secondary>
+          <template v-if="hasCancelButton" #secondary>
             <qas-btn v-close-popup class="qas-form-view__btn" :data-cy="`btnCancel-${entity}`" :disable="isSubmitting" :label="cancelButtonLabel" type="button" variant="secondary" @click="cancel" />
           </template>
         </qas-actions>

package/src/components/label/QasLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-subtitle2" :class="classes">
+  <div class="text-subtitle1" :class="classes">
     <slot :label-with-suffix="labelWithSuffix">{{ labelWithSuffix }}</slot>
   </div>
 </template>