@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/component/forms/ButtonGroupInline.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="button-inline-group" ref="wrap">
+        <button class="button-inline-trigger" title="Mais opções" @click.stop="toggleMenu" ref="triggerBtn">
+            <i class="fa-solid fa-ellipsis-vertical"></i>
+        </button>
+
+        <transition name="button-inline-fade">
+            <div v-if="showMenu" class="button-inline-popover-fixed" :style="popoverStyle" ref="popover" role="menu">
+                <div class="button-inline-popover-inner">
+                    <div class="button-inline-buttons">
+                        <button v-for="(btn, i) in buttons" :key="btn.id || i" class="button-inline-btn"
+                            :title="btn.title" :style="buttonStyle(btn, i)" @click="onAction(btn)">
+                            <i :class="btn.icon"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "ButtonGroupInline",
+    props: {
+        buttons: { type: Array, required: true },
+        defaultSize: { type: Number, default: 35 }
+    },
+    data() {
+        return {
+            showMenu: false,
+            popoverStyle: {
+                position: "fixed",
+                top: "0px",
+                left: "0px",
+                transform: "translateX(-50%)",
+                zIndex: 9999
+            }
+        };
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        toggleMenu() {
+            this.showMenu = !this.showMenu;
+            if (this.showMenu) {
+                this.$nextTick(() => {
+                    this.positionPopover();
+                    window.addEventListener("scroll", this.positionPopover, true);
+                    window.addEventListener("resize", this.positionPopover, true);
+                    document.addEventListener("click", this.onOutsideClick, true);
+                    document.addEventListener("keydown", this.onKeydown, true);
+                });
+            } else {
+                this.unbindGlobal();
+            }
+        },
+        positionPopover() {
+            const trigger = this.$refs.triggerBtn;
+            const pop = this.$refs.popover;
+            if (!trigger || !pop) return;
+
+            const rect = trigger.getBoundingClientRect();
+            let top = rect.bottom + 6;
+            let center = rect.left + rect.width / 2;
+
+            const popWidth = pop.offsetWidth || 0;
+            const vw = window.innerWidth || document.documentElement.clientWidth;
+            const margin = 8;
+
+            const minCenter = margin + popWidth / 2;
+            const maxCenter = vw - margin - popWidth / 2;
+            center = Math.max(minCenter, Math.min(maxCenter, center));
+
+            const popHeight = pop.offsetHeight || 0;
+            const vh = window.innerHeight || document.documentElement.clientHeight;
+            const spaceBelow = vh - rect.bottom;
+            const spaceAbove = rect.top;
+
+            if (spaceBelow < popHeight + 12 && spaceAbove > popHeight + 12) {
+                top = rect.top - 6 - popHeight;
+            }
+
+            this.popoverStyle = {
+                position: "fixed",
+                top: `${Math.round(top)}px`,
+                left: `${Math.round(center)}px`,
+                transform: "translateX(-50%)",
+                zIndex: 9999
+            };
+        },
+        onOutsideClick(e) {
+            const wrap = this.$refs.wrap;
+            const pop = this.$refs.popover;
+            if ((wrap && wrap.contains(e.target)) || (pop && pop.contains(e.target))) return;
+            this.showMenu = false;
+            this.unbindGlobal();
+
+        },
+        onKeydown(e) {
+            if (e.key === "Escape") {
+                this.showMenu = false;
+                this.unbindGlobal();
+            }
+        },
+        unbindGlobal() {
+            window.removeEventListener("scroll", this.positionPopover, true);
+            window.removeEventListener("resize", this.positionPopover, true);
+            document.removeEventListener("click", this.onOutsideClick, true);
+            document.removeEventListener("keydown", this.onKeydown, true);
+        },
+        onAction(btn) {
+            this.$emit("action", btn);
+            this.showMenu = false;
+            this.unbindGlobal();
+            this.addEvent({ name: btn.eventName, data: btn.eventData });
+        },
+        buttonStyle(btn, i) {
+            const size = btn.size || this.defaultSize;
+            return {
+                backgroundColor: btn.color || "#577696",
+                width: size + "px",
+                height: size + "px",
+                transitionDelay: `${i * 45}ms`
+            };
+        }
+    },
+    beforeDestroy() {
+        this.unbindGlobal();
+    }
+};
+</script>
+
+<style scoped>
+.button-inline-group {
+    position: relative;
+    display: inline-block;
+}
+
+.button-inline-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    color: #9b9ea3;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.button-inline-trigger:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+.button-inline-popover-fixed {
+    position: fixed;
+    pointer-events: auto;
+}
+
+.button-inline-popover-inner {
+    background: #ffffff;
+    border: 1px solid #e6ebf2;
+    border-radius: 50px;
+    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
+    padding: 2px;
+}
+
+.button-inline-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    padding: 4px;
+}
+
+.button-inline-btn {
+    border-radius: 50%;
+    border: none;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    cursor: pointer;
+    transition: all 0.18s ease;
+}
+
+.button-inline-btn:hover {
+    filter: brightness(0.9);
+    transform: translateY(-2px);
+}
+
+/* Fade animado */
+.button-inline-fade-enter-active,
+.button-inline-fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.button-inline-fade-enter,
+.button-inline-fade-leave-to {
+    opacity: 0;
+}
+</style>

package/src/component/forms/ButtonSub.vue

@@ -0,0 +1,98 @@
+<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/ButtonToggle.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <button-toggle :style="{ backgroundColor: value ? colorActive : colorInactive }" :class="buttonClass"
+            @click="handleClick">
+            <span v-if="value" class="icon-button-toggle"><i :class="classIconActive"></i></span>
+            <span v-else class="icon-button-toggle"><i :class="classIconInactive"></i></span>
+            <span v-if="value">{{ titleActive }}</span>
+            <span v-else="value">{{ titleInactive }}</span>
+        </button-toggle>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToggleButton',
+    props: {
+        titleActive: String,
+        classIconActive: String,
+        colorActive: String,
+        titleInactive: String,
+        classIconInactive: String,
+        colorInactive: String,
+        value: Number,
+        disabled: Boolean
+    },
+    computed: {
+        buttonClass() {
+            return {
+                'button-toggle': true,
+                'button-toggle--value': this.value,
+                'button-toggle--inactive': !this.value,
+                'button-toggle-disabled': this.disabled
+            };
+        },
+    },
+    methods: {
+        handleClick() {
+            if (!this.disabled) {
+                this.value = this.value == true ? false : true;
+                this.$emit("input", this.value);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.button-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 15px;
+    border: none;
+    border-radius: 20px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.button-toggle--value {
+    color: white;
+}
+
+.button-toggle--inactive {
+    color: black;
+}
+
+.icon-button-toggle {
+    margin-right: 8px;
+}
+
+.button-toggle-disabled {
+    background-color: #b0b0b0;
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+</style>

package/src/component/forms/CheckboxGroup.vue

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

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