vue-intergrall-plugins 1.1.55 → 1.1.57

package/dist/vue-intergrall-plugins.ssr.js

@@ -3324,7 +3324,7 @@ var __vue_render__$z = function __vue_render__() {
   }) + ">" + _vm._ssrList(_vm.allEmojis.categories, function (category, indexCategoryHeader) {
     return "<span" + _vm._ssrAttr("title", category.name) + _vm._ssrClass("sm-emoji-link", {
       active: _vm.categoriaSelecionada == category.id
-    }) + ">" + _vm._s(category.svg) + "</span>";
+    }) + ">" + _vm._s("<span>" + category.svg + "</span>") + "</span>";
   }) + "</div> <div class=\"sm-emoji-scroll\"><div class=\"sm-emoji-search\"" + _vm._ssrStyle(null, null, {
     display: _vm.fullView ? '' : 'none'
   }) + "><input type=\"text\" name=\"emoji-search\"" + _vm._ssrAttr("value", _vm.search) + "></div> " + (!_vm.filteredList.length && _vm.fullView ? _vm._ssrList(_vm.allEmojis.categories, function (category, indexCategory) {
@@ -3342,8 +3342,8 @@ var __vue_staticRenderFns__$z = [];
 /* style */
 var __vue_inject_styles__$z = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-3ac96181_0", {
-    source: ".box-shadow{-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.sm-emoji-picker{width:306px;height:250px;z-index:2;border:1px solid #ccc;border-radius:5px;background-color:#fff;display:flex;flex-direction:column}.sm-emoji-picker.small{height:40px!important}.sm-emoji-picker.small .sm-emoji-scroll{height:100%;max-height:100%}.sm-emoji-picker.small .sm-emoji-scroll .sm-emoji-group.small{justify-content:center;align-items:center;flex-wrap:nowrap}.add-more{--size:26px;background:#f0f0f0;border:1px solid #ccc;border-radius:50%;width:var(--size);min-width:var(--size);height:var(--size);min-height:var(--size);display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:700}.sm-emoji-header{width:100%;display:flex;align-items:center;justify-content:space-between;margin:10px 0;border-bottom:1px solid #ccc}.sm-emoji-link{padding:0 5px 5px 5px;display:flex;justify-content:center;align-items:center;cursor:pointer;opacity:.9;transition:all .2s;border-bottom:2px solid transparent}.sm-emoji-link a{margin:0;padding:0;fill:#999}.sm-emoji-link.active a>svg,.sm-emoji-link:hover a>svg{opacity:1;fill:#666}.sm-emoji-link.active a>svg[stroke-linecap],.sm-emoji-link:hover a>svg[stroke-linecap]{opacity:1;fill:transparent;stroke:#666}.sm-emoji-link.active{border-bottom:2px solid #666}.sm-emoji-scroll{width:100%;height:calc(100% - 52px);max-height:calc(100% - 52px);scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-color:#888 rgba(0,0,0,.2);scrollbar-width:8px;position:relative}.sm-emoji-scroll::-webkit-scrollbar{width:8px}.sm-emoji-scroll::-webkit-scrollbar-track{background-color:rgba(0,0,0,.2)}.sm-emoji-scroll::-webkit-scrollbar-thumb{transition-duration:.5s;background-color:#666}.sm-emoji-scroll::-webkit-scrollbar-thumb:hover{background-color:#555}.sm-emoji-search{width:100%;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:1;background:#fff;padding-bottom:10px}.sm-emoji-search>input{width:90%;outline:0;border:1px solid #ccc;border-radius:2.5px;padding:5px 10px;transition:border .2s}.sm-emoji-search>input:active,.sm-emoji-search>input:focus,.sm-emoji-search>input:hover{outline:0;border:1px solid #999}.sm-emoji-search.sticky{position:fixed;width:310px;background-color:#fff}.sm-emoji-selection{width:100%;margin-bottom:10px}.sm-emoji-title{width:100%;display:flex;justify-content:flex-start;align-items:center;background-color:#f7f7f7;padding:5px 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sm-emoji-title svg{margin:0 5px}.sm-emoji-group{width:100%;display:flex;flex-wrap:wrap;font-size:22px}.sm-emoji-item{cursor:pointer;opacity:.8;transition:opacity .2s;margin:3.5px}.sm-emoji-item:hover{opacity:1}",
+  inject("data-v-fc691414_0", {
+    source: ".box-shadow{-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.sm-emoji-picker{width:306px;height:250px;z-index:2;border:1px solid #ccc;border-radius:5px;background-color:#fff;display:flex;flex-direction:column}.sm-emoji-picker.small{height:40px!important}.sm-emoji-picker.small .sm-emoji-scroll{height:100%;max-height:100%}.sm-emoji-picker.small .sm-emoji-scroll .sm-emoji-group.small{justify-content:center;align-items:center;flex-wrap:nowrap}.add-more{--size:26px;background:#f0f0f0;border:1px solid #ccc;border-radius:50%;width:var(--size);min-width:var(--size);height:var(--size);min-height:var(--size);display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:700}.sm-emoji-header{width:100%;display:flex;align-items:center;justify-content:space-between;margin:10px 0;border-bottom:1px solid #ccc}.sm-emoji-link{padding:0 5px 5px 5px;display:flex;justify-content:center;align-items:center;cursor:pointer;opacity:.9;transition:all .2s;border-bottom:2px solid transparent}.sm-emoji-link>span svg{margin:0;padding:0;fill:#999}.sm-emoji-header .sm-emoji-link:nth-last-child(-n+2)>span svg,.sm-emoji-link>span svg[stroke]{fill:none!important}.sm-emoji-link.active>span svg:not([stroke]),.sm-emoji-link:hover>span svg:not([stroke]){opacity:1;fill:#666}.sm-emoji-link.active>span svg[stroke],.sm-emoji-link:hover>span svg[stroke]{opacity:1;fill:none!important;stroke:#666}.sm-emoji-scroll{width:100%;height:calc(100% - 52px);max-height:calc(100% - 52px);scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-color:#888 rgba(0,0,0,.2);scrollbar-width:8px;position:relative}.sm-emoji-scroll::-webkit-scrollbar{width:8px}.sm-emoji-scroll::-webkit-scrollbar-track{background-color:rgba(0,0,0,.2)}.sm-emoji-scroll::-webkit-scrollbar-thumb{transition-duration:.5s;background-color:#666}.sm-emoji-scroll::-webkit-scrollbar-thumb:hover{background-color:#555}.sm-emoji-search{width:100%;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:1;background:#fff;padding-bottom:10px}.sm-emoji-search>input{width:90%;outline:0;border:1px solid #ccc;border-radius:2.5px;padding:5px 10px;transition:border .2s}.sm-emoji-search>input:active,.sm-emoji-search>input:focus,.sm-emoji-search>input:hover{outline:0;border:1px solid #999}.sm-emoji-search.sticky{position:fixed;width:310px;background-color:#fff}.sm-emoji-selection{width:100%;margin-bottom:10px}.sm-emoji-title{width:100%;display:flex;justify-content:flex-start;align-items:center;background-color:#f7f7f7;padding:5px 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sm-emoji-title svg{margin:0 5px}.sm-emoji-group{width:100%;display:flex;flex-wrap:wrap;font-size:22px}.sm-emoji-item{cursor:pointer;opacity:.8;transition:opacity .2s;margin:3.5px}.sm-emoji-item:hover{opacity:1}",
     map: undefined,
     media: undefined
   });
@@ -3351,7 +3351,7 @@ var __vue_inject_styles__$z = function __vue_inject_styles__(inject) {
 /* scoped */
 var __vue_scope_id__$z = undefined;
 /* module identifier */
-var __vue_module_identifier__$z = "data-v-3ac96181";
+var __vue_module_identifier__$z = "data-v-fc691414";
 /* functional template */
 var __vue_is_functional_template__$z = false;
 /* style inject shadow dom */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "1.1.55",
+  "version": "1.1.57",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Chat/Picker.vue

@@ -9,7 +9,7 @@
         :title="category.name"
         :class="{ active: categoriaSelecionada == category.id }"
         @click="pickerHeaderHandler($event, category.id)"
-        v-html="category.svg"
+        v-html="`<span>${category.svg}</span>`"
       ></span>
     </div>
     <div class="sm-emoji-scroll" ref="sm-scroll">
@@ -402,25 +402,30 @@ export default {
   transition: all 200ms;
   border-bottom: 2px solid transparent;
 }
-.sm-emoji-link a {
+.sm-emoji-link > span svg {
   margin: 0;
   padding: 0;
   fill: #999;
 }
-.sm-emoji-link:hover a > svg,
-.sm-emoji-link.active a > svg {
+/* force no-fill for stroke-based icons and the last two header svgs */
+.sm-emoji-link > span svg[stroke],
+.sm-emoji-header .sm-emoji-link:nth-last-child(-n+2) > span svg {
+  fill: none !important;
+}
+
+/* hover/active: filled icons get fill; stroke icons keep no fill and change stroke color */
+.sm-emoji-link:hover > span svg:not([stroke]),
+.sm-emoji-link.active > span svg:not([stroke]) {
   opacity: 1;
   fill: #666;
 }
-.sm-emoji-link:hover a > svg[stroke-linecap],
-.sm-emoji-link.active a > svg[stroke-linecap] {
+
+.sm-emoji-link:hover > span svg[stroke],
+.sm-emoji-link.active > span svg[stroke] {
   opacity: 1;
-  fill: transparent;
+  fill: none !important;
   stroke: #666;
 }
-.sm-emoji-link.active {
-  border-bottom: 2px solid #666;
-}
 
 .sm-emoji-scroll {
   width: 100%;