fix(admin): add load more to shipping methods input

apps/admin-preset-default/src/components/DefaultShippingMethodsInput.vue

@@ -20,7 +20,7 @@
       </PdkTableRow>
 
       <PdkTableRow
-        v-for="shippingMethod in shippingMethods"
+        v-for="shippingMethod in items"
         :key="shippingMethod.value">
         <PdkTableCol
           component="th"
@@ -38,6 +38,12 @@
         </PdkTableCol>
       </PdkTableRow>
     </PdkTable>
+
+    <a
+      v-if="hasMore"
+      href="#"
+      @click.prevent="loadMore"
+      v-text="translate('load_more')" />
   </div>
 </template>
 
@@ -49,6 +55,7 @@ import {
   type ShippingMethodsInputProps,
   useAdminConfig,
   useLanguage,
+  useLoadMore,
   useShippingMethodsInputContext,
 } from '@myparcel-pdk/admin';
 import {isEnumValue} from '@myparcel/ts-utils';
@@ -63,4 +70,6 @@ const {translate} = useLanguage();
 const config = useAdminConfig();
 
 const {shippingMethods, elements, shippingMethodTypes, refs} = useShippingMethodsInputContext(props, emit);
+
+const {items, hasMore, loadMore} = useLoadMore({items: shippingMethods, step: 5});
 </script>

apps/admin-preset-default/src/components/DefaultTable.vue

@@ -6,12 +6,17 @@
     </thead>
 
     <TransitionGroup
-      :name="config?.transitions?.tableRow"
+      v-if="transitionName"
+      :name="transitionName"
       tag="tbody">
       <!-- Table body -->
       <slot />
     </TransitionGroup>
 
+    <tbody v-else>
+      <slot />
+    </tbody>
+
     <tfoot v-if="$slots.footer">
       <!-- Table footer -->
       <slot name="footer" />
@@ -23,7 +28,14 @@
 /**
  * A table component that can be used to render data via slots.
  */
+import {computed} from 'vue';
 import {AdminComponent, useAdminConfig} from '@myparcel-pdk/admin';
 
+const props = defineProps<{transition?: false | string}>();
+
 const config = useAdminConfig();
+
+const transitionName = computed(() => {
+  return props.transition === false ? undefined : props.transition ?? config.transitions?.tableRow;
+});
 </script>

apps/admin/src/composables/index.ts

@@ -15,6 +15,7 @@ export * from './useElementContext';
 export * from './useElementOptions';
 export * from './useGlobalPdkAdmin';
 export * from './useInputWithOptionsContext';
+export * from './useLoadMore';
 export * from './useLoading';
 export * from './useLogger';
 export * from './useModalElementContext';

apps/admin/src/composables/useLoadMore.ts

@@ -0,0 +1,46 @@
+import {computed, type ComputedRef, type MaybeRef, ref, type Ref, toValue} from 'vue';
+import {type ReadonlyOr} from '@myparcel/ts-utils';
+
+export type UseLoadMoreOptions<Item = unknown> = {
+  step?: number;
+  start?: number;
+  items: ReadonlyOr<MaybeRef<Item[]>>;
+};
+
+export type UseLoadMore<Item = unknown> = {
+  loadMore(): void;
+  hasMore: ComputedRef<boolean>;
+  loaded: Ref<number>;
+  items: ComputedRef<Item[]>;
+};
+
+export const useLoadMore = <Item = unknown>(options: UseLoadMoreOptions<Item>): UseLoadMore<Item> => {
+  const loaded = ref(options.start ?? options.step ?? toValue(options.items).length - 1);
+
+  const hasMore = computed(() => loaded.value < toValue(options.items).length - 1);
+
+  const loadMore = () => {
+    if (!hasMore.value) {
+      return;
+    }
+
+    const step = options.step ?? 1;
+
+    const maxLength = toValue(options.items).length;
+
+    if (loaded.value + step > maxLength) {
+      loaded.value = maxLength;
+    } else {
+      loaded.value += step;
+    }
+  };
+
+  const items = computed(() => toValue(options.items).slice(0, loaded.value));
+
+  return {
+    items,
+    loaded,
+    hasMore,
+    loadMore,
+  };
+};

apps/admin/src/composables/useShippingMethodsInputContext.ts

@@ -10,7 +10,6 @@ import {
 } from '../types';
 import {AdminComponent} from '../data';
 import {useElementOptions} from './useElementOptions';
-import {useLanguage} from './language';
 
 const SHIPPING_METHOD_TYPES = Object.freeze([
   {label: 'option_none', value: TriState.Off},
@@ -35,8 +34,6 @@ export const useShippingMethodsInputContext = <T extends ShippingMethodsInputMod
   props: ShippingMethodsInputProps<T>,
   emit?: (name: 'update:modelValue', value: T) => void,
 ): ShippingMethodsInputContext => {
-  const {translate} = useLanguage();
-
   const {options: shippingMethods} = useElementOptions<string, ShippingMethodsInputProps<T>>(props);
   const model = useVModel(props, 'modelValue', emit);
 

apps/admin/src/index.ts

@@ -99,6 +99,7 @@ export {
   useGlobalPdkAdmin,
   useInputWithOptionsContext,
   useLanguage,
+  useLoadMore,
   useLogger,
   useModalContext,
   useModalElementContext,