@bildvitta/quasar-ui-asteroid 3.12.0-beta.0 → 3.12.0-beta.2

package/package.json

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

package/src/components/filters/QasFilters.vue

@@ -224,9 +224,14 @@ export default {
     }
   },
 
-  created () {
-    this.fetchFilters()
-    this.watchOnceFields()
+  async created () {
+    await this.fetchFilters()
+
+    if (this.useUpdateRoute) {
+      this.updateValues()
+      this.updateCurrentFilters()
+    }
+
     this.handleSearchModelOnCreate()
   },
 
@@ -371,18 +376,6 @@ export default {
       return isMultiple ? [value] : value
     },
 
-    watchOnceFields () {
-      if (!this.useUpdateRoute) return
-
-      const watchOnce = this.$watch('fields', values => {
-        if (Object.keys(values || {}).length) {
-          this.updateValues()
-          this.updateCurrentFilters()
-          watchOnce()
-        }
-      })
-    },
-
     handleSearchModelOnCreate () {
       if (this.useUpdateRoute && !this.useFilterButton) {
         this.setSearch()

package/src/components/search-box/QasSearchBox.vue

@@ -264,7 +264,7 @@ export default {
     },
 
     setFuse () {
-      const list = [...this.list]
+      const list = this.mx_getOptions(this.list)
 
       this.mx_filteredOptions = list
       this.fuse = new Fuse(list, this.defaultFuseOptions)

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="app-select-list-dialog full-width">
+    <header class="flex items-center justify-between no-wrap">
+      <qas-label v-bind="labelProps" />
+
+      <qas-btn
+        v-bind="defaultAddButtonProps"
+        @click="toggleDialog"
+      />
+    </header>
+
+    <div
+      v-if="props.description"
+      class="q-mt-md text-body1 text-grey-8"
+    >
+      {{ props.description }}
+    </div>
+
+    <qas-box
+      v-if="hasBox"
+      class="q-mt-md relative-position"
+    >
+      <span class="text-grey-9 text-subtitle1">
+        {{ props.listLabel }}
+      </span>
+
+      <q-virtual-scroll #default="{ item, index }" class="app-select-list-dialog__list q-mt-md" :items="selectedOptions" separator>
+        <q-item class="q-px-none text-body1 text-grey-8">
+          <q-item-section>
+            {{ item.label }}
+          </q-item-section>
+
+          <q-item-section avatar>
+            <qas-btn v-bind="getRemoveButtonProps({ index, option: item })" />
+          </q-item-section>
+        </q-item>
+      </q-virtual-scroll>
+
+      <q-inner-loading :showing="props.loading">
+        <q-spinner
+          color="grey"
+          size="2em"
+        />
+      </q-inner-loading>
+    </qas-box>
+
+    <span
+      v-if="hasError"
+      class="app-select-list-dialog__error"
+    >
+      {{ errorMessage }}
+    </span>
+
+    <qas-dialog
+      v-bind="defaultDialogProps"
+      v-model="showDialog"
+    >
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="`dialog-${name}`" v-bind="context || {}" />
+      </template>
+
+      <template #description>
+        <slot name="dialog-description">
+          <div v-if="dialogDescription" class="q-mb-xl text-center">
+            {{ dialogDescription }}
+          </div>
+
+          <qas-select-list
+            v-model="listModel"
+            v-bind="defaultSelectListProps"
+          />
+        </slot>
+      </template>
+    </qas-dialog>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+defineOptions({ name: 'QasSelectListDialog' })
+
+const props = defineProps({
+  addButtonProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  description: {
+    type: String,
+    default: ''
+  },
+
+  disable: {
+    type: Boolean
+  },
+
+  error: {
+    type: [String, Array],
+    default: ''
+  },
+
+  dialogProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  options: {
+    type: Array,
+    default: () => []
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  listLabel: {
+    type: String,
+    default: ''
+  },
+
+  loading: {
+    type: Boolean
+  },
+
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+
+  selectListProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  useLazyLoading: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['add', 'remove', 'update:modelValue'])
+
+const hasError = computed(() => Array.isArray(props.error) ? !!props.error.length : !!props.error)
+const errorMessage = computed(() => Array.isArray(props.error) ? props.error.join(' ') : props.error)
+
+const {
+  listModel,
+  showDialog,
+
+  defaultDialogProps,
+  defaultSelectListProps,
+  dialogDescription,
+
+  toggleDialog
+} = useSelectDialog()
+
+const {
+  selectedOptions,
+
+  hasBox,
+
+  add,
+  removeAll,
+  remove,
+  getRemoveButtonProps
+} = useList()
+
+defineExpose({ add, removeAll, remove })
+
+const model = ref([...props.modelValue])
+
+const defaultAddButtonProps = computed(() => {
+  return {
+    icon: 'sym_r_add',
+    useLabelOnSmallScreen: false,
+    ...props.addButtonProps,
+    disable: props.disable,
+    loading: props.loading
+  }
+})
+
+const labelProps = computed(() => {
+  return {
+    label: props.label,
+    margin: 'none',
+    color: hasError.value ? 'negative' : 'grey-9'
+  }
+})
+
+const hasLazyLoading = computed(() => {
+  return props.useLazyLoading || !!props.selectListProps?.searchBoxProps?.useLazyLoading
+})
+
+watch(() => props.modelValue, newValue => {
+  model.value = [...newValue]
+})
+
+function updateModel () {
+  emit('update:modelValue', model.value)
+}
+
+// ------------------------- composable functions ------------------------------
+function useList () {
+  const filteredOptions = ref(props.options)
+
+  const selectedOptions = computed(() => {
+    const options = []
+
+    model.value.forEach(value => {
+      const option = filteredOptions.value.find(option => option.value === value)
+
+      if (option) return options.push(option)
+
+      options.push({ label: value })
+    })
+
+    return options
+  })
+
+  watch(() => props.options, options => {
+    filteredOptions.value = [...options]
+  })
+
+  const hasBox = computed(() => hasFilteredOptions.value || props.loading)
+  const hasFilteredOptions = computed(() => model.value.length)
+
+  /*
+   * caso não passe o value, o valor sera automaticamente o value da option
+  */
+  function add ({ options = [], value }) {
+    const normalizedItems = Array.isArray(options) ? options : [options]
+
+    /*
+     * Validação necessária pois se não estiver com lazyloading e adicionar mais opções, as options vai vir duplicadas
+     * com as opções que já foram adicionadas
+    */
+    if (hasLazyLoading.value) {
+      filteredOptions.value.push(...normalizedItems)
+    }
+
+    const newModel = value || normalizedItems.map(item => item.value)
+
+    model.value.push(...newModel)
+
+    emit('add', newModel)
+
+    updateModel()
+  }
+
+  function removeAll () {
+    model.value = []
+    filteredOptions.value = []
+
+    updateModel()
+  }
+
+  function remove (value) {
+    const index = model.value.findIndex(item => item === value)
+    const optionIndex = filteredOptions.value.findIndex(option => option.value === value)
+
+    if (~index) model.value.splice(index, 1)
+    if (~optionIndex) filteredOptions.value.splice(optionIndex, 1)
+
+    emit('remove', value)
+    updateModel()
+  }
+
+  function getRemoveButtonProps ({ option }) {
+    return {
+      color: 'grey-9',
+      icon: 'sym_r_delete',
+      variant: 'tertiary',
+      disable: props.disable || !!option.disable,
+      onClick: () => remove(option.value)
+    }
+  }
+
+  return {
+    filteredOptions,
+    selectedOptions,
+
+    hasBox,
+    hasFilteredOptions,
+
+    add,
+    removeAll,
+    remove,
+    getRemoveButtonProps
+  }
+}
+
+function useSelectDialog () {
+  const showDialog = ref(false)
+  const listModel = ref([])
+
+  const defaultDialogProps = computed(() => {
+    return {
+      useFullMaxWidth: true,
+
+      ...props.dialogProps,
+
+      onBeforeShow: event => {
+        resetListModel()
+
+        props.dialogProps.onBeforeShow && props.dialogProps.onBeforeShow(event)
+      },
+
+      ok: {
+        label: 'Adicionar',
+
+        disable: !listModel.value.length,
+
+        ...props.dialogProps.ok,
+
+        onClick: () => {
+          props.dialogProps.ok?.onClick?.()
+          onAdd()
+        }
+      }
+    }
+  })
+
+  const defaultSelectListProps = computed(() => {
+    return {
+      emitValue: false,
+
+      ...props.selectListProps,
+
+      searchBoxProps: {
+        useLazyLoading: props.useLazyLoading,
+        list: props.options,
+        height: '160px',
+        optionsToExclude: model.value,
+
+        ...props.selectListProps.searchBoxProps
+      }
+    }
+  })
+
+  const dialogDescription = computed(() => props.dialogProps.card?.description)
+
+  function toggleDialog () {
+    showDialog.value = !showDialog.value
+  }
+
+  function resetListModel () {
+    listModel.value = []
+  }
+
+  function onAdd () {
+    if (listModel.value.length) add({ options: listModel.value })
+  }
+
+  return {
+    listModel,
+    showDialog,
+
+    defaultDialogProps,
+    defaultSelectListProps,
+    dialogDescription,
+
+    toggleDialog
+  }
+}
+</script>
+
+<style lang="scss">
+.app-select-list-dialog {
+  .q-item {
+    @include set-typography($body1)
+  }
+
+  // simulando q-field--error
+  &__error {
+    padding-top: var(--qas-spacing-sm);
+    color: var(--q-negative) !important;
+    font-size: 12px;
+  }
+
+  &__list {
+    max-height: 250px;
+    overflow-y: auto;
+  }
+}
+</style>

package/src/components/select-list-dialog/QasSelectListDialog.yml

@@ -0,0 +1,108 @@
+type: component
+
+meta:
+  desc: Componente de seleção de itens dentro do QasDialog.
+
+props:
+  add-button-props:
+    desc: Props repassadas para o botão de adicionar (QasBtn)
+    default: {}
+    type: Object
+
+  description:
+    desc: Descrição acima da lista de itens selecionados.
+    default: ''
+    type: String
+
+  disable:
+    desc: Desabilita o componente (remoção e adição).
+    default: false
+    type: Boolean
+
+  dialog-props:
+    desc: Propriedades repassadas para o dialog (QasDialog).
+    default: {}
+    type: Object
+
+  error:
+    desc: Mensagem de erro.
+    default: ''
+    type: String
+
+  options:
+    desc: Opções de itens disponíveis para seleção.
+    default: []
+    type: Array
+
+  label:
+    desc: Label do componente.
+    default: ''
+    type: String
+
+  list-label:
+    desc: Label da acima dos itens selecionados.
+    default: ''
+    type: String
+
+  loading:
+    desc: Estado de carregamento do componente.
+    default: false
+    type: Boolean
+
+  model-value:
+    desc: Model do componente.
+    default: []
+    type: Array
+    model: true
+
+  select-list-props:
+    desc: Propriedades repassadas para o componente QasSelectList.
+    default: []
+    type: Array
+
+  use-lazy-loading:
+    desc: O componente precisa saber se o lazy-loading esta habilitado para este componente, e caso esteja usando customização pelos slots do "dialog-description", é necessário informar por esta prop.
+    default: false
+    type: Boolean
+
+slots:
+  dialog-actions:
+    desc: Slot para substituir ações do dialog.
+
+  dialog-description:
+    desc: Slot para substituir a descrição do dialog.
+
+  dialog-header:
+    desc: Slot para substituir cabeçalho do dialog.
+
+events:
+  'add -> function(list)':
+    desc: Dispara toda vez que é adicionado novos itens.
+    params:
+      list:
+        desc: Lista de itens adicionados.
+        type: Array
+
+  'remove -> function(value)':
+    desc: Dispara toda vez que é removido um item.
+    params:
+      value:
+        desc: Valor do item (uuid/id/slug).
+        type: String
+
+  'update:model-value -> function(list)':
+    desc: Dispara toda vez que o model é atualizado.
+    params:
+      list:
+        desc: Lista de itens selecionados.
+        type: Array
+
+methods:
+  'add ({ options = [], value }) => undefined':
+    desc: Adiciona itens a lista de selecionados, é preciso adicionar quais opções são referentes ao model.
+
+  'remove (value) => undefined':
+    desc: remove um item da lista de selecionados passando o valor referente a ele na lista.
+
+  'removeAll () => undefined':
+    desc: remove todos os itens da lista de selecionados.

package/src/components/timeline/QasTimeline.vue

@@ -0,0 +1,140 @@
+<template>
+  <q-timeline
+    class="qas-timeline"
+    color="grey-6"
+    layout="comfortable"
+  >
+    <template
+      v-for="(item, index) in list"
+      :key="`timeline-${index}-${uid()}`"
+    >
+      <q-timeline-entry
+        side="left"
+        :subtitle="getFormattedValue(item, Masks.Date)"
+      >
+        <slot :item="item">
+          <div class="column justify-center q-gutter-sm q-py-md qas-timeline__content">
+            <slot :item="item" name="hour">
+              <div class="text-body2 text-grey-8">
+                Adicionado às {{ getFormattedValue(item, Masks.Hour) }}
+              </div>
+            </slot>
+
+            <slot :item="item" name="description">
+              <div class="text-body1 text-grey-9">
+                {{ item[descriptionKey] }}
+              </div>
+            </slot>
+          </div>
+        </slot>
+      </q-timeline-entry>
+    </template>
+  </q-timeline>
+</template>
+
+<script setup>
+import { date as dateFn } from '../../helpers/filters'
+import { uid } from 'quasar'
+
+defineOptions({ name: 'QasTimeline' })
+
+const Masks = {
+  Hour: 'HH:mm',
+  Date: 'dd MMM yyyy'
+}
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+
+  dateKey: {
+    type: String,
+    default: 'date'
+  },
+
+  hourKey: {
+    type: String,
+    default: 'date'
+  },
+
+  descriptionKey: {
+    type: String,
+    default: 'description'
+  }
+})
+
+function isInvalidDate (date) {
+  const day = new Date(date).getDay()
+
+  return isNaN(day)
+}
+
+function getFormattedValue (item, mask) {
+  const itemKey = mask === Masks.Hour ? props.hourKey : props.dateKey
+
+  const date = item[itemKey]
+
+  return isInvalidDate(date) ? date : dateFn(date, mask)
+}
+</script>
+
+<style lang="scss">
+.qas-timeline {
+  margin: 0;
+
+  &__content {
+    min-height: 100px;
+  }
+
+  .q-timeline__subtitle {
+    color: $dark;
+    opacity: initial;
+    padding-right: 0;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 80px;
+
+    &::before {
+      background-color: currentColor;
+      bottom: 0;
+      content: "";
+      display: block;
+      opacity: 0.4;
+      position: absolute;
+      right: -30px;
+      top: 0px;
+      transition: opacity var(--qas-generic-transition) ease;
+      width: 3px;
+    }
+  }
+
+  .q-timeline__entry {
+    &:hover,
+    .active {
+      .q-timeline__subtitle {
+        &::before {
+          background-color: $primary;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .q-timeline__content {
+    padding-bottom: 0;
+    vertical-align: middle;
+  }
+
+  .q-timeline__title {
+    margin-bottom: 0;
+  }
+
+  .q-timeline__dot::before,
+  .q-timeline__dot::after {
+    display: none;
+  }
+}
+</style>

package/src/components/timeline/QasTimeline.yml

@@ -0,0 +1,36 @@
+type: component
+
+meta:
+  desc: Componente para timeline que implementa o "QTimeline".
+
+props:
+  list:
+    desc: Lista de itens com datas e descrições que serão exibidios na timeline.
+    default: []
+    type: Array
+    examples: ["[{ date: '2023-01-11T14:58:40.000000Z', description: 'Descrição' }"]
+
+  dateKey:
+    desc: Chave do campo que será exibido à esquerda da timeline.
+    default: date
+    type: String
+
+  hourKey:
+    desc: Chave do campo que será exibido acima da descrição.
+    default: date
+    type: String
+
+  descriptionKey:
+    desc: Chave do campo que será exibido na descrição.
+    default: description
+    type: String
+
+slots:
+  default:
+    desc: slot para substituir o conteúdo todo da timeline.
+
+  hour:
+    desc: slot para substituir o conteúdo acima da descrição.
+
+  description:
+    desc: slot para substituir o conteúdo da descrição.

package/src/composables/index.js

@@ -1,3 +1,5 @@
-export { default as useHistory } from './use-history.js'
+export { default as useContext } from './use-context.js'
 export { default as useForm } from './use-form.js'
+export { default as useHistory } from './use-history.js'
+export { default as useQueryCache } from './use-query-cache.js'
 export { default as useScreen } from './use-screen.js'

package/src/composables/use-context.js

@@ -0,0 +1,15 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export default function () {
+  const route = useRoute()
+
+  const context = computed(() => {
+    const { limit, ordering, page, search, ...filters } = route.query
+    return { filters, limit, ordering, page: page ? parseInt(page) : 1, search }
+  })
+
+  return {
+    context
+  }
+}

package/src/composables/use-query-cache.js

@@ -0,0 +1,53 @@
+import { SessionStorage } from 'quasar'
+import { filterObject } from '../helpers'
+
+const cachedFilters = SessionStorage.getItem('cachedFilters') || {}
+
+function updateSessionStorage () {
+  SessionStorage.set('cachedFilters', cachedFilters)
+}
+
+export default function () {
+  function addOne (key, { label, value }) {
+    cachedFilters[key][label] = value
+    updateSessionStorage()
+  }
+
+  function addMany (key, filters) {
+    cachedFilters[key] = filters
+    updateSessionStorage()
+  }
+
+  function findOne (key, filter) {
+    return cachedFilters[key][filter]
+  }
+
+  function findAll (key) {
+    return cachedFilters[key]
+  }
+
+  function clearOne (key, filter) {
+    delete cachedFilters[key][filter]
+    updateSessionStorage()
+  }
+
+  function clearAll (key, { exclude = [] } = {}) {
+    if (exclude.length) {
+      cachedFilters[key] = filterObject(cachedFilters[key], exclude)
+    } else {
+      delete cachedFilters[key]
+    }
+
+    updateSessionStorage()
+  }
+
+  return {
+    addOne,
+    addMany,
+    findOne,
+    findAll,
+    clearOne,
+    clearAll,
+    cachedFilters
+  }
+}

package/src/vue-plugin.js

@@ -21,7 +21,6 @@ import QasDialog from './components/dialog/QasDialog.vue'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
 import QasEmptyResultText from './components/empty-result-text/QasEmptyResultText.vue'
 import QasField from './components/field/QasField.vue'
-import QasSearchInput from './components/search-input/QasSearchInput.vue'
 import QasFilters from './components/filters/QasFilters.vue'
 import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
 import QasFormView from './components/form-view/QasFormView.vue'
@@ -44,8 +43,10 @@ import QasPasswordStrengthChecker from './components/password-strength-checker/Q
 import QasProfile from './components/profile/QasProfile.vue'
 import QasResizer from './components/resizer/QasResizer.vue'
 import QasSearchBox from './components/search-box/QasSearchBox.vue'
+import QasSearchInput from './components/search-input/QasSearchInput.vue'
 import QasSelect from './components/select/QasSelect.vue'
 import QasSelectList from './components/select-list/QasSelectList.vue'
+import QasSelectListDialog from './components/select-list-dialog/QasSelectListDialog.vue'
 import QasSignaturePad from './components/signature-pad/QasSignaturePad.vue'
 import QasSignatureUploader from './components/signature-uploader/QasSignatureUploader.vue'
 import QasSingleView from './components/single-view/QasSingleView.vue'
@@ -54,6 +55,7 @@ import QasStatus from './components/status/QasStatus.vue'
 import QasTableGenerator from './components/table-generator/QasTableGenerator.vue'
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
+import QasTimeline from './components/timeline/QasTimeline.vue'
 import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
 import QasUploader from './components/uploader/QasUploader.vue'
@@ -102,7 +104,6 @@ async function install (app) {
   app.component('QasDialogRouter', QasDialogRouter)
   app.component('QasEmptyResultText', QasEmptyResultText)
   app.component('QasField', QasField)
-  app.component('QasSearchInput', QasSearchInput)
   app.component('QasFilters', QasFilters)
   app.component('QasFormGenerator', QasFormGenerator)
   app.component('QasFormView', QasFormView)
@@ -125,8 +126,10 @@ async function install (app) {
   app.component('QasProfile', QasProfile)
   app.component('QasResizer', QasResizer)
   app.component('QasSearchBox', QasSearchBox)
+  app.component('QasSearchInput', QasSearchInput)
   app.component('QasSelect', QasSelect)
   app.component('QasSelectList', QasSelectList)
+  app.component('QasSelectListDialog', QasSelectListDialog)
   app.component('QasSignaturePad', QasSignaturePad)
   app.component('QasSignatureUploader', QasSignatureUploader)
   app.component('QasSingleView', QasSingleView)
@@ -135,6 +138,7 @@ async function install (app) {
   app.component('QasTableGenerator', QasTableGenerator)
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
+  app.component('QasTimeline', QasTimeline)
   app.component('QasTransfer', QasTransfer)
   app.component('QasTreeGenerator', QasTreeGenerator)
   app.component('QasUploader', QasUploader)
@@ -181,7 +185,6 @@ export {
   QasDialogRouter,
   QasEmptyResultText,
   QasField,
-  QasSearchInput,
   QasFilters,
   QasFormGenerator,
   QasFormView,
@@ -204,8 +207,10 @@ export {
   QasProfile,
   QasResizer,
   QasSearchBox,
+  QasSearchInput,
   QasSelect,
   QasSelectList,
+  QasSelectListDialog,
   QasSignaturePad,
   QasSignatureUploader,
   QasSingleView,
@@ -214,6 +219,7 @@ export {
   QasTableGenerator,
   QasTabsGenerator,
   QasTextTruncate,
+  QasTimeline,
   QasTransfer,
   QasTreeGenerator,
   QasUploader,