sprintify-ui 0.0.30 → 0.0.32

package/src/components/BasePagination.vue

@@ -1,60 +1,101 @@
 <template>
   <nav
-    v-if="lastPage > 1 || lastPage < modelValue"
+    v-show="lastPage > 1 || lastPage < modelValue"
     ref="paginationNode"
-    class="flex items-center justify-between border-t border-slate-200"
+    class="flex items-start border-t border-slate-200"
   >
-    <div class="flex -mt-px w-0 flex-1">
-      <button
-        type="button"
-        :disabled="modelValue == 1"
-        class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
-        @click="previous()"
+    <div class="flex grow items-center justify-between">
+      <div class="-mt-px flex flex-1">
+        <button
+          type="button"
+          :disabled="modelValue == 1"
+          class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
+          @click="previous()"
+        >
+          <BaseIcon
+            class="mx-2 h-5 w-5 text-slate-400"
+            icon="heroicons-solid:chevron-left"
+          />
+        </button>
+      </div>
+      <div :class="[mobileLayout ? 'hidden' : '-mt-px flex']">
+        <button
+          v-for="(i, index) in items"
+          :key="i + (index + '')"
+          type="button"
+          class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium"
+          :class="[
+            i == modelValue ? 'border-primary-500 text-primary-500' : '',
+            i != modelValue ? 'border-transparent text-slate-500' : '',
+            i != modelValue && isClickable(i)
+              ? 'hover:border-slate-300 hover:text-slate-700'
+              : '',
+          ]"
+          @click="onButtonClick(i)"
+        >
+          {{ i }}
+        </button>
+      </div>
+      <div
+        v-if="mobileLayout"
+        class="mx-3 flex shrink-0 items-center justify-end"
       >
-        <BaseIcon
-          class="mr-3 h-5 w-5 text-slate-400"
-          icon="heroicons-solid:arrow-narrow-left"
+        <span class="mr-2 text-sm font-normal text-slate-500">
+          {{ $t('sui.page') }}
+        </span>
+        <input
+          v-model="manualPageMobile"
+          type="number"
+          :min="1"
+          :max="lastPage"
+          :step="1"
+          class="rounded border border-slate-300 py-0 px-0.5 pl-1.5"
+          @keydown.enter="onManualPageMobileEnter"
+          @input="onManualPageMobileInput"
+          @blur="setPageFromManualPageMobile"
         />
-        {{ $t('sui.previous') }}
-      </button>
+        <span class="ml-2 text-sm font-normal text-slate-500">
+          {{ $t('sui.of') }} {{ lastPage }}
+        </span>
+      </div>
+      <div class="-mt-px flex flex-1 justify-end">
+        <button
+          :disabled="modelValue >= lastPage"
+          class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
+          @click="next()"
+        >
+          <BaseIcon
+            class="mx-2 h-5 w-5 text-slate-400"
+            icon="heroicons-solid:chevron-right"
+          />
+        </button>
+      </div>
     </div>
-    <div :class="[mobileLayout ? 'hidden' : 'flex -mt-px']">
-      <button
-        v-for="(i, index) in items"
-        :key="i + (index + '')"
-        type="button"
-        class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium"
-        :class="[
-          i == modelValue ? 'border-primary-500 text-primary-500' : '',
-          i != modelValue ? 'border-transparent text-slate-500' : '',
-          i != modelValue && isClickable(i)
-            ? 'hover:border-slate-300 hover:text-slate-700'
-            : '',
-        ]"
-        @click="onButtonClick(i)"
-      >
-        {{ i }}
-      </button>
-    </div>
-    <div class="flex -mt-px w-0 flex-1 justify-end">
-      <button
-        :disabled="modelValue >= lastPage"
-        class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
-        @click="next()"
-      >
-        {{ $t('sui.next') }}
-        <BaseIcon
-          class="ml-3 h-5 w-5 text-slate-400"
-          icon="heroicons-solid:arrow-narrow-right"
-        />
-      </button>
+    <div
+      v-if="!mobileLayout"
+      class="mt-3 ml-4 flex shrink-0 items-center justify-end"
+    >
+      <span class="mr-3 text-sm font-medium text-slate-500">
+        {{ $t('sui.go_to_page') }}
+      </span>
+      <input
+        v-model="manualPage"
+        type="number"
+        :min="1"
+        :max="lastPage"
+        :step="1"
+        class="rounded border border-slate-300 py-0.5 px-0.5 pl-2"
+        @keydown.enter="onManualPageEnter"
+        @input="onManualPageInput"
+        @blur="setPageFromManualPage"
+      />
     </div>
   </nav>
 </template>
 
 <script lang="ts" setup>
 import { useResizeObserver } from '@vueuse/core';
