@citizenplane/pimp 8.5.2 → 8.5.6

package/src/components/inputs/CpInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
-    <base-input-label v-if="label" :for="inputIdentifier" class="cpInput__label">
+    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }" class="cpInput__label">
       {{ inputLabelTitle }}
     </base-input-label>
     <div
@@ -19,13 +19,12 @@
         </transition>
       </div>
       <input
-        :id="inputIdentifier"
+        v-model="inputModel"
+        v-bind-once="{ id: inputIdentifier }"
         v-maska
         :data-maska="mask"
-        :value="modelValue"
         v-bind="restAttributes"
         class="cpInput__inner"
-        @input="handleChange"
       />
       <div v-if="hasAfterIcon" class="cpInput__icon cpInput__icon--isAfter">
         <slot v-if="hasAfterIconSlot" name="input-icon-after" />
@@ -37,185 +36,161 @@
       </div>
     </div>
     <transition-expand>
-      <base-input-label
-        v-if="displayErrorMessage"
-        :is-invalid="isInvalid"
-        :for="inputIdentifier"
-        class="cpInput__label cpInput__label--isAfter"
-      >
+      <p v-if="displayErrorMessage" class="cpInput__error">
         {{ errorMessage }}
-      </base-input-label>
+      </p>
     </transition-expand>
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
+<script setup>
+import { ref, useAttrs, useSlots, computed, nextTick, onMounted } from 'vue'
+
+import BaseInputLabel from '@/components/core/BaseInputLabel/index.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'
-
-export default {
-  name: 'CpInput',
-  components: {
-    CpIcon,
-    BaseInputLabel,
-    TransitionExpand,
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: '',
   },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    inputId: {
-      type: String,
-      default: null,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    mask: {
-      type: [String, Object],
-      default: null,
-    },
-    removeBorder: {
-      type: Boolean,
-      default: false,
-    },
-    hideValidityIcon: {
-      type: Boolean,
-      default: false,
-    },
-    isLarge: {
-      type: Boolean,
-      default: false,
-    },
-    isSearch: {
-      type: Boolean,
-      default: false,
-    },
+  label: {
+    type: String,
+    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,
-    }
+  inputId: {
+    type: String,
+    default: null,
   },
-  data() {
-    return {
-      isDOMElementValid: true,
-    }
+  isInvalid: {
+    type: Boolean,
+    default: false,
   },
-  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.isDisabled,
-          'cpInput--hasNoBorder': this.removeBorder,
-          'cpInput--isLarge': this.isLarge,
-          'cpInput--isSearch': this.isSearch,
-        },
-      ]
-    },
-    iconValidityClasses() {
-      return {
-        'cpInput__icon--isInvalid': this.isInputInvalid,
-        'cpInput__icon--isValid': this.isValid,
-        'cpInput__icon--hasAfterAndValidityIcon': this.hasAfterIconSlot,
-      }
-    },
-    inputLabelTitle() {
-      if (this.label === '') return ''
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  mask: {
+    type: [String, Object],
+    default: null,
+  },
+  removeBorder: {
+    type: Boolean,
+    default: false,
+  },
+  hideValidityIcon: {
+    type: Boolean,
+    default: false,
+  },
+  isLarge: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+})
 
-      const requiredMark = this.isRequired ? '*' : ''
+const emit = defineEmits(['update:modelValue'])
 
