@nixweb/nixloc-ui 0.0.125 → 0.0.128

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: 28px;
+  left: 50%;
+}
+
+.arrow-right {
+  position: absolute;
+  margin-top: 28px;
+  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,7 +1,7 @@
 <template>
   <div class="div-tag">
     <div class="tag">
-      <span @click="execute()">{{ title }}: {{ valor }}</span>
+      <span @click="execute()">{{ title }}: {{ value }}</span>
       <i @click="remove()" class="icon fas fa-times-circle"></i>
     </div>
   </div>
@@ -14,7 +14,7 @@ export default {
   name: "Tag",
   props: {
     title: String,
-    valor: String,
+    value: String,
     eventName: String,
     eventData: Object,
   },
@@ -29,7 +29,7 @@ export default {
     },
     remove() {
       this.addEvent({
-        nome: "tagRemovida",
+        name: "tagRemoved",
         data: this.eventData,
       });
     },

package/src/component/layout/Wizard.vue

@@ -1,213 +1,211 @@
-<template>
-  <div>
-    <div class="wrapper-stepper">
-      <div class="stepper">
-        <div class="stepper-progress" v-if="mostrarPassos">
-          <div class="stepper-progress-bar" :style="'width:' + stepperProgress"></div>
-        </div>
-
-        <div
-          class="stepper-item"
-          v-if="mostrarPassos"
-          :class="{ current: step == item, success: step > item }"
-          v-for="item in etapa"
-          :key="item"
-        >
-          <div class="stepper-item-counter">
-            <img
-              class="icon-success"
-              src="https://www.seekpng.com/png/full/1-10353_check-mark-green-png-green-check-mark-svg.png"
-              alt=""
-            />
-            <span class="number">
-              {{ item }}
-            </span>
-          </div>
-          <div class="stepper-item-title text-center">{{ legenda[item - 1] }}</div>
-        </div>
-      </div>
-
-      <div class="stepper-content" v-for="item in etapa" :key="item">
-        <div class="stepper-pane" v-if="step == item">
-          <slot :name="step"></slot>
-        </div>
-      </div>
-      <div class="controls">
-        <button class="btn" @click="step--" v-if="step != 1">Anterior</button>
-        <button
-          v-if="step < etapa"
-          class="btn btn--green-1"
-          @click="step++"
-          :disabled="!isFormValid(formName[step - 1])"
-        >
-          Próximo
-        </button>
-        <div class="slot-final" v-else>
-          <slot name="finalizar"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "Wizard",
-  props: {
-    etapa: Number,
-    legenda: Array,
-    formName: Array,
-    mostrarPassos: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      step: 1,
-    };
-  },
-  computed: {
-    ...mapGetters("validation", ["isFormValid"]),
-    stepperProgress() {
-      return (100 / this.etapa) * (this.step - 1) + "%";
-    },
-  },
-};
-</script>
-
-<style scoped>
-.tx-green-1 {
-  color: #75cc65;
-}
-.wrapper-stepper {
-  background-color: #fff;
-  padding: 0px;
-  border-radius: 32px;
-  box-shadow: rgba(0, 0, 0, 0.09);
-}
-.stepper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  z-index: 0;
-  margin-bottom: 24px;
-  margin-left: 80px;
-  margin-right: 80px;
-}
-.stepper-progress {
-  position: absolute;
-  background-color: #dddada;
-  height: 1px;
-  z-index: -1;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-}
-.stepper-progress-bar {
-  position: absolute;
-  left: 0;
-  height: 100%;
-  width: 0%;
-  background-color: #75cc65;
-  transition: all 500ms ease;
-}
-.stepper-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #c5c5c5;
-  transition: all 500ms ease;
-}
-.stepper-item-counter {
-  height: 38px;
-  width: 38px;
-  display: grid;
-  place-items: center;
-  background-color: #fff;
-  border-radius: 100%;
-  border: 1px solid #c5c5c5;
-  position: relative;
-}
-.stepper-item-counter .icon-success {
-  position: absolute;
-  opacity: 0;
-  transform: scale(0);
-  width: 20px;
-  transition: all 500ms ease;
-}
-.stepper-item-counter .number {
-  font-size: 15px;
-  transition: all 500ms ease;
-}
-.stepper-item-title {
-  position: absolute;
-  padding-top: 40px;
-  width: 40px;
-  margin-left: -16px;
-}
-.stepper-item.success .stepper-item-counter {
-  border-color: #75cc65;
-  background-color: #c8ebc1;
-  color: #fff;
-}
-.stepper-item.success .stepper-item-counter .icon-success {
-  opacity: 1;
-  transform: scale(1);
-}
-.stepper-item.success .stepper-item-counter .number {
-  opacity: 0;
-  transform: scale(0);
-}
-.stepper-item.success .stepper-item-title {
-  color: #75cc65;
-}
-.stepper-item.current .stepper-item-counter {
-  border-color: #4ab4e2;
-  background-color: #4ab4e2;
-  color: #fff;
-}
-.stepper-item.current .stepper-item-title {
-  color: #818181;
-}
-.stepper-pane {
-  color: #333;
-  margin: 40px 0;
-}
-.controls {
-  display: flex;
-}
-.btn {
-  padding: 8px 12px;
-  cursor: pointer;
-  border: none;
-  border-radius: 40px !important;
-  font-size: 13px !important;
-  font-weight: normal;
-  font-style: normal !important;
-  letter-spacing: 1px !important;
-  background: #577696;
-  border-color: #577696;
-  color: #fff;
-  -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
-  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
-}
-.btn:disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.btn--green-1 {
-  background: #577696;
-  border-color: #577696;
-  color: #fff;
-  margin-left: auto;
-}
-
-.slot-final {
-  margin-left: auto;
-}
-</style>
+<template>
+  <div>
+    <div class="wrapper-stepper">
+      <div class="stepper">
+        <div class="stepper-progress" v-if="showSteps">
+          <div class="stepper-progress-bar" :style="'width:' + stepperProgress"></div>
+        </div>
+
+        <div
+          class="stepper-item"
+          v-if="showSteps"
+          :class="{ current: step == item, success: step > item }"
+          v-for="item in totalSteps"
+          :key="item"
+        >
+          <div class="stepper-item-counter">
+            <img
+              class="icon-success"
+              src="https://www.seekpng.com/png/full/1-10353_check-mark-green-png-green-check-mark-svg.png"
+            />
+            <span class="number">
+              {{ item }}
+            </span>
+          </div>
+          <div class="stepper-item-title text-center">{{ legend[item - 1] }}</div>
+        </div>
+      </div>
+      <div class="stepper-content" v-for="item in totalSteps" :key="item">
+        <div class="stepper-pane" v-if="step == item">
+          <slot :name="step"></slot>
+        </div>
+      </div>
+      <div class="controls">
+        <button class="btn" @click="step--" v-if="step != 1">Anterior</button>
+        <button
+          v-if="step < totalSteps"
+          class="btn btn--green-1"
+          @click="step++"
+          :disabled="!isFormValid(formName[step - 1])"
+        >
+          Próximo
+        </button>
+        <div class="slot-final" v-else>
+          <slot name="finish"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "Wizard",
+  props: {
+    totalSteps: Number,
+    legend: Array,
+    formName: Array,
+    showSteps: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      step: 1,
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    stepperProgress() {
+      return (100 / this.totalSteps) * (this.step - 1) + "%";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tx-green-1 {
+  color: #75cc65;
+}
+.wrapper-stepper {
+  background-color: #fff;
+  padding: 0px;
+  border-radius: 32px;
+  box-shadow: rgba(0, 0, 0, 0.09);
+}
+.stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 0;
+  margin-bottom: 24px;
+  margin-left: 80px;
+  margin-right: 80px;
+}
+.stepper-progress {
+  position: absolute;
+  background-color: #dddada;
+  height: 1px;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+.stepper-progress-bar {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: 0%;
+  background-color: #75cc65;
+  transition: all 500ms ease;
+}
+.stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #c5c5c5;
+  transition: all 500ms ease;
+}
+.stepper-item-counter {
+  height: 38px;
+  width: 38px;
+  display: grid;
+  place-items: center;
+  background-color: #fff;
+  border-radius: 100%;
+  border: 1px solid #c5c5c5;
+  position: relative;
+}
+.stepper-item-counter .icon-success {
+  position: absolute;
+  opacity: 0;
+  transform: scale(0);
+  width: 20px;
+  transition: all 500ms ease;
+}
+.stepper-item-counter .number {
+  font-size: 15px;
+  transition: all 500ms ease;
+}
+.stepper-item-title {
+  position: absolute;
+  padding-top: 40px;
+  width: 40px;
+  margin-left: -16px;
+}
+.stepper-item.success .stepper-item-counter {
+  border-color: #75cc65;
+  background-color: #c8ebc1;
+  color: #fff;
+}
+.stepper-item.success .stepper-item-counter .icon-success {
+  opacity: 1;
+  transform: scale(1);
+}
+.stepper-item.success .stepper-item-counter .number {
+  opacity: 0;
+  transform: scale(0);
+}
+.stepper-item.success .stepper-item-title {
+  color: #75cc65;
+}
+.stepper-item.current .stepper-item-counter {
+  border-color: #4ab4e2;
+  background-color: #4ab4e2;
+  color: #fff;
+}
+.stepper-item.current .stepper-item-title {
+  color: #818181;
+}
+.stepper-pane {
+  color: #333;
+  margin: 40px 0;
+}
+.controls {
+  display: flex;
+}
+.btn {
+  padding: 8px 12px;
+  cursor: pointer;
+  border: none;
+  border-radius: 40px !important;
+  font-size: 13px !important;
+  font-weight: normal;
+  font-style: normal !important;
+  letter-spacing: 1px !important;
+  background: #577696;
+  border-color: #577696;
+  color: #fff;
+  -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
+  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
+}
+.btn:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.btn--green-1 {
+  background: #577696;
+  border-color: #577696;
+  color: #fff;
+  margin-left: auto;
+}
+
+.slot-final {
+  margin-left: auto;
+}
+</style>

package/src/component/rental/DisplayPeriodRent.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <span>
+      <slot name="start"></slot>
+    </span>
+    <span class="title-delivery" v-if="showDeliveryDevolution"
+      >{{ periodRent.deliveryDateHour }} -
+    </span>
+
+    <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
+      periodRent.startDateHour
+    }}</span>
+    -
+    <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
+      periodRent.endDateHour
+    }}</span>
+
+    <span> (</span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.year > 0">
+      <span> {{ periodRent.year }}</span>
+      <span v-if="periodRent.year == 1"> Ano</span>
+      <span v-if="periodRent.year > 1"> Anos</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.month > 0">
+      <span> {{ periodRent.month }}</span>
+      <span v-if="periodRent.month == 1"> Mês</span>
+      <span v-if="periodRent.month > 1"> Meses</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.day > 0">
+      <span> {{ periodRent.day }}</span>
+      <span v-if="periodRent.day == 1"> Dia</span>
+      <span v-if="periodRent.day > 1"> Dias</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.hour > 0">
+      <span> {{ periodRent.hour }}</span>
+      <span v-if="periodRent.hour == 1"> Hora</span>
+      <span v-if="periodRent.hour > 1"> Horas</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.minute > 0">
+      <span> {{ periodRent.minute }}</span>
+      <span v-if="periodRent.minute == 1"> Minuto</span>
+      <span v-if="periodRent.minute > 1"> Minutos</span>
+    </span>
+
+    <span> )</span>
+
+    <span class="title-devolution" v-if="showDeliveryDevolution">
+      - {{ periodRent.devolutionDateHour }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: "DisplayPeriodRent",
+  props: {
+    periodRent: Object,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+    showDeliveryDevolution: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+<style scoped>
+.title-delivery {
+  color: #009183;
+}
+
+.title-devolution {
+  color: #3d4eae;
+}
+</style>