@citizenplane/pimp 7.0.1 → 8.0.1

package/src/components/core/playground-sections/SectionDatePickers.vue

@@ -5,7 +5,7 @@
         Default date input: {{ cpDate }}
       </cp-heading>
       <div class="sectionDatePickers__datepickers">
-        <cp-date v-model="cpDate" label="Default date input" class="sectionDatePickers__date" />
+        <cp-date v-model="cpDate" label="Default date input" class="sectionDatePickers__date" :is-invalid="false" />
       </div>
     </div>
     <div class="sectionDatePickers__type">
@@ -16,6 +16,19 @@
         <cp-datepicker label="Simple datepicker" :init-date-one="date" @dates="setDate" />
         <cp-button class="sectionDatePickers__button" @click="resetDate">Reset date</cp-button>
       </div>
+      <div class="sectionDatePickers__datepickers">
+        <div class="sectionDatePickers__wrapper">
+          <cp-input id="datepicker-trigger" label="CoreDatepicker" placeholder="CoreDatepicker" />
+          <cp-core-datepicker
+            class="sectionDatePickers__custom"
+            mode="range"
+            close-after-select
+            is-inline
+            @opened="() => (isDepartureDatepickerOpen = true)"
+            @closed="() => (isDepartureDatepickerOpen = false)"
+          />
+        </div>
+      </div>
     </div>
     <div class="sectionDatePickers__type">
       <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
@@ -23,6 +36,7 @@
       </cp-heading>
       <div class="sectionDatePickers__datepickers">
         <cp-datepicker label="Range datepicker" single-month is-inline :init-date-one="date" @dates="setDate" />
+        <cp-datepicker label="Range datepicker" is-inline :init-date-one="date" @dates="setDate" />
       </div>
     </div>
     <div class="sectionDatePickers__type">
