PATCH: add disabled props for BIMDataSearch component & doc (#331)

bimdata · Jan 8, 2024 · b5b83b0 · b5b83b0
1 parent 307f47e
commit b5b83b0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/src/BIMDataComponents/BIMDataSearch/BIMDataSearch.vue b/src/BIMDataComponents/BIMDataSearch/BIMDataSearch.vue
@@ -3,7 +3,7 @@
     class="bimdata-search-bar"
     v-clickaway="away"
     :style="{ width: width, height: height }"
-    :class="{ focus: focused, ...classes }"
+    :class="{ focus: focused, disabled, ...classes }"
   >
     <span class="bimdata-search-icon">
       <BIMDataIconSearch size="xxs" />
@@ -18,6 +18,7 @@
       :placeholder="placeholder"
       @keyup.enter="$emit('enter', $event.target.value)"
       :autocomplete="autocomplete ? 'on' : 'off'"
+      :disabled="disabled"
     />
     <BIMDataButton
       width="25px"
@@ -99,6 +100,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue", "enter", "clear"],
   data() {

diff --git a/src/BIMDataComponents/BIMDataSearch/_BIMDataSearch.scss b/src/BIMDataComponents/BIMDataSearch/_BIMDataSearch.scss
@@ -28,6 +28,12 @@
     box-shadow: var(--box-shadow);
     transition: all 0.2s ease;
   }
+  &.disabled {
+    color: var(--color-silver);
+    input {
+      color: var(--color-silver);
+    }
+  }
 
   &__radius {
     border-radius: 3px;

diff --git a/src/web/views/Components/Search/Search.vue b/src/web/views/Components/Search/Search.vue
@@ -17,6 +17,7 @@
             :clear="isClear"
             :width="width + 'px'"
             :height="height + 'px'"
+            :disabled="isDisabled"
           />
         </template>
 
@@ -40,6 +41,7 @@
             v-model="placeholder"
           />
           <BIMDataCheckbox text="clear" v-model="isClear" />
+          <BIMDataCheckbox text="disabled" v-model="isDisabled" />
           <div
             v-for="[key, values] in Object.entries(searchOptions)"
             :key="key"
@@ -75,6 +77,7 @@
               color="{{ selectedSearchOptionsstyle }}"
               {{ selectedSearchOptionskinds }}
               clear="{{ isClear }}"
+              disabled="{{ isDisabled }}"
               :width="{{ width + "px" }}"
               :height="{{ height + "px" }}"
             /&gt;
@@ -115,6 +118,7 @@ export default {
       backgroundColor: false,
       placeholder: "Search",
       isClear: false,
+      isDisabled: false,
       width: 150,
       height: 32,
       selectedSearchOptionskinds: "radius",

diff --git a/src/web/views/Components/Search/props-data.js b/src/web/views/Components/Search/props-data.js
@@ -2,28 +2,34 @@
 export default [
   [ "Props", "Type", "Default value", "Description" ],
   [
-    "modelValue",
-    "String",
-    "",
-    "Value of the search input."
+    "autocomplete",
+    "Boolean",
+    "false",
+    "Whether 'autocomplete' attribute is 'on' or 'off'."
   ],
   [
-    "placeholder",
-    "String",
-    "' '",
-    "Use this props to add a placeholder.",
+    "autofocus",
+    "Boolean",
+    "false",
+    "Use this boolean to add an autofocus on the input search",
   ],
   [
-    "autocomplete",
+    "clear",
     "Boolean",
     "false",
-    "Whether 'autocomplete' attribute is 'on' or 'off'."
+    "Use this prop to add a button that delete text in search bar",
   ],
   [
-    "width",
-    "[Number, String]",
-    "150px",
-    "Use this props to change the width of the search component",
+    "color",
+    "String",
+    "default",
+    "Use this prop to select search bar color: 'default', 'primary', 'secondary'",
+  ],
+  [
+    "disabled",
+    "Boolean",
+    "false",
+    "Use this boolean to disabled your input.",
   ],
   [
     "height",
@@ -32,10 +38,16 @@ export default [
     "Use this props to change the height of the search component",
   ],
   [
-    "autofocus",
-    "Boolean",
-    "false",
-    "Use this boolean to add an autofocus on the input search",
+    "modelValue",
+    "String",
+    "",
+    "Value of the search input."
+  ],
+  [
+    "placeholder",
+    "String",
+    "' '",
+    "Use this props to add a placeholder.",
   ],
   [
     "radius",
@@ -50,15 +62,9 @@ export default [
     "Use this prop to use square search bar",
   ],
   [
-    "color",
-    "String",
-    "default",
-    "Use this prop to select search bar color: 'default', 'primary', 'secondary'",
-  ],  
-  [
-    "clear",
-    "Boolean",
-    "false",
-    "Use this prop to add a button that delete text in search bar",
+    "width",
+    "[Number, String]",
+    "150px",
+    "Use this props to change the width of the search component",
   ],
 ];