@citizenplane/pimp 8.26.1 → 8.28.1

package/src/components/{date-pickers/CpDate.vue → 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">

package/src/components/CpDatepicker.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="cpDatepicker">
+    <cp-input
+      v-show="!isInline"
+      :id="datePickerReferenceId"
+      :model-value="inputComputedValue"
+      type="text"
+      :placeholder="placeholder"
+      :is-invalid="isError"
+      :error-message="errorMessage"
+      :disabled="isDisabled"
+      :label="label"
+      class="cpDatepicker__input"
+    />
+    <core-datepicker
+      :date-one="dateOne"
+      :date-two="dateTwo"
+      :trigger-element-id="datePickerReferenceId"
+      :close-after-select="closeAfterSelect"
+      :mode="mode"
+      :inline="isInline"
+      :months-to-show="numberOfMonths"
+      :min-date="computedMinDate"
+      :max-date="maxDate"
+      :locale="locale"
+      class="cpDatepicker__datepicker"
+      :class="{ 'cpDatepicker__datepicker--isInline': isInline }"
+      @date-one-selected="onDateOneSelected"
+      @date-two-selected="onDateTwoSelected"
+      @opened="() => (isDisabled = true)"
+      @closed="() => (isDisabled = false)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from 'luxon'
+import { ref, computed, watch } from 'vue'
+
+import CpInput from '@/components/CpInput.vue'
+
+import { randomString, formatDates } from '@/helpers'
+import CoreDatepicker from '@/libs/CoreDatepicker.vue'
+
+type DatepickerMode = 'range' | 'single'
+
+interface Props {
+  allowPastDates?: boolean
+  closeAfterSelect?: boolean
+  errorMessage?: string
+  initDateOne?: string
+  initDateTwo?: string
+  inputValue?: string
+  isError?: boolean
+  isInline?: boolean
+  label?: string
+  locale?: string
+  maxDate?: string | Date
+  minDate?: string | Date
+  mode?: DatepickerMode
+  placeholder?: string
+  singleMonth?: boolean
+  triggerElementId?: string
+}
+
+interface Emits {
+  (e: 'dates', dates: string[]): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  triggerElementId: '',
+  mode: 'single',
+  closeAfterSelect: true,
+  label: '',
+  placeholder: 'Select a date',
+  inputValue: '',
+  isError: false,
+  errorMessage: '',
+  initDateOne: '',
+  initDateTwo: '',
+  minDate: () => DateTime.local().toISODate(),
+  maxDate: '',
+  allowPastDates: false,
+  isInline: false,
+  singleMonth: false,
+  locale: () => navigator.language,
+})
+
+const emit = defineEmits<Emits>()
+
+const humanFormat = 'EEE DD'
+const dateOne = ref(props.initDateOne || '')
+const dateTwo = ref(props.mode === 'range' ? props.initDateTwo : '')
+const isDisabled = ref(false)
+const datePickerReferenceId = ref(props.triggerElementId || randomString())
+
+const inputComputedValue = computed(() => {
+  if (props.inputValue) return props.inputValue
+
+  return formatDates({
+    dateOne: dateOne.value,
+    dateTwo: dateTwo.value,
+    format: humanFormat,
+    locale: props.locale,
+  })
+})
+
+const numberOfMonths = computed(() => {
+  return props.singleMonth ? 1 : 2
+})
+
+const computedMinDate = computed(() => {
+  return props.allowPastDates ? '' : props.minDate
+})
+
+const onDateOneSelected = (date: string) => selectDate('dateOne', date)
+const onDateTwoSelected = (date: string) => selectDate('dateTwo', date)
+
+const selectDate = (dateType: 'dateOne' | 'dateTwo', dateValue: string): void => {
+  if (dateType === 'dateOne') {
+    dateOne.value = dateValue
+  } else {
+    dateTwo.value = dateValue
+  }
+  emit('dates', [dateOne.value, ...(dateTwo.value ? [dateTwo.value] : [])])
+}
+
+const updateDateValue = (date: 'dateOne' | 'dateTwo', newValue: string, oldValue: string): void => {
+  if (newValue !== oldValue) {
+    if (date === 'dateOne') {
+      dateOne.value = newValue
+    } else {
+      dateTwo.value = newValue
+    }
+  }
+}
+
+watch(
+  () => props.initDateOne,
+  (newValue, oldValue) => {
+    updateDateValue('dateOne', newValue, oldValue)
+  },
+)
+
+watch(
+  () => props.initDateTwo,
+  (newValue, oldValue) => {
+    updateDateValue('dateTwo', newValue, oldValue)
+  },
+)
+</script>
+
+<style lang="scss">
+.cpDatepicker {
+  // Opening transition layout adaptation
+  .asd__fade-enter-from {
+    transform: translateX(-50%) scale(0.8);
+  }
+
+  .asd__fade-enter-to {
+    transform: translateX(-50%) scale(1);
+  }
+
+  &__input input:disabled {
+    background-color: colors.$neutral-light;
+  }
+
+  &__datepicker {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &__datepicker:not(&__datepicker--isInline) {
+    margin-top: 10px;
+  }
+
+  @media (min-width: 350px) {
+    position: relative;
+  }
+
+  @media (max-width: 767px) and (min-width: 350px) {
+    &__datepicker {
+      left: 0;
+      right: 0;
+      transform: initial;
+    }
+
+    &__datepicker:not(&__datepicker--isInline) {
+      margin-top: 16px;
+    }
+
+    // Opening transition layout adaptation
+    .asd__fade-enter-from {
+      transform: scale(0.8);
+    }
+
+    .asd__fade-enter-to {
+      transform: scale(1);
+    }
+  }
+}
+</style>

package/src/components/{atomic-elements/CpDialog.vue → CpDialog.vue}

@@ -22,24 +22,29 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount } from 'vue'
 
 import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 
-const props = defineProps({
-  maxWidth: {
-    type: Number,
-    default: 600,
-  },
+interface Props {
+  maxWidth?: number
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: 600,
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<Emits>()
 
 const slots = useSlots()
 
 const dialogElement = ref()
-const dialogContainer = ref()
+const dialogContainer = ref<HTMLElement>()
 
 const dynamicStyle = computed(() => {
   return { maxWidth: `${props.maxWidth}px` }
@@ -49,7 +54,7 @@ const hasHeaderSlot = computed(() => !!slots.header)
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const onClose = () => emit('close')
-const trapFocus = (event) => handleTrapFocus(event, dialogContainer.value)
+const trapFocus = (event: KeyboardEvent) => handleTrapFocus(event, dialogContainer.value)
 
 const openDialog = () => dialogElement.value.show()
 const closeDialog = () => dialogElement.value.close()