@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/layout/ColorPicker.vue

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

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