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

package/package.json

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

package/src/components/nested-fields/QasNestedFields.vue

@@ -227,6 +227,11 @@ export default {
       default: true
     },
 
+    useHeader: {
+      type: Boolean,
+      default: true
+    },
+
     useIndexLabel: {
       type: Boolean
     },
@@ -545,7 +550,7 @@ export default {
     },
 
     hasHeader ({ row }) {
-      return this.hasBlockActions(row) || !this.useSingleLabel
+      return (this.hasBlockActions(row) || !this.useSingleLabel) && this.useHeader
     },
 
     getHeaderProps ({ index, row }) {

package/src/components/nested-fields/QasNestedFields.yml

@@ -169,6 +169,11 @@ props:
     default: true
     type: Boolean
 
+  use-header:
+    desc: Controla se vai ter um header em cada linha.
+    default: true
+    type: Boolean
+
   use-index-label:
     desc: Se tiver "rowLabel" esta prop controla se cada label da linha vai ter o index como sufixo.
     type: Boolean

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,7 +1,7 @@
 <template>
   <q-field class="qas-numeric-input" :class="classes" dense :label="formattedLabel" :model-value="modelValue" no-error-icon>
-    <template #control="{ floatingLabel, id, editable }">
-      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="!editable" inputmode="numeric" :placeholder @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+    <template #control="{ floatingLabel, id }">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="$attrs.disable" inputmode="numeric" :placeholder :readonly="$attrs.readonly" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
 
     <template v-if="icon" #append>

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

@@ -1,20 +1,6 @@
 <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-header v-bind="headerProps" />
 
     <component
       :is="containerListComponent"
@@ -25,17 +11,19 @@
         {{ 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>
+      <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>
+            <q-item-section avatar>
+              <qas-btn v-bind="getRemoveButtonProps({ index, option: item })" />
+            </q-item-section>
+          </q-item>
+        </q-virtual-scroll>
+      </slot>
 
       <q-inner-loading :showing="props.loading">
         <q-spinner
@@ -77,10 +65,9 @@
 </template>
 
 <script setup>
-import QasBox from '../box/QasBox.vue'
+import QasHeader from '../header/QasHeader.vue'
 import QasBtn from '../btn/QasBtn.vue'
 import QasDialog from '../dialog/QasDialog.vue'
-import QasLabel from '../label/QasLabel.vue'
 import QasSelectList from '../select-list/QasSelectList.vue'
 
 import { computed, ref, watch, useSlots, inject } from 'vue'
@@ -146,16 +133,16 @@ const props = defineProps({
   }
 })
 
+// emits
 const emit = defineEmits(['add', 'remove', 'update:modelValue'])
 
+// slots
 const slots = useSlots()
 
+// globals
 const isBox = inject('isBox', false)
 
-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 containerListComponent = computed(() => isBox ? 'div' : QasBox)
-
+// composables
 const {
   listModel,
   showDialog,
@@ -178,25 +165,38 @@ const {
   getRemoveButtonProps
 } = useList()
 
+// expose
 defineExpose({ add, removeAll, remove })
 
+// refs
 const model = ref([...props.modelValue])
 
-const defaultAddButtonProps = computed(() => {
-  return {
-    icon: 'sym_r_add',
-    useLabelOnSmallScreen: false,
-    ...props.addButtonProps,
-    disable: props.disable,
-    loading: props.loading
-  }
-})
+// computeds
+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 containerListComponent = computed(() => isBox ? 'div' : 'qas-box')
 
-const labelProps = computed(() => {
+const headerProps = computed(() => {
   return {
-    label: props.label,
-    margin: 'none',
-    color: hasError.value ? 'negative' : 'grey-10'
+    labelProps: {
+      label: props.label,
+      margin: 'none',
+      color: hasError.value ? 'negative' : 'grey-10'
+    },
+
+    spacing: 'none',
+    description: props.description,
+
+    buttonProps: {
+      icon: 'sym_r_add',
+      useLabelOnSmallScreen: false,
+      ...props.addButtonProps,
+      disable: props.disable,
+      loading: props.loading,
+
+      // events
+      onClick: toggleDialog
+    }
   }
 })
 
@@ -208,6 +208,7 @@ watch(() => props.modelValue, newValue => {
   model.value = [...newValue]
 })
 
+// functions
 function updateModel () {
   emit('update:modelValue', model.value)
 }
@@ -237,7 +238,7 @@ function useList () {
   /**
    * Valida se tenho opções ou se está carregando para mostrar o container da listagem.
    */
-  const canShowContainerList = computed(() => hasFilteredOptions.value || props.loading)
+  const canShowContainerList = computed(() => hasFilteredOptions.value || props.loading || !!slots['selected-content'])
   const hasFilteredOptions = computed(() => model.value.length)
 
   /*

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

@@ -75,6 +75,9 @@ slots:
   dialog-header:
     desc: Slot para substituir cabeçalho do dialog.
 
+  selected-content:
+    desc: Slot para personalizar o conteúdo dos itens adicionados.
+
 events:
   '@add -> function(items)':
     desc: Dispara toda vez que é adicionado novos itens.