@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/layout/Popover.vue

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

@@ -1,57 +0,0 @@
-<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,
-  },
-  mounted() {
-    const listElm = document.querySelector("#" + this.id);
-    if (listElm != null)
-      listElm.addEventListener("scroll", (e) => {
-        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
-          if (this.endScrollBar) this.endScrollBar();
-        }
-      });
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-  },
-};
-</script>
-
-<style scoped>
-.scrollbar {
-  overflow-y: visible;
-  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

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

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