@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/component/layout/Popover.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="center">
+      <span class="qs">? <span class="popover above">Hey bro, cool popover!</span></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Popover",
+  props: {
+    nome: String,
+    width: Number,
+  },
+};
+</script>
+<style lang="scss" scoped>
+.center {
+  margin: 100px auto;
+  width: 30px;
+}
+
+/* The element to hover over */
+.qs {
+  background-color: #02bdda;
+  border-radius: 16px;
+  color: #e3fbff;
+  cursor: default;
+  display: inline-block;
+  font-family: "Helvetica", sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+  position: relative;
+  text-align: center;
+  width: 30px;
+
+  .popover {
+    background-color: rgba(0, 0, 0, 0.85);
+    border-radius: 5px;
+    bottom: 42px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+    color: #fff;
+    display: none;
+    font-size: 12px;
+    font-family: "Helvetica", sans-serif;
+    left: -95px;
+    padding: 7px 10px;
+    position: absolute;
+    width: 200px;
+    z-index: 4;
+
+    &:before {
+      border-top: 7px solid rgba(0, 0, 0, 0.85);
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+      bottom: -7px;
+      content: "";
+      display: block;
+      left: 50%;
+      margin-left: -7px;
+      position: absolute;
+    }
+  }
+
+  &:hover {
+    .popover {
+      display: block;
+      -webkit-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
+      -moz-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
+      -ms-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
+    }
+  }
+}
+
+@-webkit-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-ms-keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes move-up {
+  from {
+    bottom: 30px;
+  }
+  to {
+    bottom: 42px;
+  }
+}
+@-moz-keyframes move-up {
+  from {
+    bottom: 30px;
+  }
+  to {
+    bottom: 42px;
+  }
+}
+@-ms-keyframes move-up {
+  from {
+    bottom: 30px;
+  }
+  to {
+    bottom: 42px;
+  }
+}
+</style>

package/src/component/layout/ScrollBar.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :id="id" class="scrollbar" :style="'max-height:' + maxHeight + 'px' + ';' + 'min-height:' + minHeight + 'px'">
+    <div id="scroll-bar">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ScrollBar",
+  props: {
+    id: String,
+    maxHeight: Number,
+    minHeight: Number,
+    endScrollBar: Function,
+  },
+  data() {
+    return {
+      _scrollHandler: null,
+    };
+  },
+  mounted() {
+    const listElm = this.$el;
+    if (listElm != null) {
+      this._scrollHandler = () => {
+        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight - 1) {
+          if (this.endScrollBar) this.endScrollBar();
+        }
+      };
+      listElm.addEventListener("scroll", this._scrollHandler);
+    }
+  },
+  beforeDestroy() {
+    const listElm = this.$el;
+    if (listElm != null && this._scrollHandler) {
+      listElm.removeEventListener("scroll", this._scrollHandler);
+      this._scrollHandler = null;
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+  },
+};
+</script>
+
+<style scoped>
+.scrollbar {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  background-color: white;
+  border-radius: 20px;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 6px;
+  background-color: #B9BABB;
+  border-radius: 20px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: #B9BABB;
+  border-radius: 20px;
+}
+</style>

