@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/layout/Tag.vue

@@ -1,97 +1,97 @@
-<template>
-  <div class="div-tag">
-    <div class="tag" :class="{ 'tag-disabled': disabled }">
-      <span class="title-tag" @click="execute()">{{ title }} <span v-if="value">:</span> {{ value }}</span>
-      <i v-if="showButtonClose && !disabled" @click="remove()" class="icon-tag fas fa-times-circle"></i>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "Tag",
-  props: {
-    _key: String,
-    title: String,
-    disabled: Boolean,
-    value: String,
-    eventName: String,
-    eventData: Object,
-    clickedRemove: Function,
-    clickedBody: Function,
-    params: Object,
-    showButtonClose: {
-      type: Boolean,
-      default: true
-    },
-    tagRemoved: {
-      type: Boolean,
-      default: true
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    execute() {
-      if (this.clickedBody) this.clickedBody(this.params);
-
-      if (this.eventName)
-        this.addEvent({
-          nome: this.eventName,
-          data: this.eventData,
-        });
-    },
-    remove() {
-      if (this.clickedRemove) this.clickedRemove(this.params);
-
-      if (this.tagRemoved) {
-        this.addEvent({
-          name: "tagRemoved",
-          data: this.eventData ? this.eventData : this._key,
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.tag {
-  align-items: center;
-  background: #e0e0e0;
-  border-radius: 32px;
-  box-sizing: border-box;
-  display: flex;
-  font-size: 13px;
-  height: 32px;
-  margin: 4px -9px 4px 0;
-  outline: none;
-  padding: 0 6px 0 16px;
-  position: relative;
-  white-space: nowrap;
-  cursor: pointer;
-
-}
-
-.title-tag {
-  max-width: 400px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.div-tag {
-  margin-right: 10px;
-}
-
-.icon-tag {
-  color: #9e9e9e;
-  padding-left: 5px;
-  font-size: 20px;
-}
-
-.tag-disabled {
-  opacity: 0.5;
-}
-</style>
+<template>
+  <div class="div-tag">
+    <div class="tag" :class="{ 'tag-disabled': disabled }">
+      <span class="title-tag" @click="execute()">{{ title }} <span v-if="value">:</span> {{ value }}</span>
+      <i v-if="showButtonClose && !disabled" @click="remove()" class="icon-tag fas fa-times-circle"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "Tag",
+  props: {
+    _key: String,
+    title: String,
+    disabled: Boolean,
+    value: String,
+    eventName: String,
+    eventData: Object,
+    clickedRemove: Function,
+    clickedBody: Function,
+    params: Object,
+    showButtonClose: {
+      type: Boolean,
+      default: true
+    },
+    tagRemoved: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    execute() {
+      if (this.clickedBody) this.clickedBody(this.params);
+
+      if (this.eventName)
+        this.addEvent({
+          nome: this.eventName,
+          data: this.eventData,
+        });
+    },
+    remove() {
+      if (this.clickedRemove) this.clickedRemove(this.params);
+
+      if (this.tagRemoved) {
+        this.addEvent({
+          name: "tagRemoved",
+          data: this.eventData ? this.eventData : this._key,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tag {
+  align-items: center;
+  background: #e0e0e0;
+  border-radius: 32px;
+  box-sizing: border-box;
+  display: flex;
+  font-size: 13px;
+  height: 32px;
+  margin: 4px -9px 4px 0;
+  outline: none;
+  padding: 0 6px 0 16px;
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+
+}
+
+.title-tag {
+  max-width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.icon-tag {
+  color: #9e9e9e;
+  padding-left: 5px;
+  font-size: 20px;
+}
+
+.tag-disabled {
+  opacity: 0.5;
+}
+</style>

package/src/component/layout/Tooltip.vue

@@ -1,155 +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>
+<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>