@bildvitta/quasar-ui-asteroid 3.20.0-beta.2 → 3.20.0-beta.21

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

@@ -1,28 +1,32 @@
 <template>
   <div class="app-select-list-dialog full-width">
-    <qas-header v-bind="headerProps" />
+    <slot name="container-header" :toggle-dialog>
+      <qas-header v-bind="headerProps" />
+    </slot>
 
     <component
       :is="containerListComponent"
       v-if="canShowContainerList"
       class="q-mt-md relative-position"
     >
-      <span class="text-grey-10 text-subtitle1">
-        {{ props.listLabel }}
-      </span>
-
       <slot name="selected-content">
-        <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>
+        <qas-search-box v-model:results="searchedResults" v-bind="searchSelectedItemsBoxProps" class="q-mt-md">
+          <span class="text-grey-10 text-subtitle1">
+            {{ props.listLabel }}
+          </span>
+
+          <q-virtual-scroll #default="{ item, index }" class="app-select-list-dialog__list" :items="searchedResults" 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>
+        </qas-search-box>
       </slot>
 
       <q-inner-loading :showing="props.loading">
@@ -50,7 +54,7 @@
 
       <template #description>
         <slot name="dialog-description">
-          <div v-if="dialogDescription" class="q-mb-xl text-center">
+          <div v-if="dialogDescription" class="q-mb-md">
             {{ dialogDescription }}
           </div>
 
@@ -69,6 +73,7 @@ import QasHeader from '../header/QasHeader.vue'
 import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
 import QasSelectList from '../select-list/QasSelectList.vue'
+import QasSearchBox from '../search-box/QasSearchBox.vue'
 
 import { computed, ref, watch, useSlots, inject } from 'vue'
 
@@ -130,6 +135,11 @@ const props = defineProps({
 
   useLazyLoading: {
     type: Boolean
+  },
+
+  searchPlaceholder: {
+    default: 'Pesquisar...',
+    type: String
   }
 })
 
@@ -172,6 +182,7 @@ defineExpose({ add, removeAll, remove, toggleDialog })
 
 // refs
 const model = ref([...props.modelValue])
+const searchedResults = ref([])
 
 // computeds
 const hasError = computed(() => Array.isArray(props.error) ? !!props.error.length : !!props.error)
@@ -208,6 +219,15 @@ const hasLazyLoading = computed(() => {
   return props.useLazyLoading || !!props.selectListProps?.searchBoxProps?.useLazyLoading
 })
 
+const searchSelectedItemsBoxProps = computed(() => {
+  return {
+    fuseOptions: { keys: ['label'] },
+    list: selectedOptions.value,
+    useEmptyResults: false,
+    placeholder: props.searchPlaceholder
+  }
+})
+
 watch(() => props.modelValue, newValue => {
   model.value = [...newValue]
 })
