From 38acf22acce4cda5f9acb2f6618c24d2b6e7811d Mon Sep 17 00:00:00 2001 From: Jeffrey Dowdle Date: Wed, 6 Dec 2023 15:49:25 +1100 Subject: [PATCH 1/2] feat(@dpc-sdp/ripple-tide-search): added grey background when map view enabled --- .../components/TideSearchFilters.vue | 5 +- .../components/global/TideDataDrivenMap.vue | 21 +- .../global/TideSearchAddressLookup.vue | 2 + .../global/TideSearchFilterDropdown.vue | 2 + .../components/search-bar/RplSearchBar.css | 7 + .../components/search-bar/RplSearchBar.vue | 195 ++++++++++-------- .../ripple-ui-forms/src/inputs/dropdown.ts | 5 +- 7 files changed, 139 insertions(+), 98 deletions(-) diff --git a/packages/ripple-tide-search/components/TideSearchFilters.vue b/packages/ripple-tide-search/components/TideSearchFilters.vue index cf6085fff0..a257707797 100644 --- a/packages/ripple-tide-search/components/TideSearchFilters.vue +++ b/packages/ripple-tide-search/components/TideSearchFilters.vue @@ -19,6 +19,7 @@ :name="filter.id" :modelValue="filterFormValues[filter.id]" v-bind="filter.props" + :variant="reverseStyling ? 'reverse' : 'default'" :options=" filter.props?.dynamicOptions?.length ? filter.props.dynamicOptions @@ -50,6 +51,7 @@ interface Props { filterFormValues: Record submitLabel?: string | boolean resetLabel?: string | boolean + reverseStyling?: boolean } const emit = defineEmits<{ @@ -59,7 +61,8 @@ const emit = defineEmits<{ const props = withDefaults(defineProps(), { submitLabel: 'Apply search filters', - resetLabel: 'Clear search filters' + resetLabel: 'Clear search filters', + reverseStyling: false }) const handleFilterReset = () => { diff --git a/packages/ripple-tide-search/components/global/TideDataDrivenMap.vue b/packages/ripple-tide-search/components/global/TideDataDrivenMap.vue index aeab270654..477d989159 100644 --- a/packages/ripple-tide-search/components/global/TideDataDrivenMap.vue +++ b/packages/ripple-tide-search/components/global/TideDataDrivenMap.vue @@ -360,8 +360,13 @@ const mapAreas = computed(() => { diff --git a/packages/ripple-ui-forms/src/inputs/dropdown.ts b/packages/ripple-ui-forms/src/inputs/dropdown.ts index 961d88182e..33b6159475 100644 --- a/packages/ripple-ui-forms/src/inputs/dropdown.ts +++ b/packages/ripple-ui-forms/src/inputs/dropdown.ts @@ -26,7 +26,8 @@ export const dropdown: FormKitTypeDefinition = { validationMeta: '$node.props.validationMeta', required: '$fns.isFieldRequired()', invalid: '$fns.isFieldInvalid()', - columnClasses: '$node.props.columnClasses' + columnClasses: '$node.props.columnClasses', + variant: '$node.props.variant' } }), library: inputLibrary, @@ -42,7 +43,7 @@ export const dropdown: FormKitTypeDefinition = { /** * An array of extra props to accept for this input. */ - props: ['placeholder', 'multiple', 'options', 'columnClasses'], + props: ['placeholder', 'multiple', 'options', 'columnClasses', 'variant'], /** * Additional features that should be added to your input */ From 212044860a5cd6e04914ab9bea72cbad8ff576b9 Mon Sep 17 00:00:00 2001 From: Jeffrey Dowdle Date: Wed, 6 Dec 2023 16:41:52 +1100 Subject: [PATCH 2/2] feat(@dpc-sdp/ripple-tide-search): use tag in search bar and fix keyboard controls --- .../global/TideSearchAddressLookup.vue | 10 +++-- .../components/search-bar/RplSearchBar.vue | 40 +++++++++++-------- .../src/components/tag/RplTag.css | 4 ++ .../src/components/tag/RplTag.vue | 4 +- 4 files changed, 36 insertions(+), 22 deletions(-) diff --git a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue index 61c38773fe..ab3c366bf6 100644 --- a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue +++ b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue @@ -11,17 +11,19 @@ :showNoResults="true" :debounce="5000" placeholder="Search by postcode or suburb" - :getSuggestionVal="(itm:any) => itm?.postcode || ''" + :getOptionId="(itm:any) => itm.id" + :getSuggestionVal="(itm:any) => itm?.locality || ''" @submit="submitAction" @update:input-value="onUpdate" > diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue index db219039b9..e630ef7188 100644 --- a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue +++ b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue @@ -26,7 +26,8 @@ interface Props { globalEvents?: boolean showNoResults?: boolean getSuggestionVal?: (item: any) => string - getOptionLabel?: Function + getOptionLabel?: (item: any) => string + getOptionId?: (item: any) => string isOptionSelectable?: Function showLabel?: boolean } @@ -43,7 +44,8 @@ const props = withDefaults(defineProps(), { placeholder: '', globalEvents: true, getSuggestionVal: (item) => item, - getOptionLabel: (opt) => opt.toString(), + getOptionLabel: (opt) => opt, + getOptionId: (opt) => opt, isOptionSelectable: (opt) => true, showLabel: false }) @@ -126,7 +128,7 @@ const handleSelectOption = (optionValue: any, focusBackOnInput) => { } const getDefaultActiveId = (): string => { - return props.suggestions[0] + return props.getOptionId(props.suggestions[0]) } const handleOpen = (fromKeyboard = false): void => { @@ -146,27 +148,31 @@ const handleClose = (focusBackOnInput = false): void => { } } -const handleArrowUp = () => { +const handleArrowDown = () => { const currentActiveIndex = props.suggestions.findIndex( - (opt) => opt === activeOptionId.value + (opt) => props.getOptionId(opt) === activeOptionId.value ) if (currentActiveIndex < 0) { activeOptionId.value = getDefaultActiveId() } else if (currentActiveIndex < props.suggestions.length - 1) { - activeOptionId.value = props.suggestions[currentActiveIndex + 1] + activeOptionId.value = props.getOptionId( + props.suggestions[currentActiveIndex + 1] + ) } } -const handleArrowDown = () => { +const handleArrowUp = () => { const currentActiveIndex = props.suggestions.findIndex( - (opt) => opt === activeOptionId.value + (opt) => props.getOptionId(opt) === activeOptionId.value ) if (currentActiveIndex < 0) { activeOptionId.value = getDefaultActiveId() } else if (currentActiveIndex > 0) { - activeOptionId.value = props.suggestions[currentActiveIndex - 1] + activeOptionId.value = props.getOptionId( + props.suggestions[currentActiveIndex - 1] + ) } } @@ -230,7 +236,9 @@ watch(activeOptionId, async (newId) => { } }) -const slug = (label: string) => label.toLowerCase().replace(/[^\w-]+/g, '-') +const slug = (label: string) => { + label.toLowerCase().replace(/[^\w-]+/g, '-') +}