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

package/src/components/board-generator/QasBoardGenerator.yml

@@ -20,19 +20,33 @@ props:
     required: true
 
   column-width:
-    desc: Largura da coluna
+    desc: Largura da coluna.
     type: String
     default: 288
 
+  confirm-dialog-props:
+    desc: Propriedade repassada ao `QasDialog` para confirmar um drag and drop. Caso não seja passado, não é usado dialog de confirmação. As ações de confirmar e cancelar são feitas por padrão no componente.
+    type: Object
+    default: {}
+
+  header-box-props:
+    desc: Propriedades repassadas ao `QasBox` do header.
+    type: Object
+    default: {}
+
   headers:
     desc: Lista de itens sendo cada um o header de cada coluna.
     default: []
     type: Array
-  
+
   height:
-    desc: Altura do container do board. Caso não seja passado um height, o calculo é feito para ocupar a maior altura possível da página.
+    desc: Altura do container do board. Caso não seja passado um height, o cálculo é feito para ocupar a maior altura possível da página.
+    type: String
+
+  item-id-key:
+    desc: Identificador único do item a ser movido, sendo que será usado nas requisições realizadas pelo drop.
     type: String
-  
+
   lazy-loading-fields-keys:
     desc: Chaves dos campos que são lazy loading para o tratamento de merge das options.
     type: Array
@@ -44,7 +58,7 @@ props:
     default: 12
 
   use-mark-raw:
-    desc: Define se os valores dos itens das colunas irá ser atribuido utilizando o "markRaw", onde somente a primeira camada do model será reativa.(https://vuejs.org/api/reactivity-advanced.html#markraw)
+    desc: Define se os valores dos itens das colunas irão ser atribuídos utilizando o "markRaw", onde somente a primeira camada do model será reativa. (https://vuejs.org/api/reactivity-advanced.html#markraw)
     type: Boolean
     default: true
 
@@ -55,6 +69,30 @@ props:
     examples: [v-model:results="resultsColumns"]
     model: true
 
+  sortable-config:
+    desc: Configuração passada para a instância do SortableJS.
+    type: Object
+    default: "{ animation: 500, swapThreshold: 1, delay: 50, delayOnTouchOnly: true, emptyInsertThreshold: 0 }"
+    debugger: true
+
+  use-drag-and-drop-x:
+    desc: Controla se irá ter drag and drop no eixo X (entre colunas).
+    type: Boolean
+
+  use-drag-and-drop-y:
+    desc: Controla se irá ter drag and drop no eixo Y (mesma coluna, utilizado para ordenação de itens).
+    type: Boolean
+
+  update-position-url:
+    desc: URL usada para realizar o PATCH do drag and drop.
+    type: String
+    default: ''
+
+  update-position-params:
+    desc: Parâmetros customizados caso precise passar para a API de PATCH.
+    type: Object
+    default: {}
+
 slots:
   header-column:
     desc: Slot para acessar o card do header de cada coluna.
@@ -63,9 +101,9 @@ slots:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
-      
+
       header:
-        desc: Informações de cada item do header que foi fornecido através da prop "headers"
+        desc: Informações de cada item do header que foi fornecido através da prop "headers".
         type: Object
         default: {}
 
@@ -76,7 +114,7 @@ slots:
         desc: Fields referente à coluna atual do template.
         type: Object
         default: {}
-      
+
       item:
         desc: Informações de cada item da coluna que foi buscado através da API.
         type: Object
@@ -98,14 +136,14 @@ events:
         type: Object
 
       header:
-        desc: header da coluna atual.
+        desc: Header da coluna atual.
         type: Object
 
   '@update:fetch-column-error -> function(error)':
     desc: Dispara quando o "fetchColumn" cai em uma exceção.
     params:
       error:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        desc: Retorna todos os dados "crus" respondidos na exceção do fetch.
         type: Object
 
   '@update:fetch-columns-success -> function()':
@@ -115,12 +153,15 @@ events:
     desc: Dispara quando algum "fetchColumn" cai em uma exceção.
     params:
       error:
-        desc: Retorna todos os dados "cru" respondido na exceção do fetch.
+        desc: Retorna todos os dados "crus" respondidos na exceção do fetch.
         type: Object
 
+  '@update-success -> function()':
+    desc: Dispara quando o PATCH do drag and drop é com sucesso.
+
 methods:
   'fetchColumns: () => void':
     desc: Busca todas colunas com base nos headers fornecidos.
 
   'fetchColumn: (header) => void':
-    desc: Busca uma coluna especifica com base no header fornecido.
+    desc: Busca uma coluna específica com base no header fornecido.

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -19,7 +19,7 @@
     </div>
 
     <div v-if="props.useSplit">
-      <qas-btn color="grey-10" :disable="disable" :icon="props.dropdownIcon" variant="tertiary">
+      <qas-btn v-bind="splittedButtonProps">
         <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
           <div :class="classes.menuContent">
             <slot />
@@ -103,6 +103,19 @@ const hasButtons = computed(() => !screen.isSmall || !props.useSplit)
 const hasDefaultSlot = computed(() => !!slots.default)
 const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit && isSingleButton.value)
 
+const splittedButtonProps = computed(() => {
+  const iconKey = screen.isSmall ? 'icon' : 'iconRight'
+
+  return {
+    color: 'grey-10',
+    disable: props.disable,
+    [iconKey]: props.dropdownIcon,
+    variant: 'tertiary',
+    label: 'Opções',
+    useLabelOnSmallScreen: false
+  }
+})
+
 watch(() => props.menu, value => {
   isMenuOpened.value = value
 }, { immediate: true })

package/src/components/card/QasCard.vue

@@ -2,14 +2,14 @@
   <div class="qas-card">
     <qas-box class="rounded-borders-right" v-bind="boxProps">
       <q-card class="column full-height overflow-hidden shadow-0">
-        <div class="items-center justify-between row">
-          <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
+        <div class="full-width items-center justify-between no-wrap row">
+          <component :is="titleComponent" class="ellipsis text-h5 text-no-decoration" :class="titleClasses" :to="route">
             <slot name="title">
               {{ props.title }}
             </slot>
           </component>
 
-          <qas-actions-menu v-if="hasActions" :list="props.actionsMenuProps" :use-label="false" />
+          <qas-actions-menu v-if="hasActions" v-bind="formattedActionsMenuProps" />
         </div>
 
         <div class="q-my-sm qas-card__content">
@@ -66,8 +66,10 @@ const props = defineProps({
   }
 })
 
