@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/layout/BottomActionsBar.vue

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

package/src/component/layout/ColorPicker.vue

@@ -1,175 +0,0 @@
-<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/FixedBar.vue

@@ -1,103 +0,0 @@
-<template>
-  <div>
-    <div v-show="!isLoading('panel')" class="bar side-by-side" :style="'min-height:' + height + 'px; background-color:' + backgroundColor
-      " :class="{
-        top: position == 'top',
-        footer: position == 'footer',
-        none: position == 'none',
-      }">
-      <div class="size">
-        <div :class="{ 'side-by-side': showButtonClose }">
-          <slot></slot>
-        </div>
-        <div :class="{ 'side-by-side': showButtonClose }" class="close-icon" v-if="position == 'top' && showButtonClose"
-          @click="close">
-          <i class="fa-regular fa-xmark"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "FixedBar",
-  props: {
-    showButtonClose: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: String,
-      default: "top",
-    },
-    height: {
-      type: Number,
-      default: 70,
-    },
-    backgroundColor: {
-      type: String,
-      default: "white",
-    },
-  },
-  computed: {
-    ...mapGetters("generic", ["isLoading"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    close() {
-      this.addEvent({ name: "closedFixedBar" });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.bar {
-  position: fixed;
-  width: 100%;
-  z-index: 20;
-  padding: 18px;
-  padding-left: 100px;
-}
-
-.size {
-  max-width: 1600px;
-  margin: auto;
-}
-
-.none {
-  left: 0;
-  right: 0;
-}
-
-.top {
-  top: 0;
-  left: 0;
-  right: 0;
-  border-bottom: 0px solid #e1e1e2;
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 5%);
-  border-bottom: 0px solid #eff0f1;
-}
-
-.footer {
-  left: 0;
-  bottom: 0px;
-  border-top: 0px solid #e1e1e2;
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 5%);
-  border-top: 0px solid #eff0f1;
-}
-
-.close-icon {
-  float: right;
-  font-size: 30px;
-  font-weight: 400;
-  line-height: 1;
-  color: #b9babb;
-  text-shadow: 0 1px 0 #fff;
-  padding-right: 80px;
-  cursor: pointer;
-}
-</style>

package/src/component/layout/Gantt.vue

@@ -1,128 +0,0 @@
-<template>
-  <div>
-    <div v-if="tasks.length > 0">
-      <ButtonGroup :initialOption="initialOption" :options="options" />
-      <slot></slot>
-      <div class="gantt">
-        <svg ref="gantt" />
-      </div>
-    </div>
-    <div v-else>
-      Nenhum registro encontrado!
-    </div>
-  </div>
-</template>
-
-<script>
-import ButtonGroup from "@nixweb/nixloc-ui/src/component/forms/ButtonGroup";
-
-import { mapGetters } from "vuex";
-
-export default {
-  name: "FrappeGantt",
-  components: {
-    ButtonGroup,
-  },
-  props: {
-    initialOption: String,
-    options: Array,
-    tasks: Array,
-  },
-  data() {
-    return {
-      gantt: {},
-      mode: "day",
-      viewMode: "",
-    };
-  },
-  mounted() {
-    this.setupGanttChart();
-  },
-  computed: {
-    ...mapGetters("generic", ["event"]),
-  },
-  methods: {
-    setupGanttChart() {
-      this.gantt = new Gantt(this.$refs.gantt, this.tasks, {
-        language: "ptBr",
-        date_format: "YYYY-MM-DD",
-        bar_corner_radius: 10,
-        on_click: (task) => {
-          this.$emit("task-updated", task);
-        },
-        on_date_change: (task, start, end) => {
-          this.$emit("task-date-updated", { task, start, end });
-        },
-        on_progress_change: (task, progress) => {
-          this.$emit("task-progress-updated", { task, progress });
-        },
-        //I doubt you will ever need this as the developer already knows what view mode they set.
-        on_view_change: (mode) => {
-          this.$emit("view-mode-updated", mode);
-        },
-        custom_popup_html: function (task) {
-          return `
-                    <div class="details-container">
-                      <p class="title-details">Nº: ${task.number}</p>
-                      <p class="title-details">${task.customer ?? ""}</p>
-                      <p class="title-details">Quantidade: ${task.name}</p>
-                      <p class="title-details">${task.periodRentName}</p>
-                    </div>
-	             `;
-        },
-      });
-      this.updateTasks();
-      this.updateViewMode();
-    },
-
-    updateViewMode() {
-      this.gantt.change_view_mode(
-        this.viewMode[0].toUpperCase() + this.viewMode.substring(1)
-      );
-    },
-    updateTasks() {
-      this.gantt.refresh(this.tasks);
-    },
-    demoViewMode(viewMode) {
-      this.mode = viewMode;
-      this.viewMode = viewMode;
-    },
-  },
-  watch: {
-    viewMode() {
-      this.updateViewMode();
-    },
-    tasks() {
-      this.updateTasks();
-    },
-    event: {
-      handler(event) {
-        if (event.name == "demoViewMode") {
-          if (event.data.title == "Dia") this.demoViewMode("day");
-          if (event.data.title == "Semana") this.demoViewMode("week");
-          if (event.data.title == "Mês") this.demoViewMode("month");
-        }
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-<style>
-.gantt {
-  margin-top: 10px;
-}
-
-.details-container {
-  background-color: white;
-  width: 400px;
-  padding: 10px;
-  border: 1px solid #eaedf3;
-  color: black;
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
-}
-
-.title-details {
-  font-size: 14px;
-}
-</style>

package/src/component/layout/Header.vue

@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <div class="top" :style="'background-color:' + backgroundColor">
-      <div class="side-by-side top-space">
-        <slot></slot>
-      </div>
-    </div>
-    <br />
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "Top",
-  props: {
-    backgroundColor: {
-      type: String,
-      default: "#4680A5",
-    },
-  },
-};
-</script>
-
-<style scoped>
-.top {
-  padding-left: 85px;
-  padding-top: 4px;
-  left: 0px;
-  right: 0;
-  height: 55px;
-  top: 0;
-  box-shadow: 0px 10px 30px -6px rgb(0 0 0 / 10%);
-  border-bottom: 0px solid #eff0f1;
-  position: fixed;
-  z-index: 100;
-}
-
-.top-space {
-  margin-right: 10px;
-  width: 100%;
-}
-
-.top-margin {
-  width: 100%;
-  widows: 100%;
-  height: 10px;
-  margin-right: 80px;
-  top: 0;
-  margin-left: 120px;
-  z-index: 1000;
-  background-color: #fdfdfd;
-  position: fixed;
-}
-</style>