sprintify-ui 0.0.29 → 0.0.31

package/dist/style.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";.spinner[data-v-945515f9]{animation:rotate-945515f9 1s linear infinite;-webkit-animation:rotate-945515f9 1s linear infinite;-moz-animation:rotate-945515f9 1s linear infinite}@keyframes rotate-945515f9{to{transform:rotate(360deg)}}.path[data-v-945515f9]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-6e5812c9]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:1;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}circle[data-v-b63fac0e]{transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}/*!
+@charset "UTF-8";.spinner[data-v-945515f9]{animation:rotate-945515f9 1s linear infinite;-webkit-animation:rotate-945515f9 1s linear infinite;-moz-animation:rotate-945515f9 1s linear infinite}@keyframes rotate-945515f9{to{transform:rotate(360deg)}}.path[data-v-945515f9]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-6e5812c9]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:1;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}circle[data-v-e5ae83e3]{transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}/*!
  * Pikaday
  * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
  */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}

package/dist/types/src/components/BaseBadge.vue.d.ts

@@ -7,11 +7,11 @@ declare const _default: {
             color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
             icon: string | undefined;
             size: "base" | "lg";
-            contrast: "low" | "high";
+            contrast: "high" | "low";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             contrast: {
                 default: string;
-                type: PropType<"low" | "high">;
+                type: PropType<"high" | "low">;
             };
             color: {
                 default: string;
@@ -42,7 +42,7 @@ declare const _default: {
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             contrast: {
                 default: string;
-                type: PropType<"low" | "high">;
+                type: PropType<"high" | "low">;
             };
             color: {
                 default: string;
@@ -60,7 +60,7 @@ declare const _default: {
             color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
             icon: string | undefined;
             size: "base" | "lg";
-            contrast: "low" | "high";
+            contrast: "high" | "low";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -84,7 +84,7 @@ declare const _default: {
     } & Readonly<import("vue").ExtractPropTypes<{
         contrast: {
             default: string;
-            type: PropType<"low" | "high">;
+            type: PropType<"high" | "low">;
         };
         color: {
             default: string;
@@ -105,7 +105,7 @@ declare const _default: {
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     contrast: {
         default: string;
-        type: PropType<"low" | "high">;
+        type: PropType<"high" | "low">;
     };
     color: {
         default: string;
@@ -123,7 +123,7 @@ declare const _default: {
     color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
     icon: string | undefined;
     size: "base" | "lg";
-    contrast: "low" | "high";
+    contrast: "high" | "low";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {}) => any;

package/dist/types/src/components/{BaseProcessRing.vue.d.ts → BaseProgressCircle.vue.d.ts}

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     normalizedRadius(): number;
     circumference(): number;
     strokeDashoffset(): number;
+    fontSize(): number;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     radius: {
         default: number;

package/dist/types/src/components/index.d.ts

@@ -44,7 +44,7 @@ import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
-import BaseProcessRing from './BaseProcessRing.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -64,4 +64,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/index.d.ts

@@ -27,6 +27,7 @@ declare const messages: {
             error: string;
             file_must_be_of_type: string;
             filters: string;
+            go_to_page: string;
             min_x_characters: string;
             month: string;
             next: string;
@@ -34,7 +35,9 @@ declare const messages: {
             none: string;
             nothing_found: string;
             notifications_empty: string;
+            of: string;
             or: string;
+            page: string;
             pagination_detail: string;
             previous: string;
             previous_month: string;
@@ -88,6 +91,7 @@ declare const messages: {
             error: string;
             file_must_be_of_type: string;
             filters: string;
+            go_to_page: string;
             min_x_characters: string;
             month: string;
             next: string;
@@ -95,7 +99,9 @@ declare const messages: {
             none: string;
             nothing_found: string;
             notifications_empty: string;
+            of: string;
             or: string;
+            page: string;
             pagination_detail: string;
             previous: string;
             previous_month: string;
@@ -160,6 +166,7 @@ declare const config: {
                 error: string;
                 file_must_be_of_type: string;
                 filters: string;
+                go_to_page: string;
                 min_x_characters: string;
                 month: string;
                 next: string;
@@ -167,7 +174,9 @@ declare const config: {
                 none: string;
                 nothing_found: string;
                 notifications_empty: string;
+                of: string;
                 or: string;
+                page: string;
                 pagination_detail: string;
                 previous: string;
                 previous_month: string;
@@ -221,6 +230,7 @@ declare const config: {
                 error: string;
                 file_must_be_of_type: string;
                 filters: string;
+                go_to_page: string;
                 min_x_characters: string;
                 month: string;
                 next: string;
@@ -228,7 +238,9 @@ declare const config: {
                 none: string;
                 nothing_found: string;
                 notifications_empty: string;
+                of: string;
                 or: string;
+                page: string;
                 pagination_detail: string;
                 previous: string;
                 previous_month: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -8,7 +8,8 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prepack": "npm run build"
   },
   "peerDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",

package/src/components/BasePagination.stories.js

@@ -25,6 +25,9 @@ const Template = (args) => ({
   <div style="max-width: 500px;">
     <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
   </div>
+  <div style="max-width: 250px;">
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
   `,
 });
 

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",