diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index c2afabc53..da4687d32 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -5,6 +5,7 @@ import { dashIfEmpty } from 'src/filters';
/* basic input */
import VnSelect from 'components/common/VnSelect.vue';
+import VnSelectCache from 'components/common/VnSelectCache.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
@@ -42,6 +43,17 @@ const $props = defineProps({
},
});
+const defaultSelect = {
+ attrs: {
+ row: $props.row,
+ disable: !$props.isEditable,
+ class: 'fit',
+ },
+ forceAttrs: {
+ label: $props.showLabel && $props.column.label,
+ },
+};
+
const defaultComponents = {
input: {
component: markRaw(VnInput),
@@ -104,14 +116,12 @@ const defaultComponents = {
},
},
select: {
+ component: markRaw(VnSelectCache),
+ ...defaultSelect,
+ },
+ rawSelect: {
component: markRaw(VnSelect),
- attrs: {
- disable: !$props.isEditable,
- class: 'fit',
- },
- forceAttrs: {
- label: $props.showLabel && $props.column.label,
- },
+ ...defaultSelect,
},
icon: {
component: markRaw(QIcon),
diff --git a/src/components/common/VnBreadcrumbs.vue b/src/components/common/VnBreadcrumbs.vue
index 337507233..02226e497 100644
--- a/src/components/common/VnBreadcrumbs.vue
+++ b/src/components/common/VnBreadcrumbs.vue
@@ -18,7 +18,7 @@ watchEffect(() => {
(matched) => Object.keys(matched.meta).length
);
breadcrumbs.value.length = 0;
-
+ if (!matched.value[0]) return;
if (matched.value[0].name != 'Dashboard') {
root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 3e5cd4216..e3bda6c8e 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -75,6 +75,7 @@ const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
const dataRef = ref();
+const lastVal = ref();
const value = computed({
get() {
@@ -85,14 +86,31 @@ const value = computed({
},
});
+watch(options, (newValue) => {
+ setOptions(newValue);
+});
+
+watch(modelValue, (newValue) => {
+ if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+ fetchFilter(newValue);
+});
+
+onMounted(() => {
+ setOptions(options.value);
+ if ($props.url && $props.modelValue && !findKeyInOptions())
+ fetchFilter($props.modelValue);
+ if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+});
+
+function findKeyInOptions() {
+ if (!$props.options) return;
+ return filter($props.modelValue, $props.options)?.length;
+}
+
function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
-onMounted(() => {
- setOptions(options.value);
- if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
-});
function filter(val, options) {
const search = val.toString().toLowerCase();
@@ -125,15 +143,21 @@ async function fetchFilter(val) {
const defaultWhere = $props.useLike
? { [key]: { like: `%${val}%` } }
: { [key]: val };
- const where = { ...defaultWhere, ...$props.where };
+ const where = { ...(val ? defaultWhere : {}), ...$props.where };
const fetchOptions = { where, order: sortBy, limit };
if (fields) fetchOptions.fields = fields;
return dataRef.value.fetch(fetchOptions);
}
async function filterHandler(val, update) {
- if (!$props.defaultFilter) return update();
+ if (!val && lastVal.value === val) {
+ lastVal.value = val;
+ return update();
+ }
+ lastVal.value = val;
let newOptions;
+
+ if (!$props.defaultFilter) return update();
if ($props.url) {
newOptions = await fetchFilter(val);
} else newOptions = filter(val, myOptionsOriginal.value);
@@ -149,19 +173,6 @@ async function filterHandler(val, update) {
}
);
}
-
-watch(options, (newValue) => {
- setOptions(newValue);
-});
-
-watch(modelValue, (newValue) => {
- if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
- fetchFilter(newValue);
-});
-
-onMounted(async () => {
- if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
-});
diff --git a/src/components/common/VnSelectCache.vue b/src/components/common/VnSelectCache.vue
new file mode 100644
index 000000000..51873ef6e
--- /dev/null
+++ b/src/components/common/VnSelectCache.vue
@@ -0,0 +1,25 @@
+
+
+
+