@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/component/forms/InputDecimal.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="form-group">
-    <label v-if="title">
-      <span class="title">{{ title }}</span>
-      <span class="required" v-if="required">*</span>
-      <Tip :field="field" :formName="formName" />
-    </label>
-    <div class="inner-addon right-addon">
-      <div class="required glyphicon" v-if="notifications.length > 0 && formDirty">
-        <i class="fas fa-exclamation-triangle"></i>
-      </div>
-      <slot v-else></slot>
-      <vue-numeric :style="_style" class="form-control" v-on:keyup.enter.native="pressedEnter"
-        :class="{ 'is-invalid': notifications.length > 0 && formDirty }" :placeholder="placeholder" :disabled="disabled"
-        currency="R$" separator="." :minus="allowNegative" v-bind:precision="precision" v-model="valueLocal">
-      </vue-numeric>
-
-    </div>
-    <div v-if="formDirty">
-      <div v-for="message in notifications" :key="message">
-        <span class="invalid">{{ message }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Tip from "../shared/Tip.vue";
-import VueNumeric from "vue-numeric";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "InputDecimal",
-  mixins: [],
-  props: {
-    title: String,
-    field: String,
-    disabled: Boolean,
-    placeholder: String,
-    formName: String,
-    _style: String,
-    precision: {
-      type: Number,
-      default: 2,
-    },
-    markFormDirty: {
-      type: Boolean,
-      default: true,
-    },
-    allowNegative: {
-      type: Boolean,
-      default: false,
-    },
-    required: Boolean,
-    value: Number,
-    enter: Function,
-  },
-  components: {
-    VueNumeric,
-    Tip,
-  },
-  data() {
-    return {
-      notifications: [],
-      formDirty: false,
-      _value: 0,
-      valueLocal: 20,
-      isPrecision: false
-    };
-  },
-  created() {
-    // não carregar as validações iniciais para number
-    this.valueLocal = this.value;
-  },
-  methods: {
-    ...mapMutations("validation", [
-      "addValidation",
-      "removeValidation",
-      "updateFormDirty",
-    ]),
-    validate() {
-      this.notifications = [];
-      if (this.valueLocal == 0) return;
-      if (this.required && !this.valueLocal) {
-        var message = `${this.title} não pode ser vazio!`;
-        this.notifications.push(message);
-      }
-    },
-    pressedEnter() {
-      if (this.enter) this.enter();
-    },
-  },
-  computed: {
-    ...mapState("validation", ["resetForm"]),
-  },
-  watch: {
-    value() {
-      this.valueLocal = this.value;
-    },
-    valueLocal() {
-      this.validate();
-      this.$emit("input", this.valueLocal);
-      this.formDirty = true;
-      if (this.markFormDirty) this.updateFormDirty(true);
-    },
-    notifications() {
-      let self = this;
-      this.notifications.forEach(function (notification) {
-        let obj = {
-          key: self.field + "&" + self.formName,
-          formName: self.formName,
-          notification: notification,
-        };
-        self.addValidation(obj);
-      });
-
-      if (this.notifications.length == 0) {
-        let obj = {
-          key: self.field + "&" + self.formName,
-          formName: self.formName,
-        };
-        self.removeValidation(obj);
-      }
-    },
-    resetForm: {
-      handler(form) {
-        if (form.name == this.formName) this.formDirty = false;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.title {
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  color: #0a0a0a;
-  letter-spacing: 0.5px !important;
-}
-
-.success {
-  color: #94aa2a;
-  font-size: 14px;
-}
-
-.invalid {
-  color: #f0134d;
-  font-size: 14px;
-}
-</style>

package/src/component/forms/InputDecimalDiscount.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <InputDecimal v-if="!discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title"
-      :precision="precision" field="discount" :required="required" :formName="formName" _style="color:red;"
-      :disabled="disabled" v-model="discount.discount">
-      <div class="glyphicon margin-button">
-        <Button _key="btnDiscount" type="danger" classIcon="fa-solid fa-brazilian-real-sign" size="small"
-          :disabled="disabled" :clicked="change" />
-      </div>
-    </InputDecimal>
-    <InputNumber v-if="discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title" field="discount"
-      :formName="formName" :required="false" :disabled="disabled" _style="color:red;" :maxLength="5" type="float"
-      v-model="discount.discount">
-      <div class="glyphicon margin-button">
-        <Button _key="btnDiscount" type="danger" :disabled="disabled" classIcon="fa-solid fa-percent" size="small"
-          :clicked="change" />
-      </div>
-    </InputNumber>
-  </div>
-</template>
-
-<script>
-import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
-import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "InputDecimalDiscount",
-  components: {
-    InputNumber,
-    InputDecimal,
-    Button,
-  },
-  props: ["formName", "disabled", "_style", "required", "precision", "markFormDirty", "value"],
-  data() {
-    return {
-      title: "Desconto em R$",
-      discount: { discountByPercentage: false, discount: 0 },
-    };
-  },
-  mounted() {
-    let self = this;
-    setTimeout(function () {
-      self.discount = self.value;
-    }, 100);
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    change() {
-      this.discount.discountByPercentage =
-        this.discount.discountByPercentage != true;
-      this.titleName();
-      this.removeLoading(["btnDiscount"]);
-    },
-    titleName() {
-      if (this.discount.discountByPercentage) this.title = "Desconto em %";
-      if (!this.discount.discountByPercentage) this.title = "Desconto em R$";
-    }
-  },
-  watch: {
-    discount: {
-      handler(discount) {
-        this.$emit("input", discount);
-      },
-      deep: true,
-    },
-    value: {
-      handler(value) {
-        this.discount = value;
-        this.titleName();
-      },
-      deep: true,
-    },
-  },
-};
-</script>

package/src/component/forms/InputNumber.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="form-group">
-    <label v-if="title">
-      <span class="title">{{ title }}</span>
-      <span class="required" v-if="required">*</span>
-      <Tip :field="field" :formName="formName" />
-    </label>
-    <div class="inner-addon right-addon">
-      <i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
-      <slot v-else></slot>
-      <input :style="_style" class="form-control" type="number" :disabled="disabled" v-model="valueLocal"
-        @keyup.enter.prevent="pressedEnter" />
-    </div>
-
-    <div v-if="formDirty">
-      <div v-for="message in notifications" :key="message">
-        <span class="invalid">{{ message }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Tip from "../shared/Tip.vue";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "InputNumber",
-  components: { Tip },
-  props: {
-    title: String,
-    field: String,
-    _style: String,
-    placeholder: String,
-    disabled: Boolean,
-    formName: String,
-    required: Boolean,
-    maxLength: Number,
-    type: {
-      type: String,
-      default: "float",
-    },
-    markFormDirty: {
-      type: Boolean,
-      default: true,
-    },
-    params: Object,
-    value: Number,
-    changed: Function,
-    enter: Function,
-  },
-  data() {
-    return {
-      notifications: [],
-      formDirty: false,
-      valueLocal: 0,
-      precision: 1,
-    };
-  },
-  created() {
-    // não carregar as validações iniciais para number
-    this.valueLocal = this.value;
-  },
-
-  methods: {
-    ...mapMutations("validation", [
-      "addValidation",
-      "removeValidation",
-      "updateFormDirty",
-    ]),
-    validate() {
-      this.notifications = [];
-      if (this.value == 0) return;
-      if (this.required && !this.value) {
-        var message = `${this.title} não pode ser vazio!`;
-        this.notifications.push(message);
-      }
-
-      if (this.valueLocal.toString().length > this.maxLength) {
-        var message = `Valor inválido!`;
-        this.notifications.push(message);
-      }
-    },
-    pressedEnter() {
-      if (this.enter) this.enter(this.params);
-    },
-  },
-  computed: {
-    ...mapState("validation", ["resetForm"]),
-  },
-  watch: {
-    value() {
-      this.valueLocal = this.value;
-      if (this.changed) this.changed();
-    },
-    valueLocal() {
-      this.validate();
-
-      let valueLocal;
-      if (this.type === "int") valueLocal = parseInt(this.valueLocal);
-      if (this.type === "float") valueLocal = parseFloat(this.valueLocal);
-
-      this.$emit("input", valueLocal);
-      this.formDirty = true;
-      if (this.markFormDirty) this.updateFormDirty(true);
-
-      this.valueLocal = valueLocal;
-    },
-    notifications() {
-      let self = this;
-      this.notifications.forEach(function (notification) {
-        let obj = {
-          key: self.field + "&" + self.formName,
-          formName: self.formName,
-          notification: notification,
-        };
-        self.addValidation(obj);
-      });
-
-      if (this.notifications.length == 0) {
-        let obj = {
-          key: self.field + "&" + self.formName,
-          formName: self.formName,
-        };
-        self.removeValidation(obj);
-      }
-    },
-    resetForm: {
-      handler(form) {
-        if (form.name == this.formName) this.formDirty = false;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.title {
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  color: #0a0a0a;
-  letter-spacing: 0.5px !important;
-}
-
-.success {
-  color: #94aa2a;
-  font-size: 14px;
-}
-
-.invalid {
-  color: #f0134d;
-  font-size: 14px;
-}
-
-.margin-button {
-  margin-top: -2px;
-}
-</style>

package/src/component/forms/InputPassword.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="form-group">
-    <label>
-      <span class="title" :style="'color: ' + titleColor">{{ title }} </span>
-      <span class="required" v-if="required">*</span>
-      <Tip :field="field" :formName="formName" />
-    </label>
-    <div class="inner-addon right-addon">
-      <i
-        v-if="notifications.length > 0 && formDirty"
-        class="required glyphicon fas fa-exclamation-triangle"
-      ></i>
-      <slot v-else></slot>
-      <input
-        type="password"
-        :placeholder="titlePlaceholder"
-        v-mask="mask || withoutMask"
-        v-bind:value="value"
-        v-on:input="$emit('input', $event.target.value)"
-        class="form-control"
-        :class="{ required: notifications.length > 0 && formDirty }"
-      />
-    </div>
-    <div v-if="formDirty">
-      <div v-for="message in notifications" :key="message">
-        <span class="invalid">{{ message }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Tip from "../shared/Tip.vue";
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  components: { Tip },
-  name: "InputPassword",
-  mixins: [],
-  props: [
-    "title",
-    "field",
-    "titleColor",
-    "placeholder",
-    "mask",
-    "formName",
-    "required",
-    "maxLength",
-    "value",
-  ],
-  data() {
-    return {
-      notifications: [],
-      formDirty: false,
-      withoutMask: {
-        mask: "*".repeat(255),
-        tokens: {
-          "*": { pattern: /./ },
-        },
-      },
-    };
-  },
-  created() {
-    this.validate();
-  },
-  methods: {
-    ...mapMutations("validation", [
-      "addValidation",
-      "removeValidation",
-      "updateFormDirty",
-    ]),
-    validate() {
-      this.notifications = [];
-
-      if (this.required && this.value.length == 0) {
-        var message = `${this.title} não pode ser vazio!`;
-        this.notifications.push(message);
-      }
-
-      if (this.maxLength > 0) {
-        if (this.value.length > this.maxLength) {
-          var message = `Máximo de ${this.maxLength} caracteres!`;
-          this.notifications.push(message);
-        }
-      }
-    },
-  },
-  computed: {
-    ...mapState("validation", ["resetForm", "validations"]),
-    titlePlaceholder() {
-      return "Digite a " + this.title;
-    },
-  },
-  watch: {
-    value() {
-      this.validate();
-      this.formDirty = true;
-      this.updateFormDirty(true);
-    },
-    notifications() {
-      let self = this;
-      this.notifications.forEach(function (notification) {
-        let obj = {
-          key: self.field + "&" + self.formName,
-          formName: self.formName,
-          notification: notification,
-        };
-        self.addValidation(obj);
-      });
-
-      if (this.notifications.length == 0) {
-        let obj = {
-          key: self.field + "&" + self.formName,
-          formName: self.formName,
-        };
-        self.removeValidation(obj);
-      }
-    },
-    resetForm: {
-      handler(form) {
-        if (form.name == this.formName) this.formDirty = false;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.title {
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  color: #0a0a0a;
-  letter-spacing: 0.5px !important;
-}
-
-input::placeholder {
-  font-weight: 300 !important;
-  opacity: 0.5;
-  color: #969595;
-}
-
-.success {
-  color: #94aa2a;
-  font-size: 14px;
-}
-.invalid {
-  color: #f0134d;
-  font-size: 14px;
-}
-
-.margin-button {
-  margin-top: -10px;
-}
-</style>

package/src/component/forms/InputTag.vue

@@ -1,125 +0,0 @@
-<template>
-    <div>
-        <div><span class="title">{{ title }}</span>
-            <span class="required" v-if="required">*</span>
-        </div>
-        <div class="email-input-container">
-            <div class="email-tag" v-for="(email, index) in tos" :key="index">
-                {{ email }}
-                <button class="remove-button" @click="removeEmail(index)">
-                    <i class="fa-solid fa-circle-xmark"></i>
-                </button>
-            </div>
-            <input v-model="newItem" @keyup.enter="addItem" :placeholder="placeholder" class="email-input" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "InputTag",
-    props: {
-        title: String,
-        placeholder: String,
-        required: Boolean,
-        initialValue: Array,
-        value: Array,
-        change: Function
-    },
-    data() {
-        return {
-            tos: [],
-            newItem: ""
-        };
-    },
-    mounted() {
-        this.tos = this.initialValue;
-    },
-    methods: {
-        addItem() {
-            if (this.newItem) {
-                this.tos.push(this.newItem);
-                this.newItem = "";
-                this.change();
-            }
-        },
-        removeEmail(index) {
-            this.tos.splice(index, 1);
-            this.change();
-        }
-    },
-    watch: {
-        tos: {
-            handler(tos) {
-                this.$emit("input", tos);
-            },
-            deep: true,
-        },
-        initialValue: {
-            handler(initialValue) {
-                this.tos = initialValue;
-            },
-            deep: true,
-        },
-    },
-
-};
-</script>
-
-<style>
-.email-input-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    border: 1px solid #E5E4E8;
-    border-radius: 6px;
-    padding-left: 5px;
-}
-
-.email-tag {
-    display: flex;
-    align-items: center;
-    background-color: #f0f0f0;
-    padding: 4px 8px;
-    border-radius: 16px;
-    margin-top: 6px;
-    margin-right: 8px;
-    margin-bottom: 8px;
-}
-
-.remove-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    margin-left: 4px;
-    outline: none;
-}
-
-.remove-button {
-    color: #ff0000;
-}
-
-.remove-button:hover {
-    color: #ff0000;
-}
-
-.email-input {
-    flex: 1;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    padding: 4px;
-    font-weight: 400 !important;
-    margin: 2px 5px 2px 5px;
-    background-color: transparent;
-}
-
-.email-input::placeholder {
-    font-weight: 300 !important;
-    opacity: 0.5;
-    color: #969595;
-}
-</style>