@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/component/forms/ButtonFilter.vue

@@ -1,75 +0,0 @@
-<template>
-  <div>
-    <div class="btn-container side-by-side text-center">
-      <div v-for="option in options" class="btn-item-button-filter side-by-side"
-        :class="{ 'selected-button-filter': option.value == selected }" @click="execute(option)" :key="option.title">
-        <i :class="option.classIcon"></i>
-        <span class="btn-title">{{ option.title }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "ButtonFilter",
-  props: {
-    initialOption: String,
-    options: {
-      type: Array,
-      default: [],
-    },
-    value: String,
-    params: Object,
-    clicked: Function,
-  },
-  data() {
-    return {
-      selected: "",
-    };
-  },
-  created() {
-    if (this.initialOption) this.selected = this.initialOption;
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    execute(option) {
-      if (this.initialOption) this.selected = option.value;
-      this.addEvent({ name: option.eventName, data: option });
-      this.$emit("input", option.value);
-      if (this.clicked) this.clicked(this.params);
-    },
-  },
-};
-</script>
-<style scoped>
-.btn-container {
-  margin-left: 10px;
-  margin-bottom: 15px;
-  height: 40px;
-  border: 1px solid #e5e4e8;
-  border-radius: 50px;
-}
-
-.btn-title {
-  margin-left: 10px;
-}
-
-.btn-item-button-filter {
-  margin-top: 5px;
-  margin-left: 10px;
-  margin-right: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  cursor: pointer;
-}
-
-.selected-button-filter {
-  background-color: #4BB4E2;
-  color: white;
-  padding-left: 10px;
-  padding-right: 10px;
-  border-radius: 15px;
-}
-</style>

package/src/component/forms/ButtonGroup.vue

@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <div>
-      <b-button-group size="sm">
-        <b-button v-for="option in options" :class="{ selected: option.title == selected }" class="btn-group"
-          @click="execute(option)" :key="option.title">
-          {{ option.title }}
-          <div v-if="option.badge" class="badge-button">{{ option.badge }}</div>
-        </b-button>
-      </b-button-group>
-    </div>
-  </div>
-</template>
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "ButtonGroup",
-  props: {
-    initialOption: String,
-    options: {
-      type: Array,
-      default: [],
-    },
-    value: String,
-  },
-  data() {
-    return {
-      selected: "",
-    };
-  },
-  created() {
-    this.selected = this.initialOption;
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    execute(option) {
-      this.selected = option.title;
-      this.addEvent({ name: option.eventName, data: option });
-      this.$emit("input", option.value);
-    },
-  },
-};
-</script>
-<style scoped>
-.btn-group {
-  background-color: white !important;
-  color: black !important;
-  border-color: #e9e9e9 !important;
-  outline: none !important;
-  border-radius: 20px !important;
-  margin-left: 10px !important;
-}
-
-.selected {
-  background-color: transparent !important;
-}
-
-.badge-button {
-  min-width: 20px;
-  height: 20px;
-  background-color: darkblue;
-  border-radius: 20px;
-  margin-left: 10px;
-  color: white;
-}
-</style>

package/src/component/forms/ButtonSub.vue

@@ -1,98 +0,0 @@
-<template>
-  <div>
-    <div class="div-table-sub">
-      <div class="btn-close" @click="show" v-if="!open">
-        <i class="icon-table-sub fa-solid fa-arrow-left"></i>
-      </div>
-      <div class="btn-close" @click="hide" v-else>
-        <i class="icon-table-sub fa-solid fa-arrow-down"></i>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "ButtonSub",
-  props: {
-    itemId: String,
-    urlGet: String,
-    eventNameShow: String,
-    eventNameHide: String,
-    propsParam: Object,
-    value: Object,
-  },
-  data() {
-    return {
-      open: false,
-      baseParams: {
-        search: undefined,
-        filter: "contains",
-        currentPage: 1,
-        totalPerPage: 20,
-      },
-    };
-  },
-  methods: {
-    ...mapActions("generic", ["getApi"]),
-    ...mapMutations("generic", ["addEvent"]),
-    getAll() {
-      this.$emit("input", { loading: true, itemId: this.itemId });
-      let params = {
-        url: this.urlGet,
-        obj: { ...this.propsParam, ...this.baseParams },
-      };
-      this.getApi(params).then((response) => {
-        this.addEvent({
-          name: this.eventNameShow,
-          data: { itemId: this.itemId, data: response.content.data },
-        });
-
-        let self = this;
-        setTimeout(function () {
-          self.$emit("input", { loading: false, itemId: this.itemId });
-        }, 500);
-      });
-    },
-    show() {
-      this.open = true;
-      this.getAll();
-    },
-    hide() {
-      this.open = false;
-      this.addEvent({
-        name: this.eventNameHide,
-        data: { itemId: this.itemId, data: [] },
-      });
-    },
-  },
-};
-</script>
-<style scoped>
-.div-table-sub {
-  overflow-y: hidden !important;
-  overflow-x: hidden !important;
-  background-color: #ececec;
-  border-radius: 50px;
-  height: 35px;
-  width: 35px;
-  margin-left: 10px;
-  cursor: pointer;
-}
-
-.div-table-sub:hover {
-  background-color: #dfdfdf;
-}
-
-.icon-table-sub {
-  font-size: 16px;
-  padding-top: 10px;
-  padding-right: 10px;
-}
-
-.btn-close {
-  margin-left: 10px;
-  height: 30px;
-}
-</style>

package/src/component/forms/CheckboxGroup.vue

@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <span class="title">{{ title }}</span>
-    <b-form-group>
-      <b-form-checkbox-group v-model="selected" :options="options" :stacked="stacked" disabled-field="disabled"
-        @click.native="execute"></b-form-checkbox-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "CheckboxGroup",
-  props: {
-    title: String,
-    options: Array,
-    params: Object,
-    changed: Function,
-    clicked: Function,
-    initialValue: Array,
-    value: Array,
-    stacked: {
-      type: Boolean,
-      default: false,
-    },
-    markFormDirty: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      selected: [],
-    };
-  },
-  mounted() {
-    if (this.initialValue) this.selected = this.initialValue;
-  },
-  methods: {
-    ...mapMutations("validation", ["updateFormDirty"]),
-    execute(event) {
-      if (this.markFormDirty) this.updateFormDirty(true);
-      this.$emit("input", this.selected);
-      let self = this;
-      setTimeout(function () {
-        // adicionado o pointerId para prevenir que não seja executado em duplicidade
-        if (self.clicked && event.pointerId === 1) self.clicked(self.params);
-      }, 100);
-    },
-  },
-  watch: {
-    selected: {
-      handler(value) {
-        this.$emit("input", value);
-        if (this.changed) this.changed(this.params);
-      },
-      deep: true,
-    },
-    initialValue: {
-      handler(value) {
-        if (this.initialValue) this.selected = this.initialValue;
-      },
-      deep: true,
-    },
-  },
-};
-</script>

package/src/component/forms/CheckboxServer.vue

@@ -1,192 +0,0 @@
-<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/src/component/forms/CheckboxSimple.vue

@@ -1,59 +0,0 @@
-<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,
-    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();
-
-      if (this.fieldTarget) {
-        let obj = { fieldTarget: this.fieldTarget, value: this.valueLocal ? "true" : "false" };
-        this.addFilter(obj);
-      }
-
-    },
-  },
-};
-</script>

package/src/component/forms/Color.vue

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