@citizenplane/pimp 8.26.0 → 8.27.0

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

@@ -25,155 +25,129 @@
       :locale="locale"
       class="cpDatepicker__datepicker"
       :class="{ 'cpDatepicker__datepicker--isInline': isInline }"
-      @date-one-selected="(date) => selectDate('dateOne', date)"
-      @date-two-selected="(date) => selectDate('dateTwo', date)"
+      @date-one-selected="onDateOneSelected"
+      @date-two-selected="onDateTwoSelected"
       @opened="() => (isDisabled = true)"
-      @closed="() => (isDisabled = null)"
+      @closed="() => (isDisabled = false)"
     />
   </div>
 </template>
 
-<script>
-import CoreDatepicker from '@/libs/CoreDatepicker.vue'
+<script setup lang="ts">
+import { DateTime } from 'luxon'
+import { ref, computed, watch } from 'vue'
+
 import CpInput from '@/components/inputs/CpInput.vue'
+
 import { randomString, formatDates } from '@/helpers'
-import { DateTime } from 'luxon'
+import CoreDatepicker from '@/libs/CoreDatepicker.vue'
 
-export default {
-  name: 'CpDatepicker',
-  components: {
-    CoreDatepicker,
-    CpInput,
-  },
-  props: {
-    triggerElementId: {
-      type: String,
-      default: '',
-    },
-    mode: {
-      type: String,
-      default: 'single',
-      validator: (value) => {
-        return ['range', 'single'].includes(value)
-      },
-    },
-    closeAfterSelect: {
-      type: Boolean,
-      default: true,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: 'Select a date',
-    },
-    inputValue: {
-      type: String,
-      default: '',
-    },
-    isError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    initDateOne: {
-      type: String,
-      default: '',
-      validator: (value) => {
-        return value === '' || value.length === 10
-      },
-    },
-    initDateTwo: {
-      type: String,
-      default: '',
-      validator: (value) => {
-        return value === '' || value.length === 10
-      },
-    },
-    minDate: {
-      type: [String, Date],
-      default: () => DateTime.local().toISODate(),
-    },
-    maxDate: {
-      type: [String, Date],
-      default: '',
-    },
-    allowPastDates: {
-      type: Boolean,
-      default: false,
-    },
-    isInline: {
-      type: Boolean,
-      default: false,
-    },
-    singleMonth: {
-      type: Boolean,
-      default: false,
-    },
-    locale: {
-      type: String,
-      default: () => {
-        return navigator.language
-      },
-    },
-  },
-  emits: ['dates'],
-  data() {
-    return {
-      calendarFormat: 'YYYY-MM-DD',
-      humanFormat: 'EEE DD',
-      dateOne: this.initDateOne || '',
-      dateTwo: this.mode === 'range' ? this.initDateTwo : '',
-      isDisabled: null,
-      datePickerReferenceId: this.triggerElementId || randomString(),
+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)
   },
-  computed: {
-    inputComputedValue() {
-      if (this.inputValue) return this.inputValue
-
-      return formatDates({
-        dateOne: this.dateOne,
-        dateTwo: this.dateTwo,
-        format: this.humanFormat,
-        locale: this.locale,
-      })
-    },
-    numberOfMonths() {
-      return this.singleMonth ? 1 : 2
-    },
-    computedMinDate() {
-      return this.allowPastDates ? '' : this.minDate
-    },
-    dynamicClasses() {
-      return { 'cpDatepicker__datepicker--isInline': this.isInline }
-    },
-  },
-  watch: {
-    initDateOne(newValue, oldValue) {
-      this.updateDateValue('dateOne', newValue, oldValue)
-    },
-    initDateTwo(newValue, oldValue) {
-      this.updateDateValue('dateTwo', newValue, oldValue)
-    },
-  },
-  methods: {
-    selectDate(dateType, dateValue) {
-      this[dateType] = dateValue
-      this.$emit('dates', [this.dateOne, ...(this.dateTwo && [this.dateTwo])])
-    },
-    updateDateValue(date, newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this[date] = newValue
-      }
-    },
+)
+
+watch(
+  () => props.initDateTwo,
+  (newValue, oldValue) => {
+    updateDateValue('dateTwo', newValue, oldValue)
   },
-}
+)
 </script>
 
 <style lang="scss">

package/src/components/feedback-indicators/CpAlert.vue

@@ -16,31 +16,20 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, useSlots } from 'vue'
 
-import { Intent } from '@/utils/constants'
-
-const props = defineProps({
-  intent: {
-    type: String,
-    required: true,
-    default: Intent.INFO.value,
-    validator(value) {
-      const intentValues = Object.values(Intent).map((item) => item.value)
-      return intentValues.includes(value)
-    },
-  },
-  title: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  isClosable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
+import { Intent } from '@/constants'
+
+interface Props {
+  intent: (typeof Intent)[keyof typeof Intent]['value']
+  isClosable?: boolean
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  isClosable: false,
 })
 
 const slots = useSlots()
@@ -49,7 +38,7 @@ const isDisplayed = ref(true)
 
 const alertIcon = computed(() => {
   const intentValues = Object.values(Intent)
-  return intentValues.find((intentItem) => intentItem.value === props.intent).icon
+  return intentValues.find((intentItem) => intentItem.value === props.intent)?.icon
 })
 
 const hasIconSlot = computed(() => !!slots.icon)
@@ -116,12 +105,12 @@ const dismissAlert = () => (isDisplayed.value = false)
   }
 
   &__icon,
-  &__content,
-  &__title {
+  &__content {
     line-height: fn.px-to-rem(19);
   }
 
-  &__title {
+  &__body > .cpHeading {
+    line-height: fn.px-to-rem(19);
     color: inherit;
     font-weight: 600;
 

package/src/components/feedback-indicators/CpLoader.vue

@@ -33,13 +33,12 @@
   </svg>
 </template>
 
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-      default: '#ff6700',
-    },
-  },
+<script setup lang="ts">
+interface Props {
+  color?: string
 }
+
+withDefaults(defineProps<Props>(), {
+  color: '#ff6700',
+})
 </script>