@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/component/layout/Wizard.vue

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

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

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

@@ -1,86 +0,0 @@
-<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/shared/CodeEditor.vue

@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <AceEditor v-model="code" lang="html" @init="editorInit" theme="monokai" width="100%" height="400px" :options="{
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
-      fontSize: 15,
-      highlightActiveLine: true,
-      enableSnippets: false,
-      showLineNumbers: true,
-      tabSize: 2,
-      showPrintMargin: false,
-      showGutter: true,
-    }" />
-    <div class="apply">
-      <b-row>
-        <b-col class="text-right">
-          <Button key="applyCode" type="primary" title="Aplicar" classIcon="far fa-code" size="small" :clicked="apply" />
-        </b-col>
-      </b-row>
-    </div>
-  </div>
-</template>
-
-<script>
-import AceEditor from "vuejs-ace-editor";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "CodeEditor",
-  components: {
-    AceEditor,
-    Button,
-  },
-  data() {
-    return {
-      code: "",
-    };
-  },
-  computed: {
-    documentHtml: {
-      get() {
-        return this.$store.state.generic.documentHtml;
-      },
-      set(value) {
-        this.updateDocumentHtml(value);
-      },
-    },
-  },
-  mounted() {
-    this.code = this.documentHtml;
-  },
-  methods: {
-    ...mapMutations("generic", [
-      "updateDocumentHtml",
-      "hideModal",
-      "removeLoading",
-    ]),
-    apply() {
-      this.updateDocumentHtml(this.code);
-      this.hideModal("code");
-      this.removeLoading(["applyCode"]);
-    },
-    editorInit: function () {
-      require("brace/ext/language_tools"); //language extension prerequsite...
-      require("brace/mode/html");
-      require("brace/mode/javascript"); //language
-      require("brace/mode/less");
-      require("brace/theme/monokai");
-      require("brace/snippets/javascript"); //snippet
-    },
-  },
-};
-</script>
-<style scoped>
-.apply {
-  margin-top: 10px;
-}
-</style>

package/src/component/shared/Collapse.vue

@@ -1,131 +0,0 @@
-<template>
-  <div>
-    <div class="line-arrow" v-if="type == 'arrow'">
-      <div class="arrow" @click="show" v-if="!showCollapse">
-        <b-row>
-          <b-col sm="6" class="text-left">
-            <span class="title">{{ title }}</span>
-          </b-col>
-          <b-col sm="6" class="text-right">
-            <i class="far fa-plus"></i>
-          </b-col>
-        </b-row>
-      </div>
-      <div class="arrow" @click="hide" v-if="showCollapse">
-        <b-row>
-          <b-col sm="6" class="text-left">
-            <span class="title">{{ title }}</span>
-          </b-col>
-          <b-col sm="6" class="text-right">
-            <i class="far fa-minus"></i>
-          </b-col>
-        </b-row>
-      </div>
-    </div>
-    <b-collapse id="collapse-4" v-model="showCollapse" class="mt-2">
-      <slot></slot>
-    </b-collapse>
-    <div v-if="type == 'button'">
-      <b-row>
-        <b-col sm="12">
-          <div class="text-center">
-            <Button
-              v-if="!showCollapse"
-              :title="buttonShow.title"
-              :classIcon="buttonShow.icon"
-              :type="buttonShow.type"
-              size="small"
-              :clicked="show"
-            />
-          </div>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <div class="text-center">
-            <Button
-              v-if="showCollapse"
-              key="hideCollapse"
-              :title="buttonHide.title"
-              :classIcon="buttonHide.icon"
-              :type="buttonHide.type"
-              size="small"
-              :clicked="hide"
-            />
-          </div>
-        </b-col>
-      </b-row>
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "../forms/Button.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  components: { Button },
-  name: "Collapse",
-  props: {
-    buttonShow: Object,
-    buttonHide: Object,
-    type: {
-      type: String,
-      default: "button",
-    },
-    title: String,
-    startOpen: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showCollapse: false,
-    };
-  },
-  created() {
-    this.showCollapse = this.startOpen;
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    show() {
-      let self = this;
-      setTimeout(function () {
-        self.showCollapse = true;
-      }, 200);
-      this.removeLoadingButton();
-    },
-    hide() {
-      let self = this;
-      setTimeout(function () {
-        self.showCollapse = false;
-      }, 200);
-      this.removeLoadingButton();
-    },
-    removeLoadingButton() {
-      this.removeLoading(["showCollapse", "hideCollapse"]);
-    },
-  },
-};
-</script>
-<style scoped>
-.arrow {
-  font-size: 14px;
-  color: #577696;
-  cursor: pointer;
-  margin-bottom: 10px;
-}
-
-.title {
-  font-size: 16px;
-  margin-left: 5px;
-}
-
-.line-arrow {
-  border-top: solid 1px #dbdfe9;
-  margin-top: 10px;
-  padding-top: 10px;
-}
-</style>

package/src/component/shared/Confirmation.vue

@@ -1,74 +0,0 @@
-<template>
-  <div>
-    <div @click="execute()">
-      <slot></slot>
-    </div>
-    <Modal v-if="isModal" :title="title" :width="450" :height="250" v-show="showModal(`confirmation${data.id}`)">
-      <b-col sm="12">
-        <div class="div-button text-center">
-          <Button key="notConfirm" type="edit" title="cancel" :disabled="disabled" size="small" :clicked="cancel" />
-          <Button key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled"
-            :clicked="confirm" />
-        </div>
-      </b-col>
-    </Modal>
-    <div v-else class="div-button text-center">
-      <Button _key="notConfirm" type="edit" title="cancel" size="small" :disabled="disabled" :clicked="cancel" />
-      <Button _key="confirm" :type="type" title="Sim, confirmar" size="medium" :disabled="disabled" :clicked="confirm" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Confirmation",
-  components: {
-    Button,
-    Modal,
-  },
-  props: {
-    title: String,
-    type: String,
-    data: Object,
-    isModal: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    confirmed: Function,
-  },
-  methods: {
-    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
-    execute() {
-      this.openModal(`confirmation${this.data.id}`);
-    },
-    confirm() {
-      let self = this;
-      setTimeout(function () {
-        if (self.confirmed) self.confirmed(self.data);
-      }, 200);
-    },
-    cancel() {
-      this.removeLoading(["notConfirm"]);
-      this.hideModal();
-    },
-  },
-  computed: {
-    ...mapGetters("generic", ["showModal", "event"]),
-  },
-};
-</script>
-<style scoped>
-.div-button {
-  padding-top: 20px;
-  height: 100px;
-}
-</style>