@icij/murmur-next 4.0.0

package/lib/components/CustomPagination.vue

@@ -0,0 +1,225 @@
+<script lang="ts">
+import {computed, defineComponent,ref,PropType} from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { Size } from '@/enums'
+import {BPagination} from "bootstrap-vue-next";
+
+export default defineComponent({
+  name: 'CustomPagination',
+  components: {BPagination},
+  props: {
+    /**
+     * Total items to be stored in pages
+     */
+    totalRows: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Sets the quantity of items per page
+     */
+    perPage: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * Grabs and syncs the currentPage variable passed down from the parent in v-model
+     */
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Displays the pagination element in pills styling as opposed to the default boxes
+     */
+    pills: {
+      type: Boolean
+    },
+    /**
+     * Set the size of the input: 'sm', 'md' (default), or 'lg'.
+     */
+    size: {
+      type: String as PropType<Size>,
+      default: Size.md,
+      validator: (value: Size) => Object.values(Size).includes(value)
+    },
+    /**
+     * Compact layout
+     */
+    compact: {
+      type: Boolean
+    },
+    /**
+     * (Optional) Number of page. Property `size` is required for this to work
+     * properly. If `pages` is empty, it will be calculated using the size.
+     */
+    pages: {
+      type: [Number, String],
+      default: 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[]>([])
+    const inputPlaceholder = computed((): string => {
+      const compact = props.compact ? 'compact-' : ''
+      return t(`custom-pagination.${compact}placeholder`) as string
+    })
+    const numberOfPages = computed((): number => {
+      if (props.pages === null) {
+        return Math.ceil(props.totalRows / props.perPage)
+      }
+      return Number(props.pages)
+    })
+    const paginationClassList = computed((): string[] => {
+      return props.size === Size.sm ? ['float-end', 'me-1'] : []
+    })
+
+    function applyJumpFormPage(): void {
+      const number = isNaN(parseInt(currentPageInput.value)) ? 0 : parseInt(currentPageInput.value)
+      errors.value = []
+      if (number > numberOfPages.value || number < 1) {
+        errors.value.push(invalidNumberError)
+      }
+      if (errors.value.length === 0) {
+        updateModelValue(parseInt(currentPageInput.value))
+      }
+    }
+
+    function updateModelValue(value: string|number): void {
+      emit('update:modelValue', value)
+    }
+
+    return {
+      customPaginationForm,
+      currentPageInput,
+      errors,
+      inputPlaceholder,
+      numberOfPages,
+      paginationClassList,
+      t,
+      applyJumpFormPage,
+      updateModelValue,
+    }
+  }
+
+})
+</script>
+
+<template>
+  <div
+      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="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"
+        >
+          <template #prev-text="{ disabled, index, page }">
+            <!-- @slot The 'Go to previous page' button content -->
+            <slot name="prev-text" v-bind="{ disabled, index, page }" />
+          </template>
+          <template #next-text="{ disabled, index, page }">
+            <!-- @slot The 'Go to next page' button content -->
+            <slot name="next-text" v-bind="{ disabled, index, page }" />
+          </template>
+          <template #page="{ active, content, disabled, index, page }">
+            <!-- @slot Page number button content -->
+            <slot name="page" v-bind="{ active, content, disabled, index, page }" />
+          </template>
+          <template #ellipsis-text>
+            <!-- @slot The '...' indicator content. Overrides the `ellipsis-text` prop -->
+            <slot name="ellipsis-text" />
+          </template>
+        </b-pagination>
+      </div>
+      <div class="col-auto">
+        <div class="custom-pagination__form">
+          <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"
+              />
+              <div v-if="!compact" class="input-group-append">
+                <button class="btn btn-secondary btn-sm" type="submit">
+                  <span class="px-1 py-3"> Go </span>
+                </button>
+              </div>
+            </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">
+              {{ errors[0] }}
+            </small>
+            <small v-else class="float-start mt-1 ms-1 text-muted">
+              {{ t('custom-pagination.total-pages', { count: numberOfPages }) }}
+            </small>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.custom-pagination {
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  &:not(.custom-pagination--compact) &__pages {
+    border-right: 1px solid $border-color;
+  }
+
+  &--compact &__pages:deep(.page-item:last-of-type .page-link) {
+    border-right: 0;
+    border-radius: 0;
+  }
+
+  &--compact &__form {
+    max-width: 105px;
+
+    &,
+    & > .input-group {
+      height: 100%;
+    }
+  }
+
+  &--compact &__form input {
+    height: 100%;
+  }
+
+  &--compact > .row {
+    align-items: center;
+  }
+}
+</style>

package/lib/components/DigitsInput.vue

@@ -0,0 +1,180 @@
+<script lang="ts">
+import { filter } from 'lodash'
+import {computed, defineComponent, nextTick, onMounted, ref, watch} from 'vue'
+
+type DigitsInputData = {
+  mounted: boolean
+  values: string[] | number[] | null[]
+}
+
+/**
+ * Create an input for digits.
+ */
+export default defineComponent({
+  name: 'DigitsInput',
+  emits: ['update:modelValue','update:values'],
+  props: {
+    /**
+     * Number of digits to display
+     */
+    length: {
+      type: Number,
+      default: 6
+    },
+    /**
+     * Value of the input
+     */
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    /**
+     * Name of the input
+     */
+    name: {
+      type: String,
+      default: ''
+    }
+  },
+  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=> {
+      return filter(values.value, (v) => !isNaN(v as any)).join('')
+    })
+
+    const nextInput = computed((): HTMLInputElement | null =>{
+      if (joinedValues.value.length === props.length) {
+        return null
+      }
+
+      // Next input is the first non-empty input or the last input
+      return inputs.value[joinedValues.value.length] || lastInput.value
+    })
+
+    const hasNextInput = computed((): boolean=> {
+      return !!nextInput.value
+    })
+
+    const lastInput = computed((): HTMLElement | null=> {
+      const index = inputs.value.length -1;
+      return inputs.value[index]
+    })
+
+    function focusToNextInput() {
+      if (hasNextInput.value) {
+       nextInput.value?.focus()
+      }
+    }
+    function focusToPreviousWhenEmpty(d: number) {
+      if (!values.value[d]) {
+        inputs.value[d - 1]?.focus()
+      }
+    }
+    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)
+          }
+          focusToNextInput();
+        },
+        { deep: true }
+    );
+
+    watch(
+        () => 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);
+        }
+    );
+    return {
+      values,
+      joinedValues,
+      inputs,
+      nextInput,
+      hasNextInput,
+      lastInput,
+      focusToPreviousWhenEmpty
+    }
+  },
+
+})
+</script>
+
+<template>
+  <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)"
+      />
+      <input type="hidden" :value="joinedValues" :name="name" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '../styles/lib';
+
+.digits-input {
+  &__container {
+    &__input {
+      font-size: 3rem;
+      height: 10rem;
+      line-height: 10rem;
+      text-align: center;
+      padding: $spacer $spacer * 0.25;
+      margin: 0 $spacer * 0.25;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>