-      return `${this.label} ${requiredMark}`
-    },
-    isValid() {
-      return this.modelValue && !this.isReadonly && !this.isInvalid && this.isDOMElementValid
-    },
-    isInputInvalid() {
-      return this.isInvalid || !this.isDOMElementValid
-    },
-    hasBeforeIconSlot() {
-      return !!this.$slots['input-icon']
-    },
-    hasBeforeIcon() {
-      return this.hasBeforeIconSlot || this.isSearch
-    },
-    hasAfterIconSlot() {
-      return !!this.$slots['input-icon-after']
-    },
-    hasAfterIcon() {
-      return this.hasAfterIconSlot || this.isSearch
-    },
-    DOMElement() {
-      return this.$refs.cpInputContainer.children.namedItem(this.inputIdentifier)
-    },
-    displayErrorMessage() {
-      return this.isInputInvalid && this.errorMessage.length
-    },
-    isClearButtonVisible() {
-      return this.isSearch && this.modelValue.length
-    },
-  },
-  mounted() {
-    this.$nextTick(() => this.checkInputValidity())
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+// class is a reserved word, we can't remove 'class' property from attrs
+// eslint-disable-next-line no-unused-vars
+const { ['class']: value, id, ...restAttributes } = attrs
+
+const inputIdentifier = ref(id || randomString())
+
+const slots = useSlots()
+
+const inputModel = defineModel({
+  type: [String, Number, Boolean],
+  default: '',
+  set(newValue) {
+    handleChange(newValue)
+    return newValue
   },
-  methods: {
-    handleChange(e) {
-      this.$emit('update:modelValue', e.target.value)
-      this.checkInputValidity()
+})
+
+const isDOMElementValid = ref(true)
+const cpInputContainer = ref()
+
+const isDisabled = computed(() => checkAttribute('disabled'))
+const isRequired = computed(() => checkAttribute('required'))
+const isReadonly = computed(() => checkAttribute('readonly'))
+
+const dynamicClasses = computed(() => {
+  return [
+    attrs.class,
+    {
+      'cpInput--isInvalid': isInputInvalid.value,
+      'cpInput--isDisabled': isDisabled.value,
+      'cpInput--hasNoBorder': props.removeBorder,
+      'cpInput--isLarge': props.isLarge,
+      'cpInput--isSearch': props.isSearch,
     },
-    focusOnInput() {
-      if (!this.DOMElement) return
-      this.DOMElement.focus()
-    },
-    checkInputValidity() {
-      if (!this.DOMElement) return false
+  ]
+})
 
-      this.isDOMElementValid =
-        (this.DOMElement.validity && this.DOMElement.validity.valid) ||
-        (this.DOMElement.validity && this.DOMElement.validity.valueMissing)
-    },
-    checkAttribute(attribute) {
-      return this.$attrs[attribute] === '' || this.$attrs[attribute] === true
-    },
-    clearInputValue() {
-      this.$emit('update:modelValue', '')
-    },
-  },
+const inputLabelTitle = computed(() => {
+  if (props.label === '') return ''
+
+  const requiredMark = isRequired.value ? '*' : ''
+  return `${props.label} ${requiredMark}`
+})
+
+const isValid = computed(() => inputModel.value && !isReadonly.value && !props.isInvalid && isDOMElementValid.value)
+const isInputInvalid = computed(() => props.isInvalid || !isDOMElementValid.value)
+
+const hasBeforeIconSlot = computed(() => !!slots['input-icon'])
+const hasBeforeIcon = computed(() => hasBeforeIconSlot.value || props.isSearch)
+
+const hasAfterIconSlot = computed(() => !!slots['input-icon-after'])
+const hasAfterIcon = computed(() => hasAfterIconSlot.value || props.isSearch)
+
+const iconValidityClasses = computed(() => {
+  return {
+    'cpInput__icon--isInvalid': isInputInvalid.value,
+    'cpInput__icon--isValid': isValid.value,
+    'cpInput__icon--hasAfterAndValidityIcon': hasAfterIconSlot.value,
+  }
+})
+
+const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inputIdentifier.value))
+
+const displayErrorMessage = computed(() => isInputInvalid.value && props.errorMessage.length)
+const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.length)
+
+const handleChange = (newValue) => {
+  emit('update:modelValue', newValue)
+  checkInputValidity()
+}
+
+const focusOnInput = () => {
+  if (!DOMElement.value) return
+  DOMElement.value.focus()
 }
