@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/forms/InputCallToAction.vue

@@ -1,135 +1,135 @@
-<template>
-  <div>
-    <div class="wrapper">
-      <span class="num" @click="showEdit = true" v-if="!showEdit">
-        <span v-if="text">{{ text }}</span>
-        <span class="placeholder" :style="'color:' + placeholderColor" v-else>
-          {{ placeholder }}
-        </span>
-      </span>
-      <input
-        class="input"
-        type="text"
-        @keyup.enter.prevent="execute()"
-        v-model="text"
-        v-if="showEdit"
-      />
-      <span @click="execute()" v-if="showEdit && loading == false">
-        <i class="fa-solid fa-check"></i>
-      </span>
-      <div class="div-loading">
-        <vue-loading
-          v-if="loading"
-          type="bubbles"
-          color="#D98621"
-          :size="{ width: '30px', height: '30px' }"
-        >
-        </vue-loading>
-      </div>
-    </div>
-    <div v-if="error" class="danger msg-error">
-      {{ messageError }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations, mapActions } from "vuex";
-
-export default {
-  name: "InputCallToAction",
-  props: [
-    "_key",
-    "placeholder",
-    "placeholderColor",
-    "messageError",
-    "urlCallToAction",
-    "params",
-    "value",
-  ],
-  data() {
-    return {
-      text: "",
-      error: false,
-      _keySelected: "",
-      showEdit: false,
-      loading: false,
-    };
-  },
-  mounted() {
-    this.text = this.value;
-  },
-  methods: {
-    ...mapActions("generic", ["postApi"]),
-    execute() {
-      let paramsWithValue = { ...this.params, ...{ value: this.text } };
-      let params = { url: this.urlCallToAction, obj: paramsWithValue };
-      this.loading = true;
-      this.postApi(params).then((response) => {
-        if (response.success) {
-          if (!response.content) {
-            this.error = true;
-            this.text = "";
-            this.$emit("input", "");
-          } else {
-            this.error = false;
-            this.$emit("input", this.text);
-          }
-
-          this.showEdit = false;
-          this.loading = false;
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.input {
-  width: 80%;
-  border: none;
-  text-align: center;
-}
-
-.placeholder {
-  font-size: 13px !important;
-}
-
-.div-loading {
-  margin-bottom: 4px;
-}
-
-.msg-error {
-  font-size: 13px;
-}
-
-.wrapper {
-  height: 37px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #eaedf3;
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
-}
-.wrapper span {
-  text-align: center;
-  font-size: 15px;
-  cursor: pointer;
-  user-select: none;
-}
-.wrapper span.num {
-  font-size: 17px;
-  cursor: pointer;
-  color: #3f529b;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.wrapper span.num:hover {
-  text-decoration: underline;
-  transition: 0.1s;
-}
-</style>
+<template>
+  <div>
+    <div class="wrapper">
+      <span class="num" @click="showEdit = true" v-if="!showEdit">
+        <span v-if="text">{{ text }}</span>
+        <span class="placeholder" :style="'color:' + placeholderColor" v-else>
+          {{ placeholder }}
+        </span>
+      </span>
+      <input
+        class="input"
+        type="text"
+        @keyup.enter.prevent="execute()"
+        v-model="text"
+        v-if="showEdit"
+      />
+      <span @click="execute()" v-if="showEdit && loading == false">
+        <i class="fa-solid fa-check"></i>
+      </span>
+      <div class="div-loading">
+        <vue-loading
+          v-if="loading"
+          type="bubbles"
+          color="#D98621"
+          :size="{ width: '30px', height: '30px' }"
+        >
+        </vue-loading>
+      </div>
+    </div>
+    <div v-if="error" class="danger msg-error">
+      {{ messageError }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "InputCallToAction",
+  props: [
+    "_key",
+    "placeholder",
+    "placeholderColor",
+    "messageError",
+    "urlCallToAction",
+    "params",
+    "value",
+  ],
+  data() {
+    return {
+      text: "",
+      error: false,
+      _keySelected: "",
+      showEdit: false,
+      loading: false,
+    };
+  },
+  mounted() {
+    this.text = this.value;
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    execute() {
+      let paramsWithValue = { ...this.params, ...{ value: this.text } };
+      let params = { url: this.urlCallToAction, obj: paramsWithValue };
+      this.loading = true;
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          if (!response.content) {
+            this.error = true;
+            this.text = "";
+            this.$emit("input", "");
+          } else {
+            this.error = false;
+            this.$emit("input", this.text);
+          }
+
+          this.showEdit = false;
+          this.loading = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.input {
+  width: 80%;
+  border: none;
+  text-align: center;
+}
+
+.placeholder {
+  font-size: 13px !important;
+}
+
+.div-loading {
+  margin-bottom: 4px;
+}
+
+.msg-error {
+  font-size: 13px;
+}
+
+.wrapper {
+  height: 37px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #eaedf3;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
+}
+.wrapper span {
+  text-align: center;
+  font-size: 15px;
+  cursor: pointer;
+  user-select: none;
+}
+.wrapper span.num {
+  font-size: 17px;
+  cursor: pointer;
+  color: #3f529b;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.wrapper span.num:hover {
+  text-decoration: underline;
+  transition: 0.1s;
+}
+</style>

package/src/component/forms/InputDecimalDiscount.vue

@@ -1,147 +1,147 @@
-<template>
-  <div class="discount-row">
-    <div class="input-wrapper">
-      <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"
-      >
-      </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"
-      >
-      </InputNumber>
-    </div>
-    <div class="div-toggle">
-      <div
-        v-if="!discount.discountByPercentage"
-        class="glyphicon margin-button"
-      >
-        <Button
-          _key="btnDiscount"
-          type="danger"
-          classIcon="fa-solid fa-brazilian-real-sign"
-          size="small"
-          :disabled="disabled"
-          :clicked="change"
-        />
-      </div>
-      <div
-        v-else
-        class="glyphicon margin-button"
-      >
-        <Button
-          _key="btnDiscount"
-          type="danger"
-          :disabled="disabled"
-          classIcon="fa-solid fa-percent"
-          size="small"
-          :clicked="change"
-        />
-      </div>
-    </div>
-  </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>
-
-<style scoped>
-.discount-row {
-  position: relative;
-  width: 100%;
-}
-
-.input-wrapper {
-  display: inline-block;
-  width: calc(100% - 50px);
-  vertical-align: top;
-}
-
-.div-toggle {
-  display: inline-block;
-  vertical-align: top;
-  margin-left: 8px;
-  margin-top: 38px;
-}
+<template>
+  <div class="discount-row">
+    <div class="input-wrapper">
+      <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"
+      >
+      </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"
+      >
+      </InputNumber>
+    </div>
+    <div class="div-toggle">
+      <div
+        v-if="!discount.discountByPercentage"
+        class="glyphicon margin-button"
+      >
+        <Button
+          _key="btnDiscount"
+          type="danger"
+          classIcon="fa-solid fa-brazilian-real-sign"
+          size="small"
+          :disabled="disabled"
+          :clicked="change"
+        />
+      </div>
+      <div
+        v-else
+        class="glyphicon margin-button"
+      >
+        <Button
+          _key="btnDiscount"
+          type="danger"
+          :disabled="disabled"
+          classIcon="fa-solid fa-percent"
+          size="small"
+          :clicked="change"
+        />
+      </div>
+    </div>
+  </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>
+
+<style scoped>
+.discount-row {
+  position: relative;
+  width: 100%;
+}
+
+.input-wrapper {
+  display: inline-block;
+  width: calc(100% - 50px);
+  vertical-align: top;
+}
+
+.div-toggle {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 8px;
+  margin-top: 38px;
+}
 </style>