feat: add defaultValue prop to filter components for improved initial…

…ization

- Introduced a defaultValue prop in FilterInput.vue, FilterSelect.vue, and ListLayout.vue to allow for pre-setting values.
- Updated the initialization logic in FilterInput and FilterSelect to utilize the defaultValue prop on component mount.
- Enhanced ListActionFilter interface to include defaultValue for better type safety and consistency across filter components.
- Improved user experience by ensuring filters can start with predefined values, streamlining the filtering process.

src/components/ui/filter/FilterInput.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import { debounce } from '@/utils';
 
-defineProps<{
+const props = defineProps<{
   id?: string;
   prefixIcon?: Icon;
   label?: string;
   placeholder?: string;
+  defaultValue?: any;
 }>();
 
 const emit = defineEmits<{
@@ -16,6 +17,9 @@ const emit = defineEmits<{
 }>();
 
 const internalModelValue = ref();
+onBeforeMount(() => {
+  internalModelValue.value = props.defaultValue;
+});
 
 const onChange = debounce((value: any) => {
   emit('change', value);

src/components/ui/filter/FilterSelect.vue

@@ -14,6 +14,7 @@ const props = withDefaults(
     options?: SelectOption[];
     optionsRemote?: FilterSelectOptionsRemote;
     noAllOption?: boolean;
+    defaultValue?: any;
   }>(),
   {
     clearable: true,
@@ -62,7 +63,11 @@ const getOptions = async () => {
 onBeforeMount(getOptions);
 
 const initializeModelValue = () => {
-  const { options, noAllOption } = props;
+  const { options, noAllOption, defaultValue } = props;
+  if (typeof defaultValue !== 'undefined') {
+    internalModelValue.value = defaultValue;
+    return;
+  }
   if (noAllOption) {
     internalModelValue.value = options ? options[0]?.value : undefined;
   }

src/interfaces/layout/content/list/ListLayout.d.ts

@@ -45,6 +45,7 @@ export declare global {
   }
 
   interface ListActionFilter extends ListAction {
+    defaultValue?: any;
     placeholder?: string;
     options?: SelectOption[];
     optionsRemote?: FilterSelectOptionsRemote;

src/layouts/content/list/ListLayout.vue

@@ -147,6 +147,7 @@ defineOptions({ name: 'ClListLayout' });
                 :label="item.label"
                 :placeholder="(item as ListActionFilter).placeholder"
                 :prefix-icon="(item as ListActionFilter).prefixIcon"
+                :default-value="(item as ListActionFilter).defaultValue"
                 @change="
                   (value: any) => (item as ListActionFilter).onChange?.(value)
                 "
@@ -165,6 +166,7 @@ defineOptions({ name: 'ClListLayout' });
                 :options-remote="(item as ListActionFilter).optionsRemote"
                 :clearable="(item as ListActionFilter).clearable"
                 :no-all-option="(item as ListActionFilter).noAllOption"
+                :default-value="(item as ListActionFilter).defaultValue"
                 @change="
                   (value: any) => (item as ListActionFilter).onChange?.(value)
                 "

src/views/dependency/list/useDependencyList.tsx

@@ -53,6 +53,7 @@ const useDependencyList = () => {
           action: ACTION_FILTER_SELECT,
           id: 'filter-select-lang',
           className: 'select-lang',
+          defaultValue: state.lang,
           onChange: value => {
             onListFilterChangeByKey(store, ns, 'type', FILTER_OP_EQUAL, {
               update: false,
@@ -710,8 +711,7 @@ const useDependencyList = () => {
   };
 
   onBeforeUnmount(() => {
-    store.commit(`${ns}/setLang`, 'python');
-    store.commit(`${ns}/setRepoTabName`, 'installed');
+    store.commit(`${ns}/setSearchQuery`, '');
   });
 
   // options