Allow ipl-pagination to show a loading spinner

IPLSplatoon · Jan 15, 2024 · f91c51e · f91c51e
1 parent b5d4ae9
commit f91c51e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/docs/examples/PaginationExample.vue b/docs/examples/PaginationExample.vue
@@ -4,14 +4,22 @@
         <ipl-pagination
             v-model="page"
             :max-page="10"
+            :loading="loading"
         />
         <!-- #endregion example -->
     </div>
+    <div class="horizontal-layout">
+        <ipl-checkbox
+            v-model="loading"
+            label="Loading"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { IplPagination } from '../../src';
+import { IplPagination, IplCheckbox } from '../../src';
 import { ref } from 'vue';
 
 const page = ref(1);
+const loading = ref(false);
 </script>
diff --git a/src/components/__tests__/__snapshots__/iplPagination.test.ts.snap b/src/components/__tests__/__snapshots__/iplPagination.test.ts.snap
@@ -6,6 +6,7 @@ exports[`iplPagination matches snapshot 1`] = `
     <ipl-select-stub modelvalue="1" options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" disabled="false"></ipl-select-stub><span> of 9 pages</span>
   </div>
   <div class="page-buttons">
+    <!--v-if-->
     <ipl-button-stub icon="[object Object]" color="transparent" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true"></ipl-button-stub>
     <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="true"></ipl-button-stub>
   </div>

diff --git a/src/components/iplPagination.vue b/src/components/iplPagination.vue
@@ -11,6 +11,12 @@
             <span> of {{ pluralize('page', props.maxPage) }}</span>
         </div>
         <div class="page-buttons">
+            <ipl-spinner
+                v-if="props.loading"
+                size="2px"
+                width="24px"
+                color="var(--ipl-body-text-color)"
+            />
             <ipl-button
                 inline
                 color="transparent"
@@ -30,23 +36,26 @@
 </template>
 
 <script setup lang="ts">
-import IplSpace from './iplSpace.vue';
 import { computed } from 'vue';
-import IplSelect from './iplSelect.vue';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import IplSpace from './iplSpace.vue';
+import IplSelect from './iplSelect.vue';
 import IplButton from './iplButton.vue';
+import IplSpinner from './iplSpinner.vue';
 import { SpaceColor } from '../helpers/spaceColorHelper';
 import { pluralize } from '../helpers/stringHelper';
 
 const props = withDefaults(defineProps<{
     modelValue?: number
     maxPage?: number
-    color?: SpaceColor
+    color?: SpaceColor,
+    loading?: boolean
 }>(), {
     modelValue: 1,
     maxPage: 1,
-    color: 'primary'
+    color: 'primary',
+    loading: false
 });
 const emit = defineEmits<{
     'update:modelValue': [newValue: number]
@@ -85,10 +94,10 @@ const pageOptions = computed(() => Array.from({ length: props.maxPage }, (_, i)
 
     > .page-buttons {
         font-size: 0.75em;
-
-        > *:first-child {
-            margin-right: 4px;
-        }
+        display: grid;
+        align-items: center;
+        grid-auto-flow: column;
+        gap: 4px;
     }
 }
 </style>