hl-core 0.0.8-beta.9 → 0.0.9-beta.1

package/components/Form/FormSection.vue

@@ -1,6 +1,9 @@
 <template>
   <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
-    <h2 :class="[$libStyles.textTitle]" class="font-medium text-center w-full mb-4">{{ title }}</h2>
+    <h2 :class="[$libStyles.textTitle]" class="font-medium text-center w-full mb-4">
+      {{ title }}
+      <slot name="icon"></slot>
+    </h2>
     <slot></slot>
   </section>
 </template>

package/components/Form/FormToggle.vue

@@ -13,10 +13,9 @@
       color="#009C73"
       hide-details
       :disabled="disabled"
-    >
-    </v-switch>
+    />
     <p :class="[$libStyles.textSimple]">{{ `${title}` }}</p>
-    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $t('confirm.yes') : $t('confirm.no')}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
   </div>
 </template>
 

package/components/Form/ManagerAttachment.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
     <div class="mt-3 ml-5">
-      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ $t('form.attachManager') }}</p>
+      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ $dataStore.t('form.attachManager') }}</p>
     </div>
     <v-form ref="vForm" class="flex flex-col mt-1">
       <base-panel-input
@@ -10,55 +10,55 @@
         :value="formStore.SaleChanellPolicy.nameRu"
         :readonly="isReadonly"
         :clearable="!isReadonly"
-        :label="$t('form.salesChanell')"
+        :label="$dataStore.t('form.salesChanell')"
         :rules="$rules.objectRequired"
         append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('SaleChanellPolicy', $t('form.salesChanell'))"
-      ></base-panel-input>
+        @append="openPanel('SaleChanellPolicy', $dataStore.t('form.salesChanell'))"
+      />
       <base-panel-input
         class="pl-1"
         v-model="formStore.RegionPolicy"
         :value="formStore.RegionPolicy.nameRu"
         :readonly="isReadonly"
         :clearable="!isReadonly"
-        :label="$t('form.Region')"
+        :label="$dataStore.t('form.Region')"
         :rules="$rules.objectRequired"
         append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('RegionPolicy', $t('form.Region'))"
-      ></base-panel-input>
+        @append="openPanel('RegionPolicy', $dataStore.t('form.Region'))"
+      />
       <base-panel-input
         class="pl-1"
         v-model="formStore.ManagerPolicy"
         :value="formStore.ManagerPolicy.nameRu"
         :readonly="isReadonly"
         :clearable="!isReadonly"
-        :label="$t('form.manager')"
+        :label="$dataStore.t('form.manager')"
         :rules="$rules.objectRequired"
         append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('ManagerPolicy', $t('form.manager'))"
-      ></base-panel-input>
+        @append="openPanel('ManagerPolicy', $dataStore.t('form.manager'))"
+      />
       <base-panel-input
         class="pl-1"
         v-model="formStore.AgentData"
         :value="formStore.AgentData.fullName"
         :readonly="isReadonly"
         :clearable="!isReadonly"
-        :label="$t('form.agent')"
+        :label="$dataStore.t('form.agent')"
         :rules="$rules.agentDataRequired"
         append-inner-icon="mdi mdi-chevron-right"
-        @append="openPanel('AgentData', $t('form.agent'))"
-      ></base-panel-input>
+        @append="openPanel('AgentData', $dataStore.t('form.agent'))"
+      />
     </v-form>
     <Teleport v-if="isPanelOpen" to="#panel-actions">
       <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
         <base-rounded-input
-          v-model="searchQuery"
-          :label="$t('labels.search')"
+          v-model.trim="searchQuery"
+          :label="$dataStore.t('labels.search')"
           class="w-full p-2"
           :hide-details="true"
           :append-inner-icon="currentDictName === 'AgentData' ? 'mdi mdi-magnify' : ''"
           @append="searchAgent"
-        ></base-rounded-input>
+        />
         <div v-if="dictList && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
           <div v-for="(item, index) in dictList" :key="item.id">
             <base-panel-select-item
@@ -66,17 +66,17 @@
               :text="currentDictName === 'AgentData' ? item.fullName : (item.nameRu as string)"
               :selected="currentDictName === 'AgentData' ? item.fullName === panelValue.fullName : item.nameRu === panelValue.nameRu"
               @click="pickPanelValue(item)"