+
+const checkInputValidity = () => {
+  if (!DOMElement.value) return false
+
+  isDOMElementValid.value =
+    (DOMElement.value.validity && DOMElement.value.validity.valid) ||
+    (DOMElement.value.validity && DOMElement.value.validity.valueMissing)
+}
+
+const checkAttribute = (attribute) => attrs[attribute] === '' || attrs[attribute] === true
+
+const clearInputValue = () => emit('update:modelValue', '')
+
+onMounted(async () => {
+  await nextTick()
+  checkInputValidity()
+})
 </script>
 
 <style lang="scss">
@@ -324,13 +299,17 @@ export default {
 
   &__label {
     display: block;
+    margin-bottom: px-to-em(6);
+  }
 
-    &:not(#{&}--isAfter) {
-      margin-bottom: px-to-em(6);
-    }
+  &__error {
+    margin-top: px-to-em(6);
+    color: $error-color;
+    font-size: px-to-em(14);
+    font-weight: 500;
 
-    &--isAfter {
-      margin-top: px-to-em(6);
+    &::first-letter {
+      text-transform: capitalize;
     }
   }
 

package/src/components/inputs/CpTextarea.vue

@@ -1,23 +1,22 @@
 <template>
   <div class="cpTextarea">
-    <base-input-label v-if="label" :for="inputReferenceId" class="cpTextarea__label">
+    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }" class="cpTextarea__label">
       {{ inputLabelTitle }}
     </base-input-label>
     <textarea
-      :id="inputReferenceId"
+      v-model="textareaModel"
+      v-bind-once="{ id: inputIdentifier }"
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
-      :value="modelValue"
       :style="`min-height: ${height}px`"
       :class="{ 'cpTextarea__input--isInvalid': isInvalid }"
       class="cpTextarea__input"
-      @input="handleChange"
     />
     <transition-expand>
       <base-input-label
         v-if="displayErrorMessage"
-        :for="inputReferenceId"
+        v-bind-once="{ for: inputIdentifier }"
         is-invalid
         class="cpTextarea__label cpTextarea__label--isAfter"
       >
@@ -27,89 +26,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+
 import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
 import { randomString } from '@/helpers'
 
-export default {
-  components: {
-    BaseInputLabel,
-    TransitionExpand,
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+    required: false,
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    inputId: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    height: {
-      type: Number,
-      default: 200,
-      required: false,
-    },
+  label: {
+    type: String,
+    default: '',
+    required: false,
   },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      inputReferenceId: this.inputId,
-    }
+  placeholder: {
+    type: String,
+    default: '',
+    required: true,
   },
-  computed: {
-    inputLabelTitle() {
-      const requiredLabel = this.required && this.label ? '*' : ''
-
-      return `${this.label} ${requiredLabel}`
-    },
-    displayErrorMessage() {
-      return this.isInvalid && this.errorMessage.length
-    },
+  required: {
+    type: Boolean,
+    default: false,
+    required: false,
   },
-  mounted() {
-    if (!this.inputReferenceId) this.inputReferenceId = randomString()
+  inputId: {
+    type: String,
+    default: '',
+    required: false,
   },
-  methods: {
-    handleChange(e) {
-      this.$emit('update:modelValue', e.target.value)
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
+    required: false,
   },
-}
+  isInvalid: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  height: {
+    type: Number,
+    default: 200,
+    required: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const textareaModel = defineModel({
+  type: String,
+  default: '',
+  required: false,
+  set(newValue) {
+    handleChange(newValue)
+    return newValue
+  },
+})
+
+const inputIdentifier = ref(props.inputId || randomString())
+
+const inputLabelTitle = computed(() => {
+  const requiredLabel = props.required && props.label ? '*' : ''
+  return `${props.label} ${requiredLabel}`
+})
+
+const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage.length)
+
+const handleChange = (newValue) => emit('update:modelValue', newValue)
 </script>
 
 <style lang="scss">