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

package/src/components/search-input/QasSearchInput.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="qas-filter-input">
-    <qas-input ref="input" v-model="model" v-bind="$attrs" class="bg-white rounded-borders-sm" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" type="search">
+  <qas-box class="qas-search-input" :use-spacing="false">
+    <qas-input ref="input" v-model="model" class="qas-search-input__input" v-bind="$attrs" data-cy="search-input" :debounce="debounce" dense hide-bottom-space input-class="ellipsis text-grey-8" inputmode="search" outlined type="search">
       <template #prepend>
         <q-icon v-if="useSearchOnType" color="grey-8" name="sym_r_search" />
+
         <qas-btn v-else color="grey-10" icon="sym_r_search" variant="tertiary" @click="$emit('filter')" />
       </template>
 
@@ -12,7 +13,7 @@
         <slot name="after-clear" />
       </template>
     </qas-input>
-  </div>
+  </qas-box>
 </template>
 
 <script>
@@ -78,22 +79,9 @@ export default {
 </script>
 
 <style lang="scss">
-.qas-filter-input {
-  position: relative;
-
-  .q-field {
-    &--dense .q-field__prepend {
-      padding-right: var(--qas-spacing-xs);
-    }
-
-    &--dense .q-field__append {
-      padding-left: var(--qas-spacing-sm);
-    }
-
-    &__native {
-      padding-bottom: var(--qas-spacing-sm);
-      padding-top: var(--qas-spacing-sm);
-    }
+.qas-search-input {
+  .qas-search-input__input .q-field__control:before {
+    border: 0;
   }
 }
 </style>

package/src/components/select/QasSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="model" v-bind="attributes">
+  <q-select v-model="model" v-bind="attributes" class="qas-select" :class="componentClasses" no-error-icon :outlined="false">
     <template v-if="isSearchable" #prepend>
       <q-icon name="sym_r_search" />
     </template>
@@ -22,6 +22,14 @@
       </slot>
     </template>
 
+    <template v-if="attributes.useChips" #selected-item="{ opt, tabindex, index, removeAtIndex }">
+      <qas-badge removable :tabindex @remove="removeAtIndex(index)">
+        <div class="ellipsis" :title="opt.label">
+          {{ opt.label }}
+        </div>
+      </qas-badge>
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -30,11 +38,12 @@
 
 <script>
 import { getRequiredLabel } from '../../helpers'
-import { uid } from 'quasar'
 import { searchFilterMixin } from '../../mixins'
-import Fuse from 'fuse.js'
 import fuseConfig from '../../shared/fuse-config'
 
+import { uid } from 'quasar'
+import Fuse from 'fuse.js'
+
 export default {
   name: 'QasSelect',
 
@@ -97,12 +106,15 @@ export default {
   computed: {
     attributes () {
       return {
-        class: 'qas-select',
         clearable: this.isSearchable,
         emitValue: true,
         mapOptions: true,
         outlined: true,
-        popupContentClass: this.popupContentClass,
+        dense: true,
+        dropdownIcon: 'sym_r_expand_more',
+        clearIcon: 'sym_r_close',
+        popupContentClass: `qas-select__menu ${this.popupContentClass}`,
+        useChips: this.isMultiple && this.isPopupContentOpen,
 
         ...this.$attrs,
 
@@ -115,11 +127,10 @@ export default {
 
         ...(this.isSearchable && { onFilter: this.onFilter }),
 
-        ...(this.useLazyLoading && {
-          onPopupHide: this.onPopupHide,
-          onPopupShow: this.onPopupShow,
-          onVirtualScroll: this.mx_onVirtualScroll
-        })
+        onPopupHide: this.onPopupHide,
+        onPopupShow: this.onPopupShow,
+
+        ...(this.useLazyLoading && { onVirtualScroll: this.mx_onVirtualScroll })
       }
     },
 
@@ -174,6 +185,27 @@ export default {
 
     formattedLabel () {
       return getRequiredLabel({ label: this.label, required: this.required })
+    },
+
+    // redesign
+    componentClasses () {
+      return {
+        'qas-select--has-icon': this.isSearchable || this.hasAppend,
+        'qas-select--closed': !this.isPopupContentOpen,
+        'qas-select--loading': this.hasLoading
+      }
+    },
+
+    isDisabled () {
+      return this.$attrs.disable || this.$attrs.disable === ''
+    },
+
+    isMultiple () {
+      return this.$attrs.multiple || this.$attrs.multiple === ''
+    },
+
+    hasAppend () {
+      return !!this.$slots.append
     }
   },
 
@@ -289,5 +321,45 @@ export default {
       }
     }
   }
+
+  &__menu {
+    .q-item {
+      font-weight: 400 !important;
+    }
+  }
+
+  &--closed {
+    .q-field__native span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:not(.qas-select--loading) {
+      .q-field__native .q-field__input {
+        position: absolute;
+        caret-color: transparent;
+      }
+    }
+  }
+
+  .q-field__prepend,
+  .q-field__append {
+    .q-icon {
+      color: $grey-8;
+    }
+  }
+
+  .q-field__focusable-action {
+    opacity: 1;
+  }
+
+  .q-chip {
+    font-size: 11px;
+  }
+
+  .q-chip__icon--remove {
+    opacity: 1;
+  }
 }
 </style>

package/src/components/table-generator/QasTableGenerator.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="parentComponent.is" v-bind="parentComponent.props">
+  <component :is="parentComponent.is">
     <q-table ref="table" class="bg-white qas-table-generator text-grey-8" v-bind="attributes">
       <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="name" v-bind="context" />
@@ -226,10 +226,7 @@ export default {
 
     parentComponent () {
       return {
-        is: this.useBox ? 'qas-box' : 'div',
-        props: {
-          class: this.useBox ? 'q-px-lg q-py-md' : ''
-        }
+        is: this.useBox ? 'qas-box' : 'div'
       }
     }
   },

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -21,6 +21,8 @@
 <script setup>
 import QasStatus from '../status/QasStatus.vue'
 
+import { decimal } from '../../helpers'
+
 import { computed } from 'vue'
 import { extend } from 'quasar'
 
@@ -87,7 +89,7 @@ function getFormattedLabel ({ label, counter, value }) {
 
   if (!normalizedCount) return label
 
-  const countString = String(normalizedCount)
+  const countString = String(decimal(normalizedCount))
 
   return `${label} (${countString.padStart(2, '0')})`
 }

package/src/components/toggle/QasToggle.vue

@@ -0,0 +1,14 @@
+<template>
+  <q-toggle v-bind="attrs" dense />
+</template>
+
+<script setup>
+import { useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasToggle',
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+</script>

package/src/components/toggle/QasToggle.yml

@@ -0,0 +1,5 @@
+type: component
+
+meta:
+  desc: Componente wrapper do QToggle.
+

package/src/composables/private/use-generator.js

@@ -75,12 +75,19 @@ export default function ({ props = {} }) {
       : _handleColumnsByField({ index, isGridGenerator })
   }
 
+  function getFieldSetColumnClass (column) {
+    if (!column) return 'col-12'
+
+    return typeof column === 'string' ? _getStringColumns(column) : _getBreakpoint(column)
+  }
+
   /**
    * @private
    */
   function _getStringColumns (columns) {
     return IRREGULAR_CLASSES.includes(columns) ? columns : `col-${columns}`
   }
+
   /**
    * @private
    */
@@ -167,6 +174,7 @@ export default function ({ props = {} }) {
   return {
     classes,
 
-    getFieldClass
+    getFieldClass,
+    getFieldSetColumnClass
   }
 }

package/src/css/components/checkbox.scss

@@ -1,6 +1,8 @@
 .q-checkbox {
   &__label {
     @include set-typography($body1);
+
+    padding-left: var(--qas-spacing-sm) !important;
   }
 
   &.disabled {

package/src/css/components/field.scss

@@ -1,14 +1,36 @@
 .q-field {
+  $root: &;
+
+  .q-field__append,
+  .q-field__prepend {
+    will-change: transform;
+    transition: transform var(--qas-generic-transition);
+  }
+
+  .q-field__label {
+    will-change: transform;
+  }
+
   &__label,
   &--dense &__label {
-    @include set-typography($body1);
+    @include set-typography($body2);
+  }
+
+  &--dense {
+    .q-textarea {
+      height: 100%;
+    }
+
+    .q-icon {
+      font-size: 18px !important;
+    }
   }
 
   &__native,
   &__input,
   &--dense &__native,
   &--dense &__input {
-    @include set-typography($body1);
+    @include set-typography($body2);
 
     color: $grey-10;
 
@@ -17,6 +39,41 @@
     }
   }
 
+  // Somente fields com label
+  &--float.q-field--labeled,
+  &--focused.q-field--labeled {
+    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
+
+    .q-field__label {
+      transform: translateY(-10px) scale(0.85) !important;
+    }
+
+    .q-field__prepend {
+      transition: transform var(--qas-generic-transition);
+      transform: translateY(6px) !important;
+    }
+
+    .q-field__append {
+      transition: transform var(--qas-generic-transition);
+      transform: translateY(6px) !important;
+    }
+  }
+
+  .q-field__label {
+    transition: transform var(--qas-generic-transition), font-size var(--qas-generic-transition);
+  }
+
+  &--float.qas-numeric-input--has-icon,
+  &--focused.qas-numeric-input--has-icon,
+  &--float.qas-select--has-icon,
+  &--focused.qas-select--has-icon,
+  &--float.qas-input--has-icon,
+  &--focused.qas-input--has-icon {
+    .q-field__label {
+      transform: translate(-24px, -14px) scale(0.85) !important;
+    }
+  }
+
   &--outlined .q-field__control {
     background-color: white;
     border-radius: $generic-border-radius;

package/src/css/components/radio.scss

@@ -1,6 +1,8 @@
 .q-radio {
   &__label {
-    @include set-typography($body1);
+    @include set-typography($body2);
+
+    padding-left: var(--qas-spacing-sm) !important;
   }
 
   &__inner::before {

package/src/css/components/toggle.scss

@@ -1,6 +1,8 @@
 .q-toggle {
   &__label {
-    @include set-typography($body1);
+    @include set-typography($body2);
+
+    padding-left: var(--qas-spacing-sm) !important;
   }
 
   &.disabled {

package/src/helpers/get-placeholder.js

@@ -0,0 +1,19 @@
+export default function getPlaceholder (type, defaultPlaceholder = 'Digite aqui...') {
+  const placeholders = {
+    'company-document': '00.000.000/0000-00',
+    date: 'dd/mm/aaaa',
+    datetime: 'dd/mm/aaaa hh:mm',
+    decimal: '0,00',
+    email: 'seuemail@exemplo.com',
+    integer: '0',
+    money: 'R$ 0,00',
+    percent: '0,00%',
+    'personal-document': '000.000.000-00',
+    phone: '(00) 00000-0000',
+    'postal-code': '00000-000',
+    'square-area': '0,00 m²',
+    time: 'hh:mm'
+  }
+
+  return placeholders[type] || defaultPlaceholder
+}

package/src/helpers/index.js

@@ -18,6 +18,7 @@ export { default as isEmpty } from './is-empty.js'
 export { default as isLocalDevelopment } from './is-local-development.js'
 export { default as promiseHandler } from './promise-handler.js'
 export { default as setScrollOnGrab } from './set-scroll-on-grab.js'
+export { default as getPlaceholder } from './get-placeholder.js'
 
 export * from './filters.js'
 export * from './images.js'

package/src/vue-plugin.js

@@ -13,7 +13,7 @@ import QasBtn from './components/btn/QasBtn.vue'
 import QasBtnDropdown from './components/btn-dropdown/QasBtnDropdown.vue'
 import QasCard from './components/card/QasCard.vue'
 import QasCardImage from './components/card-image/QasCardImage.vue'
-import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup.vue'
+import QasCheckbox from './components/checkbox/QasCheckbox.vue'
 import QasCopy from './components/copy/QasCopy.vue'
 import QasDate from './components/date/QasDate.vue'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput.vue'
@@ -32,9 +32,11 @@ import QasGallery from './components/gallery/QasGallery.vue'
 import QasGalleryCard from './components/gallery-card/QasGalleryCard.vue'
 import QasGrabbable from './components/grabbable/QasGrabbable.vue'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
-import QasHeaderActions from './components/header-actions/QasHeaderActions.vue'
+import QasGridItem from './components/grid-item/QasGridItem.vue'
+import QasHeader from './components/header/QasHeader.vue'
 import QasInfiniteScroll from './components/infinite-scroll/QasInfiniteScroll.vue'
 import QasInput from './components/input/QasInput.vue'
+import QasInfo from './components/info/QasInfo.vue'
 import QasLabel from './components/label/QasLabel.vue'
 import QasLayout from './components/layout/QasLayout.vue'
 import QasListItems from './components/list-items/QasListItems.vue'
@@ -48,6 +50,7 @@ import QasPasswordInput from './components/password-input/QasPasswordInput.vue'
 import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker.vue'
 import QasProfile from './components/profile/QasProfile.vue'
 import QasResizer from './components/resizer/QasResizer.vue'
+import QasRadio from './components/radio/QasRadio.vue'
 import QasSearchBox from './components/search-box/QasSearchBox.vue'
 import QasSearchInput from './components/search-input/QasSearchInput.vue'
 import QasSelect from './components/select/QasSelect.vue'
@@ -64,6 +67,7 @@ import QasTableGenerator from './components/table-generator/QasTableGenerator.vu
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
 import QasTimeline from './components/timeline/QasTimeline.vue'
+import QasToggle from './components/toggle/QasToggle.vue'
 import QasToggleVisibility from './components/toggle-visibility/QasToggleVisibility.vue'
 import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
@@ -107,7 +111,7 @@ async function install (app) {
   app.component('QasBtnDropdown', QasBtnDropdown)
   app.component('QasCard', QasCard)
   app.component('QasCardImage', QasCardImage)
-  app.component('QasCheckboxGroup', QasCheckboxGroup)
+  app.component('QasCheckbox', QasCheckbox)
   app.component('QasCopy', QasCopy)
   app.component('QasDate', QasDate)
   app.component('QasDateTimeInput', QasDateTimeInput)
@@ -126,9 +130,11 @@ async function install (app) {
   app.component('QasGalleryCard', QasGalleryCard)
   app.component('QasGrabbable', QasGrabbable)
   app.component('QasGridGenerator', QasGridGenerator)
-  app.component('QasHeaderActions', QasHeaderActions)
+  app.component('QasGridItem', QasGridItem)
+  app.component('QasHeader', QasHeader)
   app.component('QasInfiniteScroll', QasInfiniteScroll)
   app.component('QasInput', QasInput)
+  app.component('QasInfo', QasInfo)
   app.component('QasLabel', QasLabel)
   app.component('QasLayout', QasLayout)
   app.component('QasListItems', QasListItems)
@@ -142,6 +148,7 @@ async function install (app) {
   app.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)
   app.component('QasProfile', QasProfile)
   app.component('QasResizer', QasResizer)
+  app.component('QasRadio', QasRadio)
   app.component('QasSearchBox', QasSearchBox)
   app.component('QasSearchInput', QasSearchInput)
   app.component('QasSelect', QasSelect)
@@ -158,6 +165,7 @@ async function install (app) {
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
   app.component('QasTimeline', QasTimeline)
+  app.component('QasToggle', QasToggle)
   app.component('QasToggleVisibility', QasToggleVisibility)
   app.component('QasTransfer', QasTransfer)
   app.component('QasTreeGenerator', QasTreeGenerator)
@@ -203,7 +211,7 @@ export {
   QasBtn,
   QasBtnDropdown,
   QasCard,
-  QasCheckboxGroup,
+  QasCheckbox,
   QasCopy,
   QasDate,
   QasDateTimeInput,
@@ -222,9 +230,11 @@ export {
   QasGalleryCard,
   QasGrabbable,
   QasGridGenerator,
-  QasHeaderActions,
+  QasGridItem,
+  QasHeader,
   QasInfiniteScroll,
   QasInput,
+  QasInfo,
   QasLabel,
   QasLayout,
   QasListItems,
@@ -238,6 +248,7 @@ export {
   QasPasswordStrengthChecker,
   QasProfile,
   QasResizer,
+  QasRadio,
   QasSearchBox,
   QasSearchInput,
   QasSelect,
@@ -254,6 +265,7 @@ export {
   QasTabsGenerator,
   QasTextTruncate,
   QasTimeline,
+  QasToggle,
   QasToggleVisibility,
   QasTransfer,
   QasTreeGenerator,

package/src/components/header-actions/QasHeaderActions.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="justify-between no-wrap q-col-gutter-x-md row text-body1 text-grey-8" :class="containerClass">
-    <div :class="leftClass">
-      <slot name="left">
-        {{ props.text }}
-      </slot>
-    </div>
-
-    <div v-if="hasRightSide" class="justify-end row">
-      <slot name="right">
-        <qas-actions-menu v-if="hasDefaultActionsMenu" v-bind="props.actionsMenuProps" />
-
-        <qas-btn v-if="hasDefaultButton" :use-label-on-small-screen="false" v-bind="props.buttonProps" />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { FlexAlign } from '../../enums/Align'
-import { Spacing } from '../../enums/Spacing'
-import { gutterValidator } from '../../helpers/private/gutter-validator'
-
-import { computed, useSlots } from 'vue'
-
-defineOptions({ name: 'QasHeaderActions' })
-
-const props = defineProps({
-  actionsMenuProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  alignColumns: {
-    default: FlexAlign.Center,
-    type: String,
-    validator: value => Object.values(FlexAlign).includes(value)
-  },
-
-  buttonProps: {
-    default: () => ({}),
-    type: Object
-  },
-
-  text: {
-    type: String,
-    default: ''
-  },
-
-  spacing: {
-    default: Spacing.Xl,
-    type: String,
-    validator: gutterValidator
-  }
-})
-
-const slots = useSlots()
-
-// computed
-const containerClass = computed(() => `items-${props.alignColumns} q-mb-${props.spacing}`)
-
-const leftClass = computed(() => {
-  return {
-    'col-12': !hasRightSide.value
-  }
-})
-
-const hasDefaultButton = computed(() => !!Object.keys(props.buttonProps).length)
-const hasDefaultActionsMenu = computed(() => !!Object.keys(props.actionsMenuProps).length)
-
-const hasRightSide = computed(() => {
-  const hasRightSlot = !!slots.right
-
-  return hasRightSlot || hasDefaultActionsMenu.value || hasDefaultButton.value
-})
-</script>

package/src/components/header-actions/QasHeaderActions.yml

@@ -1,38 +0,0 @@
-type: component
-
-meta:
-  desc: Componente para cabeçalho usado com alguma descrição e ação.
-
-props:
-  actions-menu-props:
-    desc: Propriedades do QasActionsMenu.
-    default: {}
-    type: Object
-
-  align-columns:
-    desc: Alinhamento vertical das colunas.
-    default: center
-    type: String
-    examples: [start, center, end, between, around]
-
-  button-props:
-    desc: Propriedades do QasBtn.
-    default: {}
-    type: Object
-
-  text:
-    desc: Descrição da seção a esquerda.
-    type: String
-
-  spacing:
-    desc: Espaçamento entre o componente e o conteúdo abaixo.
-    default: xl
-    type: String
-    examples: [none, xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl']
-
-slots:
-  left:
-    desc: slot para acessar seção da esquerda (descrição).
-
-  right:
-    desc: slot para acessar seção da direita (ação).