@nixweb/nixloc-ui 1.17.0 → 1.19.0

package/@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue

@@ -1,57 +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>
-.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>
+<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/@nixweb/nixloc-ui/src/component/layout/Tab.vue

@@ -1,135 +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>
+<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/@nixweb/nixloc-ui/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>