From 057549f9667afee98d852f8b2cb094c5bd96381e Mon Sep 17 00:00:00 2001 From: Shanna Murry Date: Wed, 13 Sep 2023 16:47:56 -0400 Subject: [PATCH 1/2] subnav update --- CHANGELOG.md | 3 ++ package-lock.json | 4 +- package.json | 2 +- .../Subnavigation/SubnavigationItem.vue | 38 +++++++++++++++---- 4 files changed, 36 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c601621fb..ca13b5e83 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # CHANGELOG +## v2.0.0-beta.52 + +Add an option to pass stringToMatch prop to `SubnavigationItem`, this can be used to pass a string that is turned into a regex pattern ## v2.0.0-beta.51 Updates the prop definitions for `TopNavDropdown` so that `title` is no longer a required prop. diff --git a/package-lock.json b/package-lock.json index 3e9183a8f..9272fc84d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lob/ui-components", - "version": "2.0.0-beta.42", + "version": "2.0.0-beta.52", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@lob/ui-components", - "version": "2.0.0-beta.42", + "version": "2.0.0-beta.52", "dependencies": { "date-fns": "^2.29.3", "date-fns-holiday-us": "^0.3.1", diff --git a/package.json b/package.json index 0cba7020f..a3477964d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lob/ui-components", - "version": "2.0.0-beta.51", + "version": "2.0.0-beta.52", "engines": { "node": ">=14.18.2", "npm": ">=8.3.0" diff --git a/src/components/Subnavigation/SubnavigationItem.vue b/src/components/Subnavigation/SubnavigationItem.vue index 6520698a3..a74b826aa 100644 --- a/src/components/Subnavigation/SubnavigationItem.vue +++ b/src/components/Subnavigation/SubnavigationItem.vue @@ -5,12 +5,20 @@ :underline="false" :disabled="disabled" :tabindex="disabled ? -1 : 0" - :class="['inline-block px-1 py-3 !text-gray-500 type-small-600 whitespace-nowrap focus-visible:!outline-none', - 'focus-visible:before:content[``] focus-visible:before:z-10 focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:bottom-[-3px] ', - 'hover:before:content[``] hover:before:z-10 hover:before:absolute hover:before:inset-0 hover:before:bottom-[-3px] hover:before:border-b-2', - { 'hover:!text-gray-600 focus-visible:!text-gray-600 focus-visible:before:border-b-2 hover:before:border-gray-300 focus-visible:before:border-gray-300': !active && !disabled }, - { '!text-black before:content[``] before:z-10 before:absolute before:inset-0 before:bottom-[-3px] before:border-b-2 before:border-black': active }, - { '!text-gray-300': disabled }]" + :class="[ + 'inline-block px-1 py-3 !text-gray-500 type-small-600 whitespace-nowrap focus-visible:!outline-none', + 'focus-visible:before:content[``] focus-visible:before:z-10 focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:bottom-[-3px] ', + 'hover:before:content[``] hover:before:z-10 hover:before:absolute hover:before:inset-0 hover:before:bottom-[-3px] hover:before:border-b-2', + { + 'hover:!text-gray-600 focus-visible:!text-gray-600 focus-visible:before:border-b-2 hover:before:border-gray-300 focus-visible:before:border-gray-300': + !active && !disabled + }, + { + '!text-black before:content[``] before:z-10 before:absolute before:inset-0 before:bottom-[-3px] before:border-b-2 before:border-black': + active + }, + { '!text-gray-300': disabled } + ]" > {{ title }}
@@ -25,7 +33,9 @@ import LobLink from '../Link/Link'; export default { name: 'SubnavigationItem', - components: { LobLink }, + components: { + LobLink + }, props: { title: { type: String, @@ -42,11 +52,23 @@ export default { disabled: { type: Boolean, default: false + }, + stringToMatch: { + type: String, + default: '' } }, computed: { active () { - return this.matchQueryString ? this.$route.fullPath === this.to : this.$route?.fullPath?.includes(this.to); + if (this.stringToMatch) { + const pattern = new RegExp(`${this.stringToMatch}`, 'gi'); + if (pattern.test(this.$route.fullPath)) { + return true; + } + } + return this.matchQueryString ? + this.$route.fullPath === this.to : + this.$route?.fullPath?.includes(this.to); } } }; From 59e7145e26d4748eb2937613749c791b2d91090d Mon Sep 17 00:00:00 2001 From: Shanna Murry Date: Wed, 13 Sep 2023 17:49:30 -0400 Subject: [PATCH 2/2] Update src/components/Subnavigation/SubnavigationItem.vue Co-authored-by: Juan Andres Friss de Kereki <83967528+juanfriss@users.noreply.github.com> --- src/components/Subnavigation/SubnavigationItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Subnavigation/SubnavigationItem.vue b/src/components/Subnavigation/SubnavigationItem.vue index a74b826aa..ba15caf25 100644 --- a/src/components/Subnavigation/SubnavigationItem.vue +++ b/src/components/Subnavigation/SubnavigationItem.vue @@ -68,7 +68,7 @@ export default { } return this.matchQueryString ? this.$route.fullPath === this.to : - this.$route?.fullPath?.includes(this.to); + this.$route.fullPath.includes(this.to); } } };