-
+
Props options :
+
@@ -55,6 +62,21 @@
v-model="hasNullValue"
/>
+
+
+
+
+
+
+
Slots options :
+
@@ -75,6 +103,8 @@
<BIMDataSelect
{{ isDisabled ? "disabled" : "" }}
{{ isMulti ? ':multi="true"' : "" }}
+ {{ search ? ':search="true"' : "" }}
+ {{ clearSearch ? ':isResetSearch="true"' : "" }}
width="200px"
label="Selector label"
:options="options"
@@ -82,7 +112,10 @@
{{ optionLabelKey ? `optionLabelKey="${optionLabelKey}"` : "" }}
{{ hasNullValue ? ':nullValue="true"' : "" }}
v-model="selection"
- />
+ >
+ {{ getEmptySlot() }}
+
+ </BIMDataSelect>
@@ -101,6 +134,13 @@
+
+ Slots:
+
+
+
Note about 'v-model' and 'optionKey' prop:
@@ -157,6 +197,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,7 +212,9 @@ export default {
return {
isDisabled: false,
isMulti: false,
+ isEmpty: false,
hasNullValue: false,
+ clearSearch: false,
optionSet: "string",
options: stringOptions,
optionKey: null,
@@ -178,6 +222,9 @@ export default {
selection: null,
propsData,
eventsData,
+ slotsData,
+ search: false,
+ searchText: "",
};
},
methods: {
@@ -189,6 +236,23 @@ export default {
}
this.isMulti = value;
},
+ toggleSearch(value) {
+ this.search = value;
+ if (!this.search) {
+ this.clearSearch = false;
+ }
+ },
+ toggleEmpty(value) {
+ this.isEmpty = value;
+ },
+ toggleClearSearch(value) {
+ this.clearSearch = value;
+ },
+ getEmptySlot() {
+ if (this.isEmpty) {
+ return "No result";
+ }
+ },
changeOptionSet(value) {
switch (value) {
case "string":
@@ -213,3 +277,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..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]",
@@ -47,23 +21,46 @@ export default [
"false",
"Use this boolean to select multiple options from a list of options.",
],
+ [
+ "nullLabel",
+ "String",
+ "",
+ "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."],
+
];
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."
+ ]
+];