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

package/src/components/info/QasInfo.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="flex items-center no-wrap qas-info text-body1 text-grey-8">
+    <qas-avatar v-bind="defaultAvatarProps" />
+
+    <component
+      :is="textComponent"
+      v-if="useRegex"
+      class="q-ml-sm"
+    />
+
+    <span
+      v-else
+      class="q-ml-sm"
+    >
+      {{ props.text }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { h, computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { QasBtn } from 'asteroid'
+
+defineOptions({ name: 'QasInfo' })
+
+const props = defineProps({
+  avatarProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  buttonProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  routerLinkProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  text: {
+    type: String,
+    required: true
+  },
+
+  useRegex: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const defaultAvatarProps = computed(() => {
+  return {
+    color: 'red-14',
+    ...props.avatarProps,
+    icon: 'sym_r_priority_high',
+    size: 'sm'
+  }
+})
+
+const textComponent = computed(() => {
+  /**
+   * regex para encontrar caracteres que estiverem dentro de [].
+   */
+  const regex = /\[.*?\]/g
+
+  const [content] = props.text.match(regex)
+
+  /**
+   * dado o texto: Para saber mais, [Clique aqui].
+   *
+   * retorna: 'Clique aqui'
+   */
+  const routerLabel = content.replaceAll(/[[\]]/g, '')
+
+  /**
+   * dado o texto: Para saber mais, [Clique aqui].
+   *
+   * retorna: 'Para saber mais, $.'
+   */
+  const replacedText = props.text.replaceAll(regex, '$')
+
+  /**
+   * É necessário usar o regex ao invés de '$' para ele não remover o carácter
+   * ao fazer o split
+   *
+   * dado o texto: 'Para saber mais, [Clique aqui].'
+   *
+   * retorna: ['Para saber mais,', '$', '.']
+   *
+   */
+  const splitted = replacedText.split(/(\$)/)
+
+  const index = splitted.findIndex(item => item === '$')
+
+  const hasButtonProps = !!Object.keys(props.buttonProps).length
+
+  const getRouterLinkRender = () => {
+    return h(
+      RouterLink,
+      {
+        ...props.routerLinkProps,
+        class: 'text-primary text-subtitle1 qas-info__link'
+      },
+      {
+        default: () => routerLabel
+      }
+    )
+  }
+
+  const getQasBtnRender = () => {
+    return h(
+      QasBtn,
+      {
+        variant: 'tertiary',
+        label: routerLabel,
+        ...props.buttonProps
+      }
+    )
+  }
+
+  /**
+   * Cria um render do router link ou QasBtn
+   *
+   * @example
+   *
+   * ```html
+   * <router-link
+   *  class="text-primary text-subtitle1 qas-info__link"
+   *  :to="props.route"
+   * >
+   *  Clique aqui
+   * </router-link>
+   * ```
+   */
+  const renderComponent = hasButtonProps ? getQasBtnRender() : getRouterLinkRender()
+
+  splitted.splice(index, 1, renderComponent)
+
+  return h(
+    'span',
+    splitted
+  )
+})
+</script>
+
+<style lang="scss">
+.qas-info {
+  &__link {
+    text-decoration: none;
+  }
+}
+</style>

package/src/components/info/QasInfo.yml

@@ -0,0 +1,34 @@
+type: component
+
+meta:
+  desc: Componente para informações.
+
+props:
+  avatar-props:
+    desc: Props do componente QasAvatar.
+    default:
+      color: 'red-14'
+      icon: 'sym_r_priority_high'
+      size: 'sm'
+    type: Object
+
+  buttonProps:
+    desc: Props do componente QasBtn.
+    default:
+      variant: primary
+    type: Object
+
+  router-link-props:
+    desc: Propriedades do componente RouterLink.
+    default: {}
+    type: Object
+
+  text:
+    desc: Texto a ser exibido.
+    type: String
+    default: ''
+
+  use-regex:
+    desc: Faz a busca pelos "[]" dentro da propriedade "text" para substituir pelo QasBtn ou RouterLink.
+    default: true
+    type: Boolean

package/src/components/input/QasInput.vue

@@ -1,5 +1,13 @@
 <template>
-  <q-input ref="input" v-model="model" bottom-slots :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" :outlined="outlined" :unmasked-value="unmaskedValue" @paste="onPaste">
+  <q-input ref="input" v-model="model" :autogrow="isTextarea" bottom-slots :class="classes" :counter="hasCounter" :dense="dense" :error="errorData" v-bind="$attrs" :error-message="errorMessage" :inputmode="defaultInputmode" :label="formattedLabel" :mask="currentMask" no-error-icon :outlined="outlined" :placeholder="placeholder" :unmasked-value="unmaskedValue" @paste="onPaste">
+    <template v-if="icon" #append>
+      <q-icon :name="icon" size="xs" />
+    </template>
+
+    <template v-if="iconRight" #prepend>
+      <q-icon :name="iconRight" size="xs" />
+    </template>
+
     <template v-for="(_, name) in $slots" #[name]="context">
       <slot :name="name" v-bind="context || {}" />
     </template>
@@ -7,7 +15,7 @@
 </template>
 
 <script>
-import { getRequiredLabel } from '../../helpers'
+import { getRequiredLabel, getPlaceholder } from '../../helpers'
 
 const Masks = {
   CompanyDocument: 'company-document',
@@ -23,6 +31,11 @@ export default {
   inheritAttrs: false,
 
   props: {
+    dense: {
+      default: true,
+      type: Boolean
+    },
+
     error: {
       type: Boolean
     },
@@ -43,7 +56,6 @@ export default {
     },
 
     outlined: {
-      default: true,
       type: Boolean
     },
 
@@ -58,6 +70,16 @@ export default {
 
     useRemoveErrorOnType: {
       type: Boolean
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    },
+
+    iconRight: {
+      type: String,
+      default: ''
     }
   },
 
@@ -119,6 +141,29 @@ export default {
       const { label } = this.$attrs
 
       return getRequiredLabel({ label, required: this.required })
+    },
+
+    // redesign
+    classes () {
+      return {
+        'qas-input--has-icon': this.hasPrepend
+      }
+    },
+
+    isTextarea () {
+      return this.$attrs.type === 'textarea'
+    },
+
+    placeholder () {
+      return this.$attrs.placeholder || getPlaceholder(this.mask || this.$attrs.type)
+    },
+
+    hasCounter () {
+      return this.$attrs.counter ?? (this.$attrs.maxlength && this.isTextarea)
+    },
+
+    hasPrepend () {
+      return !!this.$slots.prepend || this.iconRight
     }
   },
 

package/src/components/input/QasInput.yml

@@ -15,6 +15,16 @@ props:
     desc: Controla cor da borda do input.
     type: Boolean
 
+  icon:
+    desc: Ícone a esquerda.
+    type: String
+    default: ''
+
+  icon-right:
+    desc: Ícone a direita.
+    type: String
+    default: ''
+
   mask:
     desc: Máscara do input, é possível passar um slug de mascara ou um pattern personalizado.
     type: String

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

@@ -1,61 +1,64 @@
 <template>
   <div :id="fieldName" class="qas-nested-fields" :data-cy="`nested-fields-${fieldName}`">
-    <div v-if="useSingleLabel" class="text-left">
-      <qas-label :label="fieldLabel" typography="h5" />
-    </div>
-
-    <div ref="inputContent">
-      <component :is="componentTag" v-bind="componentProps">
-        <template v-for="(row, index) in nested" :key="`row-${index}`">
-          <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item" data-cy="nested-fields-item">
-            <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
-              <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
-              <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" />
-            </header>
-
-            <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="before-fields" :update-value="updateValuesFromInput" />
-
-            <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
-              <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" name="fields" :update-value="updateValuesFromInput">
-                <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
-                  <template v-for="(slot, key) in $slots" #[key]="scope">
-                    <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
-                  </template>
-                </qas-form-generator>
-              </slot>
-
-              <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
-                <qas-actions-menu v-bind="getActionsMenuProps(index, row)" />
+    <component :is="containerComponent">
+      <div v-if="useSingleLabel" class="text-left">
+        <qas-label :label="fieldLabel" typography="h5" />
+      </div>
+
+      <div ref="inputContent">
+        <component :is="componentTag" v-bind="componentProps">
+          <template v-for="(row, index) in nested" :key="`row-${index}`">
+            <div v-if="!row[destroyKey]" :id="`row-${index}`" class="full-width qas-nested-fields__field-item" data-cy="nested-fields-item">
+              <header v-if="hasHeader" class="flex items-center q-pb-md" :class="headerClasses">
+                <qas-label v-if="!useSingleLabel" :label="getRowLabel(index)" margin="none" typography="h5" />
+
+                <qas-actions-menu v-if="hasBlockActions(row)" v-bind="getActionsMenuProps(index, row)" :use-label="false" />
+              </header>
+
+              <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="before-fields" :update-value="updateValuesFromInput" />
+
+              <div ref="formGenerator" class="col-12 justify-between q-col-gutter-x-md row">
+                <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" name="fields" :update-value="updateValuesFromInput">
+                  <qas-form-generator v-model="nested[index]" class="col" :columns="formColumns" :disable="isDisabledRow(row)" :errors="transformedErrors[index]" :fields="getFields(index, row)" :fields-props="getFieldsProps(index, row)" :gutter="formGutter" @update:model-value="updateValuesFromInput($event, index)">
+                    <template v-for="(slot, key) in $slots" #[key]="scope">
+                      <slot v-bind="scope" :disabled="isDisabledRow(row)" :errors="transformedErrors" :index="index" :name="key" />
+                    </template>
+                  </qas-form-generator>
+                </slot>
+
+                <div v-if="hasInlineActions(row)" class="flex items-center qas-nested-fields__actions">
+                  <qas-actions-menu v-bind="getActionsMenuProps(index, row)" :use-label="false" />
+                </div>
               </div>
+
+              <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="after-fields" :update-value="updateValuesFromInput" />
             </div>
+          </template>
+        </component>
 
-            <slot :errors="transformedErrors" :fields="getFields(index, row)" :index="index" :model="nested[index]" name="after-fields" :update-value="updateValuesFromInput" />
-          </div>
-        </template>
-      </component>
+        <div v-if="useAdd">
+          <slot :add="add" name="add-input">
+            <div v-if="showAddFirstInputButton" class="text-left">
+              <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" :label="addFirstInputLabel" variant="tertiary" @click="add()" />
+            </div>
 
-      <div v-if="useAdd">
-        <slot :add="add" name="add-input">
-          <div v-if="showAddFirstInputButton" class="text-left">
-            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" :label="addFirstInputLabel" variant="tertiary" @click="add()" />
-          </div>
+            <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
+              <div class="col">
+                <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" @focus="add()" />
+              </div>
 
-          <div v-else-if="useInlineActions" class="cursor-pointer items-center q-col-gutter-x-md q-mt-md row" data-cy="nested-fields-add-btn" @click="add()">
-            <div class="col">
-              <qas-input class="disabled no-pointer-events" hide-bottom-space :label="addInputLabel" outlined @focus="add()" />
+              <div class="col-auto">
+                <qas-btn color="primary" icon="sym_r_add_circle_outline" variant="tertiary" />
+              </div>
             </div>
 
-            <div class="col-auto">
-              <qas-btn color="primary" icon="sym_r_add_circle_outline" variant="tertiary" />
+            <div v-else class="text-left">
+              <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
             </div>
-          </div>
-
-          <div v-else class="text-left">
-            <qas-btn class="q-px-sm" color="primary" data-cy="nested-fields-add-btn" icon="sym_r_add" :label="addInputLabel" variant="tertiary" @click="add()" />
-          </div>
-        </slot>
+          </slot>
+        </div>
       </div>
-    </div>
+    </component>
   </div>
 </template>
 
@@ -195,6 +198,10 @@ export default {
       default: true
     },
 
+    useBox: {
+      type: Boolean
+    },
+
     useDestroyAlways: {
       type: Boolean,
       default: undefined
@@ -252,6 +259,10 @@ export default {
       return this.field?.children
     },
 
+    containerComponent () {
+      return this.useBox ? 'qas-box' : 'div'
+    },
+
     componentTag () {
       return this.useAnimation ? 'transition-group' : 'div'
     },

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

@@ -113,6 +113,11 @@ props:
     default: true
     type: Boolean
 
+  use-box:
+    desc: Controla o QasBox.
+    default: false
+    type: Boolean
+
   use-destroy-always:
     desc: Controla o botão de remover em todas linhas, incluindo a primeira.
     type: Boolean

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

@@ -1,14 +1,22 @@
 <template>
-  <q-field :label="formattedLabel" :model-value="modelValue" outlined>
+  <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" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+      <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>
+
+    <template v-if="icon" #append>
+      <q-icon :name="icon" size="xs" />
+    </template>
+
+    <template v-if="iconRight" #prepend>
+      <q-icon :name="iconRight" size="xs" />
     </template>
   </q-field>
 </template>
 
 <script>
 import AutoNumeric from 'autonumeric'
-import { getRequiredLabel } from '../../helpers'
+import { getRequiredLabel, getPlaceholder } from '../../helpers'
 
 const defaultModes = {
   decimal: 'commaDecimalCharDotSeparator',
@@ -71,6 +79,16 @@ export default {
     usePositive: {
       default: true,
       type: Boolean
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    },
+
+    iconRight: {
+      type: String,
+      default: ''
     }
   },
 
@@ -92,6 +110,23 @@ export default {
 
     formattedLabel () {
       return getRequiredLabel({ label: this.label, required: this.required })
+    },
+
+    // redesign
+    classes () {
+      return {
+        'qas-numeric-input--has-icon': this.hasPrepend
+      }
+    },
+
+    hasPrepend () {
+      return !!this.$slots.prepend || this.iconRight
+    },
+
+    placeholder () {
+      const { placeholder } = this.$attrs
+
+      return placeholder || getPlaceholder(this.mode)
     }
   },
 

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

@@ -12,6 +12,16 @@ props:
     default: {}
     type: Object
 
+  icon:
+    desc: Ícone a esquerda.
+    type: String
+    default: ''
+
+  icon-right:
+    desc: Ícone a direita.
+    type: String
+    default: ''
+
   places:
     desc: Quantidade de casas decimais.
     default: 2

package/src/components/page-header/QasPageHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-toolbar class="justify-between q-mb-lg q-px-none qas-page-header">
+    <q-toolbar class="justify-between q-mb-md q-px-none qas-page-header">
       <div class="ellipsis">
         <q-toolbar-title v-if="props.title" class="text-h3">
           {{ props.title }}
@@ -18,14 +18,14 @@
 
     <div>
       <slot name="bottom">
-        <qas-header-actions v-if="hasHeaderActions" v-bind="props.headerActionsProps" />
+        <qas-header v-if="hasHeader" v-bind="props.headerProps" />
       </slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import QasHeaderActions from '../header-actions/QasHeaderActions.vue'
+import QasHeader from '../header/QasHeader.vue'
 
 import { castArray } from 'lodash-es'
 import { computed } from 'vue'
@@ -40,7 +40,7 @@ const props = defineProps({
     type: [Array, String]
   },
 
-  headerActionsProps: {
+  headerProps: {
     default: () => ({}),
     type: Object
   },
@@ -111,7 +111,7 @@ const normalizedBreadcrumbs = computed(() => {
   ]
 })
 
-const hasHeaderActions = computed(() => !!Object.keys(props.headerActionsProps).length)
+const hasHeader = computed(() => !!Object.keys(props.headerProps).length)
 
 const homeRoute = computed(() => router.hasRoute('Root') ? { name: 'Root' } : '/')
 </script>

package/src/components/page-header/QasPageHeader.yml

@@ -15,7 +15,7 @@ props:
     desc: Título do cabeçalho.
     type: String
 
-  header-actions-props:
+  header-props:
     desc: Propriedades do QasHeaderActions.
     default: {}
     type: Object
@@ -39,4 +39,4 @@ slots:
     desc: slot para acessar abaixo do titulo e breadcrumbs.
 
   default:
-    desc: slot para acessar lado direito do titulo e breadcrumbs.
+    desc: slot para acessar lado direito do titulo e breadcrumbs.

package/src/components/radio/QasRadio.vue

@@ -0,0 +1,43 @@
+<template>
+  <component :is="component.is" v-bind="component.props" />
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasRadio',
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
+/**
+ * - quando é um grupo de opções, o componente é 'QOptionGroup', caso contrário,
+ * é 'QRadio'.
+ * - a propriedade inline só é usada no caso do QOptionGroup.
+ * - todos os casos é usado o dense.
+ */
+const component = computed(() => {
+  const isOptionGroup = !!attrs.options?.length
+
+  const { inline = true, ...payloadProps } = attrs
+
+  return {
+    is: isOptionGroup ? 'q-option-group' : 'q-radio',
+    props: {
+      ...payloadProps,
+
+      ...(isOptionGroup && {
+        inline,
+        class: {
+          'q-gutter-x-md': inline,
+          'q-gutter-y-md': !inline
+        }
+      }),
+
+      dense: true
+    }
+  }
+})
+</script>

package/src/components/radio/QasRadio.yml

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