@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/layout/Wizard.vue

@@ -0,0 +1,211 @@
+<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/DisplayCalculatePeriod.vue

@@ -0,0 +1,49 @@
+<template>
+  <span class="title">
+    <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>
+</template>
+<script>
+export default {
+  name: "DisplayCalculatePeriod",
+  props: {
+    periodRent: Object,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+  },
+};
+</script>

package/src/component/rental/DisplayPeriodRent.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <span>
+      <slot name="start"></slot>
+    </span>
+    <span class="title-delivery" v-if="showDeliveryDevolution">{{ periodRent.deliveryDateHour }}
+    </span>
+
+    <span v-show="!showOnlyDeliveryDevolution">
+      <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 v-show="!showOnlyDeliveryDevolution">
+      <DisplayCalculatePeriod :fontSize="fontSize" :periodRent="periodRent" />
+    </span>
+
+    <span class="title-devolution" v-if="showDeliveryDevolution">
+      {{ periodRent.devolutionDateHour }}
+    </span>
+  </div>
+</template>
+<script>
+import DisplayCalculatePeriod from "./DisplayCalculatePeriod.vue";
+
+export default {
+  name: "DisplayPeriodRent",
+  props: {
+    periodRent: Object,
+    showOnlyDeliveryDevolution: Boolean,
+    showDeliveryDevolution: Boolean,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+  },
+  components: {
+    DisplayCalculatePeriod,
+  },
+};
+</script>
+<style scoped>
+.title-delivery {
+  color: #009183;
+}
+
+.title-devolution {
+  color: #3d4eae;
+}
+</style>

package/src/component/rental/DisplayTotalization.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="main side-by-side">
+    <div class="molded-totalization" @click="execute">
+      <div class="title">{{ title }}
+        <span v-if="discount > 0" class="div-discount">{{ discount }}%</span>
+      </div>
+      <div class="value" :class="{ clicked: clicked }" v-if="currency" :style="_style">
+        {{ value | currency }}
+        <span class="icon-edit" v-if="clicked">
+          <i class="fa-solid fa-pen-to-square"></i>
+        </span>
+      </div>
+      <div class="value" :class="{ clicked: clicked }" v-else :style="_style">
+        {{ value }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "DisplayTotalization",
+  props: {
+    title: String,
+    currency: {
+      type: Boolean,
+      default: true,
+    },
+    discount: Number,
+    value: Number,
+    _style: String,
+    clicked: Function,
+  },
+  methods: {
+    execute() {
+      if (this.clicked) this.clicked(this.params);
+    },
+  },
+};
+</script>
+<style scoped>
+.main {
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+
+.molded-totalization {
+  height: 63px;
+  border: 1px solid #dbdfe9;
+  border-radius: 30px;
+  padding-left: 8px;
+  padding-right: 15px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  font-weight: 400;
+  min-width: 180px;
+}
+
+.title {
+  padding-left: 10px;
+  font-weight: 500;
+}
+
+.value {
+  padding-left: 10px;
+  font-size: 18px;
+  font-weight: 700;
+  font-family: "inter", sans-serif !important;
+}
+
+.clicked:hover {
+  cursor: pointer;
+}
+
+.icon-edit {
+  font-size: 14px;
+}
+
+.div-discount {
+  background-color: #FF4843;
+  width: 12px;
+  border-radius: 10px;
+  color: white;
+  font-size: 10px !important;
+  padding: 3px;
+}
+</style>

package/src/component/report/Fields.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <Button _key="btnFields" color="black" backGroundColor="#F0F0F0" title="Campos"
+            classIcon="fa-sharp fa-solid fa-text-size" size="small" :clicked="open" />
+
+        <Modal title="Campos" :width="600" :height="200" v-if="showModal('fields')">
+            <b-row>
+                <b-col sm="6">
+                    <ScrollBar :minHeight="300" :maxHeight="300">
+                        <div v-for="item in data">
+                            <b-form-checkbox v-model="item.show" :value="true" :unchecked-value="false">
+                                <span class="title">{{ item.title }}</span>
+                            </b-form-checkbox>
+                        </div>
+                    </ScrollBar>
+                </b-col>
+                <b-col sm="6">
+                    <RadioGroup :options="[
+                        { text: 'Crescente', value: 'asc' },
+                        { text: 'Decrescente', value: 'desc' },
+                    ]" v-model="ordering" />
+                    <SelectStatic title="Ordenar" :initialValue="initialValue" fieldTarget="order" :data="options"
+                        v-model="fieldOrdering" />
+                </b-col>
+            </b-row>
+
+            <div class="text-center">
+                <Button _key="btnApply" backGroundColor="#017AFF" color="white" title="Aplicar" size="small"
+                    :clicked="apply" />
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+    name: "Fields",
+    props: ["data", "value"],
+    components: {
+        Modal,
+        Button,
+        ScrollBar,
+        CheckboxSimple,
+        RadioGroup,
+        SelectStatic
+    },
+    data() {
+        return {
+            initialValue: {},
+            ordering: "asc",
+            fieldOrdering: {},
+        }
+    },
+    created() {
+        const targetObject = this.data.find(item => item.initialOrderBy === true);
+
+        this.initialValue = { content: targetObject.title, id: targetObject.fieldOrderBy };
+        this.$emit("input", { ordering: this.ordering, field: targetObject.fieldOrderBy });
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal"]),
+        options() {
+            let data = [];
+            this.data.forEach(item => {
+                var obj = { content: item.title, id: item.fieldOrderBy }
+                data.push(obj);
+            });
+            return data;
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "openModal", "hideModal", "removeLoading"]),
+        open() {
+            this.openModal("fields");
+            this.removeLoading(["btnFields"]);
+        },
+        apply() {
+            this.removeLoading(["btnApply"]);
+            this.hideModal();
+            this.addEvent({ name: "orderedFilter" });
+        }
+    },
+    watch: {
+        fieldOrdering: {
+            handler() {
+                this.$emit("input", { ordering: this.ordering, field: this.fieldOrdering.id });
+            },
+            deep: true,
+        },
+        ordering: {
+            handler() {
+                this.$emit("input", { ordering: this.ordering, field: this.fieldOrdering.id });
+            },
+            deep: true,
+        },
+    },
+}
+
+</script>