@citizenplane/pimp 8.26.1 → 8.27.0

package/src/components/buttons/CpButton.vue

@@ -8,7 +8,6 @@
     class="cpButton"
     role="button"
     tabindex="0"
-    @click="handleClick"
   >
     <span class="cpButton__body">
       <span v-if="isLoading" class="cpButton__loader"><cp-loader color="#B2B2BD" /></span>
@@ -23,120 +22,80 @@
   </component>
 </template>
 
-<script>
-import { capitalizeFirstLetter } from '@/helpers'
-import { Colors } from '@/constants'
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
 
 import CpLoader from '@/components/feedback-indicators/CpLoader.vue'
 
-const ButtonAppearances = {
-  default: 'default',
-  primary: 'primary',
-  minimal: 'minimal',
+import { Colors } from '@/constants'
+import { capitalizeFirstLetter } from '@/helpers'
+
+enum ButtonAppearances {
+  DEFAULT = 'default',
+  PRIMARY = 'primary',
+  MINIMAL = 'minimal',
 }
 
-const ButtonTags = {
-  button: 'button',
-  a: 'a',
+enum ButtonTags {
+  BUTTON = 'button',
+  A = 'a',
 }
 
-const ButtonTypes = {
-  button: 'button',
-  submit: 'submit',
-  reset: 'reset',
+enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit',
+  RESET = 'reset',
 }
 
-export default {
-  components: {
-    CpLoader,
-  },
-  props: {
-    appearance: {
-      type: String,
-      default: ButtonAppearances.default,
-      validator: (value) => {
-        return {}.propertyIsEnumerable.call(ButtonAppearances, value)
-      },
-    },
-    color: {
-      type: String,
-      default: '',
-      validator: (value) => Object.values(Colors).includes(value) || value === '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    tag: {
-      type: String,
-      default: ButtonTags.button,
-      validator: (value) => {
-        return {}.propertyIsEnumerable.call(ButtonTags, value)
-      },
-    },
-    type: {
-      type: String,
-      default: ButtonTypes.button,
-      validator: (value) => {
-        return {}.propertyIsEnumerable.call(ButtonTypes, value)
-      },
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isSquare: {
-      type: Boolean,
-      default: false,
-    },
-    isLarge: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['click'],
-  computed: {
-    capitalizedAppearance() {
-      return capitalizeFirstLetter(this.appearance)
-    },
-    capitalizedColor() {
-      return capitalizeFirstLetter(this.color)
-    },
-    dynamicClasses() {
-      return [
-        `cpButton--is${this.capitalizedAppearance}`,
-        this.capitalizedColor && `cpButton--is${this.capitalizedColor}`,
-        {
-          'cpButton--isDisabled': this.isButtonDisabled,
-          'cpButton--isIcon': !this.hasLabel,
-          'cpButton--isLoading': this.isLoading,
-          'cpButton--isSquare': this.isSquare,
-          'cpButton--isLarge': this.isLarge,
-        },
-      ]
-    },
-    hasLabel() {
-      return !!this.$slots['default']
-    },
-    hasIconBefore() {
-      return !!this.$slots['icon-before']
-    },
-    hasIconAfter() {
-      return !!this.$slots['icon-after']
-    },
-    isButtonDisabled() {
-      if (this.disabled || this.isLoading) return true
-      return null
-    },
-  },
-  methods: {
-    handleClick($event) {
-      if (this.isButtonDisabled) return
+interface Props {
+  appearance?: ButtonAppearances
+  color?: Colors
+  disabled?: boolean
+  isLarge?: boolean
+  isLoading?: boolean
+  isSquare?: boolean
+  tag?: ButtonTags
+  type?: ButtonTypes
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appearance: ButtonAppearances.DEFAULT,
+  color: undefined,
+  disabled: false,
+  tag: ButtonTags.BUTTON,
+  type: ButtonTypes.BUTTON,
+  isLoading: false,
+  isSquare: false,
+  isLarge: false,
+})
+
+const slots = useSlots()
 
-      this.$emit('click', $event)
+const capitalizedAppearance = computed(() => capitalizeFirstLetter(props.appearance))
+
+const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
+
+const hasLabel = computed(() => !!slots.default)
+
+const hasIconBefore = computed(() => !!slots['icon-before'])
+
+const hasIconAfter = computed(() => !!slots['icon-after'])
+
+const isButtonDisabled = computed(() => props.disabled || props.isLoading)
+
+const dynamicClasses = computed(() => {
+  return [
+    `cpButton--is${capitalizedAppearance.value}`,
+    {
+      [`cpButton--is${capitalizedColor.value}`]: !!capitalizedColor.value,
+      'cpButton--isDisabled': isButtonDisabled.value,
+      'cpButton--isIcon': !hasLabel.value,
+      'cpButton--isLoading': props.isLoading,
+      'cpButton--isSquare': props.isSquare,
+      'cpButton--isLarge': props.isLarge,
     },
-  },
-}
+  ]
+})
 </script>
 
 <style lang="scss">

package/src/components/core/BaseInputLabel.vue

@@ -5,22 +5,16 @@
   </label>
 </template>
 
-<script>
-export default {
-  inheritAttrs: false,
-  props: {
-    isInvalid: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-  },
+<script setup lang="ts">
+interface Props {
+  isInvalid?: boolean
+  required?: boolean
 }
+
+withDefaults(defineProps<Props>(), {
+  isInvalid: false,
+  required: false,
+})
 </script>
 
 <style lang="scss">

package/src/components/core/BaseSelectClearButton.vue

@@ -4,7 +4,7 @@
   </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import CpIcon from '@/components/visual/CpIcon.vue'
 </script>
 

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

@@ -23,9 +23,9 @@
       :locale="locale"
       class="cpCalendar__datepicker"
       :class="dynamicClasses"
-      @date-one-selected="(date) => selectDate('dateOne', date)"
-      @date-two-selected="(date) => selectDate('dateTwo', date)"
-      @is-inline="(value) => (isInline = value)"
+      @date-one-selected="onDateSelected('dateOne', $event)"
+      @date-two-selected="onDateSelected('dateTwo', $event)"
+      @is-inline="onIsInline"
       @opened="() => (isDisabled = true)"
       @closed="() => (isDisabled = false)"
     >
@@ -86,172 +86,173 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { DateTime, Info, Interval } from 'luxon'
+import { ref, computed, watch } from 'vue'
 
 import CpButton from '@/components/buttons/CpButton.vue'
 import CpInput from '@/components/inputs/CpInput.vue'
 import CpIcon from '@/components/visual/CpIcon.vue'
-import CoreDatepicker from '@/libs/CoreDatepicker.vue'
 
 import { randomString, formatDates } from '@/helpers'
+import CoreDatepicker from '@/libs/CoreDatepicker.vue'
 
-export default {
-  name: 'CpCalendar',
-  components: {
-    CoreDatepicker,
-    CpInput,
-    CpIcon,
-    CpButton,
-  },
-  props: {
-    triggerElementId: {
-      type: String,
-      default: 'calendar-trigger-' + randomString(5),
-    },
-    closeAfterSelect: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    isError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    initDateOne: {
-      type: String,
-      default: '',
-      validator: (value) => {
-        return value === '' || value.length === 10
-      },
-    },
-    locale: {
-      type: String,
-      default: () => {
-        return navigator.language
-      },
-    },
-  },
-  emits: ['dates'],
-  data() {
-    return {
-      humanFormat: 'EEE DD',
-      dateOne: this.initDateOne || '',
-      dateTwo: '',
-      days: Info.weekdays('short', { locale: 'en-EN' }).map((day, value) => {
-        return { day, selected: false, value }
-      }),
-      recurenceDates: [],
-      mode: 'single',
-      triggerCalendar: false,
-      isInline: false,
-      isDisabled: null,
-    }
-  },
-  computed: {
-    selectedDays() {
-      return this.days.filter((day) => day.selected === true).map((day) => day.value + 1)
-    },
-    summary() {
-      const start = DateTime.fromISO(this.dateOne).toFormat(this.humanFormat)
-      const end = DateTime.fromISO(this.dateTwo).toFormat(this.humanFormat)
-
-      return {
-        start,
-        end,
-      }
-    },
-    isDaysDisplayed() {
-      return this.mode === 'range'
-    },
-    dynamicClasses() {
-      return { 'cpCalendar__datepicker--isInline': this.isInline }
-    },
-  },
-  watch: {
-    isInline(value) {
-      if (value) this.removeRecurency()
-    },
-  },
-  methods: {
-    done() {
-      this.emitToParent()
-      this.closeCalendar()
-    },
-    closeCalendar() {
-      this.triggerCalendar = !this.triggerCalendar
-    },
-    humanDateFormat(dateOne, dateTwo) {
-      return formatDates({ dateOne, dateTwo, format: this.humanFormat, locale: this.locale })
-    },
-    toggleDay(index) {
-      this.days[index].selected = !this.days[index].selected
-      this.recurenceDates = this.generateDates(this.dateOne, this.dateTwo, this.selectedDays)
-      this.emitToParent()
-    },
-    addRecurency() {
-      const dt = DateTime.local()
-      this.mode = 'range'
-
-      if (!this.dateOne) this.dateOne = dt.plus({ days: 1 }).toISODate()
-      if (!this.dateTwo) this.dateTwo = DateTime.fromISO(this.dateOne).plus({ days: 7 }).toISODate()
-    },
-    removeRecurency() {
-      this.mode = 'single'
-      this.recurenceDates = []
-      this.dateTwo = ''
-      this.days = Info.weekdays('short', { locale: 'en-EN' }).map((day, value) => {
-        return { day, selected: false, value }
-      })
-    },
-    emitToParent() {
-      let dates = [this.dateOne]
-      if (this.isDaysDisplayed) {
-        dates = this.recurenceDates.length ? this.datesToStringArray(this.recurenceDates) : []
-      }
-      return this.$emit('dates', dates)
-    },
-    generateDates(startDate, endDate, selectedWeekDaysIndex) {
-      const isoStartDate = DateTime.fromISO(startDate)
-      const isoEndDate = DateTime.fromISO(endDate)
+interface DayOption {
+  day: string
+  selected: boolean
+  value: number
+}
 
-      let selectedDaysFinalList = []
+interface Props {
+  closeAfterSelect?: boolean
+  errorMessage?: string
+  initDateOne?: string
+  isError?: boolean
+  label?: string
+  locale?: string
+  triggerElementId?: string
+}
 
-      const daysIntervalBetweenTwoDates = Interval.fromDateTimes(isoStartDate.startOf('day'), isoEndDate.endOf('day'))
-        .splitBy({ days: 1 })
-        .map((day) => day.start)
+interface Emits {
+  (e: 'dates', dates: string[]): void
+}
 
-      daysIntervalBetweenTwoDates.forEach((day) => {
-        const dayOfWeekAsNumber = Number(DateTime.fromISO(day).toFormat('c'))
+const props = withDefaults(defineProps<Props>(), {
+  triggerElementId: () => `calendar-trigger-${randomString()}`,
+  closeAfterSelect: false,
+  label: '',
+  isError: false,
+  errorMessage: '',
+  initDateOne: '',
+  locale: () => navigator.language,
+})
+
+const emit = defineEmits<Emits>()
+
+const humanFormat = 'EEE DD'
+const dateOne = ref(props.initDateOne || '')
+const dateTwo = ref('')
+const days = ref<DayOption[]>(
+  Info.weekdays('short', { locale: 'en-EN' }).map((day: string, value: number) => ({ day, selected: false, value })),
+)
+const recurenceDates = ref<string[]>([])
+const mode = ref<'single' | 'range'>('single')
+const triggerCalendar = ref(false)
+const isInline = ref(false)
+const isDisabled = ref(false)
+
+const selectedDays = computed(() => {
+  return days.value.filter((day) => day.selected === true).map((day) => day.value + 1)
+})
+
+const summary = computed(() => {
+  const start = DateTime.fromISO(dateOne.value).toFormat(humanFormat)
+  const end = DateTime.fromISO(dateTwo.value).toFormat(humanFormat)
+
+  return {
+    start,
+    end,
+  }
+})
 
-        if (selectedWeekDaysIndex.includes(dayOfWeekAsNumber)) {
-          selectedDaysFinalList.push(day)
-        }
-      })
+const isDaysDisplayed = computed(() => {
+  return mode.value === 'range'
+})
 
-      return selectedDaysFinalList
-    },
-    selectDate(key, value) {
-      this[key] = value
+const dynamicClasses = computed(() => {
+  return { 'cpCalendar__datepicker--isInline': isInline.value }
+})
 
-      if (this.isDaysDisplayed) {
-        this.recurenceDates = this.generateDates(this.dateOne, this.dateTwo, this.selectedDays)
-      }
+const done = (): void => {
+  emitToParent()
+  closeCalendar()
+}
+
+const onDateSelected = (dateSelector: 'dateOne' | 'dateTwo', date: string) => selectDate(dateSelector, date)
+
+const onIsInline = (value: boolean) => (isInline.value = value)
 
-      return this.emitToParent()
-    },
-    datesToStringArray(dates) {
-      return dates.map((date) => date.toISODate())
-    },
-  },
+const closeCalendar = (): void => {
+  triggerCalendar.value = !triggerCalendar.value
 }
+
+const humanDateFormat = (dateOne: string, dateTwo: string): string => {
+  return formatDates({ dateOne, dateTwo, format: humanFormat, locale: props.locale })
+}
+
+const toggleDay = (index: number): void => {
+  days.value[index].selected = !days.value[index].selected
+  recurenceDates.value = generateDates(dateOne.value, dateTwo.value, selectedDays.value)
+  emitToParent()
+}
+
+const addRecurency = (): void => {
+  const dt = DateTime.local()
+  mode.value = 'range'
+
+  if (!dateOne.value) dateOne.value = dt.plus({ days: 1 }).toISODate()
+  if (!dateTwo.value) dateTwo.value = DateTime.fromISO(dateOne.value).plus({ days: 7 }).toISODate()
+}
+
+const removeRecurency = (): void => {
+  mode.value = 'single'
+  recurenceDates.value = []
+  dateTwo.value = ''
+  days.value = Info.weekdays('short', { locale: 'en-EN' }).map((day: string, value: number) => {
+    return { day, selected: false, value }
+  })
+}
+
+const emitToParent = (): void => {
+  let dates = [dateOne.value]
+  if (isDaysDisplayed.value) {
+    dates = recurenceDates.value.length ? datesToStringArray(recurenceDates.value) : []
+  }
+  return emit('dates', dates)
+}
+
+const generateDates = (startDate: string, endDate: string, selectedWeekDaysIndex: number[]): string[] => {
+  const isoStartDate = DateTime.fromISO(startDate)
+  const isoEndDate = DateTime.fromISO(endDate)
+
+  let selectedDaysFinalList: string[] = []
+
+  const daysIntervalBetweenTwoDates = Interval.fromDateTimes(isoStartDate.startOf('day'), isoEndDate.endOf('day'))
+    .splitBy({ days: 1 })
+    .map((day: typeof Interval) => day.start)
+
+  daysIntervalBetweenTwoDates.forEach((day: string) => {
+    const dayOfWeekAsNumber = Number(DateTime.fromISO(day).toFormat('c'))
+
+    if (selectedWeekDaysIndex.includes(dayOfWeekAsNumber)) {
+      selectedDaysFinalList.push(day)
+    }
+  })
+
+  return selectedDaysFinalList
+}
+
+const selectDate = (key: 'dateOne' | 'dateTwo', value: string): void => {
+  if (key === 'dateOne') {
+    dateOne.value = value
+  } else {
+    dateTwo.value = value
+  }
+
+  if (isDaysDisplayed.value) {
+    recurenceDates.value = generateDates(dateOne.value, dateTwo.value, selectedDays.value)
+  }
+
+  return emitToParent()
+}
+
+const datesToStringArray = (dates: string[]): string[] => {
+  return dates.map((date) => DateTime.fromISO(date).toISODate() || '')
+}
+
+watch(isInline, (value) => {
+  if (value) removeRecurency()
+})
 </script>
 
 <style lang="scss">