@nixweb/nixloc-ui 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

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

@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <label>
+    <label v-if="title">
       <span class="title">{{ title }} </span>
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />