@nixweb/nixloc-ui 1.0.0 → 1.2.0

package/package.json

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

package/src/component/forms/ButtonFilter.vue

@@ -41,6 +41,7 @@ export default {
       if (this.clicked) this.clicked(this.params);
     },
   },
+
 };
 </script>
 <style scoped>

package/src/component/forms/InputTextEdit.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style  scoped>
+<style scoped>
 .input {
   width: 90%;
   border: none;

package/src/component/forms/Modal.vue

@@ -3,7 +3,7 @@
     <vodal :duration="80" :show="modal.open" @hide="hide()" :width="width" :height="height" :closeOnEsc="closeOnEsc"
       :closeButton="closeButton" :closeOnClickMask="false">
       <div class="d-block text-left">
-        <Messages v-if="!vodal.open" />
+        <Messages v-if="!vodal.open && showValidation" />
         <div class="title">{{ title }}</div>
         <hr class="hr" />
         <slot></slot>
@@ -33,6 +33,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showValidation: {
+      type: Boolean,
+      default: true,
+    },
     onHideModal: Function,
   },
   components: { Messages, Vodal },

package/src/component/layout/BottomActionsBar.vue

@@ -0,0 +1,193 @@
+<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;
+        }
+    },
+    mounted() {
+        document.addEventListener("keydown", this.onKeydown);
+    },
+    beforeDestroy() {
+        document.removeEventListener("keydown", this.onKeydown);
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        close() {
+            this.$emit("close");
+            this.addEvent({ name: "deselectAll" });
+        },
+        onKeydown(e) {
+            if (e.key === "Escape" && this.isOpen) this.close();
+        }
+    }
+};
+</script>
+
+<style>
+.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;
+    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: #007bff;
+    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: #007bff;
+    font-size: 11px;
+    font-weight: bold;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #007bff;
+}
+
+.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;
+}
+
+.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;
+    }
+}
+
+@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>

