@bildvitta/quasar-ui-asteroid 3.14.0-beta.0 → 3.14.0-beta.2

package/src/components/date/QasDate.yml

@@ -45,11 +45,6 @@ props:
     default: true
     type: Boolean
 
-  use-unmask-events:
-    desc: A propriedade 'events' do Quasar só funciona com a formatação '/' mesmo que seja passada uma outra máscara. Esta propriedade transforma a formatação da propriedade 'events' de '-' em '/' (mas só funciona caso 'events' seja um Array).
-    default: true
-    type: Boolean
-
   use-unmask-options:
     desc: A propriedade 'options' do Quasar só funciona com a formatação '/' mesmo que seja passada uma outra máscara. Esta propriedade transforma a formatação da propriedade 'options' de '-' em '/' (mas só funciona caso 'options' seja um Array).
     default: true

package/src/components/date/enums/DateMaskOptions.js

@@ -0,0 +1,6 @@
+export const MaskOptions = {
+  Dash: 'YYYY-MM-DD',
+  Slash: 'YYYY/MM/DD',
+  SlashPtBR: 'DD/MM/YYYY',
+  SlashDateAndHourPtBR: 'DD/MM/YYYY HH:mm'
+}

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

@@ -1,14 +1,14 @@
 <template>
   <qas-input ref="input" v-bind="attributes" v-model="currentValue" inputmode="numeric" :unmasked-value="false" @blur="validateDateTimeOnBlur" @focus="resetError" @update:model-value="updateModelValue">
     <template #append>
-      <qas-btn v-if="!useTimeOnly" color="grey-10" :disable="$attrs.readonly" icon="sym_r_event" variant="tertiary">
-        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="datePopupProxyProps">
+      <qas-btn v-if="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_event" variant="tertiary">
+        <q-popup-proxy ref="dateProxy" transition-hide="scale" transition-show="scale" v-bind="props.datePopupProxyProps">
           <qas-date v-model="currentValue" v-bind="defaultDateProps" :mask="maskDate" width="290px" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
 
-      <qas-btn v-if="!useDateOnly" class="q-ml-sm" color="grey-10" :disable="$attrs.readonly" icon="sym_r_access_time">
-        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="timePopupProxyProps">
+      <qas-btn v-if="!props.useDateOnly" class="q-ml-sm" color="grey-10" :disable="attrs.readonly" icon="sym_r_access_time">
+        <q-popup-proxy ref="timeProxy" transition-hide="scale" transition-show="scale" v-bind="props.timePopupProxyProps">
           <q-time v-model="currentValue" v-bind="defaultTimeProps" format24h :mask="maskDate" @update:model-value="updateModelValue" />
         </q-popup-proxy>
       </qas-btn>
@@ -16,255 +16,244 @@
   </qas-input>
 </template>
 
-<script>
-import { date } from 'quasar'
+<script setup>
 import { date as dateFn } from '../../helpers/filters'
 