@@ -84,6 +98,7 @@ export default {
     return {
       cpDate: '',
       date: null,
+      isDepartureDatepickerOpen: false,
     }
   },
   methods: {
@@ -125,5 +140,15 @@ export default {
   &__button {
     margin-left: $space-lg;
   }
+
+  &__wrapper {
+    position: relative;
+  }
+
+  &__custom {
+    position: absolute;
+    top: calc(100% + 16px);
+    left: 0;
+  }
 }
 </style>

package/src/components/core/playground-sections/SectionSimpleInputs.vue

@@ -70,7 +70,12 @@
     <div class="sectionSimpleInputs__type">
       <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Disabled</cp-heading>
       <div class="sectionSimpleInputs__inputs">
-        <cp-input label="Empty disabled input with icon before" type="text" placeholder="Input placeholder" disabled>
+        <cp-input
+          label="Empty disabled input with icon before"
+          type="text"
+          placeholder="Input placeholder"
+          :disabled="true"
+        >
           <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input

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

@@ -1,8 +1,8 @@
 <template>
   <div class="cpCalendar">
     <cp-input
+      :id="triggerElementId"
       type="text"
-      :input-id="triggerElementId"
       :model-value="humanDateFormat(dateOne, dateTwo)"
       placeholder="Select a date"
       :is-invalid="isError"
@@ -20,6 +20,8 @@
       :close-after-select="closeAfterSelect"
       :close-calendar="triggerCalendar"
       :inline="isInline"
+      class="cpCalendar__datepicker"
+      :class="dynamicClasses"
       @date-one-selected="(date) => selectDate('dateOne', date)"
       @date-two-selected="(date) => selectDate('dateTwo', date)"
       @is-inline="(value) => (isInline = value)"
@@ -162,6 +164,9 @@ export default {
     isDaysDisplayed() {
       return this.mode === 'range'
     },
+    dynamicClasses() {
+      return { 'cpCalendar__datepicker--isInline': this.isInline }
+    },
   },
   watch: {
     isInline(value) {
@@ -253,7 +258,49 @@ export default {
   opacity: 0;
 }
 .cpCalendar {
-  position: relative;
+  // Opening transition layout adaptation
+  .asd__fade-enter-from {
+    transform: translateX(-50%) scale(0.8);
+  }
+
+  .asd__fade-enter-to {
+    transform: translateX(-50%) scale(1);
+  }
+
+  &__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);
+    }
+  }
 
   &__input input:disabled {
     background-color: $neutral-light;

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

@@ -5,22 +5,26 @@
     </label>
     <div class="cpDate__inputs">
       <input
-        ref="day"
         v-model="day"
+        v-maska="'##'"
         placeholder="DD"
         class="cpDate__day"
-        type="number"
         inputmode="numeric"
-        :min="1"
-        :max="31"
         maxlength="2"
         :required="required"
         :disabled="disabled"
+        :autocomplete="autocompleteFields.day"
       />
       <div class="cpDate__divider" />
       <div class="cpDate__month" :class="selectDynamicClass">
-        <select :id="cpDateId" v-model="month" :required="required" :disabled="disabled">
-          <option value disabled>Month</option>
+        <select
+          :id="cpDateId"
+          v-model="month"
+          :required="required"
+          :disabled="disabled"
+          :autocomplete="autocompleteFields.month"
+        >
+          <option value>Month</option>
           <option v-for="(monthItem, index) in months" :key="index" :value="monthItem.value">
             {{ monthItem.label }}
           </option>
@@ -28,21 +32,19 @@
       </div>
       <div class="cpDate__divider" />
       <input
-        ref="year"
         v-model="year"
+        v-maska="'####'"
         placeholder="YYYY"
         class="cpDate__year"
-        type="number"
         inputmode="numeric"
-        :min="minYear"
-        :max="maxYear"
         maxlength="4"
         :disabled="disabled"
         :required="required"
+        :autocomplete="autocompleteFields.year"
       />
     </div>
     <transition-expand>
-      <div v-if="!isDateValid" class="cpDate__errorMessage">{{ errorMessage }}</div>
+      <div v-if="advancedErrorMessage" class="cpDate__errorMessage">{{ advancedErrorMessage }}</div>
     </transition-expand>
   </div>
 </template>
@@ -80,6 +82,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    autocompleteBirthday: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'on-validation'],
   data() {
@@ -144,13 +158,16 @@ export default {
       return this.day === '' && this.month === '' && this.year === ''
     },
     isDateValid() {
-      if (!this.required && this.areInputsEmpty) return true
+      if (this.areInputsEmpty && !this.errorMessage) return true
 
-      const isValid =
-        this.isDayValid && this.isMonthValid && this.isYearValid && this.isDateBeforeMaxDate && this.isDateAfterMinDate
-      this.$emit('on-validation', isValid)
-
-      return isValid
+      return (
+        !this.isInvalid &&
+        this.isDayValid &&
+        this.isMonthValid &&
+        this.isYearValid &&
+        this.isDateBeforeMaxDate &&
+        this.isDateAfterMinDate
+      )
     },
     isDayValid() {
       return this.day >= 1 && this.day <= this.monthMaxDay
@@ -164,10 +181,10 @@ export default {
     areAllFieldsEmpty() {
       return !this.day && !this.month && !this.year
     },
-    errorMessage() {
-      if (this.areAllFieldsEmpty && this.required) {
-        return `The ${this.label} field is required.`
-      }
+    advancedErrorMessage() {
+      if (this.isDateValid) return ''
+
+      if (this.errorMessage) return this.errorMessage
 
       if (!this.isMonthValid) {
         return 'Month is required.'
@@ -204,6 +221,15 @@ export default {
         'cpDate__month--isEmpty': !this.month,
       }
     },
+    autocompleteFields() {
+      if (!this.autocompleteBirthday) return 'off'
+
+      return {
+        day: 'bday-day',
+        month: 'bday-month',
+        year: 'bday-year',
+      }
+    },
   },
   watch: {
     day() {
@@ -211,7 +237,6 @@ export default {
     },
     month() {
       this.handleUpdate()
-      this.focusOnFirstEmptyInput()
     },
     year() {
       this.handleUpdate()
@@ -224,17 +249,9 @@ export default {
       return DateTime.fromISO(this.modelValue)[token]
     },
     handleUpdate() {
-      const dateValue = this.isDateValid ? this.isoDate : 'Invalid Datetime'
+      this.$emit('update:modelValue', this.isoDate)
 
-      this.$emit('update:modelValue', dateValue)
-    },
-    focusOnFirstEmptyInput() {
-      if (!this.isDayValid) {
-        this.$refs.day.focus()
-        return
-      }
-
-      if (!this.isYearValid) this.$refs.year.focus()
+      this.$emit('on-validation', this.isDateValid)
     },
   },
 }
@@ -273,14 +290,14 @@ export default {
 .cpDate {
   input::placeholder,
   &__month--isEmpty {
-    color: $neutral-dark-1;
+    color: $neutral-dark;
   }
 
   &__label {
     display: flex;
     align-items: center;
-    margin: pxToRem(6) 0;
-    font-size: pxToRem(14);
+    margin-bottom: pxToEm(6);
+    font-size: pxToEm(14);
 
     svg {
       margin-left: $space-sm;
@@ -331,8 +348,8 @@ export default {
       position: absolute;
       top: 50%;
       right: pxToEm(12);
-      width: pxToRem(20);
-      height: pxToRem(20);
+      width: pxToEm(20);
+      height: pxToEm(20);
       background-image: url('@/assets/images/icons/chevron-down-icon.svg');
       background-size: cover;
       transform: translateY(-50%);
@@ -343,9 +360,14 @@ export default {
     select {
       @extend %u-text-ellipsis;
       width: 100%;
-      padding: pxToRem(12) pxToRem(40) pxToRem(12) pxToRem(12);
+      padding: pxToEm(12) pxToEm(40) pxToEm(12) pxToEm(12);
       color: inherit;
       cursor: pointer;
+
+      &:focus-visible {
+        text-decoration: underline;
+        font-weight: 500;
+      }
     }
 
     select > option:not(:disabled) {
@@ -395,7 +417,7 @@ export default {
     margin-top: pxToRem(6);
     color: $error-color;
     font-weight: 500;
-    font-size: pxToRem(14);
+    font-size: pxToEm(14);
   }
 }
 </style>

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

@@ -2,9 +2,9 @@
   <div class="cpDatepicker">
     <cp-input
       v-show="!isInline"
+      :id="datePickerReferenceId"
       :model-value="inputComputedValue"
       type="text"
-      :input-id="datePickerReferenceId"
       :placeholder="placeholder"
       :is-invalid="isError"
       :error-message="errorMessage"
@@ -22,6 +22,8 @@
       :months-to-show="numberOfMonths"
       :min-date="computedMinDate"
       :max-date="maxDate"
+      class="cpDatepicker__datepicker"
+      :class="{ 'cpDatepicker__datepicker--isInline': isInline }"
       @date-one-selected="(date) => selectDate('dateOne', date)"
       @date-two-selected="(date) => selectDate('dateTwo', date)"
       @opened="() => (isDisabled = true)"
@@ -134,6 +136,9 @@ export default {
     computedMinDate() {
       return this.allowPastDates ? '' : this.minDate
     },
+    dynamicClasses() {
+      return { 'cpDatepicker__datepicker--isInline': this.isInline }
+    },
   },
   watch: {
     initDateOne(newValue, oldValue) {
@@ -146,7 +151,7 @@ export default {
   methods: {
     selectDate(dateType, dateValue) {
       this[dateType] = dateValue
-      this.$emit('dates', [this.dateOne, ...(this.dateTwo && this.dateTwo)])
+      this.$emit('dates', [this.dateOne, ...(this.dateTwo && [this.dateTwo])])
     },
     updateDateValue(date, newValue, oldValue) {
       if (newValue !== oldValue) {
@@ -159,10 +164,52 @@ export default {
 
 <style lang="scss">
 .cpDatepicker {
-  position: relative;
+  // 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: $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/feedback-indicators/CpAlert.vue

@@ -19,6 +19,7 @@ export default {
     intent: {
       type: String,
       required: true,
+      default: Intent.INFO.value,
       validator(value) {
         const intentValues = Object.values(Intent).map((item) => item.value)
         return intentValues.includes(value)
@@ -68,9 +69,8 @@ export default {
     }
   }
 
-  &--is#{$className} &__button:focus {
-    outline: none;
-    box-shadow: 0 0 0 pxToEm(3) scale-color($color, $lightness: 70%);
+  &--#{$className} button:focus-visible {
+    outline: pxToRem(2) solid $color;
   }
 }
 
@@ -79,7 +79,7 @@ export default {
   display: flex;
   align-items: flex-start;
   padding: pxToRem(10);
-  font-size: pxToRem(14);
+  font-size: pxToEm(14);
   border-radius: pxToRem(4);
   overflow: hidden;
 

package/src/components/index.js

@@ -1,3 +1,10 @@
+// PLUGINS
+import maska from 'maska'
+
+// DIRECTIVES
+import ClickOutside from '../directives/ClickOutside'
+
+// COMPONENTS
 // Atomic elements
 import CpBadge from './atomic-elements/CpBadge.vue'
 
@@ -9,6 +16,7 @@ import CpButton from './buttons/CpButton.vue'
 
 // Date pickers
 import CpDate from './date-pickers/CpDate.vue'
+import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpDatepicker from './date-pickers/CpDatepicker.vue'
 import CpCalendar from './date-pickers/CpCalendar.vue'
 
@@ -45,6 +53,7 @@ const Components = {
   CpHeading,
   CpButton,
   CpDate,
+  CpCoreDatepicker,
   CpDatepicker,
   CpCalendar,
   CpAlert,
@@ -66,6 +75,12 @@ const Pimp = {
     Object.keys(Components).forEach((name) => {
       app.component(name, Components[name])
     })
+
+    // Directives
+    app.directive('click-outside', ClickOutside)
+
+    // Plugins
+    app.use(maska)
   },
 }