@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/component/layout/Panel.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="panel">
+    <Toast />
+    <Loading v-show="isLoading('panel')" />
+    <div v-show="!isLoading('panel')">
+      <div v-show="showVerticalFilter">
+        <VerticalFilter>
+          <slot name="content-filter"></slot>
+        </VerticalFilter>
+      </div>
+      <div class="local-container" :class="{ 'layout-small': layout == 'small' }">
+        <Messages v-if="!modal.open" />
+        <div class="row">
+          <div class="col-10">
+            <div class="div-title">
+              <span class="module">
+                <span class="icon-panel"><i class="fas fa-compass"></i></span>
+                {{ module }} <span v-if="title">|</span></span>
+              <span class="title"> {{ title }}</span>
+            </div>
+          </div>
+          <div class="col-2" v-if="currentRoute != 'dashboard'">
+            <div class="div-back text-right" @click="back()">
+              <i class="fa-solid fa-circle-arrow-left"></i>
+              <span> Voltar</span>
+            </div>
+          </div>
+        </div>
+        <br v-show="showButtons" />
+        <div class="row" v-show="showButtons">
+          <div class="col-12" v-show="showButtons">
+            <slot name="content-buttons"></slot>
+          </div>
+        </div>
+        <br v-show="showButtons || showSearch" />
+        <div v-show="showButtons || showSearch">
+          <div>
+            <div v-show="showSearch">
+              <Search />
+            </div>
+          </div>
+        </div>
+        <br v-show="showSearch" />
+        <div>
+          <slot name="content-main"></slot>
+        </div>
+      </div>
+    </div>
+    <br /><br /><br />
+  </div>
+</template>
+
+<script>
+import Toast from "../shared/Toast.vue";
+import Messages from "../shared/Messages.vue";
+import Search from "../shared/Search.vue";
+import Loading from "../shared/Loading.vue";
+import VerticalFilter from "../shared/VerticalFilter";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Panel",
+  components: {
+    Loading,
+    VerticalFilter,
+    Search,
+    Messages,
+    Toast,
+    Molded,
+  },
+  props: {
+    module: String,
+    title: String,
+    showVerticalFilter: Boolean,
+    showSearch: Boolean,
+    showButtons: Boolean,
+    layout: {
+      type: String,
+      default: "small"
+    }
+  },
+  data() {
+    return {
+      currentRoute: this.$route.name,
+    };
+  },
+  created() {
+    this.addLoading("panel");
+  },
+  updated() {
+    this.currentRoute = this.$route.name;
+  },
+  computed: {
+    ...mapGetters("generic", ["isLoading"]),
+    ...mapState("generic", ["modal"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addLoading"]),
+    back() {
+      window.history.back();
+    },
+  },
+};
+</script>
+<style scoped>
+.layout-small {
+  max-width: 1500px;
+}
+
+.local-container {
+  margin: auto;
+  padding-left: 100px;
+}
+
+.div-title {
+  margin-top: 15px;
+}
+
+.module {
+  font-size: 17px;
+  font-weight: 400;
+  color: #aaaebb;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.icon-panel {
+  opacity: 0.8;
+  font-size: 20px;
+}
+
+.c-back {
+  margin-top: 20px;
+  margin-right: 12px;
+  font-size: 16px;
+  cursor: pointer;
+  color: #8ca1b7;
+}
+
+.c-back:hover {
+  color: #8ca1b7;
+}
+
+.panel {
+  margin-top: 30px;
+  padding-right: 30px;
+  padding-left: 20px;
+}
+
+.div-back {
+  margin-top: 18px;
+  font-size: 16px;
+  cursor: pointer;
+  padding-top: 3px;
+  padding-left: 10px;
+  padding-right: 30px;
+  font-weight: 400;
+  color: #242424;
+}
+
+.div-back:hover {
+  color: #505050;
+}
+</style>

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,57 @@
+<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>
+div {
+  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

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <b-tabs v-model="tabIndex" id="custom-tab">
+      <template #tabs-start v-if="tabs.length > 8">
+        <div class="arrow-left">
+          <span class="icon">
+            <i class="fa-solid fa-circle-chevron-left" @click="back()"></i>
+          </span>
+        </div>
+      </template>
+      <b-tab 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 class="icon">
+            <i class="fa-solid fa-circle-chevron-right" @click="prev()"></i>
+          </span>
+        </div>
+      </template>
+    </b-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initialTabs: Array,
+    value: Number,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+    };
+  },
+  created() {
+    this.tabIndex = this.value;
+  },
+  computed: {
+    tabs() {
+      let tabs = [];
+      this.initialTabs.forEach((item) => {
+        tabs.push(item.index);
+      });
+      return tabs;
+    },
+  },
+  mounted() {
+    var container = document.getElementById("custom-tab__BV_tab_controls_");
+    container.classList.remove("nav");
+    if (this.tabs.length > 8) container.classList.add("nav-custom");
+    if (this.tabs.length <= 8) container.classList.add("nav-default");
+  },
+  methods: {
+    title(index) {
+      var ret = this.initialTabs.find((x) => x.index == index);
+      return ret;
+    },
+    prev() {
+      var container = document.getElementById("custom-tab__BV_tab_controls_");
+      this.sideScroll(container, "right", 25, 100, 10);
+    },
+    back() {
+      var container = document.getElementById("custom-tab__BV_tab_controls_");
+      this.sideScroll(container, "left", 25, 100, 10);
+    },
+    sideScroll(element, direction, speed, distance, step) {
+      let scrollAmount = 0;
+      var slideTimer = setInterval(function () {
+        if (direction == "left") {
+          element.scrollLeft -= step;
+        } else {
+          element.scrollLeft += step;
+        }
+        scrollAmount += step;
+        if (scrollAmount >= distance) {
+          window.clearInterval(slideTimer);
+        }
+      }, speed);
+    },
+  },
+  watch: {
+    tabIndex(tabIndex) {
+      this.$emit("input", tabIndex);
+    },
+  },
+};
+</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;
+}
+</style>

package/src/component/layout/Tag.vue

@@ -0,0 +1,90 @@
+<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 8px 4px 0;
+  width: 100%;
+  outline: none;
+  padding: 0 6px 0 16px;
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.icon-tag {
+  color: #9e9e9e;
+  padding-left: 5px;
+  font-size: 20px;
+}
+
+.tag-disabled {
+  opacity: 0.5;
+}
+</style>