@bildvitta/quasar-ui-asteroid 3.16.1 → 3.17.0-beta.1

package/package.json

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

package/src/components/badge/QasBadge.vue

@@ -1,10 +1,12 @@
 <template>
-  <q-badge v-bind="props" :aria-multiline="props.multiLine" class="q-px-sm q-py-xs qas-badge text-caption">
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
     <slot />
-  </q-badge>
+  </component>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+
 defineOptions({
   name: 'QasBadge',
   inheritAttrs: false
@@ -28,12 +30,58 @@ const props = defineProps({
   textColor: {
     type: String,
     default: 'black'
+  },
+
+  removable: {
+    type: Boolean
+  },
+
+  tabindex: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const emit = defineEmits(['remove'])
+const model = defineModel({ type: Boolean, default: true })
+
+const component = computed(() => {
+  const isChip = props.removable
+
+  return {
+    is: isChip ? 'q-chip' : 'q-badge',
+    props: {
+      // comum
+      color: props.color,
+      dense: true,
+      textColor: props.textColor,
+      label: props.label,
+
+      // somente QChip
+      ...(isChip && {
+        iconRemove: 'sym_r_close',
+        removable: true,
+        square: true,
+        tabindex: props.tabindex,
+        modelValue: model.value,
+        ripple: false,
+        onRemove: () => emit('remove')
+      }),
+
+      // somente QBadge
+      ...(!isChip && {
+        multiLine: props.multiLine,
+        ariaMultiline: props.multiLine
+      })
+    }
   }
 })
 </script>
 
 <style lang="scss">
 .qas-badge {
-  min-height: 24px;
+  min-height: 20px;
+  padding-bottom: 2px;
+  padding-top: 2px;
 }
 </style>

package/src/components/badge/QasBadge.yml

@@ -1,7 +1,7 @@
 type: component
 
 meta:
-  desc: Componente wrapper do QBadge do quasar.
+  desc: Componente wrapper do QBadge/QChip do quasar.
 
 props:
   color:
@@ -23,6 +23,33 @@ props:
     default: black
     type: String
 
+  removable:
+    desc: Transforma componente em QChip.
+    default: false
+    type: Boolean
+
+  tabindex:
+    desc: Usado para "foco" (usar junto a propriedade "removable").
+    default: undefined
+    type: [String, Number]
+
+  model-value:
+    desc: Model do componente (usar junto a propriedade "removable").
+    default: true
+    type: Boolean
+
 slots:
   default:
-    desc: Slot do conteúdo do badge.
+    desc: Slot do conteúdo do badge/chip.
+
+events:
+  '@remove -> function()':
+    desc: Evento emitido ao clicar no botão de remoção.
+
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Novo valor do model.
+        type: Boolean
+

package/src/components/box/QasBox.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="bg-white q-pa-md rounded-borders" :class="boxClasses">
+  <div class="bg-white rounded-borders" :class="boxClasses">
     <slot />
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { Spacing } from '../../enums/Spacing'
+
+import { computed, provide } from 'vue'
 
 defineOptions({ name: 'QasBox' })
 
@@ -16,13 +18,34 @@ const props = defineProps({
 
   unelevated: {
     type: Boolean
+  },
+
+  spacingX: {
+    default: Spacing.Md,
+    type: String,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
+  spacingY: {
+    default: Spacing.Md,
+    type: String,
+    validator: value => Object.values(Spacing).includes(value)
+  },
+
+  useSpacing: {
+    type: Boolean,
+    default: true
   }
 })
 
+provide('isBox', true)
+
 const boxClasses = computed(() => {
   return {
     'border-grey': props.outlined,
-    'shadow-2': !props.unelevated
+    'shadow-2': !props.unelevated,
+    [`q-px-${props.spacingX}`]: props.useSpacing,
+    [`q-py-${props.spacingY}`]: props.useSpacing
   }
 })
 </script>

package/src/components/box/QasBox.yml

@@ -11,3 +11,19 @@ props:
   unelevated:
     desc: Remove a sombra do componente.
     type: Boolean
+
+  spacing-x:
+    desc: Espaçamento horizontal do componente.
+    type: String
+    default: md
+    examples: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+
+  spacing-y:
+    desc: Espaçamento vertical do componente.
+    type: String
+    default: md
+    examples: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+
+  use-spacing:
+    desc: Controla espaçamento do componente.
+    type: Boolean

package/src/components/card/QasCard.vue

@@ -1,37 +1,39 @@
 <template>
   <div class="qas-card">
-    <q-card class="column full-height overflow-hidden q-px-md q-py-sm rounded-borders-right rounded-borders-sm shadow-2" :style="style">
-      <div class="items-center justify-between row">
-        <component :is="titleComponent" class="text-h4 text-no-decoration" :class="titleClasses" :to="route">
-          <slot name="title">
-            {{ props.title }}
-          </slot>
-        </component>
+    <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">
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </component>
 
-        <qas-actions-menu v-if="hasActions" :list="actionsMenuProps" :use-label="false" />
-      </div>
+          <qas-actions-menu v-if="hasActions" :list="props.actionsMenuProps" :use-label="false" />
+        </div>
 
-      <div class="q-my-sm qas-card__content">
-        <slot name="default" />
-      </div>
+        <div class="q-my-sm qas-card__content">
+          <slot name="default" />
+        </div>
 
-      <div class="q-mt-auto">
-        <q-separator v-if="hasFooter" class="q-mb-sm" />
+        <div class="q-mt-auto">
+          <q-separator v-if="hasFooter" class="q-mb-sm" />
 
-        <slot name="footer">
-          <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-primary" header-class="q-pa-none text-primary" :label="props.expansionProps.label">
-            <slot name="expansion-content">
-              {{ props.expansionProps.content }}
-            </slot>
-          </q-expansion-item>
-        </slot>
-      </div>
-    </q-card>
+          <slot name="footer">
+            <q-expansion-item v-if="hasExpansion" class="full-width" dense expand-icon-class="text-primary" header-class="q-pa-none text-primary" :label="props.expansionProps.label">
+              <slot name="expansion-content">
+                {{ props.expansionProps.content }}
+              </slot>
+            </q-expansion-item>
+          </slot>
+        </div>
+      </q-card>
+    </qas-box>
   </div>
 </template>
 
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, inject } from 'vue'
 
 import { colors } from 'quasar'
 
@@ -64,6 +66,17 @@ const props = defineProps({
   }
 })
 
+const isInsideBox = inject('isBox', false)
+
+const boxProps = computed(() => {
+  return {
+    outlined: isInsideBox,
+    unelevated: isInsideBox,
+    spacingY: 'sm',
+    style: style.value
+  }
+})
+
 const hasActions = computed(() => !!Object.keys(props.actionsMenuProps).length)
 
 const hasExpansion = computed(() => !!Object.keys(props.expansionProps).length)
@@ -84,7 +97,7 @@ const style = computed(() => {
   const { getPaletteColor } = colors
 
   return {
-    borderLeft: `4px solid ${getPaletteColor(props.statusColor)}`
+    borderLeft: `4px solid ${getPaletteColor(props.statusColor)} !important`
   }
 })
 

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

@@ -1,19 +1,9 @@
 <template>
-  <qas-header-actions v-if="hasHeaderActions" align-columns="end">
-    <template #left>
-      <h3 v-if="title" class="text-h3">
-        {{ title }}
-      </h3>
-
-      <div v-if="subtitle" class="text-body1 text-grey-8">
-        {{ subtitle }}
-      </div>
-    </template>
-
+  <qas-header v-if="hasHeader" v-bind="headerProps">
     <template #right>
       <qas-filters v-bind="chartFiltersProps" />
     </template>
-  </qas-header-actions>
+  </qas-header>
 
   <div v-bind="parentComponentProps">
     <component :is="chartComponent.is" v-if="showChart" v-bind="chartComponent.props" />
@@ -271,7 +261,7 @@ export default {
       return !!this.chartData?.datasets.filter(dataset => dataset.data.length)?.length
     },
 
-    hasHeaderActions () {
+    hasHeader () {
       return this.title || this.subtitle || this.useFilterButton
     },
 
@@ -308,6 +298,16 @@ export default {
         doughnut: [ArcElement],
         line: [LineElement]
       }
+    },
+
+    headerProps () {
+      return {
+        alignColumns: 'end',
+        description: this.subtitle,
+        labelProps: {
+          label: this.title
+        }
+      }
     }
   },
 

package/src/components/{checkbox-group/QasCheckboxGroup.vue → checkbox/QasCheckbox.vue}

@@ -1,11 +1,22 @@
 <template>
-  <div :class="classes">
-    <div v-for="(option, index) in props.options" :key="index">
-      <q-checkbox v-if="hasChildren(option)" :class="getCheckboxClass(option)" :label="option.label" :model-value="getModelValue(index)" @update:model-value="updateCheckbox($event, option, index)" />
-
-      <q-option-group v-if="hasChildren(option)" class="q-ml-sm" :inline="props.inline" :model-value="props.modelValue" :options="option.children" type="checkbox" @update:model-value="updateChildren($event, option, index)" />
-
-      <q-option-group v-else v-model="model" v-bind="attrs" :options="[option]" type="checkbox" />
+  <div>
+    <!-- Single -->
+    <q-checkbox v-if="isSingle" v-model="model" v-bind="attrs" 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)" />
+
+        <!-- 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" />
+      </div>
     </div>
   </div>
 </template>
@@ -13,7 +24,10 @@
 <script setup>
 import { watch, computed, ref, onMounted, useAttrs } from 'vue'
 
-defineOptions({ name: 'QasCheckboxGroup' })
+defineOptions({
+  name: 'QasCheckbox',
+  inheritAttrs: false
+})
 
 const props = defineProps({
   options: {
@@ -23,7 +37,7 @@ const props = defineProps({
 
   modelValue: {
     default: () => [],
-    type: Array
+    type: [Array, String, Number, Boolean, Object]
   },
 
   inline: {
@@ -36,10 +50,13 @@ const emit = defineEmits(['update:modelValue'])
 
 const attrs = useAttrs()
 
-onMounted(handleParent)
-
+// refs
 const group = ref({})
 
+// lifecycle
+onMounted(handleParent)
+
+// computed
 const classes = computed(() => props.inline && 'flex q-gutter-x-sm')
 
 const model = computed({
@@ -52,12 +69,18 @@ const model = computed({
   }
 })
 
+const isSingle = computed(() => !props.options.length)
+
+// watch
 watch(() => props.options, handleParent)
 
 // functions
 function handleParent () {
+  if (isSingle.value) return
+
   for (const index in props.options) {
     const option = props.options[index]
+
     if (hasChildren(option)) {
       setGroupIntersection(props.modelValue, option, index)
     }
@@ -103,5 +126,4 @@ function getCheckboxClass (option) {
 function getModelValue (index) {
   return group.value[index]
 }
-
 </script>

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

@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { date as dateFn } from '../../helpers/filters'
+import { date as dateFn, getPlaceholder } from '../../helpers'
 
 import { date } from 'quasar'
 import { ref, watch, computed, useAttrs, onMounted } from 'vue'
@@ -105,14 +105,24 @@ const maskDate = computed(() => {
 
 const mask = computed(() => maskDate.value.replace(/\w/g, '#'))
 
+const maskType = computed(() => {
+  const types = {
+    [props.useDateOnly]: 'date',
+    [props.useTimeOnly]: 'time'
+  }
+
+  return types.true || 'datetime'
+})
+
 const attributes = computed(() => {
-  const { modelValue, ...restAttributes } = attrs
+  const { modelValue, placeholder, ...restAttributes } = attrs
 
   return {
     error: error.value,
     errorMessage: errorMessage.value,
     ...restAttributes,
-    mask: mask.value
+    mask: mask.value,
+    placeholder: placeholder || getPlaceholder(maskType.value)
   }
 })
 

package/src/components/dialog/QasDialog.vue

@@ -45,7 +45,7 @@ import useDynamicComponents from './composables/use-dynamic-components'
 import useOk from './composables/use-ok'
 import { useScreen } from '../../composables'
 
-import { computed, ref, useAttrs, useSlots } from 'vue'
+import { computed, ref, useAttrs, useSlots, provide } from 'vue'
 import { useDialogPluginComponent } from 'quasar'
 
 defineOptions({ name: 'QasDialog' })
@@ -120,6 +120,8 @@ const emit = defineEmits([
   ...useDialogPluginComponent.emits
 ])
 
+provide('isDialog', true)
+
 const attrs = useAttrs()
 const screen = useScreen()
 const slots = useSlots()

package/src/components/field/QasField.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import QasCheckboxGroup from '../checkbox-group/QasCheckboxGroup.vue'
+import QasCheckbox from '../checkbox/QasCheckbox.vue'
 import QasDateTimeInput from '../date-time-input/QasDateTimeInput.vue'
 import QasInput from '../input/QasInput.vue'
 import QasNumericInput from '../numeric-input/QasNumericInput.vue'
@@ -15,6 +15,8 @@ import QasOptionGroup from '../option-group/QasOptionGroup.vue'
 import QasPasswordInput from '../password-input/QasPasswordInput.vue'
 import QasSignatureUploader from '../signature-uploader/QasSignatureUploader.vue'
 import QasUploader from '../uploader/QasUploader.vue'
+import QasToggle from '../toggle/QasToggle.vue'
+import QasRadio from '../radio/QasRadio.vue'
 
 const attributesProfile = {
   maxLength: 'maxlength',
@@ -26,14 +28,16 @@ export default {
   name: 'QasField',
 
   components: {
-    QasCheckboxGroup,
+    QasCheckbox,
     QasDateTimeInput,
     QasInput,
     QasNumericInput,
     QasOptionGroup,
     QasPasswordInput,
     QasSignatureUploader,
-    QasUploader
+    QasUploader,
+    QasToggle,
+    QasRadio
   },
 
   inheritAttrs: false,
@@ -61,24 +65,25 @@ export default {
   computed: {
     component () {
       const {
+        disable,
         entity,
         extensions,
+        filled,
         label,
+        mask,
+        maxFiles,
         maxlength,
         minlength,
         multiple,
         name,
         options,
+        placeholder,
+        places,
+        prefix,
         readonly,
         required,
-        disable,
-        filled = readonly,
         suffix,
-        prefix,
-        places,
         type,
-        mask,
-        maxFiles,
         useIso,
         useLazyLoading,
         useStrengthChecker
@@ -94,7 +99,6 @@ export default {
       const input = {
         label,
         hideBottomSpace: !error.error,
-        outlined: true,
         ...error,
         readonly,
         required,
@@ -103,6 +107,7 @@ export default {
         maxlength,
         minlength,
         suffix,
+        placeholder,
         prefix,
         useIso
       }
@@ -140,9 +145,9 @@ export default {
         datetime: { ...datetimeInput },
         time: { ...datetimeInput, useTimeOnly: true },
 
-        boolean: { is: 'q-toggle', label, ...error },
-        checkbox: { is: 'qas-checkbox-group', label, options, ...error },
-        radio: { is: 'qas-option-group', label, options },
+        boolean: { is: 'qas-toggle', label, ...error },
+        checkbox: { is: 'qas-checkbox', label, options, ...error },
+        radio: { is: 'qas-radio', label, options },
 
         upload: { is: 'qas-uploader', accept, autoUpload: true, entity, label, multiple, readonly, maxFiles, ...error },
         editor: { is: 'q-editor', toolbar, ...error },

package/src/components/filters/QasFilters.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="filtersClass">
+  <section class="qas-filters" :class="filtersClasses">
     <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">
@@ -15,7 +15,7 @@
         </slot>
       </div>
 
-      <div v-else-if="showFilterButton" class="col-12 col-md-6">
+      <div v-else-if="showFilterButton" class="col-12">
         <slot :context="mx_context" :filter="filter" :filters="activeFilters" name="filter-button" :remove-filter="removeFilter">
           <pv-filters-button v-if="useFilterButton" ref="filtersButton" v-model="internalFilters" v-bind="filterButtonProps" />
         </slot>
@@ -27,10 +27,11 @@
     </div>
 
     <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>
+      <qas-badge v-for="(filterItem, key) in activeFilters" :key="key" :data-cy="`filters-${filterItem.value}-chip`" removable @remove="removeFilter(filterItem)">
+        <div class="ellipsis qas-filters__badge-content" :title="getChipValue(filterItem.value)">
+          {{ filterItem.label }}: "{{ getChipValue(filterItem.value) }}"
+        </div>
+      </qas-badge>
     </div>
 
     <slot :context="mx_context" :filter="filter" :filters="activeFilters" :remove-filter="removeFilter" />
@@ -203,7 +204,7 @@ export default {
       return getState.call(this, { entity: this.entity, key: 'filters' })
     },
 
-    filtersClass () {
+    filtersClasses () {
       return {
         'q-mb-xl': this.useSpacing
       }
@@ -461,3 +462,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.qas-filters {
+  &__badge-content {
+    max-width: 300px;
+  }
+}
+</style>

package/src/components/filters/private/PvFiltersButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-btn :color="color" data-cy="filters-btn" icon="sym_r_tune" variant="tertiary">
+  <qas-btn data-cy="filters-btn" icon="sym_r_filter_alt" label="Filtrar" :use-label-on-small-screen="false" variant="tertiary">
     <q-menu ref="menu" anchor="center right" class="full-width" max-width="270px" self="top right" v-bind="menuProps">
       <div v-if="loading" class="q-pa-xl text-center">
         <q-spinner color="grey" size="2em" />
@@ -18,6 +18,7 @@
           <template #primary>
             <qas-btn class="full-width" data-cy="filters-submit-btn" label="Filtrar" type="submit" variant="primary" />
           </template>
+
           <template #secondary>
             <qas-btn class="full-width" data-cy="filters-clear-btn" label="Limpar" variant="secondary" @click="$emit('clear')" />
           </template>