@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/shared/SaveCancel.vue

@@ -1,117 +1,99 @@
-<template>
-  <div>
-    <FixedBar
-      :position="positionFixedBar"
-      backgroundColor="#FAFAFC"
-      v-show="formDirty && !modal.open && on || showFixed"
-    >
-      <div
-        :class="{ collapsed: menuCollapsed, notCollapsed: !menuCollapsed }"
-        :style="'margin-bottom:' + marginBottom + 'px'"
-      >
-        <Button
-          _key="cancelSaveCancel"
-          eventName="cancelSaveCancel"
-          title="Cancelar"
-          type="danger"
-          size="small"
-          :clicked="cancel"
-        />
-        <Button
-          _key="saveSaveCancel"
-          :eventName="eventName"
-          classIcon="fa-solid fa-floppy-disk"
-          title="Salvar"
-          type="success"
-          :disabled="!isFormValid(formName)"
-          size="medium"
-        />
-        <slot></slot>
-      </div>
-    </FixedBar>
-  </div>
-</template>
-<script>
-import FixedBar from "@nixweb/nixloc-ui/src/component/layout/FixedBar.vue";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-
-import { mapState, mapMutations, mapGetters } from "vuex";
-
-export default {
-  name: "SaveCancel",
-  components: { FixedBar, Button },
-  props: {
-    formName: String,
-    showFixed: {
-      type: Boolean,
-      default: false,
-    },
-    eventName: {
-      type: String,
-      default: "saveSaveCancel",
-    },
-    positionFixedBar: {
-      type: String,
-      default: "footer",
-    },
-    marginBottom: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      id: this.$route.params.id,
-      on: false,
-    };
-  },
-  mounted() {
-    if (!this.id) {
-      let self = this;
-      setTimeout(function () {
-        self.resetValidation(this.formName);
-        self.updateFormDirty(false);
-        self.removeLoading(["panel"]);
-      }, 350);
-    }
-
-    let self = this;
-    setTimeout(function () {
-      self.updateFormDirty(false);
-      self.on = true;
-    }, 1000);
-  },
-  computed: {
-    ...mapState("validation", ["formDirty"]),
-    ...mapState("generic", ["loading"]),
-    ...mapGetters("generic", ["event"]),
-    ...mapGetters("validation", ["isFormValid"]),
-    ...mapState("generic", ["modal", "menuCollapsed"]),
-  },
-  methods: {
-    ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
-    ...mapMutations("generic", ["removeLoading", "hideSideBar"]),
-    cancel() {
-      this.updateFormDirty(false);
-      this.removeLoading(["cancelSaveCancel"]);
-      this.hideSideBar();
-    },
-  },
-  watch: {
-    "modal.open": function () {
-      this.updateFormDirty(false);
-    },
-  },
-};
-</script>
-<style scoped>
-.collapsed {
-  margin-left: 0px;
-  transition: all 0.4s ease;
-}
-
-.notCollapsed {
-  margin-left: 130px;
-  transition: all 0.4s ease;
-}
-</style>
+<template>
+  <div>
+    <FixedBar :position="positionFixedBar" backgroundColor="#FAFAFC"
+      v-show="formDirty && !modal.open && on || showFixed">
+      <div :class="{ collapsed: menuCollapsed, notCollapsed: !menuCollapsed }"
+        :style="'margin-bottom:' + marginBottom + 'px'">
+        <Button _key="cancelSaveCancel" eventName="cancelSaveCancel" title="Cancelar" type="danger" size="small"
+          :clicked="cancel" />
+        <Button _key="saveSaveCancel" :eventName="eventName" classIcon="fa-solid fa-floppy-disk" title="Salvar"
+          type="success" :disabled="!isFormValid(formName)" size="medium" />
+        <slot></slot>
+      </div>
+    </FixedBar>
+  </div>
+</template>
+<script>
+import FixedBar from "@nixweb/nixloc-ui/src/component/layout/FixedBar.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SaveCancel",
+  components: { FixedBar, Button },
+  props: {
+    formName: String,
+    showFixed: {
+      type: Boolean,
+      default: false,
+    },
+    eventName: {
+      type: String,
+      default: "saveSaveCancel",
+    },
+    positionFixedBar: {
+      type: String,
+      default: "footer",
+    },
+    marginBottom: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      on: false,
+    };
+  },
+  mounted() {
+    if (!this.id) {
+      let self = this;
+      setTimeout(function () {
+        self.resetValidation(this.formName);
+        self.updateFormDirty(false);
+        self.removeLoading(["panel"]);
+      }, 350);
+    }
+
+    let self = this;
+    setTimeout(function () {
+      self.updateFormDirty(false);
+      self.on = true;
+    }, 1000);
+  },
+  computed: {
+    ...mapState("validation", ["formDirty"]),
+    ...mapState("generic", ["loading"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapState("generic", ["modal", "menuCollapsed"]),
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
+    ...mapMutations("generic", ["removeLoading", "hideSideBar"]),
+    cancel() {
+      this.updateFormDirty(false);
+      this.removeLoading(["cancelSaveCancel"]);
+      this.hideSideBar();
+    },
+  },
+  watch: {
+    "modal.open": function () {
+      this.updateFormDirty(false);
+    },
+  },
+};
+</script>
+<style scoped>
+.collapsed {
+  margin-left: 0px;
+  transition: all 0.4s ease;
+}
+
+.notCollapsed {
+  margin-left: 130px;
+  transition: all 0.4s ease;
+}
+</style>

package/src/component/shared/SelectOption.vue

@@ -1,162 +1,162 @@
-<template>
-  <div class="div-main" :class="alignment">
-    <div class="title" :style="'font-size:' + titleSize + 'px;'">
-      {{ title }}
-    </div>
-    <div class="alignment" v-for="option in options">
-      <div class="select-option" :style="'width:' + width + 'px; height:' + height + 'px'"
-        :class="{ 'selected-option': option.value == selected }" @click="optionSelected(option.value)">
-        <div class="text-center">
-          <span class="title" :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
-            <i v-if="size === 'small'" :class="option.icon" :style="option.iconStyle"></i>
-            {{ option.title }}
-          </span>
-          <div v-if="size === 'medium'" class="icon div-icon" :style="'font-size:' + option.iconSize + 'px;'">
-            <i :class="option.icon" :style="option.iconStyle"></i>
-          </div>
-        </div>
-        <div v-if="option.tipId">
-          <i v-b-tooltip.hover :title="tip(option.tipId)" class="fas fa-question-circle"></i>
-        </div>
-      </div>
-    </div>
-    <div class="div-btn" v-if="showButtonNext">
-      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null"
-        :classIcon="buttonClassIcon" :size="buttonSize" :clicked="execute" />
-    </div>
-  </div>
-</template>
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-
-import { mapMutations, mapGetters } from "vuex";
-
-export default {
-  name: "SelectOption",
-  components: {
-    Button,
-  },
-  props: {
-    title: String,
-    titleSize: Number,
-    fieldTarget: String,
-    buttonSize: String,
-    buttonClassIcon: String,
-    showButtonNext: { type: Boolean, default: true },
-    size: { type: String, default: "medium" },
-    alignment: { type: String, default: "text-center" },
-    disabled: Boolean,
-    width: Number,
-    height: Number,
-    options: Array,
-    initialValue: Number,
-    value: Number,
-    clickedNext: Function,
-  },
-  data() {
-    return {
-      selected: null,
-    };
-  },
-  created() {
-    this.selected = this.initialValue;
-  },
-  methods: {
-    ...mapMutations("generic", ["addFilter", "removeLoading"]),
-    optionSelected(value) {
-      if (!this.disabled) {
-        this.selected = value;
-        this.$emit("input", value);
-        this.executeFilter(value);
-      }
-    },
-    executeFilter(value) {
-      if (this.fieldTarget) {
-        let obj = { fieldTarget: this.fieldTarget, value: value };
-        this.addFilter(obj);
-      }
-    },
-    execute() {
-      let self = this;
-      setTimeout(function () {
-        self.removeLoading(["btnClickedNext"]);
-        if (self.clickedNext) self.clickedNext();
-      }, 350);
-    },
-  },
-  computed: {
-    ...mapGetters("generic", ["tip"]),
-  },
-  watch: {
-    value: {
-      handler(value) {
-        this.selected = value;
-      },
-      deep: true,
-    },
-  }
-};
-</script>
-<style scoped>
-.div-main {
-
-  padding: 0px;
-}
-
-.select-option {
-  cursor: pointer;
-  border: 1px solid #e5e4e8;
-  background-color: white;
-  border-radius: 8px;
-  padding-left: 10px;
-  padding-right: 7px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-size: 16px;
-  font-weight: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
-}
-
-.select-option:hover {
-  background-color: white;
-}
-
-.alignment {
-  display: inline-block;
-}
-
-.selected-option {
-  background-color: white;
-  border-color: #4680a5;
-}
-
-.icon {
-  margin-top: 5px;
-  color: #577696;
-}
-
-.text {
-  font-size: 16px;
-  margin-top: 8px;
-}
-
-.title {
-  margin-bottom: 10px;
-}
-
-.div-btn {
-  margin-top: 10px;
-}
-
-.disabled {
-  color: grey;
-  opacity: 0.5;
-}
-
-.div-icon {
-  margin-right: 10px;
-}
-</style>
+<template>
+  <div class="div-main" :class="alignment">
+    <div class="title" :style="'font-size:' + titleSize + 'px;'">
+      {{ title }}
+    </div>
+    <div class="alignment" v-for="option in options">
+      <div class="select-option" :style="'width:' + width + 'px; height:' + height + 'px'"
+        :class="{ 'selected-option': option.value == selected }" @click="optionSelected(option.value)">
+        <div class="text-center">
+          <span class="title" :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
+            <i v-if="size === 'small'" :class="option.icon" :style="option.iconStyle"></i>
+            {{ option.title }}
+          </span>
+          <div v-if="size === 'medium'" class="icon div-icon" :style="'font-size:' + option.iconSize + 'px;'">
+            <i :class="option.icon" :style="option.iconStyle"></i>
+          </div>
+        </div>
+        <div v-if="option.tipId">
+          <i v-b-tooltip.hover :title="tip(option.tipId)" class="fas fa-question-circle"></i>
+        </div>
+      </div>
+    </div>
+    <div class="div-btn" v-if="showButtonNext">
+      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null"
+        :classIcon="buttonClassIcon" :size="buttonSize" :clicked="execute" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "SelectOption",
+  components: {
+    Button,
+  },
+  props: {
+    title: String,
+    titleSize: Number,
+    fieldTarget: String,
+    buttonSize: String,
+    buttonClassIcon: String,
+    showButtonNext: { type: Boolean, default: true },
+    size: { type: String, default: "medium" },
+    alignment: { type: String, default: "text-center" },
+    disabled: Boolean,
+    width: Number,
+    height: Number,
+    options: Array,
+    initialValue: Number,
+    value: Number,
+    clickedNext: Function,
+  },
+  data() {
+    return {
+      selected: null,
+    };
+  },
+  created() {
+    this.selected = this.initialValue;
+  },
+  methods: {
+    ...mapMutations("generic", ["addFilter", "removeLoading"]),
+    optionSelected(value) {
+      if (!this.disabled) {
+        this.selected = value;
+        this.$emit("input", value);
+        this.executeFilter(value);
+      }
+    },
+    executeFilter(value) {
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: value };
+        this.addFilter(obj);
+      }
+    },
+    execute() {
+      let self = this;
+      setTimeout(function () {
+        self.removeLoading(["btnClickedNext"]);
+        if (self.clickedNext) self.clickedNext();
+      }, 350);
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["tip"]),
+  },
+  watch: {
+    value: {
+      handler(value) {
+        this.selected = value;
+      },
+      deep: true,
+    },
+  }
+};
+</script>
+<style scoped>
+.div-main {
+
+  padding: 0px;
+}
+
+.select-option {
+  cursor: pointer;
+  border: 1px solid #e5e4e8;
+  background-color: white;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 7px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 16px;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
+}
+
+.select-option:hover {
+  background-color: white;
+}
+
+.alignment {
+  display: inline-block;
+}
+
+.selected-option {
+  background-color: white;
+  border-color: #4680a5;
+}
+
+.icon {
+  margin-top: 5px;
+  color: #577696;
+}
+
+.text {
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.title {
+  margin-bottom: 10px;
+}
+
+.div-btn {
+  margin-top: 10px;
+}
+
+.disabled {
+  color: grey;
+  opacity: 0.5;
+}
+
+.div-icon {
+  margin-right: 10px;
+}
+</style>