@nixweb/nixloc-ui 0.0.128 → 0.0.129

package/src/component/shared/FullCalendar.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <Loading type="line" :center="false" v-show="loading" />
+    <FullCalendar ref="cc" :options="calendarOptions" />
+  </div>
+</template>
+
+<script>
+import "@fullcalendar/core/vdom"; // solves problem with Vite
+import FullCalendar from "@fullcalendar/vue";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+
+import interactionPlugin from "@fullcalendar/interaction";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapGetters } from "vuex";
+
+export default {
+  components: {
+    FullCalendar,
+    Loading,
+  },
+  props: {
+    changedCalendar: Function,
+    clickedCalendar: Function,
+    clickedEvent: Function,
+    loading: Boolean,
+  },
+  data() {
+    return {
+      calendarOptions: {
+        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+        initialView: "dayGridMonth",
+        locale: "pt-br",
+        allDayText: "Dia inteiro",
+        headerToolbar: {
+          start: "today prev,next",
+          center: "title",
+          end: "timeGridDay,dayGridWeek,dayGridMonth,listYear",
+        },
+        buttonText: {
+          today: "Hoje",
+          month: "Mês",
+          week: "Semana",
+          day: "Dia",
+          list: "Ano",
+        },
+        dateClick: this.handleDateClick,
+        eventClick: this.handleEventClick,
+        viewDidMount: this.handleEventRender,
+        datesSet: this.handleChange,
+        events: [],
+      },
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    handleChange(arg) {
+      if (this.changedCalendar) this.changedCalendar(arg);
+    },
+    handleEventRender(arg) {},
+    handleDateClick: function (arg) {
+      if (this.clickedCalendar) this.clickedCalendar(arg);
+    },
+    handleEventClick: function (arg) {
+      if (this.clickedEvent) this.clickedEvent(arg.event._def);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "updateCalendar")
+          this.calendarOptions.events = event.data;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style>
+.fc .fc-daygrid-day.fc-day-today {
+  background-color: #f1f3f4;
+}
+
+.fc-button-primary {
+  background-color: #4bb4e2 !important;
+  border-color: white !important;
+  border: 0px !important;
+  margin-left: 5px !important;
+  border-radius: 15px !important;
+  font-size: 13px !important;
+  cursor: pointer !important;
+  border: none !important;
+  min-width: 33px !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  letter-spacing: 1px !important;
+  -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%) !important;
+  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12) !important;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%) !important;
+}
+
+.fc-timeGridDay-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc-dayGridWeek-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc-dayGridMonth-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc-listYear-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc .fc-daygrid-day-number {
+  font-size: 16px !important;
+}
+
+.fc-button-active {
+  background-color: #89ceeb !important;
+}
+
+.fc-event-title {
+  color: black !important;
+  cursor: pointer !important;
+}
+
+.fc-list-day-side-text {
+  color: black !important;
+}
+
+.fc-list-day-text {
+  color: black !important;
+}
+
+.fc-col-header-cell-cushion {
+  color: black !important;
+}
+
+.fc-daygrid-day-number {
+  color: black !important;
+}
+
+.fc-button-primary:hover {
+  background: #3e90b3 !important;
+}
+</style>

package/src/component/shared/HorizontalFilter.vue

