feat(plugin's options): the text option to set custom no data text

iliyaZelenko · Sep 18, 2019 · 9698298 · 9698298
1 parent 1abdf8d
commit 9698298
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 7 deletions.
diff --git a/gh-pages-src/main.js b/gh-pages-src/main.js
@@ -18,7 +18,11 @@ import(`../src/styles/themes/${theme}.styl`)
 // import(`../dist/themes/${theme}.css`)
 
 Vue.use(Vuetify)
-Vue.use(CoolSelectPlugin)
+Vue.use(CoolSelectPlugin, {
+  text: {
+    noData: 'Нет доступных данных'
+  }
+})
 
 Vue.use(VueAnalytics, {
   id: 'UA-127403551-2',

diff --git a/src/component.vue b/src/component.vue
@@ -126,7 +126,7 @@
             class="IZ-select__no-data"
           >
             <slot name="no-data">
-              No data available
+              {{ $coolSelect.options.text.noData }}
             </slot>
           </div>
 

diff --git a/src/helpers.js b/src/helpers.js
@@ -27,3 +27,21 @@ export function scrollIfNeeded (element, container) {
     }
   }
 }
+
+export default function mergeDeep (target, source) {
+  let output = Object.assign({}, target)
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] })
+        } else {
+          output[key] = mergeDeep(target[key], source[key])
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] })
+      }
+    })
+  }
+  return output
+}
diff --git a/src/main.js b/src/main.js
@@ -3,6 +3,7 @@
 // import '~/styles/themes/material-design.styl'
 import component from '~/component.vue'
 import EventEmitter from '~/eventEmitter'
+import mergeDeep from '~/helpers'
 
 export const CoolSelectPlugin = new Singleton()
 export {
@@ -14,8 +15,17 @@ export {
 
 function Singleton () {
   return {
-    install (Vue, options = {}) {
+    install (Vue, optionsInput = {}) {
+      const optionsDefault = {
+        text: {
+          noData: 'No data available'
+        }
+      }
+      const options = mergeDeep(optionsDefault, optionsInput)
 
+      Vue.prototype.$coolSelect = {
+        options
+      }
     }
   }
 }
diff --git a/src/props.js b/src/props.js
@@ -37,10 +37,6 @@ export default {
     default: 'https://i.imgur.com/fLYd7PN.gif',
     note: 'sets custom loading spinner/indicator. https://loading.io/'
   },
-  errorMessage: {
-    type: String,
-    default: null
-  },
   disabled: {
     type: Boolean,
     default: false,
@@ -139,6 +135,10 @@ export default {
     default: () => '',
     note: 'custom "class" attribute for the input field. You can specify dynamic class.'
   },
+  errorMessage: {
+    type: String,
+    default: null
+  },
   successful: {
     type: Boolean,
     default: false,