├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── build
    └── rollup.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── entry.js
    ├── main.js
    └── vue-bootstrap-select.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "@vue/prettier"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
10 |   },
11 |   parserOptions: {
12 |     parser: "babel-eslint"
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | [![AUR version](https://img.shields.io/npm/v/@alfsnd/vue-bootstrap-select.svg)](https://github.com/Sandalf/vue-bootstrap-select)
 3 | [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/react.svg)](https://github.com/Sandalf/vue-bootstrap-select)
 4 | 
 5 | # @alfsnd/vue-bootstrap-select
 6 | A vue version of [bootstrap select](https://github.com/snapappointments/bootstrap-select/)
 7 | 
 8 | # Demo
 9 | 
10 | [![Edit Vue Bootstrap Select Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ovq821j566)
11 | 
12 | # Install
13 | 
14 | ```shell
15 | npm install @alfsnd/vue-bootstrap-select --save
16 | ```
17 | 
18 | # Usage
19 | 
20 | ```js
21 | import VSelect from '@alfsnd/vue-bootstrap-select'
22 | 
23 | export default {
24 |   name: 'app',
25 |   components: {
26 |     VSelect
27 |   },
28 |   data() {
29 |     return {
30 |       selectedValue: null
31 |     };
32 |   }
33 | }
34 | ```
35 | 
36 | ```html
37 | <template>
38 |   <div id="app">
39 |     <v-select :options="[{value: 1, text: 'Item 1'}, {value: 2, text: 'Item 2'}]" v-model="selectedValue" />
40 |   </div>
41 | </template>
42 | ```
43 | 
44 | ### Passing options
45 | 
46 | The `options` prop accepts arrays of strings
47 | 
48 | ```html
49 |   <v-select :options="['Item 1', 'Item 2']" />
50 | ```
51 | And arrays of objects
52 | 
53 | ```html
54 | <v-select :options="[{value: 1, text: 'Item 1'}, {value: 2, text: 'Item 2'}]" />
55 | ```
56 | 
57 | ## Props
58 | 
59 | | parameter      | description                                                                                                                                    | type                                   | default      | acceptable value |
60 | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------ | ---------------- |
61 | | disabled | disables select | Boolean | false   | |
62 | | disabledProp | allows to disable specific options. If an option has this prop set to a truthy value it will disable the option. | String | disabled |  |
63 | | labelNotFound | text displayed when no option is found in the search results | String | No results matched ||
64 | | labelSearchPlaceholder | placeholder text for search input | String | Search | |
65 | | options | list of options | Array | [] | |
66 | | searchable | display search input | Boolean | false |  |
67 | | showDefaultOption | sets the select title is set as an option | Boolean | false | |
68 | | textProp | the option's prop that is displayed as the option's text | String | text | |
69 | | valueProp | the option's prop that is used to find the selected value | String | value |
70 | 
71 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // rollup.config.js
 2 | import vue from 'rollup-plugin-vue';
 3 | import buble from 'rollup-plugin-buble';
 4 | import uglify from 'rollup-plugin-uglify-es';
 5 | import minimist from 'minimist';
 6 | 
 7 | const argv = minimist(process.argv.slice(2));
 8 | 
 9 | const config = {
10 |   input: 'src/entry.js',
11 |   output: {
12 |     name: 'VueBootstrapSelect',
13 |     exports: 'named',
14 |   },
15 |   plugins: [
16 |     vue({
17 |       css: true,
18 |       compileTemplate: true,
19 |     }),
20 |     buble(),
21 |   ],
22 | };
23 | 
24 | // Only minify browser (iife) version
25 | if (argv.format === 'iife') {
26 |   config.plugins.push(uglify());
27 | }
28 | 
29 | export default config;
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@alfsnd/vue-bootstrap-select",
 3 |   "version": "0.4.4",
 4 |   "description": "A vue version of bootstrap select",
 5 |   "license": "MIT",
 6 |   "repository": "Sandalf/vue-bootstrap-select",
 7 |   "keywords": [
 8 |     "npm",
 9 |     "package",
10 |     "vue",
11 |     "bootstrap",
12 |     "select",
13 |     "alfsnd"
14 |   ],
15 |   "main": "dist/vue-bootstrap-select.umd.js",
16 |   "module": "dist/vue-bootstrap-select.esm.js",
17 |   "unpkg": "dist/vue-bootstrap-select.min.js",
18 |   "browser": {
19 |     "./sfc": "src/vue-bootstrap-select.vue"
20 |   },
21 |   "files": [
22 |     "dist/*",
23 |     "src/*"
24 |   ],
25 |   "scripts": {
26 |     "serve": "vue-cli-service serve",
27 |     "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
28 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-bootstrap-select.umd.js",
29 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-bootstrap-select.esm.js",
30 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-bootstrap-select.min.js",
31 |     "ship": "npm publish --access public"
32 |   },
33 |   "dependencies": {
34 |     "vue-clickaway": "^2.2.2"
35 |   },
36 |   "devDependencies": {
37 |     "@vue/cli-plugin-babel": "^3.4.0",
38 |     "@vue/cli-plugin-eslint": "^3.4.0",
39 |     "@vue/cli-service": "^3.4.0",
40 |     "@vue/eslint-config-prettier": "^4.0.1",
41 |     "babel-eslint": "^10.0.1",
42 |     "eslint": "^5.8.0",
43 |     "eslint-plugin-vue": "^5.0.0",
44 |     "minimist": "^1.2.0",
45 |     "node-sass": "^4.9.0",
46 |     "sass-loader": "^7.1.0",
47 |     "rollup": "^0.66.2",
48 |     "rollup-plugin-buble": "^0.19.2",
49 |     "rollup-plugin-uglify-es": "0.0.1",
50 |     "rollup-plugin-vue": "^4.3.0",
51 |     "vue": "^2.5.22",
52 |     "vue-template-compiler": "^2.5.22"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sandalf/vue-bootstrap-select/1d7ab520b7b48625dd657da65230a570e7a3730c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Vue Bootstrap Select</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>Array of strings</h2>
 4 |     <div class="options">
 5 |       <p><b>Options:</b></p>
 6 |       <div>
 7 |         <input type="checkbox" v-model="disabledName">
 8 |         disabled
 9 |       </div>
10 |       <div>
11 |         <input type="checkbox" v-model="searchableName">
12 |         searchable
13 |       </div>
14 |     </div>
15 |     <VSelect
16 |       v-model="selectedName"
17 |       :options="names"
18 |       :disabled="disabledName"
19 |       :searchable="searchableName"/>
20 |     <h2>Array of objects</h2>
21 |     <div class="options">
22 |       <p><b>Options:</b></p>
23 |       <div>
24 |         <input type="checkbox" v-model="disabledContinent">
25 |         disabled
26 |       </div>
27 |       <div>
28 |         <input type="checkbox" v-model="searchableContinent">
29 |         searchable
30 |       </div>      
31 |     </div>
32 |     <VSelect
33 |       v-model="selectedContinent"
34 |       :options="contients"
35 |       :disabled="disabledContinent"
36 |       disabled-prop="inactive"
37 |       :searchable="searchableContinent"/>
38 |   </div>
39 | </template>
40 | 
41 | <script>
42 | import VSelect from "@/vue-bootstrap-select";
43 | 
44 | export default {
45 |   name: "App",
46 |   components: {
47 |     VSelect
48 |   },
49 |   data() {
50 |     return {
51 |       names: [
52 |         "John Doe",
53 |         "Olive Yew",
54 |         "Aida Bugg",
55 |         "Teri Dactyl",
56 |         "Paige Turner"
57 |       ],
58 |       contients: [
59 |         { value: 0, text: "Africa" },
60 |         { value: 1, text: "America" },
61 |         { value: 2, text: "Asia" },
62 |         { value: 3, text: "Europe" },
63 |         { value: 4, text: "Oceania" },
64 |         { value: 5, text: "Antartica" }
65 |       ],
66 |       selectedName: null,
67 |       searchableName: false,
68 |       disabledName: false,
69 |       selectedContinent: null,
70 |       searchableContinent: false,
71 |       disabledContinent: false
72 |     };
73 |   }
74 | };
75 | </script>
76 | 
77 | 
78 | <style lang="scss" scoped>
79 | #app {
80 |   font-family: "Roboto", Helvetica, Arial, sans-serif;
81 |   -webkit-font-smoothing: antialiased;
82 |   -moz-osx-font-smoothing: grayscale;
83 |   text-align: center;
84 |   color: #2c3e50;
85 |   padding: 2em 1em;
86 | }
87 | 
88 | .options {
89 |   text-align: left;
90 |   padding: 1em 0em;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from './vue-bootstrap-select.vue';
 3 | 
 4 | // install function executed by Vue.use()
 5 | function install(Vue) {
 6 |   if (install.installed) return;
 7 |   install.installed = true;
 8 |   Vue.component('VueBootstrapSelect', component);
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install,
14 | };
15 | 
16 | // To auto-install when vue is found
17 | /* global window global */
18 | let GlobalVue = null;
19 | if (typeof window !== 'undefined') {
20 |   GlobalVue = window.Vue;
21 | } else if (typeof global !== 'undefined') {
22 |   GlobalVue = global.Vue;
23 | }
24 | if (GlobalVue) {
25 |   GlobalVue.use(plugin);
26 | }
27 | 
28 | // To allow use as module (npm/webpack/etc.) export component
29 | export default component;
30 | 
31 | // It's possible to expose named exports when writing components that can
32 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
33 | // export const RollupDemoDirective = component;
34 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/src/vue-bootstrap-select.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-on-clickaway="hideDropdown"
  4 |     @keyup.esc="onEscape"
  5 |     @keydown.up.prevent="typeAheadUp"
  6 |     @keydown.down.prevent="typeAheadDown"
  7 |     @keydown.enter.prevent="typeAheadSelect"
  8 |     class="v-select"
  9 |     :class="{'disabled': disabled}">
 10 |     <button @click="toggle" type="button" class="v-select-toggle">
 11 |       <div>{{ title }}</div>
 12 |       <div class="arrow-down"></div>
 13 |     </button>
 14 |     <div v-show="show" class="v-dropdown-container">
 15 |       <div v-show="searchable" class="v-bs-searchbox">
 16 |         <input
 17 |           :placeholder="labelSearchPlaceholder"
 18 |           class="form-control"
 19 |           type="text"
 20 |           v-model="searchValue"
 21 |           autofocus
 22 |         >
 23 |       </div>
 24 |       <ul>
 25 |         <li
 26 |           v-show="searchable && filteredOptions.length === 0"
 27 |           class="v-dropdown-item"
 28 |         >{{ labelNotFound }} "{{ searchValue }}"</li>
 29 |         <li
 30 |           v-if="showDefaultOption"
 31 |           class="v-dropdown-item disabled default-option"
 32 |         >{{ labelTitle }}</li>
 33 |         <li
 34 |           v-for="(option, index) in filteredOptions"
 35 |           :key="`v-select-${index}`"
 36 |           class="v-dropdown-item"
 37 |           :class="{'selected' : isSelectedOption(option, index), 'disabled': option[disabledProp]}"
 38 |           @click="onSelect(option, index)"
 39 |         >{{ getOptionLabel(option) }}</li>
 40 |       </ul>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import { mixin as clickaway } from "vue-clickaway";
 47 | 
 48 | export default {
 49 |   name: "VSelect",
 50 |   mixins: [clickaway],
 51 |   props: {
 52 |     disabled: {
 53 |       type: Boolean,
 54 |       default: false
 55 |     },
 56 |     disabledProp: {
 57 |       type: String,
 58 |       default: "disabled"
 59 |     },
 60 |     labelTitle: {
 61 |       type: String,
 62 |       default: "Nothing selected"
 63 |     },
 64 |     labelNotFound: {
 65 |       type: String,
 66 |       default: "No results matched"
 67 |     },
 68 |     labelSearchPlaceholder: {
 69 |       type: String,
 70 |       default: "Search"
 71 |     },
 72 |     options: {
 73 |       type: Array,
 74 |       default: () => []
 75 |     },
 76 |     searchable: {
 77 |       type: Boolean,
 78 |       default: false
 79 |     },
 80 |     showDefaultOption: {
 81 |       type: Boolean,
 82 |       default: false
 83 |     },
 84 |     textProp: {
 85 |       type: String,
 86 |       default: "text"
 87 |     },
 88 |     value: {
 89 |       type: [Object, String, Number],
 90 |       default: null
 91 |     },
 92 |     valueProp: {
 93 |       type: String,
 94 |       default: "value"
 95 |     }
 96 |   },
 97 |   data() {
 98 |     return {
 99 |       show: false,
100 |       selectedValue: null,
101 |       searchValue: "",
102 |       typeAheadPointer: -1
103 |     };
104 |   },
105 |   computed: {
106 |     title() {
107 |       return this.selectedValue
108 |         ? this.getOptionLabel(this.selectedValue)
109 |         : this.labelTitle;
110 |     },
111 |     filteredOptions() {
112 |       if (this.searchable && this.searchValue.length > 0) {
113 |         return this.options.filter(item => {
114 |           if (typeof item === "object") {
115 |             return (
116 |               item[this.textProp]
117 |                 .toLowerCase()
118 |                 .indexOf(this.searchValue.toLowerCase()) !== -1
119 |             );
120 |           } else {
121 |             return (
122 |               item.toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1
123 |             );
124 |           }
125 |         });
126 |       }
127 |       return this.options;
128 |     },
129 |     reversedOptions() {
130 |       return [...this.filteredOptions].reverse();
131 |     },
132 |     lastOptionIndex() {
133 |       return this.filteredOptions.length - 1;
134 |     }
135 |   },
136 |   watch: {
137 |     value: {
138 |       immediate: true,
139 |       handler(newVal) {
140 |         const index = this.options.findIndex(op =>
141 |           this.isEqualOption(op, newVal)
142 |         );
143 |         this.onSelect(newVal, index);
144 |       }
145 |     }
146 |   },
147 |   methods: {
148 |     onSelect(option, index) {
149 |       if (option && !option[this.disabledProp]) {
150 |         this.selectedValue = option;
151 |         this.typeAheadPointer = index;
152 |         this.hideDropdown();
153 |         this.$emit("input", option, option[this.valueProp], index);
154 |       } else if (option === null) {
155 |         this.selectedValue = null;
156 |       }
157 |     },
158 |     onEscape() {
159 |       this.hideDropdown();
160 |     },
161 |     typeAheadUp() {
162 |       if (!this.show) {
163 |         this.show = true;
164 |       }
165 |       if (this.typeAheadPointer > 0) {
166 |         const nextPointer = this.typeAheadPointer - 1;
167 |         const option = this.filteredOptions[nextPointer];
168 |         const isDisabled = option ? option[this.disabledProp] || false : false;
169 |         if (!isDisabled) {
170 |           this.typeAheadPointer--;
171 |         } else {
172 |           this.typeAheadPointer--;
173 |           this.typeAheadUp();
174 |         }
175 |       } else {
176 |         const nextEnabledOption = this.reversedOptions.findIndex(
177 |           o => o[this.disabledProp] !== true
178 |         );
179 |         this.typeAheadPointer = this.lastOptionIndex - nextEnabledOption;
180 |       }
181 |     },
182 |     typeAheadDown() {
183 |       if (!this.show) {
184 |         this.show = true;
185 |       }
186 |       if (this.typeAheadPointer < this.lastOptionIndex) {
187 |         const nextPointer = this.typeAheadPointer + 1;
188 |         const option = this.filteredOptions[nextPointer];
189 |         const isDisabled = option ? option[this.disabledProp] || false : false;
190 |         if (!isDisabled) {
191 |           this.typeAheadPointer++;
192 |         } else {
193 |           this.typeAheadPointer++;
194 |           this.typeAheadDown();
195 |         }
196 |       } else {
197 |         const nextEnabledOption = this.filteredOptions.findIndex(
198 |           o => o[this.disabledProp] !== true
199 |         );
200 |         this.typeAheadPointer = nextEnabledOption;
201 |       }
202 |     },
203 |     typeAheadSelect() {
204 |       if (this.filteredOptions[this.typeAheadPointer]) {
205 |         this.onSelect(
206 |           this.filteredOptions[this.typeAheadPointer],
207 |           this.typeAheadPointer
208 |         );
209 |       }
210 |     },
211 |     hideDropdown() {
212 |       this.show = false;
213 |       this.searchValue = "";
214 |     },
215 |     getOptionLabel(option) {
216 |       if (typeof option === "object") {
217 |         return option[this.textProp];
218 |       }
219 |       return option;
220 |     },
221 |     isSelectedOption(option, index) {
222 |       if (this.typeAheadPointer === -1 && this.selectedValue) {
223 |         return this.isEqualOption(option, this.selectedValue);
224 |       }
225 |       return this.typeAheadPointer === index;
226 |     },
227 |     isEqualOption(a, b) {
228 |       if (a && b && typeof a === "object" && typeof b === "object") {
229 |         return (
230 |           a[this.textProp] === b[this.textProp] &&
231 |           a[this.valueProp] === b[this.valueProp]
232 |         );
233 |       }
234 |       return a === b;
235 |     },
236 |     toggle() {
237 |       if (!this.disabled) {
238 |         this.show = !this.show;
239 |       }
240 |     }
241 |   }
242 | };
243 | </script>
244 | 
245 | <style lang="scss" scoped>
246 | * {
247 |   box-sizing: border-box;
248 | }
249 | 
250 | input {
251 |   width: 100%;
252 | }
253 | 
254 | ul {
255 |   font-size: 12px;
256 |   color: #424242;
257 |   text-align: left;
258 |   list-style: none;
259 |   background-color: #fff;
260 |   background-clip: padding-box;
261 |   padding: 0px;
262 |   margin: 2px 0px 0px 0px;
263 | }
264 | 
265 | .v-select {
266 |   position: relative;
267 |   width: 100%;
268 |   height: 30px;
269 |   cursor: pointer;
270 | 
271 |   &.disabled {
272 |     cursor: not-allowed;
273 | 
274 |     .v-select-toggle {
275 |       background-color: #f8f9fa;
276 |       border-color: #f8f9fa;
277 |       opacity: 0.65;
278 |       cursor: not-allowed;
279 | 
280 |       &:focus {
281 |         outline: 0 !important;
282 |       }
283 |     }
284 |   }
285 | }
286 | 
287 | .v-select-toggle {
288 |   display: flex;
289 |   justify-content: space-between;
290 |   user-select: none;
291 |   padding: 0.375rem 0.75rem;
292 |   color: #212529;
293 |   background-color: #f8f9fa;
294 |   border-color: #d3d9df;
295 |   width: 100%;
296 |   text-align: right;
297 |   white-space: nowrap;
298 |   border: 1px solid transparent;
299 |   padding: 0.375rem 0.75rem;
300 |   font-size: 12px;
301 |   font-family: inherit, sans-serif;
302 |   line-height: 1.5;
303 |   border-radius: 0.25rem;
304 |   transition: background-color, border-color, box-shadow, 0.15s ease-in-out;
305 |   cursor: pointer;
306 | 
307 |   &:hover {
308 |     background-color: #e2e6ea;
309 |     border-color: #dae0e5;
310 |   }
311 | }
312 | 
313 | .arrow-down {
314 |   display: inline-block;
315 |   width: 0;
316 |   height: 0;
317 |   margin-left: 0.255em;
318 |   margin-top: 7px;
319 |   vertical-align: 0.255em;
320 |   content: "";
321 |   border-top: 0.3em solid;
322 |   border-right: 0.3em solid transparent;
323 |   border-bottom: 0;
324 |   border-left: 0.3em solid transparent;
325 | }
326 | 
327 | .v-dropdown-container {
328 |   position: absolute;
329 |   width: 100%;
330 |   background: red;
331 |   padding: 0.5rem 0;
332 |   margin: 0.125rem 0 0;
333 |   color: #212529;
334 |   text-align: left;
335 |   list-style: none;
336 |   background-color: #fff;
337 |   background-clip: padding-box;
338 |   border-radius: 0.25rem;
339 |   border: 1px solid rgba(0, 0, 0, 0.15);
340 |   z-index: 1000;
341 | }
342 | 
343 | .v-dropdown-item {
344 |   text-decoration: none;
345 |   line-height: 25px;
346 |   padding: 0.5rem 1.25rem;
347 |   user-select: none;
348 | 
349 |   &:hover:not(.default-option) {
350 |     background-color: #f8f9fa;
351 |   }
352 | 
353 |   &.disabled {
354 |     color: #9a9b9b;
355 |   }
356 | 
357 |   &.selected {
358 |     background-color: #007bff;
359 |     color: #fff;
360 | 
361 |     &:hover {
362 |       background-color: #007bff;
363 |       color: #fff;
364 |     }
365 |   }
366 | 
367 |   &.disabled {
368 |     cursor: not-allowed;
369 | 
370 |     &:hover {
371 |       background-color: #fff;
372 |     }
373 |   }
374 | }
375 | 
376 | .v-bs-searchbox {
377 |   padding: 4px 8px;
378 | 
379 |   .form-control {
380 |     display: block;
381 |     width: 100%;
382 |     padding: 0.375rem 0.75rem;
383 |     font-size: 1rem;
384 |     line-height: 1.5;
385 |     color: #495057;
386 |     background-color: #fff;
387 |     background-clip: padding-box;
388 |     border: 1px solid #ced4da;
389 |     border-radius: 0.25rem;
390 |     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
391 |   }
392 | }
393 | </style>
394 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   chainWebpack: config => {
 3 |     config.module
 4 |       .rule("eslint")
 5 |       .use("eslint-loader")
 6 |       .options({
 7 |         fix: true
 8 |       });
 9 |   }
10 | };
11 | 


--------------------------------------------------------------------------------