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

package/src/components/input/QasInput.vue

@@ -1,252 +1,252 @@
-<template>
-  <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>
-  </q-input>
-</template>
-
-<script>
-import { getRequiredLabel, getPlaceholder } from '../../helpers'
-
-const Masks = {
-  CompanyDocument: 'company-document',
-  Document: 'document',
-  PersonalDocument: 'personal-document',
-  Phone: 'phone',
-  PostalCode: 'postal-code'
-}
-
-export default {
-  name: 'QasInput',
-
-  inheritAttrs: false,
-
-  props: {
-    dense: {
-      default: true,
-      type: Boolean
-    },
-
-    error: {
-      type: Boolean
-    },
-
-    errorMessage: {
-      type: String,
-      default: ''
-    },
-
-    mask: {
-      type: String,
-      default: ''
-    },
-
-    modelValue: {
-      default: '',
-      type: [String, Number]
-    },
-
-    outlined: {
-      type: Boolean
-    },
-
-    required: {
-      type: Boolean
-    },
-
-    unmaskedValue: {
-      default: true,
-      type: Boolean
-    },
-
-    useRemoveErrorOnType: {
-      type: Boolean
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    },
-
-    iconRight: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  data () {
-    return {
-      errorData: false,
-      currentMask: '',
-      inputReference: null
-    }
-  },
-
-  computed: {
-    hasError () {
-      return this.inputReference.hasError
-    },
-
-    masks () {
-      return {
-        [Masks.CompanyDocument]: () => '##.###.###/####-##',
-        [Masks.Document]: () => this.toggleMask('###.###.###-###', '##.###.###/####-##'),
-        [Masks.PersonalDocument]: () => '###.###.###-##',
-        [Masks.Phone]: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
-        [Masks.PostalCode]: () => '#####-###'
-      }
-    },
-
-    defaultInputmode () {
-      const { inputmode, type } = this.$attrs
-
-      const defaults = {
-        [Masks.CompanyDocument]: 'numeric',
-        [Masks.Document]: 'numeric',
-        [Masks.PersonalDocument]: 'numeric',
-        [Masks.Phone]: 'tel',
-        [Masks.PostalCode]: 'numeric',
-
-        // types
-        email: 'email'
-      }
-
-      return inputmode || defaults[this.mask || type]
-    },
-
-    model: {
-      get () {
-        return this.modelValue
-      },
-
-      set (value) {
-        this.handleErrors()
-
-        return this.$emit('update:modelValue', value)
-      }
-    },
-
-    formattedLabel () {
-      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
-    }
-  },
-
-  watch: {
-    currentMask (value) {
-      if (!value) return
-
-      const input = this.getInput()
-
-      requestAnimationFrame(() => {
-        input.selectionStart = input.value ? input.value.length : ''
-      })
-    },
-
-    modelValue: {
-      handler () {
-        this.handleMask()
-      },
-      immediate: true
-    },
-
-    error: {
-      handler (value) {
-        this.errorData = value
-      },
-
-      immediate: true
-    }
-  },
-
-  mounted () {
-    this.inputReference = this.$refs.input
-  },
-
-  methods: {
-    focus () {
-      return this.inputReference.focus()
-    },
-
-    resetValidation () {
-      return this.inputReference.resetValidation()
-    },
-
-    toggleMask (first, second) {
-      const length = first.split('#').length - 2
-      return this.modelValue?.length > length ? second : first
-    },
-
-    validate (value) {
-      return this.inputReference.validate(value)
-    },
-
-    onPaste (event) {
-      if (!this.currentMask) return
-
-      const value = event.clipboardData.getData('text')
-      const input = this.getInput()
-
-      requestAnimationFrame(() => {
-        this.$emit('update:modelValue', value)
-        input.selectionStart = input.value ? input.value.length : ''
-      })
-    },
-
-    getInput () {
-      return this.inputReference?.$el?.querySelector('input')
-    },
-
-    handleErrors () {
-      if (this.useRemoveErrorOnType && this.error) {
-        this.errorData = false
-      }
-    },
-
-    handleMask () {
-      if (!this.modelValue?.length) return
-
-      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, this.mask)
-
-      this.$nextTick(() => {
-        this.currentMask = hasDefaultMask ? this.masks[this.mask]() : this.mask
-      })
-    }
-  }
-}
-</script>
+<template>
+  <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>
+  </q-input>
+</template>
+
+<script>
+import { getRequiredLabel, getPlaceholder } from '../../helpers'
+
+const Masks = {
+  CompanyDocument: 'company-document',
+  Document: 'document',
+  PersonalDocument: 'personal-document',
+  Phone: 'phone',
+  PostalCode: 'postal-code'
+}
+
+export default {
+  name: 'QasInput',
+
+  inheritAttrs: false,
+
+  props: {
+    dense: {
+      default: true,
+      type: Boolean
+    },
+
+    error: {
+      type: Boolean
+    },
+
+    errorMessage: {
+      type: String,
+      default: ''
+    },
+
+    mask: {
+      type: String,
+      default: ''
+    },
+
+    modelValue: {
+      default: '',
+      type: [String, Number]
+    },
+
+    outlined: {
+      type: Boolean
+    },
+
+    required: {
+      type: Boolean
+    },
+
+    unmaskedValue: {
+      default: true,
+      type: Boolean
+    },
+
+    useRemoveErrorOnType: {
+      type: Boolean
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    },
+
+    iconRight: {
+      type: String,
+      default: ''
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  data () {
+    return {
+      errorData: false,
+      currentMask: '',
+      inputReference: null
+    }
+  },
+
+  computed: {
+    hasError () {
+      return this.inputReference.hasError
+    },
+
+    masks () {
+      return {
+        [Masks.CompanyDocument]: () => '##.###.###/####-##',
+        [Masks.Document]: () => this.toggleMask('###.###.###-###', '##.###.###/####-##'),
+        [Masks.PersonalDocument]: () => '###.###.###-##',
+        [Masks.Phone]: () => this.toggleMask('(##) ####-#####', '(##) #####-####'),
+        [Masks.PostalCode]: () => '#####-###'
+      }
+    },
+
+    defaultInputmode () {
+      const { inputmode, type } = this.$attrs
+
+      const defaults = {
+        [Masks.CompanyDocument]: 'numeric',
+        [Masks.Document]: 'numeric',
+        [Masks.PersonalDocument]: 'numeric',
+        [Masks.Phone]: 'tel',
+        [Masks.PostalCode]: 'numeric',
+
+        // types
+        email: 'email'
+      }
+
+      return inputmode || defaults[this.mask || type]
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        this.handleErrors()
+
+        return this.$emit('update:modelValue', value)
+      }
+    },
+
+    formattedLabel () {
+      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
+    }
+  },
+
+  watch: {
+    currentMask (value) {
+      if (!value) return
+
+      const input = this.getInput()
+
+      requestAnimationFrame(() => {
+        input.selectionStart = input.value ? input.value.length : ''
+      })
+    },
+
+    modelValue: {
+      handler () {
+        this.handleMask()
+      },
+      immediate: true
+    },
+
+    error: {
+      handler (value) {
+        this.errorData = value
+      },
+
+      immediate: true
+    }
+  },
+
+  mounted () {
+    this.inputReference = this.$refs.input
+  },
+
+  methods: {
+    focus () {
+      return this.inputReference.focus()
+    },
+
+    resetValidation () {
+      return this.inputReference.resetValidation()
+    },
+
+    toggleMask (first, second) {
+      const length = first.split('#').length - 2
+      return this.modelValue?.length > length ? second : first
+    },
+
+    validate (value) {
+      return this.inputReference.validate(value)
+    },
+
+    onPaste (event) {
+      if (!this.currentMask) return
+
+      const value = event.clipboardData.getData('text')
+      const input = this.getInput()
+
+      requestAnimationFrame(() => {
+        this.$emit('update:modelValue', value)
+        input.selectionStart = input.value ? input.value.length : ''
+      })
+    },
+
+    getInput () {
+      return this.inputReference?.$el?.querySelector('input')
+    },
+
+    handleErrors () {
+      if (this.useRemoveErrorOnType && this.error) {
+        this.errorData = false
+      }
+    },
+
+    handleMask () {
+      if (!this.modelValue?.length) return
+
+      const hasDefaultMask = Object.prototype.hasOwnProperty.call(this.masks, this.mask)
+
+      this.$nextTick(() => {
+        this.currentMask = hasDefaultMask ? this.masks[this.mask]() : this.mask
+      })
+    }
+  }
+}
+</script>

package/src/components/input/QasInput.yml

@@ -1,65 +1,65 @@
-type: component
-
-mixins:
-  - quasar/dist/api/QInput.json
-
-meta:
-  desc: Componente para input que implementa o "QInput" repassando propriedades, slots e eventos.
-
-props:
-  error-message:
-    desc: Controla mensagem de erro (apenas quando "error" for "true").
-    type: String
-
-  error:
-    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
-    default: ''
-    examples: [document, personal-document, company-document, phone, postal-code, '##/##/####']
-
-  model-value:
-    desc: Model do componente.
-    type: [String, Input]
-    examples: [v-model="value"]
-    model: true
-
-  outlined:
-    desc: Controla borda do input.
-    default: true
-    type: Boolean
-
-  required:
-    desc: Controla label do campo, se for "true" adiciona sufixo "*".
-    default: false
-    type: Boolean
-
-  use-remove-error-on-type:
-    desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
-    type: Boolean
-
-  unmasked-value:
-    desc: Remove a mascara do v-model.
-    default: true
-    type: Boolean
-
-events:
-  '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
-    params:
-      value:
-        desc: Novo valor do v-model
-        type: String
+type: component
+
+mixins:
+  - quasar/dist/api/QInput.json
+
+meta:
+  desc: Componente para input que implementa o "QInput" repassando propriedades, slots e eventos.
+
+props:
+  error-message:
+    desc: Controla mensagem de erro (apenas quando "error" for "true").
+    type: String
+
+  error:
+    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
+    default: ''
+    examples: [document, personal-document, company-document, phone, postal-code, '##/##/####']
+
+  model-value:
+    desc: Model do componente.
+    type: [String, Input]
+    examples: [v-model="value"]
+    model: true
+
+  outlined:
+    desc: Controla borda do input.
+    default: true
+    type: Boolean
+
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
+  use-remove-error-on-type:
+    desc: Limpa os erros do campo caso os mesmos existam toda vez que o model atualiza.
+    type: Boolean
+
+  unmasked-value:
+    desc: Remove a mascara do v-model.
+    default: true
+    type: Boolean
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: String