@antify/ui-module 1.5.1 → 1.7.1

package/src/runtime/components/buttons/AntActionButton.vue

@@ -3,7 +3,7 @@
  * This button is used for everything what is the primary
  * action like save, confirm, create, etc.
  */
-import {Position, ColorType, InputColorType, Size, Grouped} from '../../enums';
+import {Position, State, InputState, Size, Grouped} from '../../enums';
 import AntButton from './AntButton.vue';
 import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {computed, useSlots} from 'vue';
@@ -17,20 +17,20 @@ const props = withDefaults(
 		size?: Size;
 		disabled?: boolean;
 		grouped?: Grouped;
-		colorType?: ColorType;
+		state?: State;
 		skeleton?: boolean;
 		expanded?: boolean;
 		filled?: boolean;
 		hasPermission?: boolean;
 		tooltipPosition?: Position;
-		tooltipColorType?: InputColorType;
+		tooltipState?: InputState;
 		tooltipDelay?: number;
 	}>(), {
-		colorType: ColorType.primary,
+		state: State.primary,
 		hasPermission: true,
 		filled: true
 	}
-)
+);
 const slots = useSlots();
 const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
 const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
@@ -45,10 +45,10 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="colorType"
+    :state="state"
     :filled="filled"
     :tooltip-position="tooltipPosition"
-    :tooltip-color-type="hasPermissionTooltip ? InputColorType.info : tooltipColorType"
+    :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
     :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
     data-e2e="action-button"
     @click="$emit('click')"

package/src/runtime/components/buttons/AntButton.vue

@@ -7,7 +7,7 @@ import AntSpinner from '../AntSpinner.vue';
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import {handleEnumValidation} from '../../handler';
-import {ColorType, InputColorType, Position} from '../../enums';
+import {State, InputState, Position} from '../../enums';
 import {ButtonType} from './__types';
 import AntIcon from '../AntIcon.vue';
 import AntTooltip from '../AntTooltip.vue';
