@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/forms/ButtonGroupInline.vue

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