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

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

@@ -1,206 +1,206 @@
-<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>
-
-    <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, getPlaceholder } from '../../helpers'
-
-const defaultModes = {
-  decimal: 'commaDecimalCharDotSeparator',
-  integer: ['commaDecimalCharDotSeparator', 'integer'],
-  money: 'Brazilian',
-  percent: 'percentageEU2dec'
-}
-
-export default {
-  name: 'QasNumericInput',
-
-  props: {
-    autonumericOptions: {
-      default: () => ({}),
-      type: Object
-    },
-
-    places: {
-      default: 2,
-      type: Number
-    },
-
-    label: {
-      type: String,
-      default: ''
-    },
-
-    mode: {
-      default: 'integer',
-      type: String,
-      validator: value => ['integer', 'decimal', 'percent', 'money'].includes(value)
-    },
-
-    modelValue: {
-      default: '',
-      type: [String, Number],
-      validator: value => {
-        return (
-          typeof value === 'number' ||
-          typeof value === 'string' ||
-          value === '' ||
-          value === null
-        )
-      }
-    },
-
-    preset: {
-      default: false,
-      type: [Boolean, String]
-    },
-
-    required: {
-      type: Boolean
-    },
-
-    useNegative: {
-      type: Boolean
-    },
-
-    usePositive: {
-      default: true,
-      type: Boolean
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    },
-
-    iconRight: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: [
-    'update:modelValue',
-    'update-model'
-  ],
-
-  data () {
-    return {
-      autoNumeric: null
-    }
-  },
-
-  computed: {
-    defaultMode () {
-      return defaultModes[this.mode]
-    },
-
-    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)
-    }
-  },
-
-  watch: {
-    modelValue (value) {
-      if (this.autoNumeric) {
-        this.autoNumeric.set(value)
-      }
-    }
-  },
-
-  async created () {
-    const autoNumericPredefinedOptions = AutoNumeric.getPredefinedOptions()
-
-    let option = this.preset || this.defaultMode
-
-    if (!Array.isArray(option)) {
-      option = [option]
-    }
-
-    const options = {}
-
-    for (const value of option) {
-      Object.assign(options, autoNumericPredefinedOptions[value])
-    }
-
-    if (!this.useNegative) {
-      options.minimumValue = 0
-    }
-
-    if (!this.usePositive) {
-      options.maximumValue = 0
-    }
-
-    if (this.mode !== 'integer') {
-      options.decimalPlaces = this.places
-    }
-
-    if (this.mode === 'money') {
-      // TODO
-      /*
-      * adicionado manualmente por conta do espaçamento, neste formato não esta preparado para
-      * outras linguas, teria que adaptar no futuro, o que não é um problema no momento
-      */
-      options.currencySymbol = 'R$ '
-    }
-
-    Object.assign(options, this.autonumericOptions)
-
-    this.$nextTick(() => {
-      this.autoNumeric = new AutoNumeric(this.$refs.input, options)
-      this.autoNumeric.set(this.modelValue)
-    })
-  },
-
-  beforeUnmount () {
-    this.autoNumeric.remove()
-  },
-
-  methods: {
-    setSelect () {
-      this.$refs?.input?.select()
-    },
-
-    emitValue () {
-      this.$emit('update:modelValue', this.autoNumeric.getNumber())
-    },
-
-    emitUpdateModel (value) {
-      this.$emit('update-model', {
-        value,
-        raw: this.autoNumeric.getNumber()
-      })
-    }
-  }
-}
-</script>
+<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>
+
+    <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, getPlaceholder } from '../../helpers'
+
+const defaultModes = {
+  decimal: 'commaDecimalCharDotSeparator',
+  integer: ['commaDecimalCharDotSeparator', 'integer'],
+  money: 'Brazilian',
+  percent: 'percentageEU2dec'
+}
+
+export default {
+  name: 'QasNumericInput',
+
+  props: {
+    autonumericOptions: {
+      default: () => ({}),
+      type: Object
+    },
+
+    places: {
+      default: 2,
+      type: Number
+    },
+
+    label: {
+      type: String,
+      default: ''
+    },
+
+    mode: {
+      default: 'integer',
+      type: String,
+      validator: value => ['integer', 'decimal', 'percent', 'money'].includes(value)
+    },
+
+    modelValue: {
+      default: '',
+      type: [String, Number],
+      validator: value => {
+        return (
+          typeof value === 'number' ||
+          typeof value === 'string' ||
+          value === '' ||
+          value === null
+        )
+      }
+    },
+
+    preset: {
+      default: false,
+      type: [Boolean, String]
+    },
+
+    required: {
+      type: Boolean
+    },
+
+    useNegative: {
+      type: Boolean
+    },
+
+    usePositive: {
+      default: true,
+      type: Boolean
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    },
+
+    iconRight: {
+      type: String,
+      default: ''
+    }
+  },
+
+  emits: [
+    'update:modelValue',
+    'update-model'
+  ],
+
+  data () {
+    return {
+      autoNumeric: null
+    }
+  },
+
+  computed: {
+    defaultMode () {
+      return defaultModes[this.mode]
+    },
+
+    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)
+    }
+  },
+
+  watch: {
+    modelValue (value) {
+      if (this.autoNumeric) {
+        this.autoNumeric.set(value)
+      }
+    }
+  },
+
+  async created () {
+    const autoNumericPredefinedOptions = AutoNumeric.getPredefinedOptions()
+
+    let option = this.preset || this.defaultMode
+
+    if (!Array.isArray(option)) {
+      option = [option]
+    }
+
+    const options = {}
+
+    for (const value of option) {
+      Object.assign(options, autoNumericPredefinedOptions[value])
+    }
+
+    if (!this.useNegative) {
+      options.minimumValue = 0
+    }
+
+    if (!this.usePositive) {
+      options.maximumValue = 0
+    }
+
+    if (this.mode !== 'integer') {
+      options.decimalPlaces = this.places
+    }
+
+    if (this.mode === 'money') {
+      // TODO
+      /*
+      * adicionado manualmente por conta do espaçamento, neste formato não esta preparado para
+      * outras linguas, teria que adaptar no futuro, o que não é um problema no momento
+      */
+      options.currencySymbol = 'R$ '
+    }
+
+    Object.assign(options, this.autonumericOptions)
+
+    this.$nextTick(() => {
+      this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+      this.autoNumeric.set(this.modelValue)
+    })
+  },
+
+  beforeUnmount () {
+    this.autoNumeric.remove()
+  },
+
+  methods: {
+    setSelect () {
+      this.$refs?.input?.select()
+    },
+
+    emitValue () {
+      this.$emit('update:modelValue', this.autoNumeric.getNumber())
+    },
+
+    emitUpdateModel (value) {
+      this.$emit('update-model', {
+        value,
+        raw: this.autoNumeric.getNumber()
+      })
+    }
+  }
+}
+</script>

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