-            ></base-panel-select-item>
+            />
           </div>
         </div>
-        <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50"></base-loader>
+        <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50" />
       </div>
     </Teleport>
   </div>
 </template>
 
 <script lang="ts">
-import { Value } from '@/composables/classes';
+import { Value } from '../../composables/classes';
 
 export default defineComponent({
   props: {
@@ -117,6 +117,7 @@ export default defineComponent({
       () =>
         props.disabled ||
         route.params.taskId === '0' ||
+        !dataStore.isInitiator() ||
         (route.params.taskId !== '0' && (!dataStore.isProcessEditable(formStore.applicationData.statusCode) || !dataStore.isTask())),
     );
 
@@ -130,7 +131,7 @@ export default defineComponent({
 
         if (currentDict === 'ManagerPolicy') {
           isPanelLoading.value = true;
-          await dataStore.filterManagerByRegion(formStore.RegionPolicy?.ids);
+          await dataStore.filterManagerByRegion(String(formStore.RegionPolicy.ids ?? ''));
         }
 
         isPanelOpen.value = true;

package/components/Form/ProductConditionsBlock.vue

@@ -2,21 +2,25 @@
   <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
     <div>
       <p :class="[$libStyles.textTitle, $libStyles.greenText]">
-        {{ $t('productConditions') }}
+        {{ $dataStore.t('productConditions') }}
       </p>
       <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
     </div>
     <div class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.requestedSumInsured') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.insurancePremiumPerMonth') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.coverPeriod') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.payPeriod') }}</span>
+      <span v-if="hasSum" :class="[$libStyles.textSimple]" class="font-medium">{{ $dataStore.t('productConditionsForm.requestedSumInsured') }}</span>
+      <span v-if="hasPremium" :class="[$libStyles.textSimple]" class="font-medium">{{ $dataStore.t('productConditionsForm.insurancePremiumPerMonth') }}</span>
+      <span v-if="hasPolicyNumber" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('buttons.InsuranceContract') }}</span>
+      <span v-if="hasContractDate" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.contractDate') }}</span>
+      <span v-if="hasCoverPeriod" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.coverPeriod') }}</span>
+      <span v-if="hasPayPeriod" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.payPeriod') }}</span>
     </div>
     <div class="grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
-      <span :class="[amount === null && $libStyles.emptyBlockCol]">{{ amount }} </span>
-      <span :class="[premium === null && $libStyles.emptyBlockCol]"> {{ premium }}</span>
-      <span :class="[coverPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
-      <span :class="[paymentPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+      <span v-if="hasSum" :class="[amount === null && $libStyles.emptyBlockCol]">{{ amount }} </span>
+      <span v-if="hasPremium" :class="[premium === null && $libStyles.emptyBlockCol]"> {{ premium }}</span>
+      <span v-if="hasPolicyNumber" :class="[policyNumber === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ policyNumber }}</span>
+      <span v-if="hasContractDate" :class="[policyNumber === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ contractDate }}</span>
+      <span v-if="hasCoverPeriod" :class="[coverPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
+      <span v-if="hasPayPeriod" :class="[paymentPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
         {{ paymentPeriod }}
       </span>
       <div
@@ -24,7 +28,7 @@
         :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
         @click="!disabled && $emit('onMore', { whichForm: 'productConditions' })"
       >
-        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>
       </div>
     </div>
   </div>
