@nixweb/nixloc-ui 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/CheckboxServer.vue

@@ -8,7 +8,11 @@
       </div>
       <div v-show="show" class="side-by-side">
         <div class="input-container">
-          <input type="text" v-model="baseParams.search" placeholder="Pesquisar..." />
+          <input type="text" v-model="baseParams.search" placeholder="Pesquisar..." @keyup.enter.prevent="getAll" />
+          <Button _key="btnSearch" :disabled="baseParams.search == ''" type="info"
+            classIcon="fa-solid fa-magnifying-glass" size="small" :clicked="getAll" />
+          <Button _key="btnClean" :disabled="baseParams.search == ''" type="info" classIcon="fa-solid fa-broom"
+            size="small" :clicked="clean" />
         </div>
       </div>
 
@@ -32,10 +36,12 @@
         </div>
         <div v-if="totalRecords > 20 && data.length < totalRecords">
           <div class="after-list text-center">
-            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
-              :clicked="loadingMore" />
+            <Button key="loadingMore" type="info" title="Carregar mais..." size="small" :clicked="loadingMore" />
           </div>
         </div>
+        <div class="title" v-if="data.length == 0">
+          Nenhum registro encontrado!
+        </div>
       </ScrollBar>
     </div>
   </div>
@@ -79,7 +85,7 @@ export default {
       baseParams: {
         search: "",
         currentPage: 1,
-        totalPerPage: 20,
+        totalPerPage: 50,
       },
     };
   },