@@ -1,85 +1,85 @@
-type: component
-
-mixins:
-  - quasar/dist/api/QField.json
-
-meta:
-  desc: Componente de input para decimal, inteiro, dinheiro e porcentagem.
-
-props:
-  autonumeric-props:
-    desc: Opções do autonumeric (http://autonumeric.org/guide).
-    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
-    type: Number
-
-  label:
-    desc: Label do componente.
-    type: String
-    default: ''
-
-  mode:
-    desc: Modo do componente.
-    default: integer
-    type: String
-    examples: [integer, decimal, percent, money]
-
-  model-value:
-    desc: Model do componente, usado para v-model, sempre que alterado transforma o valor para "Number".
-    default: ''
-    type: [String, Number]
-    model: true
-
-  preset:
-    desc: Propriedade preset serve para usar configuração de predefinição/nacionalidade da moeda pré setada pelo autonumeric (Brasil é o padrão).
-    type: [Boolean, String]
-
-  required:
-    desc: Controla label do campo, se for "true" adiciona sufixo "*".
-    default: false
-    type: Boolean
-
-  use-negative:
-    desc: Controla se pode ou não números negativos.
-    default: false
-    type: Boolean
-
-  use-positive:
-    desc: Controla se pode ou não números positivos.
-    default: true
-    type: Boolean
-
-events:
-  '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado (após o blur do input), também utilizado para v-model.
-    params:
-      value:
-        desc: Novo valor do v-model.
-
-  '@update-model -> function (payload)':
-    desc: Dispara toda vez que o model é atualizado, diferente do "update:model-value", é disparado sempre que acontece um novo input. Também utilizado para v-model.
-    params:
-      payload:
-        type: Object
-        desc: Objeto contendo informações atualizadas.
-        params:
-          value:
-            type: String,
-            desc: Valor formato.
-          raw:
-            type: Number
-            desc: Valor sem formatação.
+type: component
+
+mixins:
+  - quasar/dist/api/QField.json
+
+meta:
+  desc: Componente de input para decimal, inteiro, dinheiro e porcentagem.
+
+props:
+  autonumeric-props:
+    desc: Opções do autonumeric (http://autonumeric.org/guide).
+    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
+    type: Number
+
+  label:
+    desc: Label do componente.
+    type: String
+    default: ''
+
+  mode:
+    desc: Modo do componente.
+    default: integer
+    type: String
+    examples: [integer, decimal, percent, money]
+
+  model-value:
+    desc: Model do componente, usado para v-model, sempre que alterado transforma o valor para "Number".
+    default: ''
+    type: [String, Number]
+    model: true
+
+  preset:
+    desc: Propriedade preset serve para usar configuração de predefinição/nacionalidade da moeda pré setada pelo autonumeric (Brasil é o padrão).
+    type: [Boolean, String]
+
+  required:
+    desc: Controla label do campo, se for "true" adiciona sufixo "*".
+    default: false
+    type: Boolean
+
+  use-negative:
+    desc: Controla se pode ou não números negativos.
+    default: false
+    type: Boolean
+
+  use-positive:
+    desc: Controla se pode ou não números positivos.
+    default: true
+    type: Boolean
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado (após o blur do input), também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model.
+
+  '@update-model -> function (payload)':
+    desc: Dispara toda vez que o model é atualizado, diferente do "update:model-value", é disparado sempre que acontece um novo input. Também utilizado para v-model.
+    params:
+      payload:
+        type: Object
+        desc: Objeto contendo informações atualizadas.
+        params:
+          value:
+            type: String,
+            desc: Valor formato.
+          raw:
+            type: Number
+            desc: Valor sem formatação.

package/src/components/option-group/QasOptionGroup.vue

@@ -1,54 +1,54 @@
-<template>
-  <q-option-group v-model="model" :options="options" v-bind="attributes">
-    <template v-for="(_, name) in $slots" #[name]="context">
-      <slot :name="name" v-bind="context || {}" />
-    </template>
-  </q-option-group>
-</template>
-
-<script>
-export default {
-  name: 'QasOptionGroup',
-
-  inheritAttrs: false,
-
-  props: {
-    options: {
-      default: () => [],
-      type: Array
-    },
-
-    type: {
-      type: String,
-      default: 'radio',
-      validator: value => ['radio', 'checkbox', 'toggle'].includes(value)
-    },
-
-    modelValue: {
-      default: '',
-      type: [String, Number, Array, Boolean]
-    }
-  },
-
-  emits: ['update:modelValue'],
-
-  computed: {
-    attributes () {
-      return {
-        inline: !this.$qas.screen.isSmall,
-        ...this.$attrs
-      }
-    },
-
-    model: {
-      get () {
-        return this.modelValue
-      },
-
-      set (value) {
-        return this.$emit('update:modelValue', value)
-      }
-    }
-  }
-}
-</script>
+<template>
+  <q-option-group v-model="model" :options="options" v-bind="attributes">
+    <template v-for="(_, name) in $slots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-option-group>
+</template>
+
+<script>
+export default {
+  name: 'QasOptionGroup',
+
+  inheritAttrs: false,
+
+  props: {
+    options: {
+      default: () => [],
+      type: Array
+    },
+
+    type: {
+      type: String,
+      default: 'radio',
+      validator: value => ['radio', 'checkbox', 'toggle'].includes(value)
+    },
+
+    modelValue: {
+      default: '',
+      type: [String, Number, Array, Boolean]
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  computed: {
+    attributes () {
+      return {
+        inline: !this.$qas.screen.isSmall,
+        ...this.$attrs
+      }
+    },
+
+    model: {
+      get () {
+        return this.modelValue
+      },
+
+      set (value) {
+        return this.$emit('update:modelValue', value)
+      }
+    }
+  }
+}
+</script>