@@ -43,6 +47,7 @@ export default defineComponent({
     },
   },
   setup() {
+    const dataStore = useDataStore();
     const formStore = useFormStore();
 
     const amount = computed(() =>
@@ -51,12 +56,49 @@ export default defineComponent({
     const premium = computed(() =>
       formStore.productConditionsForm && formStore.productConditionsForm.insurancePremiumPerMonth ? formStore.productConditionsForm.insurancePremiumPerMonth : null,
     );
+    const policyNumber = computed(() => (formStore.applicationData && formStore.applicationData.policyAppDto ? formStore.applicationData.policyAppDto.policyNumber : null));
+    const contractDate = computed(() =>
+      formStore.applicationData && formStore.applicationData.policyAppDto && formStore.applicationData.policyAppDto.contractDate
+        ? reformatDate(formStore.applicationData.policyAppDto.contractDate)
+        : null,
+    );
     const coverPeriod = computed(() => (formStore.productConditionsForm && formStore.productConditionsForm.coverPeriod ? formStore.productConditionsForm.coverPeriod : null));
     const paymentPeriod = computed(() =>
       formStore.productConditionsForm && formStore.productConditionsForm.paymentPeriod && !!formStore.productConditionsForm.paymentPeriod.nameRu
         ? formStore.productConditionsForm.paymentPeriod.nameRu
         : null,
     );
+
+    const hasSum = computed(() => {
+      return true;
+    });
+    const hasPremium = computed(() => {
+      return true;
+    });
+    const hasPolicyNumber = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return true;
+      }
+      return false;
+    });
+    const hasContractDate = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return true;
+      }
+      return false;
+    });
+    const hasCoverPeriod = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return false;
+      }
+      return true;
+    });
+    const hasPayPeriod = computed(() => {
+      if (dataStore.isFinCenter()) {
+        return false;
+      }
+      return true;
+    });
     return {
       // State
       formStore,
@@ -64,8 +106,16 @@ export default defineComponent({
       // Computed
       amount,
       premium,
+      policyNumber,
+      contractDate,
       coverPeriod,
       paymentPeriod,
+      hasSum,
+      hasPremium,
+      hasPolicyNumber,
+      hasContractDate,
+      hasPayPeriod,
+      hasCoverPeriod,
     };
   },
 });

package/components/Input/Datepicker.vue

@@ -9,7 +9,7 @@
     model-type="dd.MM.yyyy"
     position="left"
     menu-class-name="!left-[30vw] md:!left-[70vw] lg:!left-[75vw]"
-    teleport=".v-form"
+    :teleport="teleport"
     :offset="-50"
     :close-on-scroll="true"
     :enable-time-picker="false"
@@ -17,7 +17,7 @@
     select-text="Выбрать"
   >
     <template #trigger>
-      <v-icon icon="mdi mdi-calendar-blank-outline cursor-pointer"></v-icon>
+      <v-icon icon="mdi mdi-calendar-blank-outline cursor-pointer" />
     </template>
   </vue-date-picker>
 </template>
@@ -36,6 +36,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    teleport: {
+      type: String,
+      default: '.v-form',
+    },
   },
 });
 </script>

package/components/Input/FileInput.vue

@@ -12,8 +12,8 @@
     accept=".pdf,.doc,.jpeg,.jpg,.jpg"
     truncate-length="15"
     clear-icon="mdi mdi-close"
-    :label="$t('labels.chooseDoc')"
-  ></v-file-input>
+    :label="$dataStore.t('labels.chooseDoc')"
+  />
 </template>
 
 <script lang="ts">

package/components/Input/FormInput.vue

@@ -20,18 +20,30 @@
     :append-icon="appendIcon ? appendIcon : ''"
     :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
+    :suffix="suffix"
+    @input="$emit('input', $event)"
     @keyup.enter.prevent="submitted"
     @click:append="!props.readonly && $emit('append-out')"
     @click:prepend="!props.readonly && $emit('prepend-out')"
     @click:prepend-inner="!props.readonly && $emit('prepend')"
+    @click:clear="!props.readonly && $emit('on-clear')"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="appendInnerIcon && appendInnerIcon.length" v-slot:append-inner>
-      <v-icon v-if="appendInnerIcon !== 'mdi mdi-calendar-blank-outline'" :icon="appendInnerIcon" @click="!props.readonly && $emit('append')"></v-icon>
-      <base-datepicker v-else :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"></base-datepicker>
+      <v-icon
+        v-if="appendInnerIcon.includes('mdi-calendar-blank-outline') === false"
+        :icon="appendInnerIcon"
+        @click="appendInnerIcon.includes('mdi-magnify') ? $emit('append') : !props.readonly && $emit('append')"
+      />
+      <base-datepicker
+        v-if="appendInnerIcon.includes('mdi-calendar-blank-outline') && !props.readonly"
+        :model-value="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        :teleport="teleport"
+      />
     </template>
     <template v-if="loading" #loader>