-import { range } from 'lodash';
+import { debounce, isNumber, range } from 'lodash';
 import { Ref } from 'vue';
 
 const props = defineProps({
@@ -75,18 +116,28 @@ const props = defineProps({
 
 const emit = defineEmits(['update:model-value']);
 
+const manualPage = ref(null) as Ref<null | string | number>;
+const manualPageMobile = ref(props.modelValue) as Ref<null | string | number>;
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    manualPageMobile.value = value;
+  }
+);
+
 function next() {
   if (props.modelValue >= props.lastPage) {
     return;
   }
-  emit('update:model-value', props.modelValue + 1);
+  updateModalValue(props.modelValue + 1);
 }
 
 function previous() {
   if (props.modelValue == 1) {
     return;
   }
-  emit('update:model-value', props.modelValue - 1);
+  updateModalValue(props.modelValue - 1);
 }
 
 const paginationNode = ref(null) as Ref<null | HTMLElement>;
@@ -163,6 +214,53 @@ function onButtonClick(i: number | string) {
   if (!isClickable(i)) {
     return;
   }
-  emit('update:model-value', i);
+  updateModalValue(i);
+}
+
+const onManualPageInput = debounce(() => {
+  setPageFromManualPage();
+}, 1000);
+
+function onManualPageEnter(e: any) {
+  e.preventDefault();
+  setPageFromManualPage();
+}
+
+function setPageFromManualPage() {
+  updateModalValue(manualPage.value);
+  nextTick(() => {
+    manualPage.value = null;
+  });
+}
+
+const onManualPageMobileInput = debounce(() => {
+  setPageFromManualPageMobile();
+}, 1000);
+
+function onManualPageMobileEnter(e: any) {
+  e.preventDefault();
+  setPageFromManualPageMobile();
+}
+
+function setPageFromManualPageMobile() {
+  updateModalValue(manualPageMobile.value);
+  if (!isValidPage(manualPageMobile.value)) {
+    nextTick(() => {
+      manualPageMobile.value = props.modelValue;
+    });
+  }
+}
+
+function updateModalValue(newPage: number | string | null | undefined) {
+  if (isValidPage(newPage)) {
+    emit('update:model-value', newPage);
+  }
+}
+
+function isValidPage(newPage: number | string | null | undefined) {
+  if (isNumber(newPage) && newPage >= 1 && newPage <= props.lastPage) {
+    return true;
+  }
+  return false;
 }
 </script>

package/src/lang/en.json

@@ -19,6 +19,7 @@
     "error": "Error",
     "file_must_be_of_type": "The file must be of type",
     "filters": "Filters",
+    "go_to_page": "Go to ",
     "min_x_characters": "{x} characters minimum",
     "month": "Month",
     "next": "Next",
@@ -26,7 +27,9 @@
     "none": "None",
     "nothing_found": "Nothing found",
     "notifications_empty": "You have no new notifications",
+    "of": "of",
     "or": "or",
+    "page": "Page",
     "pagination_detail": "{page} records of {total}",
     "previous": "Previous",
     "previous_month": "Previous month",

package/src/lang/fr.json

@@ -19,6 +19,7 @@
     "error": "Erreur",
     "file_must_be_of_type": "Le fichier doit être de type",
     "filters": "Filtres",
+    "go_to_page": "Page",
     "min_x_characters": "{x} caractères minimum",
     "month": "Mois",
     "next": "Suivant",
@@ -26,7 +27,9 @@
     "none": "Aucun",
     "nothing_found": "Rien n'a été trouvé",
     "notifications_empty": "Vous n'avez aucune nouvelle notification",
+    "of": "de",
     "or": "ou",
+    "page": "Page",
     "pagination_detail": "{page} items de {total}",
     "previous": "Précédent",
     "previous_month": "Mois précédent",

package/src/types/types.ts

@@ -21,7 +21,7 @@ export type OptionValue = string | number;
 
 export type Option = Record<string, any>;
 
-export type Selection = Record<string, any> | null | undefined;
+export type Selection = Option | null | undefined;
 
 export type NormalizedOption = {
   option: Option;