@@ -125,7 +131,7 @@ export default {
         this.markSelected();
 
         this.loading = false;
-        this.removeLoading(["loadingMore"]);
+        this.removeLoading(["loadingMore", "btnSearch", "btnClean"]);
       });
     },
     loadingMore() {
@@ -144,6 +150,14 @@ export default {
       this.show = this.show == true ? false : true;
       this.removeLoading(["btnShow"]);
     },
+    clean() {
+      this.baseParams = {
+        search: "",
+        currentPage: 1,
+        totalPerPage: 50,
+      }
+      this.getAll();
+    },
     markSelected() {
       this.data.forEach(item => {
         if (this.selected.includes(item.content)) {
@@ -155,14 +169,23 @@ export default {
   watch: {
     selected: {
       handler(value) {
-        this.$emit("input", value);
-        if (this.changed) this.changed(value);
+        if (value) {
+          this.$emit("input", value);
+          if (this.changed) this.changed(value);
+        }
+      },
+      deep: true,
+    },
+    event: {
+      handler(event) {
+        if (event.name == "cleanCheckboxServer")
+          this.selected = "";
       },
       deep: true,
     },
     'baseParams.search': {
       handler(value) {
-        this.getAll();
+        //  this.getAll();
       },
       deep: true,
     },

package/src/component/forms/Select.vue

@@ -72,6 +72,7 @@ export default {
     propsParams: Object,
     value: Object,
     changed: Function,
+    cleaned: Function,
     nameNewRegister: String,
     showNewRegister: {
       type: Boolean,
@@ -210,6 +211,8 @@ export default {
         let obj = { fieldTarget: this.fieldTarget, value: "" };
         this.addFilter(obj);
       }
+
+      if (this.cleaned) this.cleaned();
     },
     loadingMore() {
       this.baseParams.currentPage++;

package/src/component/forms/TextArea.vue

@@ -38,6 +38,7 @@ export default {
     required: Boolean,
     maxLength: Number,
     value: String,
+    changed: Function,
   },
   data() {
     return {
@@ -78,6 +79,7 @@ export default {
       this.validate();
       this.formDirty = true;
       this.updateFormDirty(true);
+      if (this.changed) this.changed();
     },
     notifications() {
       let self = this;

package/src/component/layout/AnimatedPhrase.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <transition name="slide-up" mode="out-in">
-            <div v-if="currentPhrase" :key="currentPhrase" class="phrase">
+            <div v-if="currentPhrase" :key="currentPhrase" class="phrase title">
                 {{ currentPhrase }}
             </div>
         </transition>

package/src/component/layout/Tooltip.vue

@@ -0,0 +1,155 @@
+<template>
+    <span ref="trigger" class="nx-tooltip-trigger" @mouseenter="showTooltip" @mouseleave="hideTooltip">
+        <slot />
+    </span>
+</template>
+
+<script>
+export default {
+    name: "Tooltip",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        placement: {
+            type: String,
+            default: "top", // top | bottom | left | right
+        },
+        offset: {
+            type: Number,
+            default: 14, // distância entre o trigger e o tooltip
+        },
+    },
+    data() {
+        return {
+            tooltipEl: null,
+        };
+    },
+    methods: {
+        showTooltip() {
+            if (!this.title || this.title.trim() === "") return; // ✔ só mostra se title tiver conteúdo
+
+            if (!this.tooltipEl) this.createTooltip();
+            this.positionTooltip();
+            this.tooltipEl.style.opacity = "1";
+        },
+
+        hideTooltip() {
+            if (this.tooltipEl) this.tooltipEl.style.opacity = "0";
+        },
+
+        createTooltip() {
+            const el = document.createElement("div");
+            el.className = "nx-tooltip-floating";
+            el.dataset.placement = this.placement;
+
+            el.innerHTML = `
+        <span class="nx-tooltip-floating__text">${this.title}</span>
+        <span class="nx-tooltip-floating__arrow"></span>
+      `;
+
+            el.style.position = "fixed";
+            el.style.opacity = "0";
+            el.style.zIndex = "999999";
+            el.style.pointerEvents = "none";
+            el.style.transition = "opacity .15s ease";
+
+            document.body.appendChild(el);
+            this.tooltipEl = el;
+        },
+
+        positionTooltip() {
+            if (!this.tooltipEl) return;
+
+            const trigger = this.$refs.trigger.getBoundingClientRect();
+            const tip = this.tooltipEl.getBoundingClientRect();
+            const gap = this.offset; // ✔ distância ajustável
+
+            let top = 0,
+                left = 0;
+
+            switch (this.placement) {
+                case "bottom":
+                    top = trigger.bottom + gap;
+                    left = trigger.left + trigger.width / 2 - tip.width / 2;
+                    break;
+
+                case "left":
+                    top = trigger.top + trigger.height / 2 - tip.height / 2;
+                    left = trigger.left - tip.width - gap;
+                    break;
+
+                case "right":
+                    top = trigger.top + trigger.height / 2 - tip.height / 2;
+                    left = trigger.right + gap;
+                    break;
+
+                case "top":
+                default:
+                    top = trigger.top - tip.height - gap;
+                    left = trigger.left + trigger.width / 2 - tip.width / 2;
+                    break;
+            }
+
+            this.tooltipEl.style.top = `${top}px`;
+            this.tooltipEl.style.left = `${left}px`;
+        },
+    },
+
+    beforeDestroy() {
+        if (this.tooltipEl) this.tooltipEl.remove();
+    },
+};
+</script>
+
+<style>
+.nx-tooltip-floating {
+    background: #111827;
+    color: #f9fafb;
+    padding: 6px 10px;
+    border-radius: 10px;
+    font-size: 12px;
+    white-space: nowrap;
+    position: fixed;
+}
+
+.nx-tooltip-floating__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+.nx-tooltip-floating[data-placement="top"] .nx-tooltip-floating__arrow {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px 5px 0 5px;
+    border-color: #111827 transparent transparent transparent;
+}
+
+.nx-tooltip-floating[data-placement="bottom"] .nx-tooltip-floating__arrow {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 5px 5px 5px;
+    border-color: transparent transparent #111827 transparent;
+}
+
+.nx-tooltip-floating[data-placement="left"] .nx-tooltip-floating__arrow {
+    top: 50%;
+    right: -5px;
+    transform: translateY(-50%);
+    border-width: 5px 0 5px 5px;
+    border-color: transparent transparent transparent #111827;
+}
+
+.nx-tooltip-floating[data-placement="right"] .nx-tooltip-floating__arrow {
+    top: 50%;
+    left: -5px;
+    transform: translateY(-50%);
+    border-width: 5px 5px 5px 0;
+    border-color: transparent #111827 transparent transparent;
+}
+</style>

package/src/component/shared/actions/ActionButtons.vue

@@ -2,22 +2,31 @@
     <div>
         <div class="side-by-side" v-for="item in actions" :key="item.type">
 
-            <Button v-if="item.type === 'delete'" tooltip="Gerar Retorno" key="remove" classIcon="fa-solid fa-trash" :title="item.title"
-                type="danger" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
+            <Button v-if="item.type === 'delete'" tooltip="Gerar Retorno" key="remove" classIcon="fa-solid fa-trash"
+                :title="item.title" type="danger" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
 
-            <Button v-if="item.type === 'component'" key="component" :title="item.title" :classIcon="item.classIcon"
-                :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
-                :backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
-                :clicked="() => $emit('confirm', item)" />
+            <Tooltip :title="item.tooltip">
+                <Button v-if="item.type === 'component'" key="component" :title="item.title" :classIcon="item.classIcon"
+                    :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
+                    :backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
+                    :clicked="() => $emit('confirm', item)" />
+            </Tooltip>
+
+            <Tooltip :title="item.tooltip">
+                <Button v-if="item.type === 'options'" key="options" :title="item.title" :classIcon="item.classIcon"
+                    :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
+                    :backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
+                    :clicked="() => $emit('confirm', item)" />
+            </Tooltip>
+
+            <Tooltip :title="item.tooltip">
+                <Button v-if="item.type === 'event'" :eventName="item.eventName" key="event" :title="item.title"
+                    :classIcon="item.classIcon" :type="item.backgroundColor ? '' : 'primary'" size="small"
+                    :params="item" color="white" tooltip="Gerar Retorno"
+                    :backGroundColor="item.backgroundColor ? item.backgroundColor : ''" />
+            </Tooltip>
 
-            <Button v-if="item.type === 'options'" key="options" :title="item.title" :classIcon="item.classIcon"
-                :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
-                :backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
-                :clicked="() => $emit('confirm', item)" />
 
-            <Button v-if="item.type === 'event'" :eventName="item.eventName" key="event" :title="item.title"
-                :classIcon="item.classIcon" :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item"
-                color="white" :backGroundColor="item.backgroundColor ? item.backgroundColor : ''" />
 
         </div>
     </div>
@@ -25,12 +34,13 @@
 
 <script>
 import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Tooltip from "@nixweb/nixloc-ui/src/component/layout/Tooltip";
 
 import { mapMutations } from "vuex";
 
 export default {
     name: "ActionButtons",
-    components: { Button },
+    components: { Button, Tooltip },
     props: {
         actions: { type: Array, default: () => [] },
     },