@citizenplane/pimp 7.0.1 → 8.0.1

package/src/components/inputs/CpInput.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="cpInput" :class="dynamicClasses" :aria-disabled="disabled" @click="focusOnInput">
-    <base-input-label v-if="label" :for="inputReferenceId"> {{ inputLabelTitle }}</base-input-label>
+  <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
+    <base-input-label v-if="label" :for="inputIdentifier" class="cpInput__label">
+      {{ inputLabelTitle }}
+    </base-input-label>
     <div
       ref="cpInputContainer"
       :class="{ 'cpInput__container--hasBeforeIcon': hasBeforeIcon }"
@@ -19,23 +21,21 @@
         <slot name="input-icon-after" />
       </div>
       <input
-        :id="inputReferenceId"
+        :id="inputIdentifier"
         v-maska="mask"
-        :disabled="disabled"
-        :name="name"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :required="required"
-        :autocomplete="autocomplete"
-        :inputmode="inputMode"
-        :type="type"
         :value="modelValue"
+        v-bind="restAttributes"
         class="cpInput__inner"
         @input="handleChange"
       />
     </div>
     <transition-expand>
-      <base-input-label v-if="isInputInvalid && errorMessage" :is-invalid="isInvalid" :for="inputReferenceId">
+      <base-input-label
+        v-if="isInputInvalid && errorMessage"
+        :is-invalid="isInvalid"
+        :for="inputIdentifier"
+        class="cpInput__label cpInput__label--isAfter"
+      >
         {{ errorMessage }}
       </base-input-label>
     </transition-expand>
@@ -43,27 +43,14 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import { randomString } from '@/helpers'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
 import CpIcon from '@/components/visual/CpIcon.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