@@ -1,59 +1,59 @@
-<template>
-  <div class="filter-horizontal">
-    <Collapse
-      :buttonShow="{
-        title: 'Mais filtros',
-        icon: 'fas fa-arrow-alt-circle-down',
-        type: 'info',
-      }"
-      :buttonHide="{
-        title: 'Menos filtros',
-        icon: 'fas fa-arrow-alt-circle-up',
-        type: 'warning',
-      }"
-    >
-      <b-row>
-        <b-col :sm="showTotalPerPage ? 10 : 12">
-          <slot name="content-filter-horizontal"></slot>
-        </b-col>
-        <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
-          <SelectStatic
-            title="Mostrar"
-            fieldTarget="totalPerPage"
-            :initialValue="{ content: '10', id: 10 }"
-            :data="[
-              { content: '10', id: 10 },
-              { content: '20', id: 20 },
-              { content: '30', id: 30 },
-              { content: '50', id: 50 },
-              { content: '100', id: 100 },
-            ]"
-          />
-        </b-col>
-      </b-row>
-    </Collapse>
-  </div>
-</template>
-
-<script>
-import Collapse from "./Collapse.vue";
-import SelectStatic from "../forms/SelectStatic.vue";
-import Select from "../forms/Select";
-
-export default {
-  name: "ListViewWithHandlerData",
-  components: { Select, SelectStatic, Collapse },
-  props: {
-    showTotalPerPage: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.filter-horizontal {
-  margin-bottom: 5px;
-}
-</style>
+<template>
+  <div class="filter-horizontal">
+    <Collapse
+      :buttonShow="{
+        title: 'Mais filtros',
+        icon: 'fas fa-arrow-alt-circle-down',
+        type: 'info',
+      }"
+      :buttonHide="{
+        title: 'Menos filtros',
+        icon: 'fas fa-arrow-alt-circle-up',
+        type: 'warning',
+      }"
+    >
+      <b-row>
+        <b-col :sm="showTotalPerPage ? 10 : 12">
+          <slot name="content-filter-horizontal"></slot>
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
+          <SelectStatic
+            title="Mostrar"
+            fieldTarget="totalPerPage"
+            :initialValue="{ content: '10', id: 10 }"
+            :data="[
+              { content: '10', id: 10 },
+              { content: '20', id: 20 },
+              { content: '30', id: 30 },
+              { content: '50', id: 50 },
+              { content: '100', id: 100 },
+            ]"
+          />
+        </b-col>
+      </b-row>
+    </Collapse>
+  </div>
+</template>
+
+<script>
+import Collapse from "./Collapse.vue";
+import SelectStatic from "../forms/SelectStatic.vue";
+import Select from "../forms/Select";
+
+export default {
+  name: "ListViewWithHandlerData",
+  components: { Select, SelectStatic, Collapse },
+  props: {
+    showTotalPerPage: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter-horizontal {
+  margin-bottom: 5px;
+}
+</style>

package/src/component/shared/Loading.vue

@@ -1,107 +1,107 @@
-<template>
-  <div>
-    <div v-if="type == 'bubbles'" :class="{ loading: center }">
-      <vue-loading
-        type="bubbles"
-        :color="color"
-        :size="{ width: width + 'px', height: height + 'px' }"
-      ></vue-loading>
-    </div>
-    <div v-if="type == 'line'">
-      <div class="loader">
-        <div class="loader__element"></div>
-      </div>
-    </div>
-    <div :class="{ 'loading-text': center }">
-      <div>
-        <div class="message">{{ message }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Loading",
-  props: {
-    height: {
-      type: Number,
-      default: 70,
-    },
-    width: {
-      type: Number,
-      default: 70,
-    },
-    center: {
-      type: Boolean,
-      default: true,
-    },
-    color: {
-      type: String,
-      default: "#D98621",
-    },
-    type: {
-      type: String,
-      default: "bubbles",
-    },
-    message: String,
-  },
-};
-</script>
-
-<style scoped>
-.loading {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-.loading-text {
-  position: absolute;
-  left: 50%;
-  top: 45%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-.message {
-  font-size: 15px;
-  margin-top: 5px;
-}
-
-.loader {
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: flex-start;
-  z-index: 100000;
-}
-
-.loader__element {
-  height: 3px;
-  width: 100%;
-  background: #fbf2e8;
-}
-
-.loader__element:before {
-  content: "";
-  display: block;
-  background-color: #fca944;
-  height: 3px;
-  width: 0;
-  animation: getWidth 1s ease-in infinite;
-}
-
-@keyframes getWidth {
-  100% {
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="type == 'bubbles'" :class="{ loading: center }">
+      <vue-loading
+        type="bubbles"
+        :color="color"
+        :size="{ width: width + 'px', height: height + 'px' }"
+      ></vue-loading>
+    </div>
+    <div v-if="type == 'line'">
+      <div class="loader">
+        <div class="loader__element"></div>
+      </div>
+    </div>
+    <div :class="{ 'loading-text': center }">
+      <div>
+        <div class="message">{{ message }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Loading",
+  props: {
+    height: {
+      type: Number,
+      default: 70,
+    },
+    width: {
+      type: Number,
+      default: 70,
+    },
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    color: {
+      type: String,
+      default: "#D98621",
+    },
+    type: {
+      type: String,
+      default: "bubbles",
+    },
+    message: String,
+  },
+};
+</script>
+
+<style scoped>
+.loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.loading-text {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.message {
+  font-size: 15px;
+  margin-top: 5px;
+}
+
+.loader {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-start;
+  z-index: 100000;
+}
+
+.loader__element {
+  height: 3px;
+  width: 100%;
+  background: #fbf2e8;
+}
+
+.loader__element:before {
+  content: "";
+  display: block;
+  background-color: #fca944;
+  height: 3px;
+  width: 0;
+  animation: getWidth 1s ease-in infinite;
+}
+
+@keyframes getWidth {
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/src/component/shared/LoadingMoreButton.vue

@@ -1,23 +1,23 @@
-<template>
-  <div>
-    <Button
-      key="loadingMore"
-      eventName="loadingMore"
-      type="warning"
-      title="Carregar mais..."
-      classIcon="fas fa-redo"
-      size="medium"
-    />
-  </div>
-</template>
-<script>
-import Button from "../forms/Button.vue";
-export default {
-  name: "LoadingMoreButton",
-  components: { Button },
-  data() {
-    return {};
-  },
-  methods: {},
-};
-</script>
+<template>
+  <div>
+    <Button
+      key="loadingMore"
+      eventName="loadingMore"
+      type="warning"
+      title="Carregar mais..."
+      classIcon="fas fa-redo"
+      size="medium"
+    />
+  </div>
+</template>
+<script>
+import Button from "../forms/Button.vue";
+export default {
+  name: "LoadingMoreButton",
+  components: { Button },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>