@@ -18,7 +18,7 @@ defineEmits(['click', 'blur']);
 const props = withDefaults(defineProps<{
 	filled?: boolean;
 	size?: Size;
-	colorType?: ColorType;
+	state?: State;
 	iconLeft?: IconDefinition;
 	iconRight?: IconDefinition;
 	to?: RouteLocationRaw;
@@ -32,10 +32,10 @@ const props = withDefaults(defineProps<{
 	outlined?: boolean;
 	noFocus?: boolean;
 	tooltipPosition?: Position;
-	tooltipColorType?: InputColorType;
+	tooltipState?: InputState;
 	tooltipDelay?: number;
 }>(), {
-	colorType: ColorType.base,
+	state: State.base,
 	disabled: false,
 	filled: false,
 	skeleton: false,
@@ -48,11 +48,11 @@ const props = withDefaults(defineProps<{
 	outlined: true,
 	noFocus: false,
 	tooltipPosition: Position.bottom,
-	tooltipColorType: InputColorType.base,
+	tooltipState: InputState.base,
 	tooltipDelay: 800
 });
 
-const hasAction = computed(() => (props.skeleton || props.readonly || props.disabled))
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const groupedClassList = computed(() => ({
 	'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
 	'rounded-none -mx-px': props.grouped === Grouped.center,
@@ -61,93 +61,96 @@ const groupedClassList = computed(() => ({
 }));
 const classes = computed(() => {
 	const variants = {
-		[ColorType.base]: 'ring-primary-200 outline-neutral-300',
-		[ColorType.danger]: 'ring-danger-200 outline-danger-500',
-		[ColorType.info]: 'ring-info-200 outline-info-500',
-		[ColorType.primary]: 'ring-primary-200 outline-primary-500',
-		[ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
-		[ColorType.success]: 'ring-success-200 outline-success-500',
-		[ColorType.warning]: 'ring-warning-200 outline-warning-500',
+		[State.base]: 'ring-primary-200 outline-neutral-300',
+		[State.danger]: 'ring-danger-200 outline-danger-500',
+		[State.info]: 'ring-info-200 outline-info-500',
+		[State.primary]: 'ring-primary-200 outline-primary-500',
+		[State.secondary]: 'ring-secondary-200 outline-secondary-500',
+		[State.success]: 'ring-success-200 outline-success-500',
+		[State.warning]: 'ring-warning-200 outline-warning-500',
 	};
 	const notFilledVariants = {
-		[ColorType.base]: 'bg-white text-for-white-bg-font',
-		[ColorType.danger]: 'bg-white text-danger-500',
-		[ColorType.info]: 'bg-white text-info-500',
-		[ColorType.primary]: 'bg-white text-primary-500',
-		[ColorType.secondary]: 'bg-white text-secondary-500',
-		[ColorType.success]: 'bg-white text-success-500',
-		[ColorType.warning]: 'bg-white text-warning-500',
+		[State.base]: 'bg-white text-for-white-bg-font',
+		[State.danger]: 'bg-white text-danger-500',
+		[State.info]: 'bg-white text-info-500',
+		[State.primary]: 'bg-white text-primary-500',
+		[State.secondary]: 'bg-white text-secondary-500',
+		[State.success]: 'bg-white text-success-500',
+		[State.warning]: 'bg-white text-warning-500',
 	};
 	const notFilledHoverVariants = {
-		[ColorType.base]: 'hover:bg-neutral-100',
-		[ColorType.danger]: 'hover:bg-danger-100',
-		[ColorType.info]: 'hover:bg-info-100',
-		[ColorType.primary]: 'hover:bg-primary-100',
-		[ColorType.secondary]: 'hover:bg-secondary-100',
-		[ColorType.success]: 'hover:bg-success-100',
-		[ColorType.warning]: 'hover:bg-warning-100',
+		[State.base]: 'hover:bg-neutral-100',
+		[State.danger]: 'hover:bg-danger-100',
+		[State.info]: 'hover:bg-info-100',
+		[State.primary]: 'hover:bg-primary-100',
+		[State.secondary]: 'hover:bg-secondary-100',
+		[State.success]: 'hover:bg-success-100',
+		[State.warning]: 'hover:bg-warning-100',
 	};
 	const filledVariants = {
-		[ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
-		[ColorType.danger]: 'bg-danger-500 text-danger-500-font',
-		[ColorType.info]: 'bg-info-500 text-info-500-font',
-		[ColorType.primary]: 'bg-primary-500 text-primary-500-font',
-		[ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
-		[ColorType.success]: 'bg-success-500 text-success-500-font',
-		[ColorType.warning]: 'bg-warning-500 text-warning-500-font',
+		[State.base]: 'bg-neutral-50 text-neutral-50-font',
+		[State.danger]: 'bg-danger-500 text-danger-500-font',
+		[State.info]: 'bg-info-500 text-info-500-font',
+		[State.primary]: 'bg-primary-500 text-primary-500-font',
+		[State.secondary]: 'bg-secondary-500 text-secondary-500-font',
+		[State.success]: 'bg-success-500 text-success-500-font',
+		[State.warning]: 'bg-warning-500 text-warning-500-font',
 	};
 	const filledHoverVariants = {
-		[ColorType.base]: 'hover:bg-neutral-200',
-		[ColorType.danger]: 'hover:bg-danger-600',
-		[ColorType.info]: 'hover:bg-info-600',
-		[ColorType.primary]: 'hover:bg-primary-600',
-		[ColorType.secondary]: 'hover:bg-secondary-600',
-		[ColorType.success]: 'hover:bg-success-600',
-		[ColorType.warning]: 'hover:bg-warning-600',
+		[State.base]: 'hover:bg-neutral-200',
+		[State.danger]: 'hover:bg-danger-600',
+		[State.info]: 'hover:bg-info-600',
+		[State.primary]: 'hover:bg-primary-600',
+		[State.secondary]: 'hover:bg-secondary-600',
+		[State.success]: 'hover:bg-success-600',
+		[State.warning]: 'hover:bg-warning-600',
 	};
 
 	return {
 		'transition-all inline-flex items-center justify-center relative font-medium': true,
 		'focus:z-10': true,
-		'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasAction.value,
-		'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
-		'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
+		'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
+		'p-1 text-xs gap-1': props.size === Size.xs2,
+		'p-1.5 text-xs gap-1.5': props.size === Size.xs,
+		'p-1.5 text-sm gap-1.5': props.size === Size.sm,
+		'p-2 text-sm gap-2': props.size === Size.md,
+		'p-2.5 text-sm gap-2.5': props.size === Size.lg,
 		'disabled:opacity-50 disabled:cursor-not-allowed': true,
 		'cursor-default': props.readonly,
-		'focus:ring-2': !props.readonly && props.size === Size.sm,
-		'focus:ring-4': !props.readonly && props.size === Size.md,
+		'focus:ring-2': !props.readonly && props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2,
+		'focus:ring-4': !props.readonly && props.size === Size.md || props.size === Size.lg,
 		'w-full': props.expanded,
 		'invisible': props.skeleton,
 		'outline outline-1 outline-offset-[-1px]': props.outlined,
 		...groupedClassList.value,
-		[variants[props.colorType]]: true,
-		[notFilledVariants[props.colorType]]: !props.filled,
-		[notFilledHoverVariants[props.colorType]]: !props.filled && !hasAction.value,
-		[filledVariants[props.colorType]]: props.filled,
-		[filledHoverVariants[props.colorType]]: props.filled && !hasAction.value,
+		[variants[props.state]]: true,
+		[notFilledVariants[props.state]]: !props.filled,
+		[notFilledHoverVariants[props.state]]: !props.filled && !hasInputState.value,
+		[filledVariants[props.state]]: props.filled,
+		[filledHoverVariants[props.state]]: props.filled && !hasInputState.value,
 	};
 });
 const iconColor = computed(() => {
 	const notFilledVariants = {
-		[ColorType.base]: 'text-for-white-bg-font',
-		[ColorType.danger]: 'text-danger-500',
-		[ColorType.info]: 'text-info-500',
-		[ColorType.primary]: 'text-primary-500',
-		[ColorType.secondary]: 'text-secondary-500',
-		[ColorType.success]: 'text-success-500',
-		[ColorType.warning]: 'text-warning-500',
+		[State.base]: 'text-for-white-bg-font',
+		[State.danger]: 'text-danger-500',
+		[State.info]: 'text-info-500',
+		[State.primary]: 'text-primary-500',
+		[State.secondary]: 'text-secondary-500',
+		[State.success]: 'text-success-500',
+		[State.warning]: 'text-warning-500',
 	};
 	const filledVariants = {
-		[ColorType.base]: 'text-for-white-bg-font',
-		[ColorType.danger]: 'text-danger-500-font',
-		[ColorType.info]: 'text-info-500-font',
-		[ColorType.primary]: 'text-primary-500-font',
-		[ColorType.secondary]: 'text-secondary-500-font',
-		[ColorType.success]: 'text-success-500-font',
-		[ColorType.warning]: 'text-warning-500-font',
+		[State.base]: 'text-for-white-bg-font',
+		[State.danger]: 'text-danger-500-font',
+		[State.info]: 'text-info-500-font',
+		[State.primary]: 'text-primary-500-font',
+		[State.secondary]: 'text-secondary-500-font',
+		[State.success]: 'text-success-500-font',
+		[State.warning]: 'text-warning-500-font',
 	};
 
-	return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
+	return props.filled ? filledVariants[props.state] : notFilledVariants[props.state];
 });
 const type = computed(() => {
 	if (props.to !== undefined) {
@@ -161,12 +164,19 @@ const is = computed(() => {
 		return 'div';
 	}
 
-	return props.to !== undefined ? 'router-link' : 'button'
-})
+	return props.to !== undefined ? 'router-link' : 'button';
+});
+const getIconSize = computed(() => {
+	if (props.size === Size.xs || props.size === Size.xs2) {
+		return IconSize.xs;
+	} else {
+		return IconSize.sm;
+	}
+});
 
 onMounted(() => {
 	handleEnumValidation(props.size, Size, 'size');
-	handleEnumValidation(props.colorType, ColorType, 'colorType');
+	handleEnumValidation(props.state, State, 'state');
 	handleEnumValidation(props.grouped, Grouped, 'grouped');
 });
 </script>
@@ -176,7 +186,7 @@ onMounted(() => {
     class="relative inline-flex h-fit"
     :class="{'w-full': props.expanded}"
     data-e2e="button"
-    :data-e2e-color-type="props.colorType"
+    :data-e2e-state="props.state"
   >
     <AntSkeleton
       v-if="skeleton"
@@ -188,7 +198,7 @@ onMounted(() => {
     <AntTooltip
       :expanded="expanded"
       :position="tooltipPosition"
-      :color-type="tooltipColorType"
+      :state="tooltipState"
       :delay="tooltipDelay"
     >
       <template #default>
@@ -198,14 +208,14 @@ onMounted(() => {
           :type="type"
           :to="to"
           :disabled="disabled || undefined"
-          :tabindex="noFocus || hasAction ? '-1' : '0'"
+          :tabindex="noFocus || hasInputState ? '-1' : '0'"
           @click="() => !props.readonly ? $emit('click') : null"
           @blur="() => !props.readonly ? $emit('blur') : null"
         >
           <AntSpinner
             v-if="spinner"
             :size="size"
-            :color-type="colorType"
+            :state="state"
             :inverted="!filled"
           />
 
@@ -216,7 +226,7 @@ onMounted(() => {
             <AntIcon
               v-if="iconLeft"
               :icon="iconLeft"
-              :size="size as unknown as IconSize"
+              :size="getIconSize"
               :color="iconColor"
             />
           </slot>
@@ -232,7 +242,7 @@ onMounted(() => {
             <AntIcon
               v-if="iconRight"
               :icon="iconRight"
-              :size="size as unknown as IconSize"
+              :size="getIconSize"
               :color="iconColor"
             />
           </slot>

package/src/runtime/components/buttons/AntCreateButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.primary"
+    :state="State.primary"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faPlus : undefined"

package/src/runtime/components/buttons/AntDeleteButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faTrash} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.danger"
+    :state="State.danger"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faTrash : undefined"

package/src/runtime/components/buttons/AntDuplicateButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faCopy} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.base"
+    :state="State.base"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faCopy : undefined"

package/src/runtime/components/buttons/AntEditButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faPencil} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.base"
+    :state="State.base"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faPencil : undefined"

package/src/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="false"
-    :color-type="ColorType.primary"
+    :state="State.primary"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faFloppyDisk : undefined"

package/src/runtime/components/buttons/AntSaveButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, ColorType} from '../../enums';
+import {Position, Size, Grouped, State} from '../../enums';
 import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 <template>
   <AntActionButton
     :filled="true"
-    :color-type="ColorType.primary"
+    :state="State.primary"
     :size="size"
     :disabled="disabled"
     :icon-left="iconVariant ? faFloppyDisk : undefined"

package/src/runtime/components/crud/AntCrudDetailActions.vue

@@ -18,7 +18,7 @@ withDefaults(defineProps<{
 
 <template>
   <div
-    class="flex justify-between p-2.5 gap-2.5 bg-white"
+    class="flex justify-between p-2 gap-2 bg-white"
     data-e2e="crud-detail-actions"
   >
     <div class="flex gap-2.5">

package/src/runtime/components/crud/AntCrudDetailNav.vue

@@ -23,7 +23,7 @@ const dialogOpen = ref(false);
 
 <template>
   <div
-    class="flex justify-between items-stretch gap-2.5 bg-white"
+    class="flex justify-between items-stretch gap-2 bg-white"
     data-e2e="crud-detail-nav"
   >
     <slot name="tabs">
@@ -32,7 +32,7 @@ const dialogOpen = ref(false);
       />
     </slot>
 
-    <div class="flex gap-2.5 pr-2.5 py-2.5">
+    <div class="flex gap-2 pr-2 py-2">
       <slot name="buttons">
         <slot name="before-delete-button" />
 

package/src/runtime/components/crud/AntCrudTableFilter.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 // TODO:: This component works only with vue-router. Make it work in storybook.
-import AntSearch from '../form/AntSearch.vue';
+import AntSearch from '../inputs/AntSearch.vue';
 import AntCreateButton from '../buttons/AntCreateButton.vue';
 import AntDropdown from '../AntDropdown.vue';
 import {computed, ref, watch} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
-import {ColorType, Grouped, Position} from '../../enums';
+import {State, Grouped, Position} from '../../enums';
 import {useRoute, useRouter} from 'vue-router';
 
 const props = withDefaults(defineProps<{
@@ -29,14 +29,14 @@ const router = useRouter();
 const route = useRoute();
 
 const showDropdown = ref(false);
-const _fullWidth = ref(props.fullWidth)
+const _fullWidth = ref(props.fullWidth);
 const search = computed({
 	get: () => route.query[props.searchQuery] as string || '',
 	set: (value) => {
 		const query = {
 			...route.query,
 			[props.searchQuery]: value
-		}
+		};
 
 		if (!value) {
 			delete query[props.searchQuery];
@@ -46,23 +46,23 @@ const search = computed({
 			await router.replace({
 				...route,
 				query
-			})
+			});
 
-			emit('search', value)
-		})()
+			emit('search', value);
+		})();
 	}
-})
+});
 
 watch(() => props.fullWidth, (val) => {
 	setTimeout(() => {
-		_fullWidth.value = val
-	}, val ? 250 : 300)
-})
+		_fullWidth.value = val;
+	}, val ? 250 : 300);
+});
 </script>
 
 <template>
   <div
-    class="flex h-full items-center p-2.5 gap-2.5 bg-white"
+    class="flex h-full items-center p-2 gap-2 bg-white"
     data-e2e="crud-table-filter"
   >
     <div
@@ -83,7 +83,7 @@ watch(() => props.fullWidth, (val) => {
       >
         <div class="flex">
           <AntButton
-            :color-type="hasFilter ? ColorType.info : ColorType.base"
+            :state="hasFilter ? State.info : State.base"
             :grouped="hasFilter ? Grouped.left : Grouped.none"
             :skeleton="skeleton"
             :icon-left="faFilter"
@@ -92,7 +92,7 @@ watch(() => props.fullWidth, (val) => {
 
           <AntButton
             v-if="hasFilter"
-            :color-type="ColorType.info"
+            :state="State.info"
             :grouped="Grouped.right"
             :skeleton="skeleton"
             :icon-left="faMultiply"

package/src/runtime/components/crud/AntCrudTableNav.vue

@@ -4,14 +4,14 @@
  * TODO:: test me in storybook through vue router
  * TODO:: fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter, useRoute} from 'vue-router';
 import AntPagination from '../AntPagination.vue';
 import {computed, ref, watch} from 'vue';
-import AntSelect from '../form/AntSelect.vue';
+import AntSelect from '../inputs/AntSelect.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {type SelectOption} from '../form/__types';
+import {type SelectOption} from '../inputs/__types';
 
-const emit = defineEmits(['changeItemsPerPage', 'changePage'])
+const emit = defineEmits(['changeItemsPerPage', 'changePage']);
 const props = withDefaults(
   defineProps<{
     count: number | null,
@@ -28,55 +28,64 @@ const props = withDefaults(
     validItemsPerPage: () => [20, 50, 100, 200],
     skeleton: false
   }
-)
+);
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 const itemsPerPageOptions = computed(() =>
   props.validItemsPerPage.map(item => ({
     label: `${item}`,
     value: item
   }) as SelectOption)
-)
+);
 const page = computed(() => {
-  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
 
   if (_page <= 0 || _page > pages.value) {
-    return 1
+    return 1;
   }
 
-  return _page
-})
+  return _page;
+});
 const itemsPerPage = computed({
   get() {
     return route.query[props.itemsPerPageQuery] ?
       Number.parseInt(route.query[props.itemsPerPageQuery]) :
-      props.validItemsPerPage[0]
+      props.validItemsPerPage[0];
   },
   set(val) {
-    const query = {...route.query}
-    query[props.itemsPerPageQuery] = `${val}`
+    const query = {...route.query};
+    query[props.itemsPerPageQuery] = `${val}`;
     delete query[props.pageQuery];
 
     (async () => {
       await router.push({
         ...route,
         query
-      })
+      });
 
-      emit('changeItemsPerPage', val)
-    })()
+      emit('changeItemsPerPage', val);
+    })();
   }
-})
-const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)))
-const pages = computed(() => Math.ceil(props.count / itemsPerPage.value))
-const _fullWidth = ref(props.fullWidth)
+});
+const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1);
+const toItems = computed(() => {
+	const items = itemsPerPage.value * page.value;
+
+	if (page.value === pages.value &&  items > props.count) {
+		return props.count;
+	}
+
+	return itemsPerPage.value * page.value;
+});
+const pages = computed(() => Math.ceil(props.count / itemsPerPage.value));
+const _fullWidth = ref(props.fullWidth);
 
 watch(() => props.fullWidth, (val) => {
   setTimeout(() => {
-    _fullWidth.value = val
-  }, val ? 300 : 200)
-})
+    _fullWidth.value = val;
+  }, val ? 300 : 200);
+});
 </script>
 
 <template>
@@ -85,7 +94,7 @@ watch(() => props.fullWidth, (val) => {
     data-e2e="crud-table-nav"
   >
     <div
-      class="flex w-full items-center p-2.5"
+      class="flex w-full items-center p-2"
       :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
     >
       <div
@@ -119,7 +128,7 @@ watch(() => props.fullWidth, (val) => {
             absolute
           />
 
-          <span class="font-medium">{{ fromItems }} - {{ itemsPerPage * page }}</span>
+          <span class="font-medium">{{ fromItems }} - {{ toItems }}</span>
           <span>of</span>
           <span
             class="font-medium"