@nixweb/nixloc-ui 1.19.0 → 1.20.0

package/src/component/layout/BottomActionsBar.vue

@@ -1,205 +1,205 @@
-<template>
-    <transition name="slide-up">
-        <section v-if="isOpen" class="bab-container">
-            <header class="bab-header">
-                <div class="bab-left">
-                    <div class="bab-icon-wrapper">
-                        <i class="fas fa-list-check bab-icon"></i>
-                        <span class="bab-count">{{ selected.length }}</span>
-                    </div>
-                    <strong class="bab-title title">
-                        <span>selecionados</span>
-                    </strong>
-                </div>
-
-                <div class="bab-actions">
-                    <button type="button" class="bab-btn-close" @click="close">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-            </header>
-            <main class="bab-content">
-                <slot />
-            </main>
-        </section>
-    </transition>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-    name: "BottomActionsBar",
-    props: {
-        selected: { type: Array, default: () => [] }
-    },
-    computed: {
-        isOpen() {
-            return Array.isArray(this.selected) && this.selected.length > 0;
-        }
-    },
-    watch: {
-        isOpen(val) {
-            document.body.classList.toggle("bab-open", val);
-        }
-    },
-    mounted() {
-        document.addEventListener("keydown", this.onKeydown);
-    },
-    beforeDestroy() {
-        document.removeEventListener("keydown", this.onKeydown);
-        document.body.classList.remove("bab-open");
-    },
-    methods: {
-        ...mapMutations("generic", ["addEvent"]),
-        close() {
-            this.$emit("close");
-            this.addEvent({ name: "deselectAll" });
-        },
-        onKeydown(e) {
-            if (e.key === "Escape" && this.isOpen) this.close();
-        }
-    }
-};
-</script>
-
-<style>
-body.bab-open {
-    margin-bottom: 150px;
-    transition: margin-bottom 0.25s ease;
-}
-
-.bab-container {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 200px;
-    border-top-left-radius: 18px;
-    border-top-right-radius: 18px;
-    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-    animation: elevate 0.2s ease-in-out;
-}
-
-.bab-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-bottom: 1px solid #eef2f7;
-}
-
-.bab-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.bab-icon-wrapper {
-    position: relative;
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    background: #D98621;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-}
-
-.bab-icon {
-    font-size: 16px;
-}
-
-.bab-count {
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    background: #fff;
-    color: #D98621;
-    font-size: 11px;
-    font-weight: bold;
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid #D98621;
-}
-
-.bab-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #0f172a;
-}
-
-.bab-actions {
-    display: flex;
-    align-items: center;
-}
-
-.bab-btn-close {
-    background: transparent;
-    border: none;
-    color: #9ca3af;
-    font-size: 18px;
-    cursor: pointer;
-    transition: color 0.2s ease;
-}
-
-.bab-btn-close:hover {
-    color: #6b7280;
-}
-
-.bab-content {
-    flex: 1;
-    padding: 12px 16px;
-    overflow: auto;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: minmax(220px, 1fr);
-    gap: 12px;
-}
-
-/* --- Animações e transições --- */
-.slide-up-enter-active,
-.slide-up-leave-active {
-    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
-}
-
-.slide-up-enter,
-.slide-up-leave-to {
-    transform: translateY(16px);
-    opacity: 0;
-}
-
-@keyframes elevate {
-    from {
-        transform: translateY(20px);
-        opacity: 0.5;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-/* --- Responsivo --- */
-@media (max-width: 640px) {
-    .bab-container {
-        height: 220px;
-        border-top-left-radius: 14px;
-        border-top-right-radius: 14px;
-    }
-
-    .bab-content {
-        grid-auto-columns: minmax(160px, 1fr);
-    }
-}
-</style>
+<template>
+    <transition name="slide-up">
+        <section v-if="isOpen" class="bab-container">
+            <header class="bab-header">
+                <div class="bab-left">
+                    <div class="bab-icon-wrapper">
+                        <i class="fas fa-list-check bab-icon"></i>
+                        <span class="bab-count">{{ selected.length }}</span>
+                    </div>
+                    <strong class="bab-title title">
+                        <span>selecionados</span>
+                    </strong>
+                </div>
+
+                <div class="bab-actions">
+                    <button type="button" class="bab-btn-close" @click="close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </header>
+            <main class="bab-content">
+                <slot />
+            </main>
+        </section>
+    </transition>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+    name: "BottomActionsBar",
+    props: {
+        selected: { type: Array, default: () => [] }
+    },
+    computed: {
+        isOpen() {
+            return Array.isArray(this.selected) && this.selected.length > 0;
+        }
+    },
+    watch: {
+        isOpen(val) {
+            document.body.classList.toggle("bab-open", val);
+        }
+    },
+    mounted() {
+        document.addEventListener("keydown", this.onKeydown);
+    },
+    beforeDestroy() {
+        document.removeEventListener("keydown", this.onKeydown);
+        document.body.classList.remove("bab-open");
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        close() {
+            this.$emit("close");
+            this.addEvent({ name: "deselectAll" });
+        },
+        onKeydown(e) {
+            if (e.key === "Escape" && this.isOpen) this.close();
+        }
+    }
+};
+</script>
+
+<style>
+body.bab-open {
+    margin-bottom: 150px;
+    transition: margin-bottom 0.25s ease;
+}
+
+.bab-container {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 200px;
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    animation: elevate 0.2s ease-in-out;
+}
+
+.bab-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #eef2f7;
+}
+
+.bab-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.bab-icon-wrapper {
+    position: relative;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: #D98621;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+
+.bab-icon {
+    font-size: 16px;
+}
+
+.bab-count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background: #fff;
+    color: #D98621;
+    font-size: 11px;
+    font-weight: bold;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #D98621;
+}
+
+.bab-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #0f172a;
+}
+
+.bab-actions {
+    display: flex;
+    align-items: center;
+}
+
+.bab-btn-close {
+    background: transparent;
+    border: none;
+    color: #9ca3af;
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.bab-btn-close:hover {
+    color: #6b7280;
+}
+
+.bab-content {
+    flex: 1;
+    padding: 12px 16px;
+    overflow: auto;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(220px, 1fr);
+    gap: 12px;
+}
+
+/* --- Animações e transições --- */
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
+}
+
+.slide-up-enter,
+.slide-up-leave-to {
+    transform: translateY(16px);
+    opacity: 0;
+}
+
+@keyframes elevate {
+    from {
+        transform: translateY(20px);
+        opacity: 0.5;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* --- Responsivo --- */
+@media (max-width: 640px) {
+    .bab-container {
+        height: 220px;
+        border-top-left-radius: 14px;
+        border-top-right-radius: 14px;
+    }
+
+    .bab-content {
+        grid-auto-columns: minmax(160px, 1fr);
+    }
+}
+</style>