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

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

@@ -1,269 +1,269 @@
-<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="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_calendar_today" 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="!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>
-    </template>
-  </qas-input>
-</template>
-
-<script setup>
-import { date as dateFn, getPlaceholder } from '../../helpers'
-
-import { date } from 'quasar'
-import { ref, watch, computed, useAttrs, onMounted } from 'vue'
-
-defineOptions({
-  name: 'QasDateTimeInput',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  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 emit = defineEmits(['update:modelValue'])
-
-const attrs = useAttrs()
-
-// template refs
-const dateProxy = ref(null)
-const timeProxy = ref(null)
-const input = ref(null)
-
-// validations
-const error = ref(false)
-const errorMessage = ref('')
-const hasInvalidDate = ref(false)
-
-const currentValue = ref('')
-const lastValue = ref('')
-
-// computed
-const maskDate = computed(() => {
-  const mask = []
-
-  if (!props.useTimeOnly) { mask.push(props.dateMask) }
-  if (!props.useDateOnly) { mask.push(props.timeMask) }
-
-  return mask.join(' ')
-})
-
-const mask = computed(() => maskDate.value.replace(/\w/g, '#'))
-
-const maskType = computed(() => {
-  const types = {
-    [props.useDateOnly]: 'date',
-    [props.useTimeOnly]: 'time'
-  }
-
-  return types.true || 'datetime'
-})
-
-const attributes = computed(() => {
-  const { modelValue, placeholder, ...restAttributes } = attrs
-
-  return {
-    error: error.value,
-    errorMessage: errorMessage.value,
-    ...restAttributes,
-    mask: mask.value,
-    placeholder: placeholder || getPlaceholder(maskType.value)
-  }
-})
-
-const defaultDateTimeProps = computed(() => {
-  return {
-    readonly: attrs.readonly,
-    disable: attrs.disable
-  }
-})
-
-const defaultDateProps = computed(() => {
-  return {
-    ...defaultDateTimeProps.value,
-    ...props.dateProps
-  }
-})
-
-const defaultTimeProps = computed(() => {
-  return {
-    ...defaultDateTimeProps.value,
-    ...props.timeProps
-  }
-})
-
-watch(() => props.modelValue, (current, original) => {
-  if (!current || props.useTimeOnly) {
-    currentValue.value = current
-    return
-  }
-
-  if (current !== original && current !== lastValue.value) {
-    currentValue.value = toMask(current)
-  }
-})
-
-onMounted(() => {
-  currentValue.value = toMask(props.modelValue)
-})
-
-// functions
-function toISOString (value) {
-  if (!value) return ''
-
-  if (props.useDateOnly && !props.useIso) {
-    return dateFn(date.extractDate(value, maskDate.value), 'yyyy-MM-dd')
-  }
-
-  if (props.useTimeOnly && !props.useIso) {
-    return date.extractDate(value, 'HH:MM')
-  }
-
-  return date.extractDate(value, maskDate.value).toISOString()
-}
-
-function toMask (value) {
-  if (!value || props.useTimeOnly) {
-    return value || ''
-  }
-
-  const newDate = new Date(value).toISOString()
-
-  return date.formatDate(
-    props.useDateOnly ? newDate.slice(0, 23) : newDate,
-    maskDate.value
-  )
-}
-
-function updateModelValue (value) {
-  currentValue.value = value
-
-  const valueLength = value?.replace?.(/_/g, '')?.length
-
-  error.value = validateDateAndTime(value)
-
-  if (error.value) {
-    hasInvalidDate.value = true
-    errorMessage.value = 'Data inválida.'
-    return
-  }
-
-  hasInvalidDate.value = false
-
-  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', '')
-  }
-}
-
-function resetError () {
-  if (!currentValue.value) {
-    error.value = false
-  }
-}
-</script>
+<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="!props.useTimeOnly" color="grey-10" :disable="attrs.readonly" icon="sym_r_calendar_today" 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="!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>
+    </template>
+  </qas-input>
+</template>
+
+<script setup>
+import { date as dateFn, getPlaceholder } from '../../helpers'
+
+import { date } from 'quasar'
+import { ref, watch, computed, useAttrs, onMounted } from 'vue'
+
+defineOptions({
+  name: 'QasDateTimeInput',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  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 emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+
+// template refs
+const dateProxy = ref(null)
+const timeProxy = ref(null)
+const input = ref(null)
+
+// validations
+const error = ref(false)
+const errorMessage = ref('')
+const hasInvalidDate = ref(false)
+
+const currentValue = ref('')
+const lastValue = ref('')
+
+// computed
+const maskDate = computed(() => {
+  const mask = []
+
+  if (!props.useTimeOnly) { mask.push(props.dateMask) }
+  if (!props.useDateOnly) { mask.push(props.timeMask) }
+
+  return mask.join(' ')
+})
+
+const mask = computed(() => maskDate.value.replace(/\w/g, '#'))
+
+const maskType = computed(() => {
+  const types = {
+    [props.useDateOnly]: 'date',
+    [props.useTimeOnly]: 'time'
+  }
+
+  return types.true || 'datetime'
+})
+
+const attributes = computed(() => {
+  const { modelValue, placeholder, ...restAttributes } = attrs
+
+  return {
+    error: error.value,
+    errorMessage: errorMessage.value,
+    ...restAttributes,
+    mask: mask.value,
+    placeholder: placeholder || getPlaceholder(maskType.value)
+  }
+})
+
+const defaultDateTimeProps = computed(() => {
+  return {
+    readonly: attrs.readonly,
+    disable: attrs.disable
+  }
+})
+
+const defaultDateProps = computed(() => {
+  return {
+    ...defaultDateTimeProps.value,
+    ...props.dateProps
+  }
+})
+
+const defaultTimeProps = computed(() => {
+  return {
+    ...defaultDateTimeProps.value,
+    ...props.timeProps
+  }
+})
+
+watch(() => props.modelValue, (current, original) => {
+  if (!current || props.useTimeOnly) {
+    currentValue.value = current
+    return
+  }
+
+  if (current !== original && current !== lastValue.value) {
+    currentValue.value = toMask(current)
+  }
+})
+
+onMounted(() => {
+  currentValue.value = toMask(props.modelValue)
+})
+
+// functions
+function toISOString (value) {
+  if (!value) return ''
+
+  if (props.useDateOnly && !props.useIso) {
+    return dateFn(date.extractDate(value, maskDate.value), 'yyyy-MM-dd')
+  }
+
+  if (props.useTimeOnly && !props.useIso) {
+    return date.extractDate(value, 'HH:MM')
+  }
+
+  return date.extractDate(value, maskDate.value).toISOString()
+}
+
+function toMask (value) {
+  if (!value || props.useTimeOnly) {
+    return value || ''
+  }
+
+  const newDate = new Date(value).toISOString()
+
+  return date.formatDate(
+    props.useDateOnly ? newDate.slice(0, 23) : newDate,
+    maskDate.value
+  )
+}
+
+function updateModelValue (value) {
+  currentValue.value = value
+
+  const valueLength = value?.replace?.(/_/g, '')?.length
+
+  error.value = validateDateAndTime(value)
+
+  if (error.value) {
+    hasInvalidDate.value = true
+    errorMessage.value = 'Data inválida.'
+    return
+  }
+
+  hasInvalidDate.value = false
+
+  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', '')
+  }
+}
+
+function resetError () {
+  if (!currentValue.value) {
+    error.value = false
+  }
+}
+</script>

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

@@ -1,64 +1,64 @@
-type: component
-
-mixins:
-  - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
-
-meta:
-  desc: Componente de input data e hora, implementa o "QasInput".
-
-props:
-  date-mask:
-    desc: Máscara do componente de input de data.
-    default: DD/MM/YYYY
-    type: String
-
-  date-props:
-    desc: Propriedades do QDate (https://quasar.dev/vue-components/date#introduction).
-    default: {}
-    type: Object
-
-  date-popup-proxy-props:
-    desc: Propriedades do QPopupProxy para o popup do QDate (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
-    default: {}
-    type: Object
-
-  model-value:
-    desc: Model do componente, usado para v-model.
-    default: ''
-    type: String
-    model: true
-
-  time-mask:
-    desc: Máscara do componente de input de hora.
-    default: HH:mm
-    type: String
-
-  time-props:
-    desc: Propriedades do QTime (https://quasar.dev/vue-components/time#introduction).
-    default: {}
-    type: Object
-
-  time-popup-proxy-props:
-    desc: Propriedades do QPopupProxy para o popup do QTime (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
-    default: {}
-    type: Object
-
-  use-time-only:
-    desc: Habilita o componente para usar somente hora.
-    type: Boolean
-
-  use-date-only:
-    desc: Habilita o componente para usar somente data.
-    type: Boolean
-
-  use-iso:
-    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "useIso" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
-    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:
+  - '@bildvitta/quasar-ui-asteroid/dist/api/QasInput.json'
+
+meta:
+  desc: Componente de input data e hora, implementa o "QasInput".
+
+props:
+  date-mask:
+    desc: Máscara do componente de input de data.
+    default: DD/MM/YYYY
+    type: String
+
+  date-props:
+    desc: Propriedades do QDate (https://quasar.dev/vue-components/date#introduction).
+    default: {}
+    type: Object
+
+  date-popup-proxy-props:
+    desc: Propriedades do QPopupProxy para o popup do QDate (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
+    default: {}
+    type: Object
+
+  model-value:
+    desc: Model do componente, usado para v-model.
+    default: ''
+    type: String
+    model: true
+
+  time-mask:
+    desc: Máscara do componente de input de hora.
+    default: HH:mm
+    type: String
+
+  time-props:
+    desc: Propriedades do QTime (https://quasar.dev/vue-components/time#introduction).
+    default: {}
+    type: Object
+
+  time-popup-proxy-props:
+    desc: Propriedades do QPopupProxy para o popup do QTime (https://quasar.dev/vue-components/popup-proxy#qpopupproxy-api).
+    default: {}
+    type: Object
+
+  use-time-only:
+    desc: Habilita o componente para usar somente hora.
+    type: Boolean
+
+  use-date-only:
+    desc: Habilita o componente para usar somente data.
+    type: Boolean
+
+  use-iso:
+    desc: Utilizado para se usar junto da prop "date-only" ou "time-only", caso "useIso" for "true", o model sempre vai ser retornado no padrão ISO 8601, independente ser apenas um campo somente de data ou hora.
+    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