mgv-backoffice 1.0.0

package/src/components/Pagination.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <ul>
+      <li v-for="cell in cells" :key="cell">
+        <a v-if="cell!==0" @click="changePage(cell)" :class="{ active: cell === currentPage }">{{ cell }}</a>
+        <span v-if="cell===0" style="cursor: not-allowed;">...</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  totalItems: {
+    type: Number,
+    required: true,
+    default: 10
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20
+  }
+})
+
+const currentPage = ref(1);
+const totalPages = ref(0);
+const cells = ref([] as number[]);
+const emit = defineEmits(['page-changed']);
+
+function changePage(pageNumber: number) {
+  if (pageNumber !== currentPage.value && pageNumber >= 1 && pageNumber <= totalPages.value) {
+    currentPage.value = pageNumber;
+  }
+
+  if (totalPages.value > 5) {
+    cells.value = [];
+
+    let isAwayFromStartPoint = (pageNumber - 3) > 0;
+    if (isAwayFromStartPoint) {
+      cells.value.push(1);
+      cells.value.push(0);
+    }
+
+    for (let i = 2; i >= 1; i--) {
+      let previousCell = pageNumber - i;
+      if (previousCell > 0) {
+        cells.value.push(previousCell);
+      }
+    }
+
+    cells.value.push(currentPage.value);
+
+    let nextPages = totalPages.value - pageNumber;
+    let hasNextPages = nextPages > 2;
+    let nextPagesSize = 2;
+
+    if (hasNextPages) {
+      for (let i = 1; i <= nextPagesSize; i++) {
+        cells.value.push(pageNumber + i);
+      }
+      cells.value.push(0);
+      cells.value.push(totalPages.value);
+    } else {
+      for (let i = 1; i <= nextPages; i++) {
+        cells.value.push(pageNumber + i);
+      }
+    }
+  }
+
+  emit('page-changed', pageNumber);
+}
+
+watch(() => props.totalItems, () => {
+  totalPages.value = Math.ceil(props.totalItems / props.itemsPerPage);
+
+  cells.value = [];
+  if (totalPages.value > 5) {
+    for (let i = 1; i < 5; i++) {
+      cells.value.push(i);
+    }
+    cells.value.push(0);
+    cells.value.push(totalPages.value);
+  } else {
+    for (let i = 1; i <= totalPages.value; i++) {
+      cells.value.push(i);
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+span {
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  padding: 0.75rem;
+  text-decoration: none;
+  color: black;
+}
+
+ul {
+  display: flex;
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  margin-right: 3px;
+}
+
+a {
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  padding: 0.75rem;
+  text-decoration: none;
+  color: black;
+}
+
+a:hover {
+  background-color: rgb(195 197 201);
+  color: #000000;
+  cursor: pointer;
+}
+
+a.active:hover {
+  background-color: rgb(195 197 201);
+}
+
+a.active {
+  font-weight: 700;
+  border-radius: 10px;
+  background-color: #e5e7eb;
+  color: #000000;
+}
+</style>

package/src/components/TrendArrow.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-if="number">
+    <span v-if="isNegative" class="flex items-center space-x-2">
+      <BaseBadge :color="ColorsEnums.RED">{{ number }}{{ props.icon }}</BaseBadge>
+      <ArrowDownIcon class="h-5 w-5 text-red-500" />
+    </span>
+
+    <span v-else class="flex items-center space-x-2">
+      <BaseBadge :color="ColorsEnums.GREEN">{{ number }}{{ props.icon }}</BaseBadge>
+      <ArrowUpIcon class="h-5 w-5 text-green-500" />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import BaseBadge from './BaseBadge.vue'
+import { ColorsEnums } from '../enums/ColorsEnums'
+import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+  number: {
+    type: Number,
+    required: false
+  },
+  icon: {
+    type: String,
+    required: false
+  }
+})
+
+const isNegative = computed(() => props.number !== null && props.number !== undefined && props.number < 0)
+</script>

package/src/enums/AlertEnum.ts

@@ -0,0 +1,6 @@
+export enum AlertEnum {
+    WARNING = "WARNING",
+    ERROR = "ERROR",
+    SUCCESS = "SUCCESS",
+    INFROM = "INFROM"
+}

package/src/enums/BaseBadgeEnum.ts

@@ -0,0 +1,4 @@
+export enum BaseBadgeEnum {
+    WIN = "WIN",
+    LOSE = "LOSE"
+}

package/src/enums/BaseButtonEnum.ts

@@ -0,0 +1,9 @@
+export enum BaseButtonEnum {
+    RED = "RED",
+    BLUE = "BLUE",
+    WHITE = "WHITE",
+    DARK = "DARK",
+    GREEN = "GREEN",
+    YELLOW = "YELLOW",
+    PURPLE = "PURPLE",
+}

package/src/enums/BaseButtonSizeEnum.ts

@@ -0,0 +1,7 @@
+export enum BaseButtonSizeEnum {
+    EXTRA_SMALL = "EXTRA SMALL",
+    SMALL = "SMALL",
+    BASE = "BASE",
+    LARGE = "LARGE",
+    EXTRA_LARGE = "EXTRA_LARGE"
+}

package/src/enums/BaseLogoEnum.ts

@@ -0,0 +1,5 @@
+export enum BaseLoginEnum {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}

package/src/enums/BaseModalEnum.ts

@@ -0,0 +1,4 @@
+export enum BaseModalEnum {
+    DELETE = 'DELETE',
+    SUCCESS = 'SUCCESS'
+}

package/src/enums/BaseToastEnum.ts

@@ -0,0 +1,5 @@
+export enum BaseToastEnum {
+    SUCCESS = 'SUCCESS',
+    WARNING = 'WARNING',
+    ERROR = 'ERROR'
+}

package/src/enums/ColorsEnums.ts

@@ -0,0 +1,9 @@
+export enum ColorsEnums {
+    NONE = 'NONE',
+    RED = 'RED',
+    YELLOW = 'YELLOW',
+    BLACK = 'BLACK',
+    GRAY = 'GRAY',
+    GREEN = 'GREEN',
+    BLUE = 'BLUE'
+}

package/src/enums/LineEnum.ts

@@ -0,0 +1,3 @@
+export enum LineEnum {
+    BASE = "BASE", BASE_SHORTER = "BASE_SHORTER", SQUARE = "SQUARE"
+}

package/src/enums/PositioningEnum.ts

@@ -0,0 +1,3 @@
+export enum PositioningEnum {
+    TOP_LEFT = "TOP_LEFT", TOP_RIGHT = "TOP_RIGHT", BOTTOM_LEFT = "BOTTOM_LEFT", BOTTOM_RIGHT = "BOTTOM_RIGHT"
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+// Components
+export { default as BaseAlert } from './components/BaseAlert.vue'
+export { default as BaseBadge } from './components/BaseBadge.vue'
+export { default as BaseButton } from './components/BaseButton.vue'
+export { default as BaseLine } from './components/BaseLine.vue'
+export { default as BaseLogo } from './components/BaseLogo.vue'
+export { default as BaseModal } from './components/BaseModal.vue'
+export { default as BaseRow } from './components/BaseRow.vue'
+export { default as BaseSpinner } from './components/BaseSpinner.vue'
+export { default as BaseToast } from './components/BaseToast.vue'
+export { default as ColoredSquares } from './components/ColoredSquares.vue'
+export { default as EuroAmount } from './components/EuroAmount.vue'
+export { default as Pagination } from './components/Pagination.vue'
+export { default as TrendArrow } from './components/TrendArrow.vue'
+
+// Enums
+export { AlertEnum } from './enums/AlertEnum'
+export { BaseBadgeEnum } from './enums/BaseBadgeEnum'
+export { BaseButtonEnum } from './enums/BaseButtonEnum'
+export { BaseButtonSizeEnum } from './enums/BaseButtonSizeEnum'
+export { BaseLoginEnum } from './enums/BaseLogoEnum'
+export { BaseModalEnum } from './enums/BaseModalEnum'
+export { BaseToastEnum } from './enums/BaseToastEnum'
+export { ColorsEnums } from './enums/ColorsEnums'
+export { LineEnum } from './enums/LineEnum'
+export { PositioningEnum } from './enums/PositioningEnum'
+
+// Utils
+export { getBaseColor, getBaseColorOf } from './utils/util'

package/src/utils/util.ts

@@ -0,0 +1,53 @@
+import { AlertEnum } from "../enums/AlertEnum";
+import { ColorsEnums } from "../enums/ColorsEnums";
+
+function getBaseColor(c: AlertEnum): string {
+    let color = "red";
+    switch (c) {
+        case (AlertEnum.ERROR):
+            color = "red"
+            break;
+        case (AlertEnum.SUCCESS):
+            color = "green"
+            break;
+        case (AlertEnum.INFROM):
+            color = "gray"
+            break;
+        case (AlertEnum.WARNING):
+            color = "yellow"
+            break;
+    }
+    return color;
+}
+
+function getBaseColorOf(c: ColorsEnums): string {
+    let color = 'red';
+    switch (c) {
+        case ColorsEnums.GREEN: {
+            color = 'green';
+            break;
+        }
+        case ColorsEnums.RED: {
+            color = 'red';
+            break;
+        }
+        case ColorsEnums.BLUE: {
+            color = 'blue';
+            break;
+        }
+        case ColorsEnums.YELLOW: {
+            color = 'yellow';
+            break;
+        }
+        case ColorsEnums.NONE: {
+            color = '';
+            break;
+        }
+    }
+    return color;
+}
+
+export {
+    getBaseColor,
+    getBaseColorOf
+};