-const inputTypesList = [
-  'text',
-  'date',
-  'datetime-local',
-  'email',
-  'month',
-  'number',
-  'password',
-  'search',
-  'tel',
-  'time',
-  'url',
-  'week',
-]
-
 export default {
   name: 'CpInput',
   components: {
@@ -71,6 +58,7 @@ export default {
     BaseInputLabel,
     TransitionExpand,
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Boolean],
@@ -80,46 +68,10 @@ export default {
       type: String,
       default: '',
     },
-    placeholder: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
     inputId: {
       type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: inputTypesList[0],
-      validator: (value) => {
-        return inputTypesList.includes(value)
-      },
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
       default: null,
     },
-    autocomplete: {
-      type: String,
-      default: 'on',
-    },
-    inputMode: {
-      type: String,
-      default: 'text',
-    },
     isInvalid: {
       type: Boolean,
       default: false,
@@ -146,18 +98,38 @@ export default {
     },
   },
   emits: ['update:modelValue'],
+  setup(props, { attrs }) {
+    // class is a reserved work, we can't remove 'class' property from attrs
+    // eslint-disable-next-line no-unused-vars
+    const { ['class']: value, id, ...restAttributes } = attrs
+    const inputIdentifier = id === undefined ? ref(randomString()) : id
+
+    return {
+      inputIdentifier,
+      restAttributes,
+    }
+  },
   data() {
     return {
-      inputReferenceId: this.inputId,
       isDOMElementValid: true,
     }
   },
   computed: {
+    isDisabled() {
+      return this.checkAttribute('disabled')
+    },
+    isRequired() {
+      return this.checkAttribute('required')
+    },
+    isReadonly() {
+      return this.checkAttribute('readonly')
+    },
     dynamicClasses() {
       return [
+        this.$attrs.class,
         {
           'cpInput--isInvalid': this.isInputInvalid,
-          'cpInput--isDisabled': this.disabled,
+          'cpInput--isDisabled': this.isDisabled,
           'cpInput--hasNoBorder': this.removeBorder,
           'cpInput--isLarge': this.isLarge,
         },
@@ -171,12 +143,14 @@ export default {
       }
     },
     inputLabelTitle() {
-      const requiredLabel = this.required && this.label ? '*' : ''
+      if (this.label === '') return ''
+
+      const requiredMark = this.isRequired ? '*' : ''
 
-      return `${this.label} ${requiredLabel}`
+      return `${this.label} ${requiredMark}`
     },
     isValid() {
-      return this.modelValue && !this.readonly && !this.isInvalid && this.isDOMElementValid
+      return this.modelValue && !this.isReadonly && !this.isInvalid && this.isDOMElementValid
     },
     isInputInvalid() {
       return this.isInvalid || !this.isDOMElementValid
@@ -188,15 +162,11 @@ export default {
       return !!this.$slots['input-icon-after']
     },
     DOMElement() {
-      return this.$refs.cpInputContainer.children.namedItem(this.inputReferenceId)
+      return this.$refs.cpInputContainer.children.namedItem(this.inputIdentifier)
     },
   },
   mounted() {
-    if (!this.inputReferenceId) this.inputReferenceId = randomString()
-
-    this.$nextTick(() => {
-      this.checkInputValidity()
-    })
+    this.$nextTick(() => this.checkInputValidity())
   },
   methods: {
     handleChange(e) {
@@ -214,6 +184,9 @@ export default {
         (this.DOMElement.validity && this.DOMElement.validity.valid) ||
         (this.DOMElement.validity && this.DOMElement.validity.valueMissing)
     },
+    checkAttribute(attribute) {
+      return this.$attrs[attribute] === '' || this.$attrs[attribute] === true
+    },
   },
 }
 </script>
@@ -229,7 +202,6 @@ export default {
   position: relative;
   display: flex;
   flex-direction: column;
-  font-size: pxToRem(16);
 
   &__container {
     z-index: 1;
@@ -310,6 +282,18 @@ export default {
     box-shadow: none;
   }
 
+  &__label {
+    display: block;
+
+    &:not(#{&}--isAfter) {
+      margin-bottom: pxToEm(6);
+    }
+
+    &--isAfter {
+      margin-top: pxToEm(6);
+    }
+  }
+
   $cp-input-icon-size: pxToEm(20);
 
   &__icon {

package/src/components/inputs/CpTextarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cpTextarea">
-    <base-input-label v-if="label" :for="inputReferenceId">
+    <base-input-label v-if="label" :for="inputReferenceId" class="cpTextarea__label">
       {{ inputLabelTitle }}
     </base-input-label>
     <textarea
@@ -15,7 +15,12 @@
       @input="handleChange"
     />
     <transition-expand>
-      <base-input-label v-if="isInvalid" :for="inputReferenceId" is-invalid>
+      <base-input-label
+        v-if="isInvalid"
+        :for="inputReferenceId"
+        is-invalid
+        class="cpTextarea__label cpTextarea__label--isAfter"
+      >
         {{ errorMessage }}
       </base-input-label>
     </transition-expand>
@@ -153,5 +158,17 @@ export default {
       }
     }
   }
+
+  &__label {
+    display: block;
+
+    &:not(#{&}--isAfter) {
+      margin-bottom: pxToEm(6);
+    }
+
+    &--isAfter {
+      margin-top: pxToEm(6);
+    }
+  }
 }
 </style>

package/src/components/lists-and-table/CpTable/index.scss

@@ -1,4 +1,4 @@
-@import "src/assets/styles/main";
+@import 'src/assets/styles/main';
 
 .cpTable {
   position: relative;
@@ -34,9 +34,9 @@
   /* Scrolling Visual Cue */
   &__container[role='region'][aria-labelledby][tabindex] {
     background: linear-gradient(to right, $neutral-light 30%, rgba(255, 255, 255, 0)),
-    linear-gradient(to right, rgba($neutral-light, 0), $neutral-light 70%) 0 100%,
-    radial-gradient(farthest-side at 0% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)),
-    radial-gradient(farthest-side at 100% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)) 0 100%;
+      linear-gradient(to right, rgba($neutral-light, 0), $neutral-light 70%) 0 100%,
+      radial-gradient(farthest-side at 0% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)),
+      radial-gradient(farthest-side at 100% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)) 0 100%;
     background-repeat: no-repeat;
     background-color: $neutral-light;
     background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
@@ -168,6 +168,11 @@
         background-color: scale-color($neutral-dark, $lightness: 98%);
         color: $neutral-dark;
       }
+
+      &:focus {
+        outline: none !important;
+        box-shadow: 0 0 0 pxToEm(3) scale-color($secondary-color, $lightness: 80%);
+      }
     }
 
     &--isOptions svg {
@@ -223,11 +228,11 @@
       left: 0;
       transform: translateX(-100%);
       background-image: linear-gradient(
-          90deg,
-          rgba($neutral-dark-3, 0) 0,
-          rgba($neutral-dark-3, 0.2) 20%,
-          rgba($neutral-dark-3, 0.5) 60%,
-          rgba($neutral-dark-3, 0)
+        90deg,
+        rgba($neutral-dark-3, 0) 0,
+        rgba($neutral-dark-3, 0.2) 20%,
+        rgba($neutral-dark-3, 0.5) 60%,
+        rgba($neutral-dark-3, 0)
       );
       animation: shimmer 2s infinite;
     }
