From 5c93e5bde3f887c6548b0b76acaba5c329e9759a Mon Sep 17 00:00:00 2001 From: Gaelle Date: Thu, 5 Oct 2023 11:36:54 +0200 Subject: [PATCH 1/9] add search bar into BIMDataSelect component --- .../BIMDataSelect/BIMDataSelect.vue | 17 +- .../BIMDataSelect/BIMDataSelectMulti.vue | 78 +++++--- .../BIMDataSelect/BIMDataSelectSearch.vue | 180 ++++++++++++++++++ .../BIMDataSelect/BIMDataSelectSingle.vue | 76 +++++--- .../BIMDataSelect/_BIMDataSelect.scss | 1 - 5 files changed, 302 insertions(+), 50 deletions(-) create mode 100644 src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue index 45feed1b..f3f73b60 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue @@ -8,6 +8,7 @@ diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue index 1847dd91..6b7073e0 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue @@ -21,29 +21,43 @@ - +
+ +
+ +
+
    +
  • + + +
    • +
+
@@ -94,17 +108,35 @@ export default { type: Boolean, default: false, }, + search: { + type: Boolean, + default: false, + }, + searchPlaceholder: { + type: String, + default: "Search", + }, }, emits: ["update:modelValue"], data() { return { isOpen: false, + searchText: "", }; }, computed: { displayedValue() { return this.modelValue.map(this.optionLabel).join(", "); }, + filteredOptions() { + if (this.searchText === "") { + return this.options; + } else { + return this.options.filter(option => { + return option.toLowerCase().includes(this.searchText.toLowerCase()); + }); + } + }, }, methods: { toggle() { diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue new file mode 100644 index 00000000..d8134b0a --- /dev/null +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue @@ -0,0 +1,180 @@ + + + + + diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue index c36d3d05..477ac6f4 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue @@ -21,28 +21,42 @@ - +
+ +
+ +
+
    +
  • + {{ nullLabel || "None" }} +
    • +
  • + {{ optionLabel(option) }} +
    • +
+
@@ -95,17 +109,35 @@ export default { type: Boolean, default: false, }, + search: { + type: Boolean, + default: false, + }, + searchPlaceholder: { + type: String, + default: "Search", + }, }, emits: ["update:modelValue"], data() { return { isOpen: false, + searchText: "", }; }, computed: { displayedValue() { return this.optionLabel(this.modelValue); }, + filteredOptions() { + if (this.searchText === "") { + return this.options; + } else { + return this.options.filter(option => { + return option.toLowerCase().includes(this.searchText.toLowerCase()); + }); + } + }, }, methods: { toggle() { diff --git a/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss b/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss index 5b84b8ca..fc3e7d04 100644 --- a/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss +++ b/src/BIMDataComponents/BIMDataSelect/_BIMDataSelect.scss @@ -71,7 +71,6 @@ top: -3px; width: 100%; max-height: 220px; - padding: calc(var(--spacing-unit) / 2) 0; overflow: auto; box-shadow: var(--box-shadow); background-color: var(--color-white); From 87c151c39f9bd67709fea7f98c7324fa9a625302 Mon Sep 17 00:00:00 2001 From: Gaelle Date: Thu, 5 Oct 2023 11:37:23 +0200 Subject: [PATCH 2/9] add documentation for search bar into BIMDataSelect --- src/web/views/Components/Select/Select.vue | 61 ++++++++++++++++++- src/web/views/Components/Select/props-data.js | 12 ++++ src/web/views/Components/Select/slots-data.js | 8 +++ 3 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 src/web/views/Components/Select/slots-data.js diff --git a/src/web/views/Components/Select/Select.vue b/src/web/views/Components/Select/Select.vue index bca94b51..fa3e1562 100644 --- a/src/web/views/Components/Select/Select.vue +++ b/src/web/views/Components/Select/Select.vue @@ -10,6 +10,7 @@ + > + + Selection: @@ -37,7 +42,8 @@ @@ -101,6 +124,13 @@ +
+ Slots: + +
+
Note about 'v-model' and 'optionKey' prop: @@ -157,6 +187,8 @@ import { stringOptions, objectOptions, groupOptions } from "./option-sets"; import eventsData from "./events-data.js"; import propsData from "./props-data"; +import slotsData from "./slots-data"; + // Components import Code from "../../Elements/Code/Code.vue"; import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue"; @@ -170,6 +202,7 @@ export default { return { isDisabled: false, isMulti: false, + isEmpty: false, hasNullValue: false, optionSet: "string", options: stringOptions, @@ -178,6 +211,9 @@ export default { selection: null, propsData, eventsData, + slotsData, + search: false, + searchText: "", }; }, methods: { @@ -189,6 +225,17 @@ export default { } this.isMulti = value; }, + toggleSearch(value) { + this.search = value; + }, + toggleEmpty(value) { + this.isEmpty = value; + }, + getEmptySlot() { + if (this.isEmpty) { + return ""; + } + }, changeOptionSet(value) { switch (value) { case "string": @@ -213,3 +260,11 @@ export default { }, }; + + diff --git a/src/web/views/Components/Select/props-data.js b/src/web/views/Components/Select/props-data.js index cc5ca34a..312a5cbd 100644 --- a/src/web/views/Components/Select/props-data.js +++ b/src/web/views/Components/Select/props-data.js @@ -47,6 +47,18 @@ export default [ "false", "Use this boolean to select multiple options from a list of options.", ], + [ + "search", + "Boolean", + "false", + "Use this boolean to add a search bar.", + ], + [ + "searchPlaceholder", + "String", + "Search", + "Use this props to custom search placeholder.", + ], [ "nullValue", "Boolean", diff --git a/src/web/views/Components/Select/slots-data.js b/src/web/views/Components/Select/slots-data.js new file mode 100644 index 00000000..25067498 --- /dev/null +++ b/src/web/views/Components/Select/slots-data.js @@ -0,0 +1,8 @@ +/* eslint-disable */ +export default [ + [ "Slot name", "Description" ], + [ + "empty", + "Use this slot if you need to add a custom message when the selector is empty." + ] +]; From 7a3261871c8d05eb07d37fdc3d8236ec4787fe5f Mon Sep 17 00:00:00 2001 From: Gaelle Date: Thu, 5 Oct 2023 11:38:49 +0200 Subject: [PATCH 3/9] delete unused component --- .../BIMDataSelect/BIMDataSelectSearch.vue | 180 ------------------ 1 file changed, 180 deletions(-) delete mode 100644 src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue deleted file mode 100644 index d8134b0a..00000000 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSearch.vue +++ /dev/null @@ -1,180 +0,0 @@ - - - - - From 2a6c838fc924f0aa3205c59954e9c0a96222b72e Mon Sep 17 00:00:00 2001 From: Gaelle Date: Thu, 5 Oct 2023 14:36:02 +0200 Subject: [PATCH 4/9] delete template tag into BIMDataSelect file --- src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue index f3f73b60..efe32e1a 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.vue @@ -1,12 +1,3 @@ - - diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue index 19aff5dd..64c04311 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue @@ -7,7 +7,7 @@ 'not-empty': modelValue !== undefined && modelValue !== null, }" :style="{ width }" - v-clickaway="() => (isOpen = false)" + v-clickaway="away" >
@@ -117,6 +117,10 @@ export default { type: String, default: "Search", }, + isResetSearch: { + type: Boolean, + default: false, + }, }, emits: ["update:modelValue"], data() { @@ -175,16 +179,27 @@ export default { isOptionGroup(option) { return this.optionKey && option && option.optionGroup; }, + resetSearch() { + if (this.isResetSearch) { + return (this.searchText = ""); + } + }, onOptionClick(option) { if (this.optionKey && (option.disabled || option.optionGroup)) { return; } this.$emit("update:modelValue", option); + this.resetSearch(); this.isOpen = false; }, onNullValueClick() { this.$emit("update:modelValue", null); + this.resetSearch(); + this.isOpen = false; + }, + away() { this.isOpen = false; + this.resetSearch(); }, }, }; From 163b960fdb92f8503b45f57bec40d6086ba777ee Mon Sep 17 00:00:00 2001 From: Gaelle Date: Thu, 5 Oct 2023 17:39:49 +0200 Subject: [PATCH 8/9] add reset search documentation --- src/web/views/Components/Select/Select.vue | 17 ++++ src/web/views/Components/Select/props-data.js | 89 ++++++++----------- 2 files changed, 54 insertions(+), 52 deletions(-) diff --git a/src/web/views/Components/Select/Select.vue b/src/web/views/Components/Select/Select.vue index fa3e1562..ad48e91c 100644 --- a/src/web/views/Components/Select/Select.vue +++ b/src/web/views/Components/Select/Select.vue @@ -18,6 +18,7 @@ :optionLabelKey="optionLabelKey" :nullValue="hasNullValue" v-model="selection" + :isResetSearch="clearSearch" > "; diff --git a/src/web/views/Components/Select/props-data.js b/src/web/views/Components/Select/props-data.js index 312a5cbd..115ad5cf 100644 --- a/src/web/views/Components/Select/props-data.js +++ b/src/web/views/Components/Select/props-data.js @@ -1,40 +1,14 @@ /* eslint-disable */ export default [ + ["Name", "Type", "Default value", "Description"], + ["disabled", "Boolean", "false", "When true the selector will be disabled."], [ - "Name", "Type", "Default value", "Description" - ], - [ - "width", - "[String, Number]", - "100%", - "Set the selector width.", - ], - [ - "label", - "String", - "null", - "Set the selector label (placeholder)." - ], - [ - "options", - "Array", - "[]", - "Array of available options. Can be an array of strings or objects (not both at the same time).", - ], - [ - "optionKey", - "String", - "null", - "Only use this props if the 'options' props is an array of objects. " - + "Specify which field of the object represent the option value.", - ], - [ - "optionLabelKey", - "String", - "null", - "Only use this props if the 'options' props is an array of objects. " - + "Specify which field of the object represent the option label.", + "isResetSearch", + "Boolean", + "false", + "In multi-selection mode: clear search bar on click away. In single selection: clear search bar on select element or click away.", ], + ["label", "String", "null", "Set the selector label (placeholder)."], [ "modelValue", "[String, Object, Array]", @@ -48,34 +22,45 @@ export default [ "Use this boolean to select multiple options from a list of options.", ], [ - "search", - "Boolean", - "false", - "Use this boolean to add a search bar.", - ], - [ - "searchPlaceholder", + "nullLabel", "String", - "Search", - "Use this props to custom search placeholder.", + "", + "Define a custom label for `null` or `undefined` options.", ], [ "nullValue", "Boolean", "false", - "This props has no effect in multi-selection mode. " - + "Add a 'none' value in single-selection mode.", + "This props has no effect in multi-selection mode. " + + "Add a 'none' value in single-selection mode.", ], [ - "nullLabel", + "optionKey", "String", - "", - "Define a custom label for `null` or `undefined` options." + "null", + "Only use this props if the 'options' props is an array of objects. " + + "Specify which field of the object represent the option value.", ], [ - "disabled", - "Boolean", - "false", - "When true the selector will be disabled." - ] + "optionLabelKey", + "String", + "null", + "Only use this props if the 'options' props is an array of objects. " + + "Specify which field of the object represent the option label.", + ], + [ + "options", + "Array", + "[]", + "Array of available options. Can be an array of strings or objects (not both at the same time).", + ], + ["search", "Boolean", "false", "Use this boolean to add a search bar."], + [ + "searchPlaceholder", + "String", + "Search", + "Use this props to custom search placeholder.", + ], + ["width", "[String, Number]", "100%", "Set the selector width."], + ]; From eba9ddc640ef9a1342b08bb83329849e19c4ad31 Mon Sep 17 00:00:00 2001 From: Gaelle Date: Fri, 6 Oct 2023 11:22:58 +0200 Subject: [PATCH 9/9] refactoring --- .../BIMDataSelect/BIMDataSelectMulti.vue | 8 ++++---- .../BIMDataSelect/BIMDataSelectSingle.vue | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue index c43a7f2f..87fcca18 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue @@ -137,9 +137,9 @@ export default { return this.options; } else { const lowerCaseSearchText = this.searchText.toLowerCase(); - return this.options.filter(option => { - return option.toLowerCase().includes(lowerCaseSearchText); - }); + return this.options.filter(option => + option.toLowerCase().includes(lowerCaseSearchText), + ); } }, }, @@ -193,7 +193,7 @@ export default { }, resetSearch() { if (this.isResetSearch) { - return (this.searchText = ""); + this.searchText = ""; } }, away() { diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue index 64c04311..f0f9e769 100644 --- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue +++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue @@ -138,9 +138,9 @@ export default { return this.options; } else { const lowerCaseSearchText = this.searchText.toLowerCase(); - return this.options.filter(option => { - return option.toLowerCase().includes(lowerCaseSearchText); - }); + return this.options.filter(option => + option.toLowerCase().includes(lowerCaseSearchText), + ); } }, }, @@ -181,7 +181,7 @@ export default { }, resetSearch() { if (this.isResetSearch) { - return (this.searchText = ""); + this.searchText = ""; } }, onOptionClick(option) {