@citizenplane/pimp 8.26.1 → 8.27.0

package/src/components/date-pickers/CpDate.vue

@@ -52,232 +52,222 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { Info, DateTime } from 'luxon'
+import { ref, computed, watch } from 'vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
 const HUMAN_MAX_AGE = 120
 
-export default {
-  props: {
-    modelValue: {
-      type: [String, Date],
-      default: '',
-    },
-    minDate: {
-      type: [String, Date],
-      default: DateTime.now().minus({ year: HUMAN_MAX_AGE }).toISO(),
-    },
-    maxDate: {
-      type: [String, Date],
-      default: DateTime.now().toISO(),
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    displayErrorMessage: {
-      type: Boolean,
-      default: true,
-    },
-    autocompleteBirthday: {
-      type: Boolean,
-      default: false,
-    },
-    locale: {
-      type: String,
-      default: () => {
-        return navigator.language
-      },
-    },
-    inputsOptions: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['update:modelValue', 'on-validation'],
-  data() {
+interface InputsOptions {
+  dayInputPlaceholder?: string
+  monthInputPlaceholder?: string
+  yearInputPlaceholder?: string
+}
+
+interface Props {
+  autocompleteBirthday?: boolean
+  disabled?: boolean
+  displayErrorMessage?: boolean
+  errorMessage?: string
+  inputsOptions?: InputsOptions
+  isInvalid?: boolean
+  label?: string
+  locale?: string
+  maxDate?: string | Date
+  minDate?: string | Date
+  modelValue?: string | Date
+  required?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'on-validation', value: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  minDate: () => DateTime.now().minus({ year: HUMAN_MAX_AGE }).toISO(),
+  maxDate: () => DateTime.now().toISO(),
+  label: '',
+  required: false,
+  disabled: false,
+  isInvalid: false,
+  errorMessage: '',
+  displayErrorMessage: true,
+  autocompleteBirthday: false,
+  locale: () => navigator.language,
+  inputsOptions: () => ({}),
+})
+
+const emit = defineEmits<Emits>()
+
+const initDateToken = (token: 'day' | 'month' | 'year'): string => {
+  if (DateTime.fromISO(props.modelValue).invalid) return ''
+
+  return DateTime.fromISO(props.modelValue)[token]
+}
+
+const day = ref(initDateToken('day'))
+const month = ref(initDateToken('month'))
+const year = ref(initDateToken('year'))
+
+const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
+
+const cpDateId = computed(() => randomString())
+
+const minYear = computed(() => isoMinDate.value.year)
+
+const maxYear = computed(() => isoMaxDate.value.year)
+
+const monthMaxDay = computed(() => {
+  const date = DateTime.fromObject({
+    year: year.value && year.value.length <= 4 ? Number(year.value) : DateTime.now().year,
+    month: month.value ? Number(month.value) : DateTime.now().month,
+    day: 1,
+  })
+
+  return date.daysInMonth
+})
+
+const months = computed(() => {
+  const rawLocalizedMonths = Info.months('long', { locale: props.locale })
+
+  return rawLocalizedMonths.map((month: string, index: number) => {
     return {
-      day: this.initDateToken('day'),
-      month: this.initDateToken('month'),
-      year: this.initDateToken('year'),
+      label: capitalizeFirstLetter(month),
+      value: index + 1,
     }
-  },
-  computed: {
-    capitalizedLabel() {
-      return capitalizeFirstLetter(this.label)
-    },
-    cpDateId() {
-      return randomString()
-    },
-    minYear() {
-      return this.isoMinDate.year
-    },
-    maxYear() {
-      return this.isoMaxDate.year
-    },
-    monthMaxDay() {
-      const date = DateTime.fromObject({
-        year: this.year && this.year.length <= 4 ? Number(this.year) : DateTime.now().year,
-        month: this.month ? Number(this.month) : DateTime.now().month,
-        day: 1,
-      })
-
-      return date.daysInMonth
-    },
-    months() {
-      const rawLocalizedMonths = Info.months('long', { locale: this.locale })
-
-      return rawLocalizedMonths.map((month, index) => {
-        return {
-          label: capitalizeFirstLetter(month),
-          value: index + 1,
-        }
-      })
-    },
-    isoDate() {
-      return DateTime.fromObject({
-        year: Number(this.year),
-        month: Number(this.month),
-        day: Number(this.day),
-      }).toISODate()
-    },
-    isoMinDate() {
-      return DateTime.fromISO(this.minDate)
-    },
-    isoMaxDate() {
-      return DateTime.fromISO(this.maxDate)
-    },
-    isDateAfterMinDate() {
-      return this.isoDate >= this.isoMinDate.toISODate()
-    },
-    isDateBeforeMaxDate() {
-      return this.isoDate <= this.isoMaxDate.toISODate()
-    },
-    areInputsEmpty() {
-      return this.day === '' && this.month === '' && this.year === ''
-    },
-    isDateValid() {
-      if (this.areInputsEmpty && !this.required) return true
-
-      return (
-        !this.isInvalid &&
-        this.isDayValid &&
-        this.isMonthValid &&
-        this.isYearValid &&
-        this.isDateBeforeMaxDate &&
-        this.isDateAfterMinDate
-      )
-    },
-    isDayValid() {
-      return this.day >= 1 && this.day <= this.monthMaxDay
-    },
-    isMonthValid() {
-      return !!this.month
-    },
-    isYearValid() {
-      return this.year >= this.minYear && this.year <= this.maxYear
-    },
-    advancedErrorMessage() {
-      if (this.isDateValid || !this.displayErrorMessage) return ''
-
-      if (this.errorMessage) return this.errorMessage
-
-      if (!this.isMonthValid) {
-        return 'Month is required.'
-      }
+  })
+})
+
+const isoDate = computed(() => {
+  return DateTime.fromObject({
+    year: Number(year.value),
+    month: Number(month.value),
+    day: Number(day.value),
+  }).toISODate()
+})
+
+const isoMinDate = computed(() => {
+  return DateTime.fromISO(props.minDate)
+})
+
+const isoMaxDate = computed(() => {
+  return DateTime.fromISO(props.maxDate)
+})
+
+const isDateAfterMinDate = computed(() => {
+  return isoDate.value >= isoMinDate.value.toISODate()
+})
+
+const isDateBeforeMaxDate = computed(() => {
+  return isoDate.value <= isoMaxDate.value.toISODate()
+})
+
+const areInputsEmpty = computed(() => {
+  return day.value === '' && month.value === '' && year.value === ''
+})
+
+const isDateValid = computed(() => {
+  if (areInputsEmpty.value && !props.required) return true
+
+  return (
+    !props.isInvalid &&
+    isDayValid.value &&
+    isMonthValid.value &&
+    isYearValid.value &&
+    isDateBeforeMaxDate.value &&
+    isDateAfterMinDate.value
+  )
+})
+
+const isDayValid = computed(() => {
+  return Number(day.value) >= 1 && Number(day.value) <= monthMaxDay.value
+})
+
+const isMonthValid = computed(() => {
+  return !!month.value
+})
+
+const isYearValid = computed(() => {
+  return Number(year.value) >= minYear.value && Number(year.value) <= maxYear.value
+})
+
+const advancedErrorMessage = computed(() => {
+  if (isDateValid.value || !props.displayErrorMessage) return ''
+
+  if (props.errorMessage) return props.errorMessage
+
+  if (!isMonthValid.value) {
+    return 'Month is required.'
+  }
 
-      if (!this.isDayValid) {
-        return `Day must be in the range 1 – ${this.monthMaxDay}.`
-      }
+  if (!isDayValid.value) {
+    return `Day must be in the range 1 – ${monthMaxDay.value}.`
+  }
 
-      if (!this.isYearValid) {
-        return `Year must be in the range ${this.minYear} – ${this.maxYear}.`
-      }
+  if (!isYearValid.value) {
+    return `Year must be in the range ${minYear.value} – ${maxYear.value}.`
+  }
 
-      if (!this.isDateBeforeMaxDate) {
-        const formattedMaxDate = this.isoMaxDate.toFormat('DDD')
-        return `The date can't be after ${formattedMaxDate}.`
-      }
+  if (!isDateBeforeMaxDate.value) {
+    const formattedMaxDate = isoMaxDate.value.toFormat('DDD')
+    return `The date can't be after ${formattedMaxDate}.`
+  }
 
-      if (!this.isDateAfterMinDate) {
-        const formattedMinDate = this.isoMinDate.toFormat('DDD')
-        return `The date can't be before ${formattedMinDate}.`
-      }
+  if (!isDateAfterMinDate.value) {
+    const formattedMinDate = isoMinDate.value.toFormat('DDD')
+    return `The date can't be before ${formattedMinDate}.`
+  }
 
-      return ''
-    },
-    dynamicClasses() {
-      return {
-        'cpDate--isInvalid': !this.isDateValid,
-        'cpDate--isDisabled': this.disabled,
-      }
-    },
-    selectDynamicClass() {
-      return {
-        'cpDate__month--isEmpty': !this.month,
-      }
-    },
-    autocompleteFields() {
-      if (!this.autocompleteBirthday) return 'off'
-
-      return {
-        day: 'bday-day',
-        month: 'bday-month',
-        year: 'bday-year',
-      }
-    },
-    dayInputPlaceholder() {
-      return this.inputsOptions?.dayInputPlaceholder || 'DD'
-    },
-    monthInputPlaceholder() {
-      return this.inputsOptions?.monthInputPlaceholder || 'Months'
-    },
-    yearInputPlaceholder() {
-      return this.inputsOptions?.yearInputPlaceholder || 'YYYY'
-    },
-  },
-  watch: {
-    day() {
-      this.handleUpdate()
-    },
-    month() {
-      this.handleUpdate()
-    },
-    year() {
-      this.handleUpdate()
-    },
-  },
-  methods: {
-    initDateToken(token) {
-      if (DateTime.fromISO(this.modelValue).invalid) return ''
-
-      return DateTime.fromISO(this.modelValue)[token]
-    },
-    handleUpdate() {
-      this.$emit('update:modelValue', this.isoDate)
-
-      this.$emit('on-validation', this.isDateValid)
-    },
-  },
+  return ''
+})
+
+const dynamicClasses = computed(() => {
+  return {
+    'cpDate--isInvalid': !isDateValid.value,
+    'cpDate--isDisabled': props.disabled,
+  }
+})
+
+const selectDynamicClass = computed(() => {
+  return {
+    'cpDate__month--isEmpty': !month.value,
+  }
+})
+
+const autocompleteFields = computed(() => {
+  if (!props.autocompleteBirthday) return 'off'
+
+  return {
+    day: 'bday-day',
+    month: 'bday-month',
+    year: 'bday-year',
+  }
+})
+
+const dayInputPlaceholder = computed(() => {
+  return props.inputsOptions?.dayInputPlaceholder || 'DD'
+})
+
+const monthInputPlaceholder = computed(() => {
+  return props.inputsOptions?.monthInputPlaceholder || 'Months'
+})
+
+const yearInputPlaceholder = computed(() => {
+  return props.inputsOptions?.yearInputPlaceholder || 'YYYY'
+})
+
+const handleUpdate = (): void => {
+  emit('update:modelValue', isoDate.value)
+  emit('on-validation', isDateValid.value)
 }
+
+watch(day, handleUpdate)
+watch(month, handleUpdate)
+watch(year, handleUpdate)
 </script>
 
 <style lang="scss">