-export default {
+import { date } from 'quasar'
+import { ref, watch, computed, useAttrs, onMounted } from 'vue'
+
+defineOptions({
   name: 'QasDateTimeInput',
+  inheritAttrs: false
+})
 
-  inheritAttrs: false,
-
-  props: {
-    dateMask: {
-      default: 'DD/MM/YYYY',
-      type: String
-    },
-
-    dateProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    datePopupProxyProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    timeMask: {
-      default: 'HH:mm',
-      type: String
-    },
-
-    timeProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    timePopupProxyProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    useIso: {
-      type: Boolean
-    },
-
-    useTimeOnly: {
-      type: Boolean
-    },
-
-    useDateOnly: {
-      type: Boolean
-    },
-
-    modelValue: {
-      default: '',
-      type: String
-    }
+const props = defineProps({
+  dateMask: {
+    default: 'DD/MM/YYYY',
+    type: String
   },
 
-  emits: ['update:modelValue'],
+  dateProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-  data () {
-    return {
-      currentValue: '',
-      error: false,
-      errorMessage: '',
-      hasInvalidDate: false,
-      lastValue: ''
-    }
+  datePopupProxyProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  computed: {
-    attributes () {
-      const { modelValue, ...attributes } = this.$attrs
-
-      return {
-        error: this.error,
-        errorMessage: this.errorMessage,
-        ...attributes,
-        mask: this.mask
-      }
-    },
-
-    defaultDateProps () {
-      return {
-        ...this.defaultDateTimeProps,
-        ...this.dateProps
-      }
-    },
-
-    defaultTimeProps () {
-      return {
-        ...this.defaultDateTimeProps,
-        ...this.timeProps
-      }
-    },
-
-    defaultDateTimeProps () {
-      return {
-        readonly: this.$attrs.readonly,
-        disable: this.$attrs.disable
-      }
-    },
-
-    inputElement () {
-      return this.$refs.input
-    },
-
-    mask () {
-      return this.maskDate.replace(/\w/g, '#')
-    },
-
-    maskDate () {
-      const mask = []
-
-      if (!this.useTimeOnly) { mask.push(this.dateMask) }
-      if (!this.useDateOnly) { mask.push(this.timeMask) }
-
-      return mask.join(' ')
-    }
+  timeMask: {
+    default: 'HH:mm',
+    type: String
   },
 
-  watch: {
-    modelValue (current, original) {
-      if (!current || this.useTimeOnly) {
-        this.currentValue = current
-        return
-      }
-
-      if (current !== original && current !== this.lastValue) {
-        this.currentValue = this.toMask(current)
-      }
-    }
+  timeProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  created () {
-    this.currentValue = this.toMask(this.modelValue)
+  timePopupProxyProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  methods: {
-    blur () {
-      this.inputElement.blur()
-    },
+  useIso: {
+    type: Boolean
+  },
+
+  useTimeOnly: {
+    type: Boolean
+  },
+
+  useDateOnly: {
+    type: Boolean
+  },
+
+  modelValue: {
+    default: '',
+    type: String
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
 
-    focus () {
-      this.inputElement.focus()
-    },
+// template refs
+const dateProxy = ref(null)
+const timeProxy = ref(null)
+const input = ref(null)
 
-    updateModelValue (value) {
-      this.currentValue = value
-      const valueLength = value?.replace?.(/_/g, '')?.length
+// validations
+const error = ref(false)
+const errorMessage = ref('')
+const hasInvalidDate = ref(false)
 
-      this.error = this.validateDateAndTime(value)
+const currentValue = ref('')
+const lastValue = ref('')
 
-      if (this.error) {
-        this.hasInvalidDate = true
-        this.errorMessage = 'Data inválida.'
-        return
-      }
+// computed
+const maskDate = computed(() => {
+  const mask = []
 
-      this.hasInvalidDate = false
+  if (!props.useTimeOnly) { mask.push(props.dateMask) }
+  if (!props.useDateOnly) { mask.push(props.timeMask) }
 
-      if (value === '' || valueLength === this.mask.length) {
-        this.lastValue = this.useTimeOnly ? value : this.toISOString(value)
-        this.$emit('update:modelValue', this.lastValue)
-      }
+  return mask.join(' ')
+})
 
-      if (this.useDateOnly) {
-        this.$refs.dateProxy.hide()
-      }
+const mask = computed(() => maskDate.value.replace(/\w/g, '#'))
 
-      if (this.useTimeOnly) {
-        this.$refs.timeProxy.hide()
-      }
-    },
+const attributes = computed(() => {
+  const { modelValue, ...restAttributes } = attrs
 
-    toISOString (value) {
-      if (!value) return ''
+  return {
+    error: error.value,
+    errorMessage: errorMessage.value,
+    ...restAttributes,
+    mask: mask.value
+  }
+})
 
-      if (this.useDateOnly && !this.useIso) {
-        return dateFn(date.extractDate(value, this.maskDate), 'yyyy-MM-dd')
-      }
+const defaultDateTimeProps = computed(() => {
+  return {
+    readonly: attrs.readonly,
+    disable: attrs.disable
+  }
+})
 
-      if (this.useTimeOnly && !this.useIso) {
-        return date.extractDate(value, 'HH:MM')
-      }
+const defaultDateProps = computed(() => {
+  return {
+    ...defaultDateTimeProps.value,
+    ...props.dateProps
+  }
+})
 
-      return date.extractDate(value, this.maskDate).toISOString()
-    },
+const defaultTimeProps = computed(() => {
+  return {
+    ...defaultDateTimeProps.value,
+    ...props.timeProps
+  }
+})
 
-    toMask (value) {
-      if (!value || this.useTimeOnly) {
-        return value || ''
-      }
+watch(() => props.modelValue, (current, original) => {
+  if (!current || props.useTimeOnly) {
+    currentValue.value = current
+    return
+  }
 
-      const newDate = new Date(value).toISOString()
+  if (current !== original && current !== lastValue.value) {
+    currentValue.value = toMask(current)
+  }
+})
 
-      return date.formatDate(
-        this.useDateOnly ? newDate.slice(0, 23) : newDate,
-        this.maskDate
-      )
-    },
+onMounted(() => {
+  currentValue.value = toMask(props.modelValue)
+})
 
-    validateDateTimeOnBlur () {
-      const valueLength = this.currentValue?.replace?.(/_/g, '')?.length
+// functions
+function toISOString (value) {
+  if (!value) return ''
 
-      // valida se o tamanho digitado é o tamanho que a mascara espera receber
-      this.error = !!((valueLength < this.mask.length || this.error) && valueLength)
+  if (props.useDateOnly && !props.useIso) {
+    return dateFn(date.extractDate(value, maskDate.value), 'yyyy-MM-dd')
+  }
 
-      if (this.error && !this.hasInvalidDate) {
-        this.errorMessage = 'Data incompleta.'
-      }
+  if (props.useTimeOnly && !props.useIso) {
+    return date.extractDate(value, 'HH:MM')
+  }
 
-      if (this.hasInvalidDate) {
-        this.currentValue = ''
-      }
+  return date.extractDate(value, maskDate.value).toISOString()
+}
 
-      if (this.error || this.hasInvalidDate) {
-        this.$emit('update:modelValue', '')
-      }
-    },
+function toMask (value) {
+  if (!value || props.useTimeOnly) {
+    return value || ''
+  }
 
-    validateDateAndTime (value) {
-      if (!value) return false
+  const newDate = new Date(value).toISOString()
 
-      if (this.useDateOnly) return this.validateDateOnly(value)
-      if (this.useTimeOnly) return this.validateTimeOnly(value)
+  return date.formatDate(
+    props.useDateOnly ? newDate.slice(0, 23) : newDate,
+    maskDate.value
+  )
+}
 
-      const [date, time] = value?.split(' ') || []
+function updateModelValue (value) {
+  currentValue.value = value
 
-      return this.validateDateOnly(date) || this.validateTimeOnly(time)
-    },
+  const valueLength = value?.replace?.(/_/g, '')?.length
 
-    validateDateOnly (value = '') {
-      const [day, month] = value.split('/')
+  error.value = validateDateAndTime(value)
 
-      return day > 31 || month > 12
-    },
+  if (error.value) {
+    hasInvalidDate.value = true
+    errorMessage.value = 'Data inválida.'
+    return
+  }
 
-    validateTimeOnly (value = '') {
-      const [hour, minute] = value.split(':')
+  hasInvalidDate.value = false
 
-      return hour > 23 || minute > 59
-    },
+  if (value === '' || valueLength === mask.value.length) {
+    lastValue.value = props.useTimeOnly ? value : toISOString(value)
+    emit('update:modelValue', lastValue.value)
+  }
+
+  if (props.useDateOnly) {
+    dateProxy.value.hide()
+  }
+
+  if (props.useTimeOnly) {
+    timeProxy.value.hide()
+  }
+}
+
+function validateDateOnly (value = '') {
+  const [day, month] = value.split('/')
+
+  return day > 31 || month > 12
+}
+
+function validateTimeOnly (value = '') {
+  const [hour, minute] = value.split(':')
+
+  return hour > 23 || minute > 59
+}
+
+function validateDateAndTime (value) {
+  if (!value) return false
+
+  if (props.useDateOnly) return validateDateOnly(value)
+  if (props.useTimeOnly) return validateTimeOnly(value)
+
+  const [date, time] = value?.split(' ') || []
+
+  return validateDateOnly(date) || validateTimeOnly(time)
+}
+
+function validateDateTimeOnBlur () {
+  const valueLength = currentValue.value?.replace?.(/_/g, '')?.length
+
+  // valida se o tamanho digitado é o tamanho que a mascara espera receber
+  error.value = !!((valueLength < mask.value.length || error.value) && valueLength)
+
+  if (error.value && !hasInvalidDate.value) {
+    errorMessage.value = 'Data incompleta.'
+  }
+
+  if (hasInvalidDate.value) {
+    currentValue.value = ''
+  }
+
+  if (error.value || hasInvalidDate.value) {
+    emit('update:modelValue', '')
+  }
+}
 
-    resetError () {
-      if (!this.currentValue) {
-        this.error = false
-      }
-    }
+function resetError () {
+  if (!currentValue.value) {
+    error.value = false
   }
 }
 </script>

package/src/components/debugger/QasDebugger.vue

@@ -1,23 +1,31 @@
 <template>
-  <details class="bg-grey-3 q-my-md q-pa-md rounded-borders">
+  <details class="bg-grey-3 q-my-md q-pa-md qas-debugger rounded-borders">
     <summary>Debugger</summary>
 
     <div class="row">
-      <pre v-for="(item, index) in inspect" :key="index" class="col q-pa-sm scroll" style="max-height: 300px;">{{ item }}</pre>
+      <pre v-for="(item, index) in props.inspect" :key="index" class="col q-pa-sm qas-debugger__code scroll">
+        {{ item }}
+      </pre>
     </div>
   </details>
 </template>
 
-<script>
-export default {
-  name: 'QasDebugger',
+<script setup>
+defineOptions({ name: 'QasDebugger' })
 
-  props: {
-    inspect: {
-      default: () => [],
-      required: true,
-      type: Array
-    }
+const props = defineProps({
+  inspect: {
+    default: () => [],
+    required: true,
+    type: Array
   }
-}
+})
 </script>
+
+<style lang="scss">
+.qas-debugger {
+  &__code {
+    max-height: 300px;
+  }
+}
+</style>