Minor: Format code

assets/vue/components/basecomponents/BaseButton.vue

@@ -1,19 +1,16 @@
 <template>
   <Button
-    class="cursor-pointer"
-    plain
-    :label="label"
     :class="buttonClass"
+    :label="label"
     :outlined="primeOutlinedProperty"
-    :text="primeTextProperty"
     :size="size"
+    :text="primeTextProperty"
+    class="cursor-pointer"
+    plain
     @click="$emit('click', $event)"
   >
-    <BaseIcon class="text-inherit" :icon="icon" :size="size" />
-    <span
-      v-if="!onlyIcon && label"
-      class="hidden md:block text-inherit"
-    >
+    <BaseIcon :icon="icon" :size="size" class="text-inherit" />
+    <span v-if="!onlyIcon && label" class="hidden md:block text-inherit">
       {{ label }}
     </span>
   </Button>
@@ -21,9 +18,9 @@
 
 <script setup>
 import Button from "primevue/button";
-import {chamiloIconToClass} from "./ChamiloIcons";
+import { chamiloIconToClass } from "./ChamiloIcons";
 import BaseIcon from "./BaseIcon.vue";
-import {computed} from "vue";
+import { computed } from "vue";
 
 const props = defineProps({
   label: {
@@ -34,31 +31,26 @@ const props = defineProps({
     type: String,
     required: true,
     validator: (value) => {
-      if (typeof (value) !== "string") {
+      if (typeof value !== "string") {
         return false;
       }
       return Object.keys(chamiloIconToClass).includes(value);
-    }
+    },
   },
   type: {
     type: String,
     required: true,
     validator: (value) => {
-      if (typeof (value) !== "string") {
+      if (typeof value !== "string") {
         return false;
       }
-      return [
-        "primary",
-        "secondary",
-        "black",
-        "danger",
-      ].includes(value);
-    }
+      return ["primary", "secondary", "black", "danger"].includes(value);
+    },
   },
   // associate this button to a popup through its identifier, this will make this button toggle the popup
   popupIdentifier: {
     type: String,
-    default: ""
+    default: "",
   },
   onlyIcon: {
     type: Boolean,
@@ -68,14 +60,11 @@ const props = defineProps({
     type: String,
     default: "normal",
     validator: (value) => {
-      if (typeof (value) !== "string") {
-        return false
+      if (typeof value !== "string") {
+        return false;
       }
-      return [
-        "normal",
-        "small",
-      ].includes(value);
-    }
+      return ["normal", "small"].includes(value);
+    },
   },
 });
 
@@ -85,21 +74,23 @@ const buttonClass = computed(() => {
   if (props.onlyIcon) {
     return "p-3";
   }
-  let result =""
+  let result = "";
   switch (props.size) {
     case "normal":
       result += "py-2.5 px-4 ";
       break;
     case "small":
-      result += "py-2 px-3.5 "
+      result += "py-2 px-3.5 ";
   }
-  let commonDisabled = "disabled:bg-primary-bgdisabled disabled:border disabled:border-primary-borderdisabled disabled:text-fontdisabled"
+  let commonDisabled =
+    "disabled:bg-primary-bgdisabled disabled:border disabled:border-primary-borderdisabled disabled:text-fontdisabled";
   switch (props.type) {
     case "primary":
       result += `border-primary hover:bg-primary text-primary hover:text-white ${commonDisabled} `;
       break;
     case "secondary":
-      result += "bg-secondary text-white hover:bg-secondary-gradient disabled:bg-secondary-bgdisabled disabled:text-fontdisabled";
+      result +=
+        "bg-secondary text-white hover:bg-secondary-gradient disabled:bg-secondary-bgdisabled disabled:text-fontdisabled";
       break;
     case "danger":
       result += `border-error hover:bg-error text-error hover:text-white ${commonDisabled} `;

assets/vue/components/basecomponents/BaseChart.vue

@@ -1,14 +1,14 @@
 <template>
-  <PrimeChart type="pie" :data="data" :options="{}" class="w-full md:w-30rem" />
+  <PrimeChart :data="data" :options="{}" class="w-full md:w-30rem" type="pie" />
 </template>
 
 <script setup>
-import PrimeChart from 'primevue/chart'
+import PrimeChart from "primevue/chart";
 
 defineProps({
   data: {
     type: Object,
     required: true,
   },
-})
+});
 </script>

assets/vue/components/basecomponents/BaseDialog.vue

@@ -2,7 +2,7 @@
   <Dialog
     :header="title"
     :modal="true"
-    :style="{width: '450px'}"
+    :style="{ width: '450px' }"
     :visible="isVisible"
     class="p-fluid"
     @update:visible="$emit('update:isVisible', $event)"
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import Dialog from 'primevue/dialog'
+import Dialog from "primevue/dialog";
 
 defineProps({
   title: {
@@ -25,9 +25,8 @@ defineProps({
   isVisible: {
     type: Boolean,
     required: true,
-  }
-})
-
-defineEmits(['update:isVisible'])
+  },
+});
 
+defineEmits(["update:isVisible"]);
 </script>

assets/vue/components/basecomponents/BaseDialogConfirmCancel.vue

@@ -1,23 +1,9 @@
 <template>
-  <BaseDialog
-    :title="title"
-    :is-visible="isVisible"
-    @update:is-visible="$emit('update:isVisible', $event)"
-  >
+  <BaseDialog :is-visible="isVisible" :title="title" @update:is-visible="$emit('update:isVisible', $event)">
     <slot></slot>
     <template #footer>
-      <BaseButton
-        :label="innerCancelLabel"
-        type="black"
-        icon="close"
-        @click="$emit('cancelClicked')"
-      />
-      <BaseButton
-        :label="innerConfirmLabel"
-        type="secondary"
-        icon="confirm"
-        @click="$emit('confirmClicked')"
-      />
+      <BaseButton :label="innerCancelLabel" icon="close" type="black" @click="$emit('cancelClicked')" />
+      <BaseButton :label="innerConfirmLabel" icon="confirm" type="secondary" @click="$emit('confirmClicked')" />
     </template>
   </BaseDialog>
 </template>
@@ -25,10 +11,10 @@
 <script setup>
 import BaseDialog from "./BaseDialog.vue";
 import BaseButton from "./BaseButton.vue";
-import {computed} from "vue";
-import {useI18n} from "vue-i18n";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-const {t} = useI18n()
+const { t } = useI18n();
 
 const props = defineProps({
   title: {
@@ -41,21 +27,21 @@ const props = defineProps({
   },
   confirmLabel: {
     type: String,
-    default: '',
+    default: "",
   },
   cancelLabel: {
     type: String,
-    default: '',
+    default: "",
   },
-})
+});
 
-defineEmits(['update:isVisible', 'confirmClicked', 'cancelClicked'])
+defineEmits(["update:isVisible", "confirmClicked", "cancelClicked"]);
 
 const innerConfirmLabel = computed(() => {
-  return props.confirmLabel === "" ? t('Yes') : props.confirmLabel
-})
+  return props.confirmLabel === "" ? t("Yes") : props.confirmLabel;
+});
 
 const innerCancelLabel = computed(() => {
-  return props.cancelLabel === "" ? t('No') : props.cancelLabel
-})
+  return props.cancelLabel === "" ? t("No") : props.cancelLabel;
+});
 </script>

assets/vue/components/basecomponents/BaseIcon.vue

@@ -1,37 +1,32 @@
 <template>
-  <i :class="iconClass"/>
+  <i :class="iconClass" />
 </template>
 
 <script setup>
-import {computed} from "vue";
-import {chamiloIconToClass} from "./ChamiloIcons";
-
+import { computed } from "vue";
+import { chamiloIconToClass } from "./ChamiloIcons";
 
 const props = defineProps({
   icon: {
     type: String,
     required: true,
     validator: (value) => {
-      if (typeof (value) !== "string") {
-        return false
+      if (typeof value !== "string") {
+        return false;
       }
-      return Object.keys(chamiloIconToClass).includes(value)
-    }
+      return Object.keys(chamiloIconToClass).includes(value);
+    },
   },
   size: {
     type: String,
     default: "normal",
     validator: (value) => {
-      if (typeof (value) !== "string") {
-        return false
+      if (typeof value !== "string") {
+        return false;
       }
-      return [
-        "big",
-        "normal",
-        "small",
-      ].includes(value);
-    }
-  }
+      return ["big", "normal", "small"].includes(value);
+    },
+  },
 });
 
 const iconClass = computed(() => {

assets/vue/components/basecomponents/ButtonToolbar.vue

@@ -10,23 +10,21 @@
 
 <script setup>
 import Toolbar from "primevue/toolbar";
-import {computed} from "vue";
+import { computed } from "vue";
 
 const props = defineProps({
   showTopBorder: {
     type: Boolean,
     default: false,
-  }
-})
+  },
+});
 
 const toolbarClass = computed(() => {
   if (props.showTopBorder) {
-    return 'pt-5 border-t border-b';
+    return "pt-5 border-t border-b";
   }
-  return '';
-})
+  return "";
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>