refactor: update prop types for Input, Select, and CustomRangePicker components; enhance Filters and Back types

Author: yaroslav8765

adminforth/spa/src/afcl/Input.vue

@@ -44,7 +44,7 @@ const isIos = coreStore.isIos;
 const props = defineProps<{
   type: string,
   fullWidth?: boolean,
-  modelValue: string,
+  modelValue: string | number | null,
   suffix?: string,
   prefix?: string,
   readonly?: boolean,

adminforth/spa/src/afcl/Select.vue

@@ -119,7 +119,7 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick,type PropType, t
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
-type ISingleSelectModelValue = string | number;
+type ISingleSelectModelValue = string | number | boolean;
 
 const props = defineProps({
   options: Array,

adminforth/spa/src/components/CustomRangePicker.vue

@@ -35,25 +35,21 @@ import {computed, onMounted, ref, watch} from "vue";
 import debounce from 'debounce'
 import RangePicker from './RangePicker.vue';
 
-const props = defineProps({
-  valueStart: {
-    default: '',
-  },
-  valueEnd: {
-    default: '',
-  },
-  min: {},
-  max: {},
-});
+const props = defineProps<{
+  valueStart: number | null,
+  valueEnd: number | null,
+  min: number,
+  max: number,
+}>()
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
 const minFormatted = computed(() => Math.floor(<number>props.min));
 const maxFormatted = computed(() => Math.ceil(<number>props.max));
 
 
-const start = ref<string | number>(props.valueStart);
-const end = ref<string | number>(props.valueEnd);
+const start = ref<number | null>(props.valueStart);
+const end = ref<number | null>(props.valueEnd);
 
 const sliderValue = ref<[number, number]>([minFormatted.value, maxFormatted.value]);
 
@@ -71,8 +67,8 @@ watch([start, end], () => {
 
 const updateFromSlider =
     debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? '': value[0];
-      end.value = value[1] === maxFormatted.value ? '': value[1];
+      start.value = value[0] === minFormatted.value ? null : value[0];
+      end.value = value[1] === maxFormatted.value ? null : value[1];
     }, 500);
 
 onMounted(() => {

adminforth/spa/src/components/Filters.vue

@@ -13,6 +13,7 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   type AdminForthConfigMenuItem,
   type AnnouncementBadgeResponse,
   type AdminForthResourceColumnInputCommon,
+  type ColumnMinMaxValue,
 } from './Common.js';
 
 export interface ICodeInjector {
@@ -256,7 +257,7 @@ export interface IAdminForthDataSourceConnector {
    * 
    * Internally should call {@link IAdminForthDataSourceConnector.getFieldValue} for both min and max values.
    */
-  getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
+  getMinMaxForColumnsWithOriginalTypes({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<ColumnMinMaxValue>;
 
 
   /**
@@ -309,7 +310,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
     newValues: any, 
   }): Promise<{ok: boolean, error?: string}>;
 
-  getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
+  getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<ColumnMinMaxValue>;
 
   deleteMany?({resource, recordIds}:{resource: AdminForthResource, recordIds: any[]}): Promise<number>;
 }

adminforth/types/Back.ts

@@ -1257,4 +1257,8 @@ export interface GetBaseConfigResponse {
   config: AdminForthConfigForFrontend,
   adminUser: AdminUser,
   version: string,
+}
+
+export interface ColumnMinMaxValue { 
+  [key: string]: { min: any, max: any } 
 }

adminforth/types/Common.ts

@@ -82,13 +82,13 @@
       </Select>
 
 
-      <Input type="number" class="w-full">
+      <Input type="number" class="w-full" v-model="numberInput">
         <template #suffix>
           USD
         </template>
       </Input>
 
-      <Input type="text" class="w-full">
+      <Input type="text" class="w-full" v-model="textInput">
         <template #rightIcon>
           <IconSearchOutline class="w-5 h-5 text-lightPrimary dark:text-darkPrimary "/>
         </template>
@@ -431,6 +431,8 @@ const selected = ref(null)
 const selected2 = ref([])
 const valueStart = ref()
 const dialogRef = ref()
+const numberInput = ref()
+const textInput = ref()
 
 const deltaToColor = (delta: number) => {
   if (delta < -10) return '#B91C1C' // bright red
@@ -514,4 +516,10 @@ async function loadPageData(data) {
   }
 }
 
+watch(numberInput, (newVal) => {
+  console.log('Number input changed:', newVal, typeof newVal);
+});
+watch(textInput, (newVal) => {
+  console.log('Text input changed:', newVal, typeof newVal);
+});
 </script>