package/src/component/layout/ColorPicker.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="color-picker" ref="root">
+        <div v-if="title" class="color-picker__title">{{ title }}</div>
+
+        <div class="color-picker__trigger" :style="{ backgroundColor: innerValue }" role="button" tabindex="0"
+            @click="toggle()" @keydown.enter.prevent="toggle()" @keydown.space.prevent="toggle()"
+            aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'"></div>
+
+        <transition name="color-picker--fade">
+            <div v-show="open" class="color-picker__menu" role="listbox" :aria-label="title || 'Escolher cor'">
+                <div class="color-picker__grid">
+                    <div v-for="c in colors" :key="c" class="color-picker__item" :style="{ backgroundColor: c }"
+                        role="option" :aria-selected="c === innerValue ? 'true' : 'false'" tabindex="0"
+                        @click="choose(c)" @keydown.enter.prevent="choose(c)" @keydown.space.prevent="choose(c)">
+                        <span v-if="c === innerValue" class="color-picker__check"></span>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ColorPicker",
+    model: { prop: "value", event: "input" },
+    props: {
+        value: { type: String, default: "" },
+        defaultColor: { type: String, default: "#64B5F6" },
+        title: { type: String, default: "" },
+        colors: {
+            type: Array,
+            default: function () {
+                return [
+                    "#E57373", "#F06292", "#FF6F61",
+                    "#BA68C8", "#9575CD", "#8E24AA",
+                    "#64B5F6", "#4FC3F7", "#3949AB",
+                    "#039BE5", "#1976D2", "#1E88E5",
+                    "#4DB6AC", "#81C784", "#AED581",
+                    "#26A69A", "#2E7D32", "#0097A7",
+                    "#7CB342", "#C0CA33", "#9CCC65",
+                    "#FFD54F", "#FFB74D", "#FDD835",
+                    "#FB8C00", "#FF8A65", "#F4511E",
+                    "#A1887F", "#6D4C41", "#795548",
+                    "#90A4AE", "#546E7A", "#9E9E9E",
+                    "#000000", "#FFFFFF", "#B0BEC5"
+                ];
+            },
+        },
+    },
+    data() {
+        return { innerValue: "", open: false };
+    },
+    created() {
+        this.initialize();
+    },
+    watch: {
+        value(v) {
+            if (this.isEmpty(v)) {
+                const fallback = this.normalizeHex(this.defaultColor);
+                this.innerValue = fallback;
+                this.$emit("input", fallback);
+            } else if (v !== this.innerValue) {
+                this.innerValue = this.normalizeHex(v);
+            }
+        }
+    },
+    mounted() {
+        document.addEventListener("click", this.onClickOutside, { passive: true });
+    },
+    beforeDestroy() {
+        document.removeEventListener("click", this.onClickOutside);
+    },
+    methods: {
+        initialize() {
+            const start = this.isEmpty(this.value)
+                ? this.normalizeHex(this.defaultColor)
+                : this.normalizeHex(this.value);
+            this.innerValue = start;
+            if (this.isEmpty(this.value)) this.$emit("input", start);
+        },
+        isEmpty(v) {
+            return v === null || v === undefined || String(v).trim() === "";
+        },
+        normalizeHex(v) {
+            const s = String(v || "").trim().toUpperCase();
+            const hex = /^#([0-9A-F]{6}|[0-9A-F]{3})$/i;
+            return hex.test(s) ? s : "#64B5F6";
+        },
+        toggle() { this.open = !this.open; },
+        close() { this.open = false; },
+        choose(c) {
+            const val = this.normalizeHex(c);
+            this.innerValue = val;
+            this.$emit("input", val);
+            this.close();
+        },
+        onClickOutside(e) {
+            const root = this.$refs.root;
+            if (this.open && root && !root.contains(e.target)) this.close();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.color-picker {
+    position: relative;
+    display: inline-grid;
+    gap: .375rem;
+}
+
+.color-picker__title {
+    font-weight: 500;
+}
+
+.color-picker__trigger {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    cursor: pointer;
+    user-select: none;
+}
+
+.color-picker__menu {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + 8px);
+    left: 0;
+    min-width: 400px;
+    max-width: 90vw;
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
+    padding: .5rem;
+}
+
+.color-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(12, 28px);
+    gap: .5rem;
+}
+
+.color-picker__item {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.color-picker__check {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.color-picker--fade-enter-active,
+.color-picker--fade-leave-active {
+    transition: all .14s ease;
+}
+
+.color-picker--fade-enter,
+.color-picker--fade-leave-to {
+    opacity: 0;
+    transform: translateY(-4px) scale(.98);
+}
+</style>

package/src/component/layout/IconPicker.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="icon-picker" ref="root">
+        <div v-if="title" class="icon-picker__title">{{ title }}</div>
+
+        <div class="icon-picker__trigger" :style="{ backgroundColor: color }" role="button" tabindex="0"
+            @click="toggle()" @keydown.enter.prevent="toggle()" @keydown.space.prevent="toggle()"
+            aria-haspopup="listbox" :aria-expanded="open ? 'true' : 'false'">
+            <i :class="innerValue || 'far fa-square'"></i>
+        </div>
+
+        <transition name="icon-picker--fade">
+            <div v-show="open" class="icon-picker__menu" role="listbox" :aria-label="title || 'Escolher ícone'">
+                <div class="icon-picker__grid">
+                    <div v-for="ic in icons" :key="ic" class="icon-picker__item"
+                        :class="{ 'icon-picker__item--selected': ic === innerValue }" role="option"
+                        :aria-selected="ic === innerValue ? 'true' : 'false'" tabindex="0" @click="choose(ic)"
+                        @keydown.enter.prevent="choose(ic)" @keydown.space.prevent="choose(ic)"
+                        :style="ic === innerValue ? { backgroundColor: color } : {}">
+                        <i :class="ic"></i>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "IconPicker",
+    model: { prop: "value", event: "input" },
+    props: {
+        value: { type: String, default: "fas fa-wallet" },
+        title: { type: String, default: "" },
+        color: { type: String, default: "#64B5F6" },
+        icons: {
+            type: Array,
+            default: function () {
+                return [
+                    "fas fa-wallet", "fas fa-cash-register", "fas fa-shopping-cart", "fas fa-receipt", "fas fa-credit-card", "fas fa-money-bill", "fas fa-coins", "fas fa-percentage", "fas fa-dollar-sign", "fas fa-file-invoice", "fas fa-chart-line",
+                    "fas fa-box-open", "fas fa-box", "fas fa-truck", "fas fa-warehouse", "fas fa-shipping-fast", "fas fa-dolly", "fas fa-pallet", "fas fa-trailer", "fas fa-clipboard-list",
+                    "fas fa-building", "fas fa-city", "fas fa-home", "fas fa-briefcase", "fas fa-sitemap", "fas fa-industry", "fas fa-store", "fas fa-store-alt", "fas fa-landmark", "fas fa-hotel",
+                    "fas fa-users", "fas fa-user-tie", "fas fa-user", "fas fa-user-friends", "fas fa-user-cog", "fas fa-user-shield", "fas fa-user-circle", "fas fa-id-badge", "fas fa-id-card",
+                    "fas fa-cogs", "fas fa-tools", "fas fa-desktop", "fas fa-laptop", "fas fa-server", "fas fa-database", "fas fa-cloud", "fas fa-network-wired", "fas fa-microchip", "fas fa-robot",
+                    "fas fa-shield-alt", "fas fa-lock", "fas fa-balance-scale", "fas fa-file-contract", "fas fa-gavel", "fas fa-passport", "fas fa-clipboard-check",
+                    "fas fa-bullhorn", "fas fa-ad", "fas fa-mail-bulk", "fas fa-envelope", "fas fa-comments", "fas fa-headset", "fas fa-phone-alt", "fas fa-share-alt", "fas fa-at",
+                    "fas fa-graduation-cap", "fas fa-book", "fas fa-book-open", "fas fa-chalkboard-teacher", "fas fa-lightbulb", "fas fa-brain", "fas fa-project-diagram",
+                    "fas fa-car", "fas fa-gas-pump", "fas fa-utensils", "fas fa-coffee", "fas fa-gift", "fas fa-tag", "fas fa-leaf", "fas fa-seedling", "fas fa-heart", "fas fa-music", "fas fa-paw", "fas fa-plane"
+                ];
+            },
+        },
+    },
+    data() {
+        return {
+            innerValue: this.value || "",
+            open: false,
+        };
+    },
+    watch: {
+        value(v) { this.innerValue = v; }
+    },
+    mounted() {
+        document.addEventListener("click", this.onClickOutside, { passive: true });
+    },
+    beforeDestroy() {
+        document.removeEventListener("click", this.onClickOutside);
+    },
+    methods: {
+        toggle() { this.open = !this.open; },
+        close() { this.open = false; },
+        choose(ic) {
+            this.innerValue = ic;
+            this.$emit("input", ic);
+            this.close();
+        },
+        onClickOutside(e) {
+            const root = this.$refs.root;
+            if (this.open && root && !root.contains(e.target)) this.close();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.icon-picker {
+    position: relative;
+    display: inline-grid;
+    gap: .375rem;
+    margin-bottom: 10px;
+}
+
+.icon-picker__title {
+    font-weight: 500;
+}
+
+.icon-picker__trigger {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.icon-picker__trigger i {
+    font-size: 22px;
+    color: #fff;
+}
+
+.icon-picker__menu {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + 8px);
+    left: 0;
+    width: 540px;
+    height: 320px;
+    overflow-y: auto;
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
+    padding: .5rem .5rem .6rem;
+}
+
+.icon-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(12, 36px);
+    gap: .5rem;
+    justify-content: start;
+}
+
+.icon-picker__item {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: #f3f4f6;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+}
+
+.icon-picker__item i {
+    font-size: 14px;
+    color: #6b7280;
+}
+
+.icon-picker__item--selected i {
+    color: #fff;
+}
+
+.icon-picker--fade-enter-active,
+.icon-picker--fade-leave-active {
+    transition: all .14s ease;
+}
+
+.icon-picker--fade-enter,
+.icon-picker--fade-leave-to {
+    opacity: 0;
+    transform: translateY(-4px) scale(.98);
+}
+</style>