+// consts
 const isInsideBox = inject('isBox', false)
 
+// computeds
 const boxProps = computed(() => {
   return {
     outlined: isInsideBox,
@@ -89,7 +91,7 @@ const titleClasses = computed(() => {
   }
 })
 
-const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'div')
+const titleComponent = computed(() => hasRoute.value ? 'router-link' : 'h5')
 
 const style = computed(() => {
   if (!props.statusColor) return
@@ -106,6 +108,13 @@ const slots = useSlots()
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const hasFooter = computed(() => hasFooterSlot.value || hasExpansion.value)
+
+const formattedActionsMenuProps = computed(() => {
+  return {
+    ...props.actionsMenuProps,
+    useLabel: false
+  }
+})
 </script>
 
 <style lang="scss">

package/src/components/chart-view/QasChartView.vue

@@ -1,23 +1,25 @@
 <template>
-  <qas-header v-if="hasHeader" v-bind="headerProps">
-    <template #right>
-      <qas-filters v-bind="chartFiltersProps" />
-    </template>
-  </qas-header>
-
-  <div v-bind="parentComponentProps">
-    <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
-
-    <div v-else-if="!isFetching">
-      <slot name="empty-results">
-        <qas-empty-result-text />
-      </slot>
+  <component :is="parentComponent.is" v-bind="parentComponent.props">
+    <qas-header v-if="hasHeader" v-bind="headerProps">
+      <template #right>
+        <qas-filters v-bind="chartFiltersProps" />
+      </template>
+    </qas-header>
+
+    <div v-bind="parentComponentProps">
+      <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
+
+      <div v-else-if="!isFetching">
+        <slot name="empty-results">
+          <qas-empty-result-text />
+        </slot>
+      </div>
+
+      <q-inner-loading :showing="isFetching">
+        <q-spinner color="grey" size="3em" />
+      </q-inner-loading>
     </div>
-
-    <q-inner-loading :showing="isFetching">
-      <q-spinner color="grey" size="3em" />
-    </q-inner-loading>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -69,6 +71,11 @@ export default {
       type: Function
     },
 
+    boxProps: {
+      default: () => ({}),
+      type: Object
+    },
+
     colorsList: {
       type: Array,
       default: () => []
@@ -124,6 +131,11 @@ export default {
       type: String
     },
 
+    useBox: {
+      type: Boolean,
+      default: true
+    },
+
     useFilterButton: {
       type: Boolean
     }
@@ -251,9 +263,11 @@ export default {
     },
 
     parentComponentProps () {
+      const hasMinHeight = this.isFetching || this.hasDataSets
+
       return {
         class: 'relative-position',
-        style: `min-height: ${this.height}`
+        style: `min-height: ${hasMinHeight ? this.height : 'auto'}`
       }
     },
 
@@ -308,6 +322,16 @@ export default {
           label: this.title
         }
       }
+    },
+
+    parentComponent () {
+      return {
+        is: this.useBox ? 'qas-box' : 'div',
+
+        props: {
+          ...(this.useBox && { ...this.boxProps })
+        }
+      }
     }
   },
 
@@ -326,7 +350,7 @@ export default {
     this.handleFetchData()
   },
 
-  unmounted () {
+  beforeUnmount () {
     this.unregisterChartJS()
   },
 

package/src/components/chart-view/QasChartView.yml

@@ -10,6 +10,11 @@ props:
     type: Function
     examples: ['beforeFetch({ payload, resolve, done })']
 
+  box-props:
+    desc: Propriedades do "QasBox" que envolve o conteúdo.
+    default: {}
+    type: Object
+
   colors-list:
     desc: Lista de cores personalizadas para utilizar nos gráficos
     default: []
@@ -65,6 +70,11 @@ props:
     desc: Envia como parâmetro para a action "fetchList" do modulo correspondente a "entity".
     type: String
 
+  use-box:
+    desc: Controla se o componente vai ter o QasBox englobando ou não.
+    default: true
+    type: Boolean
+
   use-filter-button:
     desc: Controla se o componente vai usar ou não o componente "QasFilters".
     type: Boolean

package/src/components/checkbox/QasCheckbox.vue

@@ -1,21 +1,27 @@
 <template>
   <div>
     <!-- Single -->
-    <q-checkbox v-if="isSingle" v-model="model" v-bind="attrs" dense>
+    <q-checkbox v-if="isSingle" v-model="model" v-bind="singleAttributes" dense>
       <slot />
     </q-checkbox>
 
     <!-- Group -->
-    <div v-else :class="classes">
-      <div v-for="(option, index) in props.options" :key="index">
-        <!-- Com children -->
-        <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
+    <div v-else>
+      <div v-if="hasCheckboxLabel" class="q-mb-sm text-body1">
+        {{ props.label }}
+      </div>
+
+      <div :class="classes">
+        <div v-for="(option, index) in props.options" :key="index">
+          <!-- Com children -->
+          <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" dense :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
 
-        <!-- Com children -->
-        <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
+          <!-- Com children -->
+          <q-option-group v-if="hasChildren(option)" class="q-ml-xs q-mt-xs" dense :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
 
-        <!-- Sem children -->
-        <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+          <!-- Sem children -->
+          <q-option-group v-else v-model="model" v-bind="attrs" dense :options="[option]" type="checkbox" />
+        </div>
       </div>
     </div>
   </div>
@@ -30,6 +36,11 @@ defineOptions({
 })
 
 const props = defineProps({
+  label: {
+    default: '',
+    type: String
+  },
+
   options: {
     default: () => [],
     type: Array
@@ -59,6 +70,8 @@ onMounted(handleParent)
 // computed
 const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
+const hasCheckboxLabel = computed(() => !!props.label)
+
 const model = computed({
   get () {
     return props.modelValue
@@ -71,6 +84,14 @@ const model = computed({
 
 const isSingle = computed(() => !props.options.length)
 
+const singleAttributes = computed(() => {
+  return {
+    ...attrs,
+
+    label: props.label
+  }
+})
+
 // watch
 watch(() => props.options, handleParent)
 

package/src/components/checkbox/QasCheckbox.yml

@@ -9,6 +9,11 @@ props:
     default: true
     type: Boolean
 
+  label:
+    desc: Label utilizada em casos de ser checkbox-group.
+    default: ''
+    type: String
+
   model-value:
     desc: Model do componente, usado para v-model.
     default: []

package/src/components/copy/QasCopy.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <slot>{{ props.text }}</slot>
+    <slot v-if="props.useText">{{ props.text }}</slot>
 
     <qas-btn class="q-ml-xs" color="primary" :icon="props.icon" :loading="isLoading" variant="tertiary" @click.stop.prevent="copy">
       <q-tooltip>Copiar</q-tooltip>
@@ -23,13 +23,23 @@ const props = defineProps({
   text: {
     required: true,
     type: String
+  },
+
+  useText: {
+    type: Boolean,
+    default: true
+  },
+
+  rawText: {
+    default: '',
+    type: String
   }
 })
 
 const isLoading = ref(false)
 
 function copy () {
-  copyToClipboard(props.text, value => {
+  copyToClipboard(props.rawText || props.text, value => {
     isLoading.value = value
   })
 }

package/src/components/copy/QasCopy.yml

@@ -13,3 +13,11 @@ props:
     desc: Texto a ser copiado.
     type: String
 
+  use-text:
+    desc: Controla se o texto será exibo ao lado do botão ou não.
+    type: Boolean
+    default: true
+
+  raw-text:
+    desc: Caso o texto a ser copiado precise ser diferente do texto a ser exibido, utilize esta propriedade.
+    type: String

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

@@ -1,7 +1,7 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <qas-btn v-if="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_event" variant="tertiary">
+      <qas-btn v-if="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_calendar_today" variant="tertiary">
         <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="props.datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>

package/src/components/dialog/QasDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <q-dialog ref="dialogRef" class="qas-dialog" :class="classes" data-cy="dialog" v-bind="dialogProps" :persistent="props.persistent" @update:model-value="updateModelValue">
-    <div class="bg-white q-pa-lg" :style="style">
-      <header v-if="hasHeader" class="q-mb-lg">
+    <div class="bg-white q-pa-md" :style="style">
+      <header v-if="hasHeader" class="q-mb-md">
         <slot name="header">
           <div class="items-center justify-between row">
-            <h5 class="text-h5" data-cy="dialog-title">{{ props.card.title }}</h5>
+            <qas-label data-cy="dialog-title" :label="props.card.title" margin="none" />
 
             <qas-btn v-if="isInfoDialog" v-close-popup color="grey-10" data-cy="dialog-close-btn" icon="sym_r_close" variant="tertiary" />
           </div>