@citizenplane/pimp 6.4.0 → 7.0.4

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

@@ -49,10 +49,10 @@
           placeholder="Input placeholder"
           style="font-size: 18px"
         >
-          <map-pin-icon slot="input-icon" />
+          <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input v-model="inputs.icons" label="Input with icon before" type="text" placeholder="Input placeholder">
-          <map-pin-icon slot="input-icon" />
+          <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input
           v-model="inputs.icons"
@@ -61,7 +61,9 @@
           placeholder="Input placeholder"
           style="font-size: 14px"
         >
-          <span slot="input-icon-after">cm</span>
+          <template #input-icon-after>
+            <span>cm</span>
+          </template>
         </cp-input>
       </div>
     </div>
@@ -69,7 +71,7 @@
       <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>
-          <map-pin-icon slot="input-icon" />
+          <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input
           v-model="inputs.disabled"
@@ -78,7 +80,7 @@
           placeholder="Input placeholder"
           disabled
         >
-          <map-pin-icon slot="input-icon" />
+          <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input
           v-model="inputs.disabled"
@@ -88,7 +90,9 @@
           disabled
           is-invalid
         >
-          <span slot="input-icon-after">cm</span>
+          <template #input-icon-after>
+            <span>cm</span>
+          </template>
         </cp-input>
       </div>
     </div>
@@ -103,7 +107,7 @@
           is-invalid
           error-message="This input has an error"
         >
-          <map-pin-icon slot="input-icon" />
+          <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input
           v-model="inputs.error"
@@ -113,7 +117,7 @@
           is-invalid
           error-message="This input has an error"
         >
-          <map-pin-icon slot="input-icon" />
+          <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input
           v-model="inputs.error"
@@ -123,7 +127,9 @@
           is-invalid
           error-message="This input has an error"
         >
-          <span slot="input-icon-after">cm</span>
+          <template #input-icon-after>
+            <span>cm</span>
+          </template>
         </cp-input>
       </div>
     </div>
@@ -144,10 +150,9 @@
       <div class="sectionSimpleInputs__inputs">
         <cp-input
           v-model="inputs.poop"
-          label="This input generates a console error due to vue-the-mask"
+          label="Type number, masked ###"
           type="number"
           placeholder="Input placeholder"
-          :masked="true"
           mask="###"
         />
         <cp-input v-model="inputs.number" label="Input type number" type="number" placeholder="Input placeholder" />
@@ -174,7 +179,6 @@
           v-model="inputs.mask"
           label="Date masked input"
           type="text"
-          :masked="true"
           placeholder="00/00/0000"
           mask="##/##/####"
         />
@@ -205,8 +209,10 @@
       <div class="sectionSimpleInputs__inputs">
         <cp-input v-model="inputs.large" label="Large input" type="text" placeholder="Input placeholder" is-large />
         <cp-input v-model="inputs.large" label="Large input" type="text" placeholder="Input placeholder" is-large>
-          <map-pin-icon slot="input-icon" />
-          <span slot="input-icon-after">cm</span>
+          <template #input-icon><cp-icon type="map-pin" /></template>
+          <template #input-icon-after>
+            <span>cm</span>
+          </template>
         </cp-input>
       </div>
     </div>
@@ -214,11 +220,7 @@
 </template>
 
 <script>
