@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/forms/CheckboxServer.vue

@@ -1,237 +0,0 @@
-<template>
-  <div>
-    <div>
-      <div v-if="!showSearch" 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..." @keyup.enter.prevent="getAll" />
-          <Button _key="btnSearch" :disabled="baseParams.search == ''" type="info"
-            classIcon="fa-solid fa-magnifying-glass" size="small" :clicked="getAll" />
-          <Button _key="btnClean" :disabled="baseParams.search == ''" type="info" classIcon="fa-solid fa-broom"
-            size="small" :clicked="clean" />
-        </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 v-if="multipleSelection" 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-else class="div-check">
-          <b-form-group>
-            <b-form-radio-group v-model="selected" :options="options" :stacked="true"></b-form-radio-group>
-          </b-form-group>
-        </div>
-        <div v-if="totalRecords > 20 && data.length < totalRecords">
-          <div class="after-list text-center">
-            <Button key="loadingMore" type="info" title="Carregar mais..." size="small" :clicked="loadingMore" />
-          </div>
-        </div>
-        <div class="title" v-if="data.length == 0">
-          Nenhum registro encontrado!
-        </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,
-    multipleSelection: {
-      type: Boolean,
-      default: true
-    },
-    showSearch: {
-      type: Boolean,
-      default: false
-    },
-    propsParams: Object,
-    value: Array,
-    changed: Function,
-  },
-  data() {
-    return {
-      show: false,
-      loading: true,
-      data: [],
-      selected: [],
-      totalRecords: 0,
-      baseParams: {
-        search: "",
-        currentPage: 1,
-        totalPerPage: 50,
-      },
-    };
-  },
-  mounted() {
-    this.getAll();
-    if (this.showSearch) this.showHide();
-    if (this.value.length > 0) {
-      this.selected = this.value;
-    }
-  },
-  computed: {
-    ...mapGetters("generic", ["showModal", "event"]),
-    quantitySelected() {
-      return this.selected.length > 0 ? this.selected.length : 0;
-    },
-    options() {
-      let final = [];
-      this.data.forEach(item => {
-        let obj = { text: item.content, value: item.id };
-        final.push(obj);
-      });
-      return final;
-    }
-  },
-  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", "btnSearch", "btnClean"]);
-      });
-    },
-    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"]);
-    },
-    clean() {
-      this.baseParams = {
-        search: "",
-        currentPage: 1,
-        totalPerPage: 50,
-      }
-      this.getAll();
-    },
-    markSelected() {
-      this.data.forEach(item => {
-        if (this.selected.includes(item.content)) {
-          item.selected = true;
-        }
-      });
-    }
-  },
-  watch: {
-    selected: {
-      handler(value) {
-        if (value) {
-          this.$emit("input", value);
-          if (this.changed) this.changed(value);
-        }
-      },
-      deep: true,
-    },
-    event: {
-      handler(event) {
-        if (event.name == "cleanCheckboxServer")
-          this.selected = "";
-      },
-      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,
-    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/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>

package/src/component/forms/DateTime.vue

@@ -1,170 +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>
-      <date-picker lang="pt-br" :disabled="disabled" :range="range" @confirm="executeConfirm" @change="executeConfirm"
-        @clear="close" :confirm="confirm" :confirm-text="confirmText" :format="format" value-type="format"
-        :time-picker-options="{
-        start: '07:00',
-        step: '00:30',
-        end: '23:30',
-        format: 'HH:mm',
-      }" width="100%" :placeholder="placeholder" :type="type" v-model="valueLocal"
-        :class="{ 'is-invalid': notifications.length > 0 && formDirty }"></date-picker>
-    </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";
-import DatePicker from "vue2-datepicker";
-
-import { mapState, mapMutations, mapGetters } from "vuex";
-
-export default {
-  components: { Tip, DatePicker },
-  name: "Data",
-  mixins: [],
-  props: [
-    "title",
-    "field",
-    "fieldTarget",
-    "placeholder",
-    "formName",
-    "required",
-    "disabled",
-    "format",
-    "type",
-    "value",
-    "range",
-    "confirm",
-    "confirmText",
-    "markFormDirty",
-  ],
-  data() {
-    return {
-      notifications: [],
-      formDirty: false,
-      valueLocal: "",
-      markFormDirtyLocal: false,
-    };
-  },
-  created() {
-    this.validate();
-    this.valueLocal = this.value;
-
-    if (this.markFormDirty == undefined) this.markFormDirtyLocal = true;
-  },
-  methods: {
-    ...mapMutations("validation", [
-      "addValidation",
-      "removeValidation",
-      "updateFormDirty",
-    ]),
-    ...mapMutations("generic", ["addFilter", "removeTag", "addEvent"]),
-    validate() {
-      this.notifications = [];
-
-      if (this.required && this.valueLocal.length == 0) {
-        var message = `${this.title} não pode ser vazio!`;
-        this.notifications.push(message);
-      }
-    },
-    executeConfirm() {
-      if (this.range) {
-        if (this.fieldTarget) {
-          let obj = {
-            fieldTarget: this.fieldTarget,
-            value: { start: this.valueLocal[0], end: this.valueLocal[1] },
-          };
-          this.addFilter(obj);
-        }
-      }
-    },
-    close() {
-      this.removeTag("period");
-      this.addEvent({ name: "tagRemoved", data: "period" });
-    },
-  },
-  computed: {
-    ...mapState("validation", ["resetForm", "validations"]),
-    ...mapGetters("generic", ["event"]),
-  },
-  watch: {
-    valueLocal() {
-      this.validate();
-      this.formDirty = true;
-      if (this.markFormDirtyLocal) this.updateFormDirty(true);
-      this.$emit("input", this.valueLocal);
-    },
-    value() {
-      this.valueLocal = this.value;
-      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,
-    },
-    event: {
-      handler(event) {
-        if (event.name == "tagRemoved") {
-          this.valueLocal = [];
-
-        }
-      },
-      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/DateYearMonth.vue

@@ -1,193 +0,0 @@
-<template>
-  <div class="date-filter">
-    <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
-      :disabled="disabled">
-      <i class="fa-solid fa-chevron-left"></i>
-    </button>
-    <span class="date-display" :class="{ 'title-disabled': disabled }">{{ displayValue }} </span>
-    <span class="date-icon" @click="resetSelection()" :class="{ 'disabled': disabled }">
-      <i class="fa-solid fa-calendar-week"></i>
-    </span>
-    <button @click="next" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
-      :disabled="disabled">
-      <i class="fa-solid fa-chevron-right"></i>
-    </button>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  props: {
-    mode: {
-      type: String,
-      required: true,
-      validator(value) {
-        return ['month', 'year'].includes(value);
-      }
-    },
-    value: {
-      type: Number,
-      required: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      currentMonth: new Date().getMonth(),
-      currentYear: new Date().getFullYear()
-    };
-  },
-  created() {
-    this.resetSelection();
-  },
-  mounted() {
-    this.sendEvent();
-  },
-  computed: {
-    displayValue() {
-      if (this.mode === 'month') {
-        return this.monthNames[this.currentMonth];
-      } else {
-        return this.currentYear;
-      }
-    },
-    monthNames() {
-      return ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
-    },
-    buttonClass() {
-      return this.mode === 'month' ? 'month-mode' : 'year-mode';
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    previous() {
-      if (this.disabled) return;
-      if (this.mode === 'month') {
-        this.currentMonth = (this.currentMonth + 11) % 12;
-        if (this.currentMonth === 11) {
-          this.currentYear--;
-        }
-      } else {
-        this.currentYear--;
-      }
-      this.$emit('input', this.getValue());
-      this.sendEvent();
-    },
-    next() {
-      if (this.disabled) return;
-      if (this.mode === 'month') {
-        this.currentMonth = (this.currentMonth + 1) % 12;
-        if (this.currentMonth === 0) {
-          this.currentYear++;
-        }
-      } else {
-        this.currentYear++;
-      }
-      this.$emit('input', this.getValue());
-      this.sendEvent();
-    },
-    resetSelection() {
-      const now = new Date();
-      if (this.mode === 'month') {
-        this.currentMonth = now.getMonth();
-        this.currentYear = now.getFullYear();
-      } else {
-        this.currentYear = now.getFullYear();
-      }
-      this.sendEvent();
-    },
-    getValue() {
-      if (this.mode === 'month') {
-        return (this.currentMonth + 1).toString();
-      } else {
-        return this.currentYear.toString();
-      }
-    },
-    sendEvent() {
-      this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
-      this.$emit('input', this.getValue());
-    }
-  },
-  watch: {
-    mode(newMode) {
-      this.resetSelection();
-    },
-    value(newValue) {
-      if (this.mode === 'month') {
-        this.currentMonth = newValue - 1;
-      } else {
-        this.currentYear = newValue;
-      }
-    }
-  },
-};
-</script>
-
-<style scoped>
-.date-filter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.navigation-button {
-  color: white;
-  border: none;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2em;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.2s;
-}
-
-.navigation-button:hover {
-  opacity: 0.8;
-}
-
-.navigation-button:active {
-  transform: scale(0.95);
-}
-
-.navigation-button.disabled {
-  background-color: #b0b0b0;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.date-display {
-  font-size: 1.5em;
-  font-weight: bold;
-}
-
-.month-mode {
-  background-color: #ffa500;
-}
-
-.year-mode {
-  background-color: #007bff;
-}
-
-.date-icon {
-  cursor: pointer;
-  color: rgb(73, 72, 72);
-}
-
-.title-disabled {
-  color: #b0b0b0;
-}
-
-.date-icon.disabled {
-  color: #b0b0b0;
-  cursor: not-allowed;
-}
-</style>