sprintify-ui 0.0.162 → 0.0.164

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

@@ -1,6 +1,6 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    contrast: 'low' | 'high';
-    color: string;
+    contrast?: "high" | "low" | undefined;
+    color?: string | undefined;
     size?: "base" | "sm" | "lg" | undefined;
     icon?: string | undefined;
 }>, {
@@ -9,8 +9,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     icon: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    contrast: 'low' | 'high';
-    color: string;
+    contrast?: "high" | "low" | undefined;
+    color?: string | undefined;
     size?: "base" | "sm" | "lg" | undefined;
     icon?: string | undefined;
 }>, {

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { DataTableQuery, MenuItemInterface, PaginationMetadata } from '@/types';
+import { Collection, DataTableQuery, MenuItemInterface } from '@/types';
 type Direction = 'asc' | 'desc';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /**
@@ -120,7 +120,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     historyMode: boolean;
 }>, {
     default: (_: {
-        items: import("@/types").CollectionItem[];
+        items: Collection;
         loading: boolean;
         error: boolean;
         firstLoad: boolean;
@@ -131,7 +131,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         onPageChange: (p: number) => void;
     }) => any;
     sidebarTop: (_: {
-        paginationMetadata: PaginationMetadata | null;
+        paginationMetadata: import("@/types").PaginationMetadata | null;
     }) => any;
     filters: (_: {
         query: {
@@ -145,7 +145,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         updateQueryValue: (key: string, value: any) => void;
     }) => any;
     sidebarBottom: (_: {
-        paginationMetadata: PaginationMetadata | null;
+        paginationMetadata: import("@/types").PaginationMetadata | null;
     }) => any;
 }>;
 export default _default;

package/dist/types/src/composables/paginatedData.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import { Collection, PaginatedCollection, ResourceCollection, PaginationMetadata } from '@/types';
+export declare function useHasPaginatedData(data: Ref<Collection | PaginatedCollection | ResourceCollection | null>): {
+    items: import("vue").ComputedRef<Collection>;
+    paginationMetadata: import("vue").ComputedRef<PaginationMetadata | null>;
+    lastPage: import("vue").ComputedRef<number>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.162",
+  "version": "0.0.164",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAutocompleteFetch.vue

@@ -52,8 +52,15 @@
 import { config } from '@/index';
 import { debounce, throttle } from 'lodash';
 import { PropType } from 'vue';
-import { Option, SelectConfiguration } from '@/types';
+import {
+  Collection,
+  Option,
+  PaginatedCollection,
+  ResourceCollection,
+  SelectConfiguration,
+} from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
+import { useHasPaginatedData } from '@/composables/paginatedData';
 
 /**
  * Behavior notes
@@ -150,16 +157,20 @@ const emit = defineEmits([
 const showLoading = ref(false);
 const fetching = ref(false);
 const firstSearch = ref(false);
-const reachedEnd = ref(false);
 const keywords = ref('');
 const page = ref(1);
 const options = ref<Option[]>([]);
 
+const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
+  null
+);
+
+const { items, lastPage } = useHasPaginatedData(data);
+
 const autocomplete = ref<InstanceType<typeof BaseAutocomplete> | null>(null);
 
 const onTyping = (query: string) => {
   page.value = 1;
-  reachedEnd.value = false;
   keywords.value = query;
   showLoading.value = true;
   debouncedSearch();
@@ -180,21 +191,22 @@ const onClear = () => {
 };
 
 const scrollBottom = throttle(() => {
-  if (fetching.value) {
+  if (page.value >= lastPage.value) {
     return;
   }
 
-  if (!reachedEnd.value) {
-    page.value++;
-    search();
+  if (fetching.value) {
+    return;
   }
+
+  page.value++;
+  search();
 }, 500);
 
 watch(
   () => props.url,
   () => {
     page.value = 1;
-    reachedEnd.value = false;
     search();
   }
 );
@@ -215,16 +227,15 @@ function search() {
       },
     })
     .then((response: any) => {
-      const data = response.data.data as Option[];
-
-      if (data.length == 0) {
-        reachedEnd.value = true;
-      }
+      data.value = response.data as
+        | ResourceCollection
+        | PaginatedCollection
+        | Collection;
 
       if (page.value == 1) {
-        options.value = data;
+        options.value = items.value;
       } else {
-        options.value.push(...data);
+        options.value.push(...items.value);
       }
 
       firstSearch.value = true;

package/src/components/BaseBadge.vue

@@ -15,8 +15,8 @@ import { BaseIcon } from '.';
 
 const props = withDefaults(
   defineProps<{
-    contrast: 'low' | 'high';
-    color: string;
+    contrast?: 'low' | 'high';
+    color?: string;
     size?: 'sm' | 'base' | 'lg';
     icon?: string;
   }>(),

package/src/components/BaseDataIterator.vue

@@ -213,7 +213,7 @@ const DEFAULT_QUERY = {
 </script>
 
 <script lang="ts" setup>
-import { cloneDeep, debounce, isArray, merge, set } from 'lodash';
+import { cloneDeep, debounce, merge, set } from 'lodash';
 import hash from 'object-hash';
 import { PropType } from 'vue';
 import {
@@ -221,7 +221,6 @@ import {
   DataTableQuery,
   MenuItemInterface,
   PaginatedCollection,
-  PaginationMetadata,
   ResourceCollection,
 } from '@/types';
 
@@ -232,6 +231,7 @@ import BasePagination from './BasePagination.vue';
 import BaseModalSide from './BaseModalSide.vue';
 import { config } from '@/index';
 import { useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { useHasPaginatedData } from '@/composables/paginatedData';
 
 const props = defineProps({
   /**
@@ -571,6 +571,7 @@ function fetch(force = false, showLoading = true) {
   const urlQueryString = urlSplit[1] ?? null;
   const urlQuery = config.parseQueryString(urlQueryString);
 
+  // Ordered by priority
   const allParams = merge(
     cloneDeep(query.value),
     cloneDeep(props.urlQuery),
@@ -615,45 +616,7 @@ const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
   null
 );
 
-const items = computed(() => {
-  if (!data.value) {
-    return [];
-  }
-  if (isArray(data.value)) {
-    return data.value;
-  }
-  return data.value.data;
-});
-
-const paginationMetadata = computed<PaginationMetadata | null>(() => {
-  const defaultMeta = {
-    current_page: 1,
-    last_page: 1,
-    per_page: 1,
-    total: 0,
-  };
-
-  if (!data.value) {
-    return defaultMeta;
-  }
-  if (isArray(data.value)) {
-    return defaultMeta;
-  }
-  if ('meta' in data.value) {
-    return data.value.meta;
-  }
-
-  if (data.value.current_page) {
-    return {
-      current_page: data.value.current_page,
-      last_page: data.value.last_page,
-      per_page: data.value.per_page,
-      total: data.value.total,
-    };
-  }
-
-  return null;
-});
+const { items, paginationMetadata, lastPage } = useHasPaginatedData(data);
 
 const page = computed((): number => {
   if (query.value.page && parseInt(query.value.page + '')) {
@@ -662,13 +625,6 @@ const page = computed((): number => {
   return 1;
 });
 
-const lastPage = computed(() => {
-  if (!paginationMetadata.value) {
-    return 1;
-  }
-  return paginationMetadata.value.last_page;
-});
-
 const sortField = computed((): string => {
   return query.value.sort?.trim().replace(/^(-)/, '') ?? '';
 });

package/src/components/BaseDataTable.stories.js

@@ -12,7 +12,6 @@ export default {
   argTypes: {},
   args: {
     url: 'https://effettandem.com/api/content/articles',
-    resource: 'articles',
     urlQuery: {
       per_page: 5,
     },

package/src/components/BaseTagAutocompleteFetch.vue

@@ -39,11 +39,17 @@
 </template>
 
 <script lang="ts" setup>
-import { debounce, throttle } from 'lodash';
+import { debounce, isArray, throttle } from 'lodash';
 import { config } from '@/index';
 import { PropType } from 'vue';
-import { Option } from '@/types';
+import {
+  Collection,
+  Option,
+  PaginatedCollection,
+  ResourceCollection,
+} from '@/types';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import { useHasPaginatedData } from '@/composables/paginatedData';
 
 const props = defineProps({
   modelValue: {
@@ -99,14 +105,18 @@ const http = config.http;
 const showLoading = ref(false);
 const fetching = ref(false);
 const firstSearch = ref(false);
-const reachedEnd = ref(false);
 const keywords = ref('');
 const page = ref(1);
 const options = ref<Option[]>([]);
 
+const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
+  null
+);
+
+const { items, lastPage } = useHasPaginatedData(data);
+
 const onTyping = (query: string) => {
   page.value = 1;
-  reachedEnd.value = false;
 
   if (keywords.value != query) {
     keywords.value = query;
@@ -122,15 +132,24 @@ const onOpen = () => {
 };
 
 const scrollBottom = throttle(() => {
+  if (page.value >= lastPage.value) {
+    return;
+  }
   if (fetching.value) {
     return;
   }
 
-  if (!reachedEnd.value) {
-    page.value++;
+  page.value++;
+  search();
+}, 500);
+
+watch(
+  () => props.url,
+  () => {
+    page.value = 1;
     search();
   }
-}, 500);
+);
 
 const search = () => {
   if (fetching.value) {
@@ -149,16 +168,15 @@ const search = () => {
       },
     })
     .then((response: any) => {
-      const data = response.data.data as Option[];
-
-      if (data.length == 0) {
-        reachedEnd.value = true;
-      }
+      data.value = response.data as
+        | ResourceCollection
+        | PaginatedCollection
+        | Collection;
 
       if (page.value == 1) {
-        options.value = data;
+        options.value = items.value;
       } else {
-        options.value.push(...data);
+        options.value.push(...items.value);
       }
 
       firstSearch.value = true;

package/src/composables/paginatedData.ts

@@ -0,0 +1,65 @@
+import { Ref } from 'vue';
+import {
+  Collection,
+  PaginatedCollection,
+  ResourceCollection,
+  PaginationMetadata,
+} from '@/types';
+import { isArray } from 'lodash';
+
+export function useHasPaginatedData(
+  data: Ref<Collection | PaginatedCollection | ResourceCollection | null>
+) {
+  const items = computed(() => {
+    if (!data.value) {
+      return [];
+    }
+    if (isArray(data.value)) {
+      return data.value;
+    }
+    return data.value.data;
+  });
+
+  const paginationMetadata = computed<PaginationMetadata | null>(() => {
+    const defaultMeta = {
+      current_page: 1,
+      last_page: 1,
+      per_page: 1,
+      total: 0,
+    };
+
+    if (!data.value) {
+      return defaultMeta;
+    }
+    if (isArray(data.value)) {
+      return defaultMeta;
+    }
+    if ('meta' in data.value) {
+      return data.value.meta;
+    }
+
+    if (data.value.current_page) {
+      return {
+        current_page: data.value.current_page,
+        last_page: data.value.last_page,
+        per_page: data.value.per_page,
+        total: data.value.total,
+      };
+    }
+
+    return null;
+  });
+
+  const lastPage = computed(() => {
+    if (!paginationMetadata.value) {
+      return 1;
+    }
+    return paginationMetadata.value.last_page;
+  });
+
+  return {
+    items,
+    paginationMetadata,
+    lastPage,
+  };
+}