package/src/component/layout/Tab.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <b-tabs v-model="tabIndex" id="custom-tab">
+      <template #tabs-start v-if="tabs.length > 8">
+        <div class="arrow-left">
+          <span v-if="hiddenLeft > 0" class="icon">
+            <i class="fa-solid fa-circle-chevron-left" @click="back()"></i>
+          </span>
+          <span v-else>
+            <span class="icon-disabled">
+              <i class="fa-solid fa-circle-chevron-left"></i>
+            </span>
+          </span>
+          <span v-if="hiddenLeft > 0" class="badge-tabs badge-left">
+            <i class="fa-solid fa-layer-plus"></i>
+          </span>
+        </div>
+      </template>
+
+      <b-tab @click="execute(title(i).title)" v-for="i in tabs" :key="'dyn-tab-' + i" :title="title(i).title">
+        <slot :name="i"></slot>
+      </b-tab>
+
+      <template #tabs-end v-if="tabs.length > 8">
+        <div class="arrow-right">
+          <span v-if="hiddenRight > 0" class="icon">
+            <i class="fa-solid fa-circle-chevron-right" @click="prev()"></i>
+          </span>
+          <span v-else class="icon-disabled">
+            <i class="fa-solid fa-circle-chevron-right"></i>
+          </span>
+          <span v-if="hiddenRight > 0" class="badge-tabs badge-right">
+            <i class="fa-solid fa-layer-plus"></i>
+          </span>
+        </div>
+      </template>
+    </b-tabs>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  props: {
+    initialTabs: Array,
+    value: Number,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      hiddenLeft: 0,
+      hiddenRight: 0,
+      _resizeObs: null,
+    };
+  },
+  created() {
+    this.tabIndex = this.value;
+  },
+  computed: {
+    tabs() {
+      const tabs = [];
+      this.initialTabs.forEach((item) => tabs.push(item.index));
+      return tabs;
+    },
+  },
+  mounted() {
+    const container = document.getElementById("custom-tab__BV_tab_controls_");
+    if (!container) return;
+
+    container.classList.remove("nav");
+    if (this.tabs.length > 8) container.classList.add("nav-custom");
+    if (this.tabs.length <= 8) container.classList.add("nav-default");
+
+    // Atualiza contadores ao rolar e ao redimensionar
+    container.addEventListener("scroll", this.updateHiddenTabs, { passive: true });
+    window.addEventListener("resize", this.updateHiddenTabs);
+
+    // Observa mudanças de tamanho do container para recalcular
+    this._resizeObs = new ResizeObserver(() => this.updateHiddenTabs());
+    this._resizeObs.observe(container);
+
+    // Inicial
+    this.$nextTick(this.updateHiddenTabs);
+  },
+  beforeDestroy() {
+    const container = document.getElementById("custom-tab__BV_tab_controls_");
+    if (container) container.removeEventListener("scroll", this.updateHiddenTabs);
+    window.removeEventListener("resize", this.updateHiddenTabs);
+    if (this._resizeObs) this._resizeObs.disconnect();
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+
+    execute(title) {
+      if (title === "Auditoria") {
+        this.addEvent({ name: "auditLogGetAll" });
+      }
+    },
+
+    title(index) {
+      return this.initialTabs.find((x) => x.index == index);
+    },
+
+    // 👉 Scroll para a direita (próximas tabs)
+    prev() {
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+      const chunk = this._calcScrollChunk(container); // ~90% da largura visível
+      this._smoothScrollBy(container, chunk);
+      // updateHiddenTabs será disparado pelo evento 'scroll'
+    },
+
+    // 👉 Scroll para a esquerda (tabs anteriores)
+    back() {
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+      const chunk = this._calcScrollChunk(container);
+      this._smoothScrollBy(container, -chunk);
+    },
+
+    // ===== CÁLCULO DO "SALTO" IDEAL =====
+    _calcScrollChunk(container) {
+      // Rola ~90% da área visível; no mínimo 240px
+      return Math.max(Math.floor(container.clientWidth * 0.9), 240);
+    },
+
+    // ===== SMOOTH SCROLL COM FALLBACK =====
+    _smoothScrollBy(el, dx) {
+      // preferir nativo (quando disponível)
+      try {
+        el.scrollBy({ left: dx, behavior: "smooth" });
+        return;
+      } catch (_) {
+        // fallback
+      }
+
+      // fallback com requestAnimationFrame
+      const duration = 250; // ms
+      const start = el.scrollLeft;
+      const target = start + dx;
+      const startTime = performance.now();
+
+      const step = (now) => {
+        const t = Math.min(1, (now - startTime) / duration);
+        // ease-out cúbico
+        const eased = 1 - Math.pow(1 - t, 3);
+        el.scrollLeft = start + (target - start) * eased;
+        if (t < 1) requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    },
+
+    // ===== Indicação de tabs ocultas =====
+    updateHiddenTabs() {
+      const container = document.getElementById("custom-tab__BV_tab_controls_");
+      if (!container) return;
+
+      const totalTabs = this.tabs.length || 1; // evita divisão por zero
+      const avgWidth = container.scrollWidth / totalTabs;
+
+      // Ocultas à esquerda (pixels já rolados / largura média)
+      this.hiddenLeft = Math.max(0, Math.floor(container.scrollLeft / avgWidth));
+
+      // Ocultas à direita
+      const hiddenPx = container.scrollWidth - (container.scrollLeft + container.clientWidth);
+      this.hiddenRight = Math.max(0, Math.floor(hiddenPx / avgWidth));
+    },
+  },
+  watch: {
+    tabIndex(tabIndex) {
+      this.$emit("input", tabIndex);
+      // após troca, recalcula (caso mude largura ativa, etc.)
+      this.$nextTick(this.updateHiddenTabs);
+    },
+  },
+};
+</script>
+
+<style>
+.arrow-left {
+  position: absolute;
+  margin-top: 40px;
+  left: 50%;
+}
+
+.arrow-right {
+  position: absolute;
+  margin-top: 40px;
+  left: 53%;
+}
+
+.nav-default {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-custom {
+  display: flex;
+  flex-wrap: nowrap !important;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+.nav-custom::-webkit-scrollbar {
+  width: 10px;
+  height: 0px;
+}
+
+.icon {
+  color: #c1c1c7;
+  font-size: 24px;
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.icon:hover {
+  color: #577696;
+}
+
+.icon-disabled {
+  color: #c1c1c7;
+  font-size: 24px;
+  padding-left: 10px;
+  opacity: 0.5;
+}
+
+.badge-tabs {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  padding: 2px 5px;
+  font-size: 15px;
+  line-height: 1;
+  color: #D98621;
+  background: transparent;
+  border-radius: 10px;
+  vertical-align: middle;
+}
+
+.badge-left {
+  position: absolute;
+  margin-left: -60px;
+  margin-top: 13px;
+}
+
+.badge-right {
+  position: absolute;
+  margin-left: 4px;
+  margin-top: 13px;
+}
+</style>

package/src/component/layout/Tag.vue

@@ -0,0 +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>

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>