@nixweb/nixloc-ui 1.9.0 → 1.11.0

package/@nixweb/nixloc-ui/src/component/forms/CheckboxServer.vue

@@ -1,192 +1,192 @@
-<template>
-  <div>
-    <div>
-      <div class="div-btn side-by-side">
-        <Button _key="btnShow" color="black" backGroundColor="#F0F0F0"
-          :title="' ' + quantitySelected + ' ' + title + ' selecionado(s)'"
-          classIcon="fa-sharp fa-solid fa-ballot-check" size="small" :clicked="showHide" />
-      </div>
-      <div v-show="show" class="side-by-side">
-        <div class="input-container">
-          <input type="text" v-model="baseParams.search" placeholder="Pesquisar..." />
-        </div>
-      </div>
-
-    </div>
-    <div v-show="show">
-      <div class="div-loading">
-        <Loading type="line" :center="false" v-show="loading" />
-      </div>
-      <ScrollBar :minHeight="0" :maxHeight="200">
-        <div class="div-check">
-          <div class="div-items" v-for="item in data" :key="item.id">
-            <b-form-checkbox v-model="item.selected" @change="add(item)">
-              <span class="title">{{ item.content }}</span>
-            </b-form-checkbox>
-          </div>
-        </div>
-        <div v-if="totalRecords > 20 && data.length < totalRecords">
-          <div class="after-list text-center">
-            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
-              :clicked="loadingMore" />
-          </div>
-        </div>
-      </ScrollBar>
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
-import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
-
-import { mapGetters, mapMutations, mapActions } from "vuex";
-
-export default {
-  name: "CheckboxServer",
-  components: {
-    Button, ScrollBar, Loading, InputText
-  },
-  props: {
-    title: String,
-    url: String,
-    propsParams: Object,
-    value: Array,
-  },
-  data() {
-    return {
-      show: false,
-      loading: true,
-      data: [],
-      selected: [],
-      totalRecords: 0,
-      baseParams: {
-        search: "",
-        currentPage: 1,
-        totalPerPage: 20,
-      },
-    };
-  },
-  mounted() {
-    this.getAll();
-
-    if (this.value.length > 0) {
-      this.selected = this.value;
-    }
-
-  },
-  computed: {
-    ...mapGetters("generic", ["showModal", "event"]),
-    quantitySelected() {
-      return this.selected.length > 0 ? this.selected.length : 0;
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["removeLoading"]),
-    ...mapActions("generic", ["getApi"]),
-    getAll() {
-      let obj = { ...this.baseParams, ...this.propsParams };
-      let params = { url: this.url, obj: obj };
-      this.loading = true;
-      this.getApi(params).then((response) => {
-        this.totalRecords = response.content.totalRecords;
-        if (this.baseParams.currentPage == 1) {
-          this.data = [];
-        }
-
-        let self = this;
-        response.content.data.forEach(item => {
-          self.data.push(item);
-        });
-
-        this.markSelected();
-
-        this.loading = false;
-        this.removeLoading(["loadingMore"]);
-      });
-    },
-    loadingMore() {
-      this.baseParams.currentPage++;
-      this.getAll();
-    },
-    add(item) {
-      const index = this.selected.indexOf(item.content);
-      if (index > -1) {
-        this.selected.splice(index, 1);
-      } else {
-        this.selected.push(item.content);
-      }
-    },
-    showHide() {
-      this.show = this.show == true ? false : true;
-      this.removeLoading(["btnShow"]);
-    },
-    markSelected() {
-      this.data.forEach(item => {
-        if (this.selected.includes(item.content)) {
-          item.selected = true;
-        }
-      });
-    }
-  },
-  watch: {
-    selected: {
-      handler(value) {
-        this.$emit("input", value);
-      },
-      deep: true,
-    },
-    'baseParams.search': {
-      handler(value) {
-        this.getAll();
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.div-check {
-  margin: 10px;
-}
-
-.div-items {
-  margin-left: 10px;
-}
-
-.div-loading {
-  margin-top: 3px;
-}
-
-.div-btn {
-  padding-bottom: 5px;
-}
-
-.div-icon {
-  margin-left: 10px;
-  font-size: 16px;
-  color: green;
-  cursor: pointer;
-}
-
-.input-container {
-  display: flex;
-  justify-content: center;
-  margin: 20px;
-}
-
-input {
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  border: 1px solid #E5E4E8;
-  border-radius: 20px;
-  outline: none;
-  font-size: 13px;
-  width: 300px;
-}
-</style>
+<template>
+  <div>
+    <div>
+      <div class="div-btn side-by-side">
+        <Button _key="btnShow" color="black" backGroundColor="#F0F0F0"
+          :title="' ' + quantitySelected + ' ' + title + ' selecionado(s)'"
+          classIcon="fa-sharp fa-solid fa-ballot-check" size="small" :clicked="showHide" />
+      </div>
+      <div v-show="show" class="side-by-side">
+        <div class="input-container">
+          <input type="text" v-model="baseParams.search" placeholder="Pesquisar..." />
+        </div>
+      </div>
+
+    </div>
+    <div v-show="show">
+      <div class="div-loading">
+        <Loading type="line" :center="false" v-show="loading" />
+      </div>
+      <ScrollBar :minHeight="0" :maxHeight="200">
+        <div class="div-check">
+          <div class="div-items" v-for="item in data" :key="item.id">
+            <b-form-checkbox v-model="item.selected" @change="add(item)">
+              <span class="title">{{ item.content }}</span>
+            </b-form-checkbox>
+          </div>
+        </div>
+        <div v-if="totalRecords > 20 && data.length < totalRecords">
+          <div class="after-list text-center">
+            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
+              :clicked="loadingMore" />
+          </div>
+        </div>
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+
+import { mapGetters, mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "CheckboxServer",
+  components: {
+    Button, ScrollBar, Loading, InputText
+  },
+  props: {
+    title: String,
+    url: String,
+    propsParams: Object,
+    value: Array,
+  },
+  data() {
+    return {
+      show: false,
+      loading: true,
+      data: [],
+      selected: [],
+      totalRecords: 0,
+      baseParams: {
+        search: "",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+    };
+  },
+  mounted() {
+    this.getAll();
+
+    if (this.value.length > 0) {
+      this.selected = this.value;
+    }
+
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    quantitySelected() {
+      return this.selected.length > 0 ? this.selected.length : 0;
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      let obj = { ...this.baseParams, ...this.propsParams };
+      let params = { url: this.url, obj: obj };
+      this.loading = true;
+      this.getApi(params).then((response) => {
+        this.totalRecords = response.content.totalRecords;
+        if (this.baseParams.currentPage == 1) {
+          this.data = [];
+        }
+
+        let self = this;
+        response.content.data.forEach(item => {
+          self.data.push(item);
+        });
+
+        this.markSelected();
+
+        this.loading = false;
+        this.removeLoading(["loadingMore"]);
+      });
+    },
+    loadingMore() {
+      this.baseParams.currentPage++;
+      this.getAll();
+    },
+    add(item) {
+      const index = this.selected.indexOf(item.content);
+      if (index > -1) {
+        this.selected.splice(index, 1);
+      } else {
+        this.selected.push(item.content);
+      }
+    },
+    showHide() {
+      this.show = this.show == true ? false : true;
+      this.removeLoading(["btnShow"]);
+    },
+    markSelected() {
+      this.data.forEach(item => {
+        if (this.selected.includes(item.content)) {
+          item.selected = true;
+        }
+      });
+    }
+  },
+  watch: {
+    selected: {
+      handler(value) {
+        this.$emit("input", value);
+      },
+      deep: true,
+    },
+    'baseParams.search': {
+      handler(value) {
+        this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-check {
+  margin: 10px;
+}
+
+.div-items {
+  margin-left: 10px;
+}
+
+.div-loading {
+  margin-top: 3px;
+}
+
+.div-btn {
+  padding-bottom: 5px;
+}
+
+.div-icon {
+  margin-left: 10px;
+  font-size: 16px;
+  color: green;
+  cursor: pointer;
+}
+
+.input-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}
+
+input {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border: 1px solid #E5E4E8;
+  border-radius: 20px;
+  outline: none;
+  font-size: 13px;
+  width: 300px;
+}
+</style>

package/@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue

@@ -1,60 +1,60 @@
-<template>
-  <div>
-    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
-      <span class="title">{{ title }}</span>
-      <Tip :field="field" :formName="formName" />
-    </b-form-checkbox>
-  </div>
-</template>
-
-<script>
-import Tip from "../shared/Tip.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  components: { Tip },
-  name: "CheckboxSimple",
-  props: {
-    title: String,
-    formName: String,
-    fieldTarget: String,
-    field: String,
-    value: Boolean,
-    changed: Function,
-    params: Object,
-    markFormDirty: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      valueLocal: false,
-    };
-  },
-  methods: {
-    ...mapMutations("validation", ["updateFormDirty"]),
-    ...mapMutations("generic", ["addFilter"]),
-  },
-  mounted() {
-    this.valueLocal = this.value;
-  },
-  watch: {
-    value() {
-      this.valueLocal = this.value;
-    },
-    valueLocal() {
-      this.$emit("input", this.valueLocal);
-      if (this.markFormDirty) this.updateFormDirty(true);
-      if (this.changed) this.changed(this.params);
-
-      if (this.fieldTarget) {
-        let obj = { fieldTarget: this.fieldTarget, value: this.valueLocal ? "true" : "false" };
-        this.addFilter(obj);
-      }
-
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
+      <span class="title">{{ title }}</span>
+      <Tip :field="field" :formName="formName" />
+    </b-form-checkbox>
+  </div>
+</template>
+
+<script>
+import Tip from "../shared/Tip.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Tip },
+  name: "CheckboxSimple",
+  props: {
+    title: String,
+    formName: String,
+    fieldTarget: String,
+    field: String,
+    value: Boolean,
+    changed: Function,
+    params: Object,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      valueLocal: false,
+    };
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("generic", ["addFilter"]),
+  },
+  mounted() {
+    this.valueLocal = this.value;
+  },
+  watch: {
+    value() {
+      this.valueLocal = this.value;
+    },
+    valueLocal() {
+      this.$emit("input", this.valueLocal);
+      if (this.markFormDirty) this.updateFormDirty(true);
+      if (this.changed) this.changed(this.params);
+
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: this.valueLocal ? "true" : "false" };
+        this.addFilter(obj);
+      }
+
+    },
+  },
+};
+</script>

package/@nixweb/nixloc-ui/src/component/forms/Color.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="form-group">
-    <div>
-      <span class="title">{{ title }} </span>
-      <compact-picker v-model.trim="color.hex" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Chrome } from "vue-color";
-
-export default {
-  name: "Color",
-  components: {
-    "compact-picker": Chrome,
-  },
-  props: {
-    title: String,
-    field: String,
-    formName: String,
-    value: String,
-  },
-  data() {
-    return {
-      color: { hex: "#40BF84" },
-    };
-  },
-  watch: {
-    value() {
-      this.color.hex = this.value;
-    },
-    "color.hex": function (value) {
-      if (value.hex) this.$emit("input", value.hex);
-    },
-  },
-};
-</script>
+<template>
+  <div class="form-group">
+    <div>
+      <span class="title">{{ title }} </span>
+      <compact-picker v-model.trim="color.hex" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chrome } from "vue-color";
+
+export default {
+  name: "Color",
+  components: {
+    "compact-picker": Chrome,
+  },
+  props: {
+    title: String,
+    field: String,
+    formName: String,
+    value: String,
+  },
+  data() {
+    return {
+      color: { hex: "#40BF84" },
+    };
+  },
+  watch: {
+    value() {
+      this.color.hex = this.value;
+    },
+    "color.hex": function (value) {
+      if (value.hex) this.$emit("input", value.hex);
+    },
+  },
+};
+</script>