@@ -289,6 +294,7 @@
       }
 
       &:focus {
+        outline: none !important;
         box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
       }
 

package/src/components/selects/CpSelect.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="cpSelect" :class="dynamicClasses">
-    <base-input-label v-if="label" :for="selectReferenceId">{{ selectLabelTitle }}</base-input-label>
+    <base-input-label v-if="label" :for="selectReferenceId" class="cpSelect__label">
+      {{ selectLabelTitle }}
+    </base-input-label>
     <div class="cpSelect__container">
       <select
         :id="selectReferenceId"
@@ -18,7 +20,12 @@
       </select>
     </div>
     <transition-expand>
-      <base-input-label v-if="isInvalid" :is-invalid="isInvalid" :for="selectReferenceId">
+      <base-input-label
+        v-if="isInvalid"
+        :is-invalid="isInvalid"
+        :for="selectReferenceId"
+        class="cpSelect__label cpSelect__label--isAfter"
+      >
         {{ errorMessage }}
       </base-input-label>
     </transition-expand>
@@ -163,6 +170,18 @@ export default {
     }
   }
 
+  &__label {
+    display: block;
+
+    &:not(#{&}--isAfter) {
+      margin-bottom: pxToEm(6);
+    }
+
+    &--isAfter {
+      margin-top: pxToEm(6);
+    }
+  }
+
   &--isDisabled {
     .cpSelect__inner {
       border-color: $neutral-dark-4 !important;

package/src/components/toggles/CpCheckbox/index.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import "src/assets/styles/main";
+@import 'src/assets/styles/main';
 
 $cp-checkbox-base-width: pxToEm(20);
 $cp-checkbox-tick-base-width: pxToEm(14);

package/src/components/toggles/CpRadio/index.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import "src/assets/styles/main";
+@import 'src/assets/styles/main';
 
 $cp-radio-base-width: pxToEm(20);
 
@@ -85,7 +85,7 @@ $cp-radio-base-width: pxToEm(20);
     transition: transform 0.1s linear;
 
     &:before {
-      content: "";
+      content: '';
       display: flex;
       width: 100%;
       height: 100%;

package/src/components/visual/CpIcon.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, watch } from 'vue'
 import * as feather from 'feather-icons'
 
 export default defineComponent({
@@ -67,7 +67,14 @@ export default defineComponent({
     },
   },
   setup(props, { attrs }) {
-    const icon = feather.icons[props.type]
+    let icon = feather.icons[props.type]
+
+    watch(
+      () => props.type,
+      () => {
+        icon = feather.icons[props.type]
+      },
+    )
 
     return () =>
       h(