@tagplus/components 0.2.91 → 0.2.95

package/package.json

@@ -7,7 +7,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "0.2.91",
+  "version": "0.2.95",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"
@@ -65,10 +65,10 @@
     "eslint": "^6.2.2",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^6.0.1",
+    "node-sass": "^4.9.0",
     "nodemon": "^2.0.1",
     "prettier": "^1.18.2",
-    "sass": "^1.43.4",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^5.61.0",
     "webpack-bundle-analyzer": "^3.5.0"

package/src/assets/scss/_variables.scss

@@ -24,9 +24,4 @@ $light: 300;
 $normal: 400;
 $medium: 500;
 $semi-bold: 600;
-$bold: 700;
-
-$--color-white: #ffffff !default;
-$--color-primary: #2d6eda !default;
-$--popover-padding: 12px !default;
-$--color-text-regular: #606266 !default;
+$bold: 700;

package/src/components/Multisuggest/Multisuggest.vue

@@ -363,20 +363,17 @@ export default {
       let newVal = ''
       if (typeof this.value === 'boolean') {
         newVal = ''
-      } else if (Array.isArray(this.value)) {
-        newVal = this.value
-      } else if (this.value && typeof this.value === 'object') {
-        if (!this.value[this.valueKey]) {
-          if (process.env.DEBUG === 'true') {
-            throw new TypeError(
-              'Autosuggest this.value doesn\'t have a valueKey \'' +
-                this.valueKey +
-                '\' key'
-            )
+      }
+      else if (Array.isArray(this.value)) {
+        this.value.forEach((item) => {
+          if (!item[this.valueKey]) {
+            if (process.env.DEBUG === 'true') {
+              throw new TypeError('Autosuggest this.value doesn\'t have a valueKey \'' + this.valueKey + '\' key')
+            }
           }
-        } else {
-          newVal = this.value[this.valueKey]
-        }
+        })
+        
+        newVal = this.value
       }
 
       return newVal
@@ -459,6 +456,19 @@ export default {
         this.handleQueryChange(e.target.value, forceBusca)
       }
     })
+
+    this.value.forEach((item,key) => {
+      if (item[this.valueKey]) {
+        this.selectedLabelsArray.push(item)
+        this.value[key] = item[this.valueKey]
+      }
+    })
+
+    this.selectedLabels = this.selectedLabelsArray
+      .map(item => {
+        return item[this.labelKey]
+      })
+      .join(', ')
   },
 
   beforeMount () {
@@ -467,7 +477,7 @@ export default {
     if (this.loadOnCreate) {
       this.previousQuery = false
       // Chama função do element-ui select que faz o remote method
-      this.handleQueryChange('')
+      this.handleQueryChange('', true)
     } else {
       // Marca para fazer a requisição no primeiro clique
       this.doRequest = true
@@ -509,20 +519,18 @@ export default {
         value = ''
       } else if (Array.isArray(val)) {
         value = val
-      } else if (val && typeof val === 'object') {
-        // Se val for Object converte para outro tipo
-        if (!this.value[this.valueKey]) {
-          throw new TypeError(
-            'Autosuggest this.value doesn\'t have a valueKey \'' +
-              this.valueKey +
-              '\' key'
-          )
+      }
+      else if (val && typeof val === 'object') {
+        // Se val for Object converte para outro tipo 
+        if (!val[this.valueKey]) {
+          throw new TypeError('Autosuggest this.value doesn\'t have a valueKey \'' + this.valueKey + '\' key')
         } else {
           // Se mandou a label no objeto value
-          if (this.value[this.labelKey]) {
-            initialLabel = this.value[this.labelKey]
+          if (val[this.labelKey]) {
+            initialLabel = val[this.labelKey]
           }
-          value = this.value[this.valueKey]
+
+          value = val
         }
       } else {
         value = val
@@ -586,19 +594,17 @@ export default {
      */
     toggleMenu() {
       if (!this.selectDisabled) {
+        // Se mantem visivel quando clica nele aberto
         if (this.menuVisibleOnFocus) {
           this.menuVisibleOnFocus = false
         } else {
           this.visible = !this.visible
         }
-        // Se está visivel
-        if (this.visible) {
-          if (this.doRequest) {
-            this.handleQueryChange(this.query)
-            this.doRequest = false
-          }
-          (this.$refs.input || this.$refs.reference).focus()
+        if (this.doRequest) {
+          this.handleQueryChange(this.query, true)
+          this.doRequest = false
         }
+        (this.$refs.input || this.$refs.reference).focus()
       }
     },
 
@@ -747,23 +753,27 @@ input.el-input__inner {
     transition: 100ms all linear;
 
     &.hover {
-      padding-left: 20px;
+      background-color: #f5f7fa;
+      font-weight: bold;
+    }
+
+    &.selected {
+      color: #2D6EDA;
+      padding-left: 30px;
+      background-color: #F0F3F9;
+      border-radius: 5px;
+      font-weight: none;
 
       &::before {
-        content: "";
         position: absolute;
-        display: inline-block;
-        width: 4px;
-        top: 5px;
-        bottom: 5px;
-        left: 5px;
-        background: $--color-primary;
-        border-radius: 2px;
+        left: 7px;
+        font-family: "element-icons";
+        content: "\e6da";
+        font-size: 15px;
+      }
+      &::after {
+        content: "";
       }
-    }
-
-    &.selected {
-      color: $--color-text-regular;
     }
     &.created a {
       color: $--color-primary;

package/src/main.js

@@ -1,5 +1,5 @@
 import ElementUI from 'element-ui'
-// import './assets/scss/index.scss'
+import './assets/scss/index.scss'
 import * as components from './components'
 
 const install = function (Vue, opts = {}) {