From 686ad1970bb2939b741e1ce478d929a19367c1a6 Mon Sep 17 00:00:00 2001 From: zaelgohary Date: Sun, 9 Jun 2024 11:29:54 +0300 Subject: [PATCH 1/4] Apply filters on enter --- .../playground/src/components/filters/TfFiltersContainer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/src/components/filters/TfFiltersContainer.vue b/packages/playground/src/components/filters/TfFiltersContainer.vue index 2cfaa426ab..87bc281600 100644 --- a/packages/playground/src/components/filters/TfFiltersContainer.vue +++ b/packages/playground/src/components/filters/TfFiltersContainer.vue @@ -68,7 +68,7 @@ >
- + From dda871b1b6fbad5f60694130e17a021e496ec9e5 Mon Sep 17 00:00:00 2001 From: zaelgohary Date: Sun, 9 Jun 2024 14:14:36 +0300 Subject: [PATCH 2/4] Add applyOnEnter fn and condition it to envoke if filters are valid & changed --- .../src/components/filters/TfFiltersContainer.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/playground/src/components/filters/TfFiltersContainer.vue b/packages/playground/src/components/filters/TfFiltersContainer.vue index 87bc281600..fee4e27896 100644 --- a/packages/playground/src/components/filters/TfFiltersContainer.vue +++ b/packages/playground/src/components/filters/TfFiltersContainer.vue @@ -68,7 +68,12 @@ >
- + @@ -170,6 +175,10 @@ export default { ctx.emit("apply"); } + function applyOnEnter() { + if (changed.value && valid) apply(); + } + const collapsible = ref(false); const filterOpened = ref(true); @@ -183,7 +192,7 @@ export default { onUnmounted(() => typeof breakpoint === "number" && window.removeEventListener("resize", onResize)); typeof breakpoint === "number" && onResize(); - return { empty, changed, clear, apply, valid, collapsible, filterOpened }; + return { empty, changed, clear, apply, applyOnEnter, valid, collapsible, filterOpened }; }, }; From 372e5385e9391b3af6b11b2d8a56aeb2a47c2ad0 Mon Sep 17 00:00:00 2001 From: zaelgohary Date: Sun, 9 Jun 2024 15:20:59 +0300 Subject: [PATCH 3/4] Replace applyOnEnter w a hidden submit input --- .../src/components/filters/TfFiltersContainer.vue | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/playground/src/components/filters/TfFiltersContainer.vue b/packages/playground/src/components/filters/TfFiltersContainer.vue index fee4e27896..7077fd17a4 100644 --- a/packages/playground/src/components/filters/TfFiltersContainer.vue +++ b/packages/playground/src/components/filters/TfFiltersContainer.vue @@ -68,12 +68,8 @@ >
- + + @@ -175,10 +171,6 @@ export default { ctx.emit("apply"); } - function applyOnEnter() { - if (changed.value && valid) apply(); - } - const collapsible = ref(false); const filterOpened = ref(true); @@ -192,7 +184,7 @@ export default { onUnmounted(() => typeof breakpoint === "number" && window.removeEventListener("resize", onResize)); typeof breakpoint === "number" && onResize(); - return { empty, changed, clear, apply, applyOnEnter, valid, collapsible, filterOpened }; + return { empty, changed, clear, apply, valid, collapsible, filterOpened }; }, }; From 310cc61b2e6722f5ba1f6ee6f8ce13f0b31f37d0 Mon Sep 17 00:00:00 2001 From: zaelgohary Date: Wed, 12 Jun 2024 12:19:45 +0300 Subject: [PATCH 4/4] Add window event listener to applyOnEnter --- .../src/components/filters/TfFiltersContainer.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/playground/src/components/filters/TfFiltersContainer.vue b/packages/playground/src/components/filters/TfFiltersContainer.vue index 7077fd17a4..1f1e512849 100644 --- a/packages/playground/src/components/filters/TfFiltersContainer.vue +++ b/packages/playground/src/components/filters/TfFiltersContainer.vue @@ -68,8 +68,7 @@ >
- - + @@ -180,8 +179,15 @@ export default { collapsible.value = breakpoint > window.innerWidth; } + function onEnterApply(e: KeyboardEvent) { + if (e.keyCode == 13 && valid.value && changed.value) apply(); + } + onMounted(() => typeof breakpoint === "number" && window.addEventListener("resize", onResize)); + onMounted(() => window.addEventListener("keyup", onEnterApply)); onUnmounted(() => typeof breakpoint === "number" && window.removeEventListener("resize", onResize)); + onUnmounted(() => window.removeEventListener("keyup", onEnterApply)); + typeof breakpoint === "number" && onResize(); return { empty, changed, clear, apply, valid, collapsible, filterOpened };