-      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate></v-progress-linear>
+      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate />
     </template>
   </v-text-field>
 </template>
@@ -67,6 +79,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    suffix: {
+      type: String,
+      default: '',
+    },
     messages: {
       type: [String, Array<string>],
     },
@@ -110,11 +126,14 @@ export default defineComponent({
     appendInnerIcon: {
       type: String,
     },
+    teleport: {
+      type: String,
+    },
     bgColor: {
       type: String,
     },
   },
-  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out'],
+  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out', 'input', 'on-clear'],
 
   setup(props, { emit }) {
     const submitted = (event: any) => {
@@ -134,9 +153,9 @@ export default defineComponent({
   border: none !important;
   outline: none !important;
 }
-.form-input input {
+/* .form-input input {
   padding-top: 30px;
-}
+} */
 .form-input .v-field {
   box-shadow: none;
   font-size: 14px;
@@ -145,7 +164,6 @@ export default defineComponent({
   top: 20px;
 }
 .form-input .v-field__append-inner {
-  padding-top: 18px;
   padding-right: 6px;
 }
 .form-input .v-field__append-inner i {
@@ -170,4 +188,8 @@ export default defineComponent({
 .form-input .v-field--error {
   border-color: #ff5449;
 }
+.form-input .v-text-field__suffix {
+  padding-top: 30px;
+  font-size: 16px !important;
+}
 </style>

package/components/Input/PanelInput.vue

@@ -21,6 +21,7 @@
     :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
     :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
+    :suffix="suffix"
     @keyup.enter.prevent="submitted"
     @click:control="!props.readonly && $emit('append')"
     @click:clear="(props.readonly ? false : clearable) && $emit('update:modelValue', new Value())"
@@ -31,13 +32,13 @@
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="loading" #loader>
-      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate></v-progress-linear>
+      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate />
     </template>
   </v-text-field>
 </template>
 
 <script lang="ts">
-import { Value } from '@/composables/classes';
+import { Value } from '../../composables/classes';
 
 export default defineComponent({
   name: 'BasePanelInput',
@@ -115,6 +116,10 @@ export default defineComponent({
     bgColor: {
       type: String,
     },
+    suffix: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out', 'clear'],
 

package/components/Input/RoundedInput.vue

@@ -28,7 +28,7 @@
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="loading" #loader>
-      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate></v-progress-linear>
+      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate />
     </template>
   </v-text-field>
 </template>
@@ -117,7 +117,7 @@ export default defineComponent({
 
     return {
       submitted,
-      props
+      props,
     };
   },
 });

package/components/Input/RoundedSelect.vue

@@ -0,0 +1,137 @@
+<template>
+  <v-select
+    class="rounded-select"
+    :model-value="modelValue"
+    :rules="rules"
+    :loading="loading"
+    :placeholder="placeholder"
+    :label="label"
+    :variant="variant"
+    :clear-icon="clearIcon"
+    :color="color"
+    :hint="hint"
+    :clearable="props.readonly ? false : clearable"
+    :disabled="disabled"
+    :readonly="props.readonly"
+    :prepend-icon="prependIcon ? prependIcon : ''"
+    :append-icon="appendIcon ? appendIcon : ''"
+    :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
+    :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
+    :bg-color="bgColor ? bgColor : ''"
+    :items="items"
+    @click:append="!props.readonly && $emit('append-out')"
+    @click:prepend="!props.readonly && $emit('prepend-out')"
+    @click:append-inner="!props.readonly && $emit('append')"
+    @click:prepend-inner="!props.readonly && $emit('prepend')"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template v-if="loading" #loader>
+      <v-progress-linear :active="loading" :color="color" absolute height="1" indeterminate />
+    </template>
+  </v-select>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'BaseRoundedSelect',
+  props: {
+    modelValue: {
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array<any>,
+      default: [],
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    rules: {
+      type: Array<any>,
+      default: [],
+    },
+    variant: {
+      type: String as PropType<InputVariants>,
+      default: 'solo',
+    },
+    color: {
+      type: String,
+      default: '#009c73',
+    },
+    clearIcon: {
+      type: String,
+      default: 'mdi-close',
+    },
+    prependIcon: {
+      type: String,
+    },
+    appendIcon: {
+      type: String,
+    },
+    prependInnerIcon: {
+      type: String,
+    },
+    appendInnerIcon: {
+      type: String,
+    },
+    bgColor: {
+      type: String,
+    },
+  },
+  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out'],
+
+  setup(props, { emit }) {
+    const submitted = (event: any) => {
+      emit('submitted', event);
+    };
+
+    return {
+      submitted,
+      props,
+    };
+  },
+});
+</script>
+
+<style>
+.rounded-select input:focus {
+  border: none !important;
+  outline: none !important;
+}
+.rounded-select .v-label.v-field-label {
+  top: 20px;
+}
+.rounded-select .v-field {
+  border-radius: 8px;
+  border: 1px solid #dadada;
+  box-shadow: none;
+  font-size: 14px;
+}
+.rounded-select .v-field--error {
+  border-color: #ff5449;
+}
+</style>

package/components/Layout/Drawer.vue

@@ -8,11 +8,12 @@
     :disable-resize-watcher="true"
     :disable-route-watcher="true"
   >
-    <base-header :title="panelTitle" :has-back="true" back-icon="mdi-close" class="justify-center" @onBack="closePanel"></base-header>
+    <base-header :title="panelTitle" :has-back="true" back-icon="mdi-close" class="justify-center" @onBack="closePanel" />
     <div v-if="$dataStore.panelAction === null" class="flex flex-col" id="panel-actions">
       <slot></slot>
     </div>
-    <base-panel-handler v-else></base-panel-handler>
+    <base-panel-handler v-else />
+    <slot name="panel"></slot>
   </v-navigation-drawer>
 </template>
 

package/components/Layout/Header.vue

@@ -1,8 +1,14 @@
 <template>
   <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$libStyles.blueBgLight, $libStyles.textSimple]">
-    <i v-if="hasBack" @click="$emit('onBack')" class="absolute left-5 mdi text-xl cursor-pointer" :class="[backIcon]"></i>
+    <i v-if="hasBack" @click="$emit('onBack')" class="absolute left-5 mdi text-xl cursor-pointer transition-all" :class="[backIcon, backIconAnim]"></i>
     <span class="mx-10">{{ title }}</span>
-    <i v-if="hasMore" @click="$emit('onMore')" class="mdi absolute right-5 text-xl cursor-pointer" :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '']"> </i>
+    <i
+      v-if="hasMore"
+      @click="$emit('onMore')"
+      class="mdi absolute right-5 text-xl cursor-pointer transition-all"
+      :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '', moreIconAnim]"
+    >
+    </i>
   </header>
 </template>
 
@@ -35,14 +41,44 @@ export default defineComponent({
     },
   },
   emits: ['onBack', 'onMore'],
-  setup() {
+  setup(props) {
     const dataStore = useDataStore();
 
     const onClickOutside = () => {
       dataStore.settings.open = false;
     };
 
-    return { onClickOutside };
+    const backIconAnim = computed(() => {
+      const icon = props.backIcon;
+      switch (icon) {
+        case 'mdi-arrow-left':
+        case 'mdi-account-arrow-left':
+          return 'hover:-translate-x-[2px]';
+        case 'mdi-close':
+          return 'hover:scale-110';
+        default:
+          return '';
+      }
+    });
+
+    const moreIconAnim = computed(() => {
+      const icon = props.moreIcon;
+      switch (icon) {
+        case 'mdi-cog-outline':
+          return 'hover:rotate-[30deg]';
+        default:
+          return '';
+      }
+    });
+
+    return {
+      // Computed
+      backIconAnim,
+      moreIconAnim,
+
+      // Functions
+      onClickOutside,
+    };
   },
 });
 </script>

package/components/Layout/Loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-progress-circular :size="size" :width="width" :indeterminate="indeterminate" :color="color" :bg-color="bgColor"></v-progress-circular>
+  <v-progress-circular :size="size" :width="width" :indeterminate="indeterminate" :color="color" :bg-color="bgColor" />
 </template>
 
 <script lang="ts">