@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/component/layout/Panel.vue

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

@@ -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>
-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

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

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