-import { MapPinIcon } from 'vue-feather-icons'
 export default {
-  components: {
-    MapPinIcon,
-  },
   data() {
     return {
       inputs: {

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

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer'
+import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
 
 export default {
   components: {

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

@@ -30,7 +30,7 @@
         <cp-checkbox
           v-for="({ label, value, disabled }, index) in checkboxGroup"
           :key="`checkbox${index}`"
-          v-model="checkboxGroupSelectOption"
+          v-model:value="checkboxGroupSelectOption"
           :checkbox-value="value"
           :checkbox-label="label"
           group-name="cp-checkbox"
@@ -42,11 +42,11 @@
       <h3>Simple checkbox</h3>
       <span>Selected value: {{ simpleCheckbox }}</span>
       <div class="sectionToggles__toggle">
-        <cp-checkbox v-model="simpleCheckbox" checkbox-label="label" group-name="simple-checkbox" />
+        <cp-checkbox v-model:value="simpleCheckbox" checkbox-label="label" group-name="simple-checkbox" />
       </div>
       <div class="sectionToggles__toggle">
         <cp-checkbox
-          v-model="simpleCheckbox"
+          v-model:value="simpleCheckbox"
           checkbox-label="Purple reversed label checkbox"
           group-name="simple-checkbox"
           :color="Colors.PURPLE"
@@ -58,26 +58,14 @@
       <h3>Radio</h3>
       <span>Selected value: {{ radioGroupSelectedOption }}</span>
       <div class="sectionToggles__toggle">
-        <cp-radio
-          v-for="({ label, value, dimensions, price, disabled, color }, index) in radioGroup"
-          :key="index"
-          v-model="radioGroupSelectedOption"
-          :radio-value="value"
-          :radio-label="label"
-          :radio-description="dimensions"
-          :additional-data="price"
-          group-name="cp-radio"
-          :is-selected="isRadioSelected(value)"
-          :is-disabled="disabled"
-          :color="color"
-        />
+        <cp-radio v-model="radioGroupSelectedOption" :options="radioGroup" group-name="cp-radio" color="purple" />
       </div>
     </div>
   </section-container>
 </template>
 
 <script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer'
+import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
 
 import { Colors } from '@/constants'
 
@@ -91,41 +79,40 @@ export default {
       cpSwitchState: true,
       radioGroup: [
         {
-          value: 'first_value',
-          label: 'first value',
-          dimensions: 'default',
-          price: 'default color',
+          value: 'basketball',
+          label: 'Basketball',
+          description: 'default',
+          additionalData: 'default color',
         },
         {
-          value: 'second_value',
-          label: 'second value',
-          price: 'disabled',
+          value: 'football',
+          label: 'Football',
+          additionalData: 'disabled',
           disabled: true,
         },
         {
-          value: 'third_value',
-          label: 'third value',
-          price: Colors.PURPLE,
-          color: Colors.PURPLE,
+          value: 'handball',
+          label: 'Handball',
+          additionalData: 'More data',
         },
       ],
       checkboxGroup: [
         {
-          value: 'first_value',
-          label: 'first value',
+          value: 'ski',
+          label: 'Ski',
         },
         {
-          value: 'second_value',
-          label: 'second value',
+          value: 'snowboard',
+          label: 'Snowboard',
           disabled: true,
         },
         {
-          value: 'third_value',
-          label: 'third value',
+          value: 'wakeboard',
+          label: 'Wake board',
         },
       ],
-      radioGroupSelectedOption: 'second_value',
-      checkboxGroupSelectOption: ['second_value'],
+      radioGroupSelectedOption: 'football',
+      checkboxGroupSelectOption: ['snowboard'],
       simpleCheckbox: true,
     }
   },

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

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer'
+import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
 
 export default {
   components: {

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

@@ -3,7 +3,7 @@
     <cp-input
       type="text"
       :input-id="triggerElementId"
-      :value="humanDateFormat(dateOne, dateTwo)"
+      :model-value="humanDateFormat(dateOne, dateTwo)"
       placeholder="Select a date"
       :is-invalid="isError"
       :error-message="errorMessage"
@@ -15,12 +15,13 @@
       :date-one="dateOne"
       :date-two="dateTwo"
       :customized-dates="[{ cssClass: 'recurency', dates: datesToStringArray(recurenceDates) }]"
-      :is-recurcive="isDaysDisplayed"
       :trigger-element-id="triggerElementId"
       :mode="mode"
       :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)"
@@ -41,8 +42,8 @@
                 >
                   <div class="checkbox">
                     <transition name="fade" mode="out-in">
-                      <div v-if="!selected" class="checkbox--border"></div>
-                      <check-icon v-if="selected"></check-icon>
+                      <div v-if="!selected" class="checkbox--border" />
+                      <cp-icon v-else type="check" />
                     </transition>
                   </div>
                   <span>{{ day }}</span>
@@ -51,7 +52,7 @@
             </div>
             <div class="asd__recurency--summary">
               <div class="asd__recurency--text">
-                <refresh-cw-icon v-if="recurenceDates.length > 0" />
+                <cp-icon v-if="recurenceDates.length > 0" type="refresh-cw" />
                 <span v-if="recurenceDates.length > 0">
                   Between the
                   <strong>{{ summary.start }}</strong> and the
@@ -85,12 +86,12 @@
 </template>
 
 <script>
-import { CheckIcon, RefreshCwIcon } from 'vue-feather-icons'
 import { DateTime, Info, Interval } from 'luxon'
 
-import CpButton from '@/components/buttons/CpButton'
-import CpInput from '@/components/inputs/CpInput'
-import CoreDatepicker from '@/libs/CoreDatepicker'
+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'
 
@@ -98,9 +99,8 @@ export default {
   name: 'CpCalendar',
   components: {
     CoreDatepicker,
-    CheckIcon,
-    RefreshCwIcon,
     CpInput,
+    CpIcon,
     CpButton,
   },
   props: {
@@ -132,6 +132,7 @@ export default {
       },
     },
   },
+  emits: ['dates'],
   data() {
     return {
       humanFormat: 'EEE DD',
@@ -144,7 +145,7 @@ export default {
       mode: 'single',
       triggerCalendar: false,
       isInline: false,
-      isDisabled: false,
+      isDisabled: null,
     }
   },
   computed: {
@@ -163,6 +164,9 @@ export default {
     isDaysDisplayed() {
       return this.mode === 'range'
     },
+    dynamicClasses() {
+      return { 'cpCalendar__datepicker--isInline': this.isInline }
+    },
   },
   watch: {
     isInline(value) {
@@ -249,12 +253,54 @@ export default {
 .fade-leave-active {
   transition: opacity 100ms;
 }
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
   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

@@ -1,7 +1,7 @@
 <template>
   <div class="cpDate" :class="dynamicClasses">
     <label v-if="label" class="cpDate__label" :for="cpDateId">
-      {{ formattedLabel }} <alert-circle-icon v-if="!isDateValid" />
+      {{ formattedLabel }} <cp-icon v-if="!isDateValid" type="alert-circle" />
     </label>
     <div class="cpDate__inputs">
       <input
@@ -49,20 +49,16 @@
 
 <script>
 import { Info, DateTime } from 'luxon'
-import { AlertCircleIcon } from 'vue-feather-icons'
 
 import { randomString } from '@/helpers'
 
 const HUMAN_MAX_AGE = 120
 
 export default {
-  components: {
-    AlertCircleIcon,
-  },
   props: {
-    value: {
+    modelValue: {
       type: [String, Date],
-      required: true,
+      default: '',
     },
     minDate: {
       type: [String, Date],
@@ -85,6 +81,7 @@ export default {
       default: false,
     },
   },
+  emits: ['update:modelValue', 'on-validation'],
   data() {
     return {
       day: this.initDateToken('day'),
@@ -222,13 +219,14 @@ export default {
   },
   methods: {
     initDateToken(token) {
-      if (DateTime.fromISO(this.value).invalid) return ''
-      return DateTime.fromISO(this.value)[token]
+      if (DateTime.fromISO(this.modelValue).invalid) return ''
+
+      return DateTime.fromISO(this.modelValue)[token]
     },
     handleUpdate() {
-      const value = this.isDateValid ? this.isoDate : 'Invalid Datetime'
+      const dateValue = this.isDateValid ? this.isoDate : 'Invalid Datetime'
 
-      this.$emit('input', value)
+      this.$emit('update:modelValue', dateValue)
     },
     focusOnFirstEmptyInput() {
       if (!this.isDayValid) {
@@ -284,7 +282,7 @@ export default {
     margin: pxToRem(6) 0;
     font-size: pxToRem(14);
 
-    > svg {
+    svg {
       margin-left: $space-sm;
       width: pxToRem(16);
       height: pxToRem(16);
@@ -335,7 +333,7 @@ export default {
       right: pxToEm(12);
       width: pxToRem(20);
       height: pxToRem(20);
-      background-image: url('~@/assets/images/icons/chevron-down-icon.svg');
+      background-image: url('@/assets/images/icons/chevron-down-icon.svg');
       background-size: cover;
       transform: translateY(-50%);
       content: '';

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

@@ -2,10 +2,9 @@
   <div class="cpDatepicker">
     <cp-input
       v-show="!isInline"
-      :ref="datePickerReferenceId"
+      :model-value="inputComputedValue"
       type="text"
       :input-id="datePickerReferenceId"
-      :value="inputComputedValue"
       :placeholder="placeholder"
       :is-invalid="isError"
       :error-message="errorMessage"
@@ -23,17 +22,19 @@
       :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)"
-      @closed="() => (isDisabled = false)"
+      @closed="() => (isDisabled = null)"
     />
   </div>
 </template>
 
 <script>
-import CoreDatepicker from '@/libs/CoreDatepicker'
-import CpInput from '@/components/inputs/CpInput'
+import CoreDatepicker from '@/libs/CoreDatepicker.vue'
+import CpInput from '@/components/inputs/CpInput.vue'
 import { randomString, formatDates } from '@/helpers'
 import { DateTime } from 'luxon'
 
@@ -114,13 +115,14 @@ export default {
       default: false,
     },
   },
+  emits: ['dates'],
   data() {
     return {
       calendarFormat: 'YYYY-MM-DD',
       humanFormat: 'EEE DD',
       dateOne: this.initDateOne || '',
       dateTwo: this.mode === 'range' ? this.initDateTwo : '',
-      isDisabled: false,
+      isDisabled: null,
       datePickerReferenceId: this.triggerElementId || randomString(),
     }
   },
@@ -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

@@ -1,29 +1,20 @@
 <template>
   <div v-if="isDisplayed" class="cpAlert" :class="`cpAlert--${intent}`">
-    <div :is="alertIcon" class="cpAlert__icon" />
+    <cp-icon :type="alertIcon" class="cpAlert__icon" />
     <div class="cpAlert__body">
       <cp-heading v-if="title" heading-level="h4" :size="400" class="cpAlert__title">{{ title }}</cp-heading>
       <div v-if="hasContent" class="cpAlert__content">
         <slot />
       </div>
     </div>
-    <button v-if="isClosable" class="cpAlert__button" @click="dismissAlert"><x-icon /></button>
+    <button v-if="isClosable" class="cpAlert__button" @click="dismissAlert"><cp-icon type="x" /></button>
   </div>
 </template>
 
 <script>
-import { CheckCircleIcon, InfoIcon, AlertTriangleIcon, AlertOctagonIcon, XIcon } from 'vue-feather-icons'
-
 import { Intent } from '@/utils/constants'
 
 export default {
-  components: {
-    CheckCircleIcon,
-    InfoIcon,
-    AlertTriangleIcon,
-    AlertOctagonIcon,
-    XIcon,
-  },
   props: {
     intent: {
       type: String,
@@ -77,9 +68,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;
   }
 }
 
@@ -136,7 +126,7 @@ export default {
     padding: $space-sm;
     color: inherit;
 
-    > svg {
+    svg {
       margin: 0;
       width: pxToRem(18);
       height: pxToRem(18);