@@ -227,7 +247,7 @@ function getDialogSlot (name) {
 
 // ------------------------- composable functions ------------------------------
 function useList () {
-  const filteredOptions = ref(props.options)
+  const filteredOptions = ref([...props.options])
 
   const selectedOptions = computed(() => {
     const options = []
@@ -323,8 +343,8 @@ function useSelectDialog () {
 
   const defaultDialogProps = computed(() => {
     return {
-      useFullMaxWidth: true,
-
+      size: 'md',
+      title: 'Adicionar itens',
       ...props.dialogProps,
 
       onBeforeShow: event => {

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

@@ -55,6 +55,11 @@ props:
     type: Array
     model: true
 
+  search-placeholder:
+    desc: Placeholder do campo de busca.
+    default: Pesquisar...
+    type: String
+
   select-list-model:
     desc: Model dos itens selecionados dentro do dialog.
     type: Array
@@ -64,8 +69,8 @@ props:
 
   select-list-props:
     desc: Propriedades repassadas para o componente QasSelectList.
-    default: []
-    type: Array
+    default: {}
+    type: Object
 
   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.
@@ -82,6 +87,13 @@ slots:
   dialog-header:
     desc: Slot para substituir cabeçalho do dialog.
 
+  container-header:
+    desc: Slot para personalizar o header do componente dentro do box.
+    scope:
+      toggle-dialog:
+        desc: Função para abertura/fechamento do dialog do select list.
+        type: Function
+
   selected-content:
     desc: Slot para personalizar o conteúdo dos itens adicionados.
 

package/src/components/signature-uploader/QasSignatureUploader.vue

@@ -3,12 +3,8 @@
     <qas-uploader ref="uploader" v-model="model" :add-button-fn="openDialog" :use-resize="false" v-bind="defaultUploaderProps" />
 
     <qas-dialog v-model="isOpenedDialog" v-bind="defaultDialogProps">
-      <template #header>
-        <div class="text-bold text-center">Insira sua assinatura digital no campo abaixo</div>
-      </template>
-
       <template #description>
-        <div :style="signaturePadWidth">
+        <div>
           <qas-signature-pad ref="signaturePadModal" v-model:empty="isEmpty" :height="signaturePadHeight" />
         </div>
       </template>
@@ -22,7 +18,7 @@ import QasUploader from '../uploader/QasUploader.vue'
 import QasSignaturePad from '../signature-pad/QasSignaturePad.vue'
 
 import { base64ToBlob } from '../../helpers'
-import { NotifyError } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 
 export default {
   name: 'QasSignatureUploader',
@@ -82,10 +78,11 @@ export default {
 
     defaultDialogProps () {
       return {
-        maxWidth: '620px',
+        title: 'Assinatura digital',
+        size: 'md',
         ...this.dialogProps,
         ok: {
-          label: 'Salvar',
+          label: 'Assinar',
           onClick: () => this.getSignatureData()
         }
       }
@@ -111,16 +108,6 @@ export default {
       return sizes.true
     },
 
-    signaturePadWidth () {
-      const sizes = {
-        [this.$qas.screen.isSmall]: { width: '100%' },
-        [this.$qas.screen.isMedium]: { width: '570px' },
-        [this.$qas.screen.isLarge]: { width: '350px' }
-      }
-
-      return sizes.true
-    },
-
     uploaderScope () {
       return this.$refs?.uploader?.uploader
     }

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

@@ -71,7 +71,7 @@ const qas = inject('qas')
 // composables
 const route = useRoute()
 
-const { isBackgroundOverlay } = useOverlayNavigation()
+const { isBackgroundOverlay, route: overlayRoute } = useOverlayNavigation()
 
 const {
   // state
@@ -96,7 +96,7 @@ const {
 defineExpose({ fetchSingle, fetchHandler })
 
 // computed
-const id = computed(() => props.customId || route.params.id)
+const id = computed(() => props.customId || overlayRoute.value.params.id)
 
 const resultModel = computed(() => {
   if (props.useStore) return qas.getGetter({ entity: props.entity, key: 'byId' })(id.value) || {}

package/src/components/skeleton/QasSkeleton.vue

@@ -0,0 +1,139 @@
+<template>
+  <q-skeleton class="qas-skeleton" v-bind="skeletonProps" />
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ name: 'QasSkeleton', inheritAttrs: false })
+
+const props = defineProps({
+  gutter: {
+    type: String,
+    default: undefined
+  },
+
+  width: {
+    type: String,
+    default: undefined
+  },
+
+  height: {
+    type: String,
+    default: undefined
+  },
+
+  minHeight: {
+    type: String,
+    default: undefined
+  },
+
+  maxWidth: {
+    type: String,
+    default: undefined
+  },
+
+  size: {
+    type: String,
+    default: undefined
+  },
+
+  type: {
+    type: String,
+    default: undefined
+  },
+
+  useContrast: {
+    type: Boolean
+  },
+
+  useOverlay: {
+    type: Boolean
+  }
+})
+
+// composables
+const attrs = useAttrs()
+
+// computeds
+const skeletonProps = computed(() => {
+  const defaultCustomProps = {
+    QasBadge: {
+      width: props.width || '60px',
+      height: props.height || '24px'
+    },
+
+    QasActionsMenu: {
+      width: props.width || '80px',
+      height: props.height || '24px'
+    },
+
+    QasCheckbox: {
+      size: '18px'
+    },
+
+    QasBtn: {
+      width: props.width || '130px',
+      height: '24px'
+    },
+
+    QasToggleVisibility: {
+      width: props.width || '140px'
+    },
+
+    QasTextTruncate: {
+      width: props.width || '200px'
+    },
+
+    QasStatus: {
+      size: '16px',
+      type: 'circle'
+    }
+  }
+
+  const actionTypes = [
+    'QasCheckbox',
+    'QasBtn',
+    'QasToggleVisibility',
+    'QasActionsMenu'
+  ]
+
+  const classes = {
+    [`qas-skeleton--${props.gutter}`]: !!props.gutter,
+    'bg-blue-grey-4': props.useContrast || actionTypes.includes(props.type),
+    'qas-skeleton--overlay': props.useOverlay
+  }
+
+  /**
+   * Se o tipo for um dos tipos customizados, usa as propriedades definidas, não podemos passar por
+   * exemplo "QasBtn" na prop "type" para o QSkeleton, caso seja passado uma prop type que não seja
+   * custom, passa o valor normalmente.
+   */
+  const type = defaultCustomProps[props.type] ? defaultCustomProps[props.type].type : props.type
+
+  return {
+    animation: 'blink',
+    size: props.size,
+    type,
+    class: [classes, attrs.class],
+    width: props.width,
+    height: props.height,
+    ...defaultCustomProps[props.type],
+    style: {
+      ...(props.maxWidth && { maxWidth: props.maxWidth }),
+      ...(props.minHeight && { minHeight: props.minHeight })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.qas-skeleton {
+  &--overlay {
+    top: 0 !important;
+    width: 100%;
+    bottom: 0 !important;
+    position: absolute;
+  }
+}
+</style>

package/src/components/skeleton/QasSkeleton.yml

@@ -0,0 +1,48 @@
+type: component
+
+meta:
+  desc: Componente wrapper do "QSkeleton" que facilita a criação de skeletons com padrões pré-definidos para componentes do Asteroid.
+
+props:
+  gutter:
+    desc: Adiciona espaçamento (padding) no skeleton quando usado como overlay.
+    type: String
+    examples: ['sm', 'md', 'lg', 'xl']
+
+  height:
+    desc: Altura do skeleton.
+    type: String
+    examples: ['50px']
+
+  max-width:
+    desc: Largura máxima do skeleton.
+    type: String
+    examples: ['300px']
+
+  min-height:
+    desc: Altura mínima do skeleton.
+    type: String
+    examples: ['200px']
+
+  size:
+    desc: Tamanho do skeleton (usado para tipos circulares ou quadrados).
+    type: String
+    examples: ['50px']
+
+  type:
+    desc: Tipo do skeleton. Pode ser um tipo padrão do Quasar ou um dos tipos personalizados do Asteroid ("QasBadge", "QasActionsMenu", "QasCheckbox", "QasBtn", "QasToggleVisibility", "QasTextTruncate", "QasStatus").
+    type: String
+    examples: ['text', 'QasBtn', 'rect']
+
+  use-overlay:
+    desc: Define se o skeleton deve se comportar como um overlay (posicionamento absoluto cobrindo o pai).
+    type: Boolean
+
+  use-contrast:
+    desc: Define se o skeleton deve ter a cor de fundo mais escura ("bg-blue-grey-4"), geralmente usado para títulos ou botões.
+    type: Boolean
+
+  width:
+    desc: Largura do skeleton.
+    type: String
+    examples: ['100px', '100%']

package/src/components/sortable/QasSortable.vue

@@ -9,7 +9,7 @@ import { Loading, extend } from 'quasar'
 import Sortable from 'sortablejs'
 import { getAction } from '@bildvitta/store-adapter'
 
-import { NotifyError } from '../../plugins'
+import NotifyError from '../../plugins/notify-error/NotifyError.js'
 
 export default {
   name: 'QasSortable',

package/src/components/stepper/QasStepper.vue

@@ -206,6 +206,27 @@ function previous () {
         border-radius: var(--qas-generic-border-radius);
       }
 
+      .q-stepper__tab {
+        /*
+         * Por padrão o quasar sempre deixa as demais linhas com o mesmo tamanho, exceto a primeira e a última, que são
+         * maiores devido terem alinhamento inicial e final respectivamente, enquanto as demais possuem alinhamento
+         * central. Para equalizar visualmente os tamanhos, é necessário setar uma proporção de flex diferente para a
+         * primeira/última tab e para as tabs do meio.
+         *
+         * Proporção 2:3 para equalizar visualmente os tamanhos:
+         * - Primeira/última tab: flex 2 (possuem apenas meia linha)
+         * - Tabs do meio: flex 3 (possuem linha completa dos dois lados)
+         */
+        &:first-child,
+        &:last-child {
+          flex: 2;
+        }
+
+        &:not(:first-child):not(:last-child) {
+          flex: 3;
+        }
+      }
+
       .q-stepper {
         &__tab {
           &--done {
@@ -223,9 +244,10 @@ function previous () {
               }
             }
 
-            // Seta a cor do after da linha quando a step está finalizada, é a primeira step ou a próxima é ativa.
+            // Seta a cor do after da linha quando a step está finalizada, é a primeira step ou a próxima é ativa ou finalizada.
             &:first-child,
-            &:has(+ .q-stepper__tab.q-stepper__tab--active) {
+            &:has(+ .q-stepper__tab.q-stepper__tab--active),
+            &:has(+ .q-stepper__tab.q-stepper__tab--done) {
               .q-stepper__line::after {
                  background-color: var(--q-primary);
               }