@icij/murmur-next 4.0.0 → 4.0.3

package/lib/components/CustomPagination.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
-import {computed, defineComponent,ref,PropType} from 'vue'
+import { computed, defineComponent, ref, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { Size } from '@/enums'
-import {BPagination} from "bootstrap-vue-next";
+import { BPagination } from 'bootstrap-vue-next'
 
 export default defineComponent({
   name: 'CustomPagination',
-  components: {BPagination},
+  components: { BPagination },
   props: {
     /**
      * Total items to be stored in pages
@@ -59,10 +59,10 @@ export default defineComponent({
       default: null
     }
   },
-  emits:["update:modelValue"],
-  setup(props, {emit}) {
-    const {t} = useI18n()
-    const customPaginationForm = ref<HTMLFormElement|null>(null)
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const { t } = useI18n()
+    const customPaginationForm = ref<HTMLFormElement | null>(null)
     const currentPageInput = ref('')
     const invalidNumberError = t('custom-pagination.invalid-number-error')
     const errors = ref<string[]>([])
@@ -81,7 +81,9 @@ export default defineComponent({
     })
 
     function applyJumpFormPage(): void {
-      const number = isNaN(parseInt(currentPageInput.value)) ? 0 : parseInt(currentPageInput.value)
+      const number = isNaN(parseInt(currentPageInput.value))
+        ? 0
+        : parseInt(currentPageInput.value)
       errors.value = []
       if (number > numberOfPages.value || number < 1) {
         errors.value.push(invalidNumberError)
@@ -91,7 +93,7 @@ export default defineComponent({
       }
     }
 
-    function updateModelValue(value: string|number): void {
+    function updateModelValue(value: string | number): void {
       emit('update:modelValue', value)
     }
 
@@ -104,31 +106,36 @@ export default defineComponent({
       paginationClassList,
       t,
       applyJumpFormPage,
-      updateModelValue,
+      updateModelValue
     }
   }
-
 })
 </script>
 
 <template>
   <div
-      class="custom-pagination container-fluid"
-      :class="{ 'custom-pagination--compact': compact, 'custom-pagination--pills': pills }"
+    class="custom-pagination container-fluid"
+    :class="{
+      'custom-pagination--compact': compact,
+      'custom-pagination--pills': pills
+    }"
   >
-    <div class="row justify-content-center align-items-stretch" :class="{ 'no-gutters': compact && !pills }">
+    <div
+      class="row justify-content-center align-items-stretch"
+      :class="{ 'no-gutters': compact && !pills }"
+    >
       <div class="col-auto custom-pagination__pages">
         <b-pagination
-            :total-rows="perPage * numberOfPages"
-            :per-page="perPage"
-            :model-value="modelValue"
-            :pills="pills"
-            :class="paginationClassList"
-            :size="size"
-            class="m-0"
-            first-number
-            last-number
-            @update:modelValue="updateModelValue"
+          :total-rows="perPage * numberOfPages"
+          :per-page="perPage"
+          :model-value="modelValue"
+          :pills="pills"
+          :class="paginationClassList"
+          :size="size"
+          class="m-0"
+          first-number
+          last-number
+          @update:modelValue="updateModelValue"
         >
           <template #prev-text="{ disabled, index, page }">
             <!-- @slot The 'Go to previous page' button content -->
@@ -140,7 +147,10 @@ export default defineComponent({
           </template>
           <template #page="{ active, content, disabled, index, page }">
             <!-- @slot Page number button content -->
-            <slot name="page" v-bind="{ active, content, disabled, index, page }" />
+            <slot
+              name="page"
+              v-bind="{ active, content, disabled, index, page }"
+            />
           </template>
           <template #ellipsis-text>
             <!-- @slot The '...' indicator content. Overrides the `ellipsis-text` prop -->
@@ -150,14 +160,18 @@ export default defineComponent({
       </div>
       <div class="col-auto">
         <div class="custom-pagination__form">
-          <form ref="customPaginationForm" class="input-group" @submit.prevent="applyJumpFormPage">
+          <form
+            ref="customPaginationForm"
+            class="input-group"
+            @submit.prevent="applyJumpFormPage"
+          >
             <b-input-group :size="size">
               <input
-                  v-model="currentPageInput"
-                  type="number"
-                  class="form-control"
-                  :placeholder="inputPlaceholder"
-                  aria-label="Jump to page"
+                v-model="currentPageInput"
+                type="number"
+                class="form-control"
+                :placeholder="inputPlaceholder"
+                aria-label="Jump to page"
               />
               <div v-if="!compact" class="input-group-append">
                 <button class="btn btn-secondary btn-sm" type="submit">
@@ -167,7 +181,11 @@ export default defineComponent({
             </b-input-group>
           </form>
           <template v-if="!compact">
-            <small v-if="errors.length" id="invalid-number-error" class="float-start mt-1 ms-1 text-danger">
+            <small
+              v-if="errors.length"
+              id="invalid-number-error"
+              class="float-start mt-1 ms-1 text-danger"
+            >
               {{ errors[0] }}
             </small>
             <small v-else class="float-start mt-1 ms-1 text-muted">

package/lib/components/DigitsInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { filter } from 'lodash'
-import {computed, defineComponent, nextTick, onMounted, ref, watch} from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
 
 type DigitsInputData = {
   mounted: boolean
@@ -12,7 +12,7 @@ type DigitsInputData = {
  */
 export default defineComponent({
   name: 'DigitsInput',
-  emits: ['update:modelValue','update:values'],
+  emits: ['update:modelValue', 'update:values'],
   props: {
     /**
      * Number of digits to display
@@ -36,20 +36,21 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props, {emit}) {
-
-    const inputs = ref<HTMLInputElement[]>([]);
+  setup(props, { emit }) {
+    const inputs = ref<HTMLInputElement[]>([])
 
     onMounted(async () => {
       await nextTick()
     })
 
-    const values = ref(String(props.modelValue).split('').slice(0, props.length))
-    const joinedValues = computed((): string=> {
+    const values = ref(
+      String(props.modelValue).split('').slice(0, props.length)
+    )
+    const joinedValues = computed((): string => {
       return filter(values.value, (v) => !isNaN(v as any)).join('')
     })
 
-    const nextInput = computed((): HTMLInputElement | null =>{
+    const nextInput = computed((): HTMLInputElement | null => {
       if (joinedValues.value.length === props.length) {
         return null
       }
@@ -58,18 +59,18 @@ export default defineComponent({
       return inputs.value[joinedValues.value.length] || lastInput.value
     })
 
-    const hasNextInput = computed((): boolean=> {
+    const hasNextInput = computed((): boolean => {
       return !!nextInput.value
     })
 
-    const lastInput = computed((): HTMLElement | null=> {
-      const index = inputs.value.length -1;
+    const lastInput = computed((): HTMLElement | null => {
+      const index = inputs.value.length - 1
       return inputs.value[index]
     })
 
     function focusToNextInput() {
       if (hasNextInput.value) {
-       nextInput.value?.focus()
+        nextInput.value?.focus()
       }
     }
     function focusToPreviousWhenEmpty(d: number) {
@@ -78,51 +79,55 @@ export default defineComponent({
       }
     }
     watch(
-        () => values,
-        (values) => {
-          // Copy and remove values that are not numbers
-          const formattedValues = values.value.map((value) => String(value).replace(/\D/g, ''));
-          // Iterate over the values to be sure
-          // they are not exceeding 10 and should
-          // be spread to the next inputs
-          formattedValues.forEach((value, d) => {
-            // The value must be spread to the next input only
-            // if it's higher than 9 (more than one digit)
-            if (value !== null && Number(value) > 9) {
-              // Split the number into an array of strings
-              String(value)
-                  .split('')
-                  .forEach((nextValue, n) => {
-                    // Spread the value to the next inputs of the array
-                    formattedValues[d + n] = String(Number(nextValue));
-                  });
-            }
-          });
-          // We update the values data attribute only if they changed
-          // to avoid an infinite update cycle
-          if (JSON.stringify(values.value) !== JSON.stringify(formattedValues)) {
-            values.value = formattedValues.slice(0, props.length)
+      () => values,
+      (values) => {
+        // Copy and remove values that are not numbers
+        const formattedValues = values.value.map((value) =>
+          String(value).replace(/\D/g, '')
+        )
+        // Iterate over the values to be sure
+        // they are not exceeding 10 and should
+        // be spread to the next inputs
+        formattedValues.forEach((value, d) => {
+          // The value must be spread to the next input only
+          // if it's higher than 9 (more than one digit)
+          if (value !== null && Number(value) > 9) {
+            // Split the number into an array of strings
+            String(value)
+              .split('')
+              .forEach((nextValue, n) => {
+                // Spread the value to the next inputs of the array
+                formattedValues[d + n] = String(Number(nextValue))
+              })
           }
-          focusToNextInput();
-        },
-        { deep: true }
-    );
+        })
+        // We update the values data attribute only if they changed
+        // to avoid an infinite update cycle
+        if (JSON.stringify(values.value) !== JSON.stringify(formattedValues)) {
+          values.value = formattedValues.slice(0, props.length)
+        }
+        focusToNextInput()
+      },
+      { deep: true }
+    )
 
     watch(
-        () => joinedValues,
-        () => {
-          emit('update:modelValue', joinedValues.value)
-        },
-        { deep: true }
+      () => joinedValues,
+      () => {
+        emit('update:modelValue', joinedValues.value)
+      },
+      { deep: true }
     )
 
     watch(
-        () => props.modelValue,
-        () => {
-          const formattedValues = String(props.modelValue).split('').slice(0, props.length);
-          emit('update:values', formattedValues);
-        }
-    );
+      () => props.modelValue,
+      () => {
+        const formattedValues = String(props.modelValue)
+          .split('')
+          .slice(0, props.length)
+        emit('update:values', formattedValues)
+      }
+    )
     return {
       values,
       joinedValues,
@@ -132,8 +137,7 @@ export default defineComponent({
       lastInput,
       focusToPreviousWhenEmpty
     }
-  },
-
+  }
 })
 </script>
 
@@ -141,13 +145,13 @@ export default defineComponent({
   <div class="digits-input">
     <div class="d-flex digits-input__container">
       <input
-          ref="inputs"
-          v-for="d in length"
-          :key="d - 1"
-          v-model="values[d - 1]"
-          :class="`digits-input__container__input--${d - 1}`"
-          class="digits-input__container__input w-0 form-control"
-          @keyup.delete="focusToPreviousWhenEmpty(d - 1)"
+        ref="inputs"
+        v-for="d in length"
+        :key="d - 1"
+        v-model="values[d - 1]"
+        :class="`digits-input__container__input--${d - 1}`"
+        class="digits-input__container__input w-0 form-control"
+        @keyup.delete="focusToPreviousWhenEmpty(d - 1)"
       />
       <input type="hidden" :value="joinedValues" :name="name" />
     </div>