@nixweb/nixloc-ui 1.14.0 → 1.16.0

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/ButtonGroupInline.vue

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

@@ -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/ButtonToggle.vue

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

@@ -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>