hl-core 0.0.9-beta.3 → 0.0.9-beta.4

package/components/Button/Btn.vue

@@ -8,7 +8,7 @@
       disabled ? 'disabled' : '',
       classes,
       btn,
-      $libStyles[`btnH${$capitalize(size)}` as keyof typeof $libStyles],
+      $styles[`btnH${$capitalize(size)}` as keyof typeof $styles],
     ]"
   >
     <base-loader v-if="loading" :size="24" color="#FFF" bg-color="" :width="2" />

package/components/Complex/ContentBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full p-4" :class="[$libStyles.blueBgLight, $libStyles.rounded]">
+  <div class="w-full p-4" :class="[$styles.blueBgLight, $styles.rounded]">
     <slot></slot>
   </div>
 </template>

package/components/Complex/MessageBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-left p-6 mb-4" :class="[color, $libStyles.rounded, $libStyles.textTitle]">
+  <div class="text-left p-6 mb-4" :class="[color, $styles.rounded, $styles.textTitle]">
     <v-icon :icon="icon" class="mr-4"></v-icon>
     {{ text }}
   </div>

package/components/Complex/Page.vue

@@ -1,6 +1,7 @@
 <template>
-  <base-content class="flex-col" :class="[$libStyles.whiteBg]">
+  <base-content class="flex-col" :class="[$styles.whiteBg]">
     <base-header
+      v-if="customHeader === false"
       class="justify-center lg:pl-14"
       :has-back="hasBack"
       :back-icon="backIcon"
@@ -10,6 +11,7 @@
       @onBack="$emit('onBack')"
       @onMore="$emit('onMore')"
     />
+    <slot name="header"></slot>
     <slot></slot>
   </base-content>
 </template>
@@ -37,6 +39,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    customHeader: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['onBack', 'onMore'],
 });

package/components/Complex/WhiteBlock.vue

@@ -0,0 +1,7 @@
+<template>
+  <div :class="[$styles.rounded, $styles.whiteBg]" class="p-4 shadow">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

package/components/Dialog/Dialog.vue

@@ -11,8 +11,8 @@
         {{ subtitle }}
       </v-card-subtitle>
       <v-card-actions class="gap-[16px] m-2">
-        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.yes')" :btn="$libStyles.blueBtn" @click="$emit('yes')" />
-        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.no')" :btn="$libStyles.blueBtn" @click="$emit('no')" />
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.yes')" :btn="$styles.blueBtn" @click="$emit('yes')" />
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$dataStore.t('confirm.no')" :btn="$styles.blueBtn" @click="$emit('no')" />
         <slot v-if="actions !== 'default'" name="actions"></slot>
       </v-card-actions>
     </v-card>

package/components/Dialog/FamilyDialog.vue

@@ -2,20 +2,20 @@
   <v-list lines="two" v-if="formStore.birthInfos && formStore.birthInfos.length" class="w-full !py-0">
     <v-list-item
       @click="$emit('reset')"
-      :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+      :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
     >
-      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{ $dataStore.t('form.notChosen') }}</v-list-item-title>
+      <v-list-item-title :class="[$styles.greenText, $styles.textTitle]">{{ $dataStore.t('form.notChosen') }}</v-list-item-title>
     </v-list-item>
     <v-list-item
       v-for="familyMember of formStore.birthInfos"
       :key="familyMember.childIIN"
       @click="$emit('selectFamilyMember', familyMember)"
-      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
     >
-      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{
+      <v-list-item-title :class="[$styles.greenText, $styles.textTitle]">{{
         `${familyMember.childSurName} ${familyMember.childName} ${familyMember.childPatronymic ? familyMember.childPatronymic : ''}`
       }}</v-list-item-title>
-      <v-list-item-subtitle :class="[$libStyles.textSimple]"
+      <v-list-item-subtitle :class="[$styles.textSimple]"
         ><span>{{ `${$dataStore.t('form.iin')}:` }}</span
         >{{ ` ${$reformatIin(familyMember.childIIN!)}` }}</v-list-item-subtitle
       >

package/components/Form/FormBlock.vue

@@ -1,29 +1,29 @@
 <template>
-  <div class="pt-3 rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
+  <div class="pt-3 rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
     <div class="ml-5">
       <div class="flex justify-between mr-5">
-        <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
+        <p :class="[$styles.textTitle, $styles.greenText]">{{ title }}</p>
         <div
           v-if="isMultiple && more && !isShort && isActionsAvailable"
-          :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple, disabled ? $libStyles.disabled : 'cursor-pointer']"
+          :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
           class="lg:flex transition-all rounded-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90 w-[120px]"
           @click="!disabled && memberStore.addMember(whichForm)"
         >
           {{ $dataStore.t('buttons.add') }}
         </div>
       </div>
-      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+      <p v-if="!!subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ subtitle }}</p>
     </div>
     <div
       class="ml-5 mt-6 grid auto-rows-fr items-center"
       :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2 mb-6' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 ']"
     >
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $dataStore.t('form.fullName') }}</span>
-      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $dataStore.t('form.iin') }}</span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('form.gender') }}</span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium"> {{ $dataStore.t('form.birthDate') }} </span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('form.Country') }} </span>
-      <span v-if="!isShort" :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('code') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('form.fullName') }}</span>
+      <span :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('form.iin') }}</span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('form.gender') }}</span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium"> {{ $dataStore.t('form.birthDate') }} </span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('form.Country') }} </span>
+      <span v-if="!isShort" :class="[$styles.textSimple]" class="font-medium hidden lg:block"> {{ $dataStore.t('code') }}</span>
     </div>
     <div v-if="isMultiple && multipleMember !== null" class="ml-5 flex flex-col" :class="[isShort ? 'mb-6' : '']">
       <div
@@ -32,16 +32,16 @@
         class="grid auto-rows-fr items-center relative"
         :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
       >
-        <span :class="[getMemberInfo(each).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
-        <span :class="[getMemberInfo(each).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
-        <span v-if="!isShort" :class="[getMemberInfo(each).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
+        <span :class="[getMemberInfo(each).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $styles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
+        <span v-if="!isShort" :class="[getMemberInfo(each).sectorCode === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
         <div
           v-if="!isShort"
           class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end"
-          :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
+          :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
           @click="!disabled && $emit('onMore', { whichForm, index })"
         >
           <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>
@@ -53,22 +53,20 @@
       class="ml-5 grid auto-rows-fr items-center relative"
       :class="[isShort ? 'grid-cols-2 md:gap-5 md:grid-cols-2 lg:grid-cols-2' : 'grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7']"
     >
-      <span :class="[getMemberInfo(singleMember).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(singleMember).fullName }}</span>
-      <span :class="[getMemberInfo(singleMember).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(singleMember).iin }}</span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block"
-        >{{ getMemberInfo(singleMember).gender }}
-      </span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(singleMember).birthDate }} </span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+      <span :class="[getMemberInfo(singleMember).fullName === null && $styles.emptyBlockCol]">{{ getMemberInfo(singleMember).fullName }}</span>
+      <span :class="[getMemberInfo(singleMember).iin === null && $styles.emptyBlockCol]">{{ getMemberInfo(singleMember).iin }}</span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).gender === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(singleMember).gender }} </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthDate === null && $styles.emptyBlockCol]"> {{ getMemberInfo(singleMember).birthDate }} </span>
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).birthPlace === null && $styles.emptyBlockCol]" class="hidden lg:block">
         {{ getMemberInfo(singleMember).birthPlace }}
       </span>
-      <span v-if="!isShort" :class="[getMemberInfo(singleMember).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+      <span v-if="!isShort" :class="[getMemberInfo(singleMember).sectorCode === null && $styles.emptyBlockCol]" class="hidden lg:block">
         {{ getMemberInfo(singleMember).sectorCode }}
       </span>
       <div
         v-if="!isShort"
         class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end"
-        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
+        :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
         @click="!disabled && $emit('onMore', { whichForm })"
       >
         <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>
@@ -76,7 +74,7 @@
     </div>
     <div
       v-if="isMultiple && more && !isShort && isActionsAvailable"
-      :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple, disabled ? $libStyles.disabled : 'cursor-pointer']"
+      :class="[$styles.blueBg, $styles.whiteText, $styles.textSimple, disabled ? $styles.disabled : 'cursor-pointer']"
       class="lg:hidden transition-all rounded-b-lg h-[36px] flex items-center font-medium justify-center opacity-50 hover:opacity-90"
       @click="!disabled && memberStore.addMember(whichForm)"
     >

package/components/Form/FormSection.vue

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

package/components/Form/FormTextSection.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col justify-between rounded-lg" :class="[$libStyles.whiteBg]">
-    <span v-if="title" class="p-4" :class="[$libStyles.textTitle]">{{ title }}</span>
-    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$libStyles.textSimple]">{{ subtitle }}</span>
+  <div class="flex flex-col justify-between rounded-lg" :class="[$styles.whiteBg]">
+    <span v-if="title" class="p-4" :class="[$styles.textTitle]">{{ title }}</span>
+    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$styles.textSimple]">{{ subtitle }}</span>
     <slot></slot>
   </div>
 </template>

package/components/Form/FormToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-4"
-    :class="[$libStyles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
+    :class="[$styles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
   >
     <v-switch
       class="base-toggle"
@@ -14,8 +14,8 @@
       hide-details
       :disabled="disabled"
     />
-    <p :class="[$libStyles.textSimple]">{{ `${title}` }}</p>
-    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
+    <p :class="[$styles.textSimple]">{{ `${title}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $styles.greenText : '', $styles.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="rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
     <div class="mt-3 ml-5">
-      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ $dataStore.t('form.attachManager') }}</p>
+      <p :class="[$styles.textTitle, $styles.greenText]">{{ $dataStore.t('form.attachManager') }}</p>
     </div>
     <v-form ref="vForm" class="flex flex-col mt-1">
       <base-panel-input
@@ -50,7 +50,7 @@
       />
     </v-form>
     <Teleport v-if="isPanelOpen" to="#panel-actions">
-      <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+      <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
         <base-rounded-input
           v-model.trim="searchQuery"
           :label="$dataStore.t('labels.search')"

package/components/Form/ProductConditionsBlock.vue

@@ -1,31 +1,31 @@
 <template>
-  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg, disabled && $libStyles.disabled]">
+  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$styles.whiteBg, disabled && $styles.disabled]">
     <div>
-      <p :class="[$libStyles.textTitle, $libStyles.greenText]">
+      <p :class="[$styles.textTitle, $styles.greenText]">
         {{ $dataStore.t('productConditions') }}
       </p>
-      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+      <p v-if="!!subtitle" :class="[$styles.greyText, $styles.textSimple]">{{ subtitle }}</p>
     </div>
     <div class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
-      <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>
+      <span v-if="hasSum" :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('productConditionsForm.requestedSumInsured') }}</span>
+      <span v-if="hasPremium" :class="[$styles.textSimple]" class="font-medium">{{ $dataStore.t('productConditionsForm.insurancePremiumPerMonth') }}</span>
+      <span v-if="hasPolicyNumber" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('buttons.InsuranceContract') }}</span>
+      <span v-if="hasContractDate" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.contractDate') }}</span>
+      <span v-if="hasCoverPeriod" :class="[$styles.textSimple]" class="font-medium hidden lg:block">{{ $dataStore.t('productConditionsForm.coverPeriod') }}</span>
+      <span v-if="hasPayPeriod" :class="[$styles.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 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">
+      <span v-if="hasSum" :class="[amount === null && $styles.emptyBlockCol]">{{ amount }} </span>
+      <span v-if="hasPremium" :class="[premium === null && $styles.emptyBlockCol]"> {{ premium }}</span>
+      <span v-if="hasPolicyNumber" :class="[policyNumber === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ policyNumber }}</span>
+      <span v-if="hasContractDate" :class="[policyNumber === null && $styles.emptyBlockCol]" class="hidden lg:block"> {{ contractDate }}</span>
+      <span v-if="hasCoverPeriod" :class="[coverPeriod === null && $styles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
+      <span v-if="hasPayPeriod" :class="[paymentPeriod === null && $styles.emptyBlockCol]" class="hidden lg:block">
         {{ paymentPeriod }}
       </span>
       <div
         class="rounded-br-lg transition-all h-[70px] w-[60px] relative place-self-end"
-        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover, disabled ? $libStyles.disabled : 'cursor-pointer']"
+        :class="[$styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : 'cursor-pointer']"
         @click="!disabled && $emit('onMore', { whichForm: 'productConditions' })"
       >
         <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"></i>

package/components/Input/EmptyFormField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-[60px] bg-white rounded border-b-[1px] border-b-[#f3f6fc] flex items-center pl-4" :class="[$libStyles.textTitle]">
+  <div class="h-[60px] bg-white rounded border-b-[1px] border-b-[#f3f6fc] flex items-center pl-4" :class="[$styles.textTitle]">
     <slot></slot>
   </div>
 </template>

package/components/Layout/Header.vue

@@ -1,5 +1,5 @@
 <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]">
+  <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$styles.blueBgLight, $styles.textSimple]">
     <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

package/components/Layout/SettingsPanel.vue

@@ -9,11 +9,11 @@
       <v-text-field v-model="$dataStore.user.fullName" :readonly="true" hide-details variant="plain" :label="$dataStore.user.roles?.join(', ')" />
       <i class="mdi mdi-account-outline text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
-    <base-panel-item v-if="$dataStore.isEFO && !isProduction" @click="changeBridge('lka')" class="cursor-pointer">
+    <base-panel-item v-if="$dataStore.isEFO && !isProduction && $dataStore.accessToken" @click="changeBridge('lka', $dataStore.accessToken)" class="cursor-pointer">
       {{ $dataStore.t('labels.lkaLong') }}
       <i class="mdi mdi-chevron-right text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
-    <base-panel-item v-if="$dataStore.isLKA" @click="changeBridge('efo')" class="cursor-pointer">
+    <base-panel-item v-if="$dataStore.isLKA && $dataStore.accessToken" @click="changeBridge('efo', $dataStore.accessToken)" class="cursor-pointer">
       {{ $dataStore.t('labels.efoLong') }}
       <i class="mdi mdi-web text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
@@ -30,7 +30,7 @@
       {{ $dataStore.t('historyStatementsAndStatuses') }}
       <i class="mdi mdi-history text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
-    <base-panel-item @click="dialogSignOut = true" class="cursor-pointer" :class="[$libStyles.redText]">
+    <base-panel-item @click="dialogSignOut = true" class="cursor-pointer" :class="[$styles.redText]">
       {{ $dataStore.t('buttons.logout') }}
       <i class="mdi mdi-logout text-xl"></i>
     </base-panel-item>
@@ -49,6 +49,8 @@
 </template>
 
 <script lang="ts" setup>
+import { changeBridge } from '#imports';
+
 import pkg from '../../package.json';
 const dialogSignOut = ref(false);
 const dataStore = useDataStore();
@@ -77,10 +79,4 @@ const hasHistory = computed(() => {
 const openHistory = async () => {
   dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge ? '' : dataStore.product);
 };
-
-const changeBridge = async (toBridge: 'efo' | 'lka') => {
-  const bridgeUrl = import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string;
-  if (!bridgeUrl) return;
-  window.open(`${bridgeUrl}/#/Token?token=${dataStore.accessToken}`, '_blank');
-};
 </script>

package/components/List/ListEmpty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-[1px] rounded-lg h-[80px] mx-[10px] mt-[14px] flex place-content-center" :class="[$libStyles.blueBgLight, $libStyles.textTitle]">
+  <div class="border-[1px] rounded-lg h-[80px] mx-[10px] mt-[14px] flex place-content-center" :class="[$styles.blueBgLight, $styles.textTitle]">
     <div class="flex justify-center items-center font-medium gap-2 opacity-40">
       {{ text }}
       <i class="text-2xl mdi" :class="[icon ? icon : 'mdi-database-off-outline']"></i>

package/components/Menu/MenuHover.vue

@@ -2,7 +2,7 @@
   <v-menu v-if="items.length" :activator="activator" location="bottom center" :offset="top" transition="scale-transition">
     <base-form-text-section class="p-4 border-[1px] flex flex-col gap-3 elevation-3 w-[250px]">
       <div v-for="item of items.filter(i => $dataStore.filters.show(i))" :key="item.id">
-        <base-menu-nav-item :class="[$libStyles.textSimple]" :menu-item="item" @click="$emit(item.id)" />
+        <base-menu-nav-item :class="[$styles.textSimple]" :menu-item="item" @click="$emit(item.id)" />
       </div>
     </base-form-text-section>
   </v-menu>

package/components/Menu/MenuNav.vue

@@ -12,7 +12,7 @@
       @onMore="$emit('onMore')"
     />
     <slot key="slot-content" name="content"></slot>
-    <section key="main" :class="[$libStyles.flexColNav]">
+    <section key="main" :class="[$styles.flexColNav]">
       <slot name="start"></slot>
       <base-fade-transition>
         <div v-if="$dataStore.menuItems && $dataStore.menuItems.length" class="flex flex-col gap-[10px]">

package/components/Menu/MenuNavItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     :class="[
-      selected ? $libStyles.blueBg : $libStyles.blueBgLight,
-      selected ? $libStyles.whiteText : $libStyles.blackText,
-      $libStyles.rounded,
-      $libStyles.textSimple,
+      selected ? $styles.blueBg : $styles.blueBgLight,
+      selected ? $styles.whiteText : $styles.blackText,
+      $styles.rounded,
+      $styles.textSimple,
       disabled ? 'cursor-not-allowed opacity-50' : '',
     ]"
     class="h-[60px] flex items-center justify-between hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all group"

package/components/Pages/Anketa.vue

@@ -1,7 +1,7 @@
 <template>
   <base-fade-transition>
     <section v-if="firstQuestionList && firstQuestionList.length && !firstPanel && !secondPanel" class="flex flex-col">
-      <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
+      <section :class="[$styles.blueBgLight, $styles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
         <base-form-toggle
           v-model="answerToAll"
           :title="$dataStore.t('questionnaireType.answerAllNo')"
@@ -13,7 +13,7 @@
       <v-form ref="vForm" class="max-h-[70vh] overflow-y-scroll" @submit="submitForm">
         <section
           v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'N').length"
-          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          :class="[$styles.blueBgLight, $styles.rounded]"
           class="mx-[10px] p-4 flex flex-col gap-4"
         >
           <base-form-input
@@ -28,21 +28,21 @@
         </section>
         <section
           v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'Y').length"
-          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          :class="[$styles.blueBgLight, $styles.rounded]"
           class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
         >
           <base-form-text-section v-for="(question, index) in firstQuestionList.filter(i => i.first.definedAnswers === 'Y')" :key="index">
             <base-fade-transition>
               <div
                 v-if="question.first.answerName === 'Да' && secondQuestionList"
-                :class="[$libStyles.greenBg, $libStyles.whiteText, $libStyles.textSimple]"
+                :class="[$styles.greenBg, $styles.whiteText, $styles.textSimple]"
                 class="rounded-t-lg pl-6 py-1 cursor-pointer"
                 @click="openFirstPanel(question)"
               >
                 {{ $dataStore.t('questionnaireType.pleaseAnswer', { text: secondQuestionList.length }) }}
               </div>
             </base-fade-transition>
-            <span :class="[$libStyles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
+            <span :class="[$styles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
               {{ question.first.name }}
               <base-fade-transition>
                 <i
@@ -52,11 +52,11 @@
                 ></i>
               </base-fade-transition>
             </span>
-            <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$libStyles.textSimple]">
+            <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$styles.textSimple]">
               <v-radio-group
                 v-model="question.first.answerName"
                 class="anketa-radio"
-                :true-icon="`mdi-radiobox-marked ${$libStyles.greenText}`"
+                :true-icon="`mdi-radiobox-marked ${$styles.greenText}`"
                 false-icon="mdi-radiobox-blank text-[#636363]"
                 :rules="$rules.required"
                 :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
@@ -86,13 +86,8 @@
         secondPanel = false;
       "
     />
-    <section
-      ref="firstPanelSection"
-      v-if="secondQuestionList && secondQuestionList.length && firstPanel"
-      class="flex flex-col px-[10px] pb-[14px]"
-      :class="[$libStyles.scrollPage]"
-    >
-      <section v-if="currentQuestion" :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4">
+    <section ref="firstPanelSection" v-if="secondQuestionList && secondQuestionList.length && firstPanel" class="flex flex-col px-[10px] pb-[14px]" :class="[$styles.scrollPage]">
+      <section v-if="currentQuestion" :class="[$styles.blueBgLight, $styles.rounded]" class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4">
         <base-form-text-section v-for="question in currentQuestion.second" :title="question.name" :key="question.name">
           <base-form-input
             v-if="question.definedAnswers === 'N'"
@@ -101,7 +96,7 @@
             placeholder="Введите текст"
             :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
           />
-          <span v-else class="flex items-center justify-between p-4 cursor-pointer" :class="[$libStyles.textTitle, $libStyles.greenText]" @click="openSecondPanel(question)">
+          <span v-else class="flex items-center justify-between p-4 cursor-pointer" :class="[$styles.textTitle, $styles.greenText]" @click="openSecondPanel(question)">
             {{ question.answerName ? question.answerName : 'Выбрать вариант ответа' }}
             <i class="mdi mdi-chevron-right text-[28px]"></i>
           </span>
@@ -110,7 +105,7 @@
     </section>
   </base-fade-transition>
   <Teleport v-if="secondPanel" to="#panel-actions">
-    <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+    <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
       <base-rounded-input v-model="searchQuery" :label="$dataStore.t('labels.search')" class="w-full p-2" :hide-details="true" />
       <div v-if="$dataStore.questionRefs && $dataStore.questionRefs.length && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
         <base-panel-select-item

package/components/Pages/Auth.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="flex h-full" :class="$libStyles.blueBgLight">
+  <section class="flex h-full" :class="$styles.blueBgLight">
     <!-- @vue-ignore -->
     <aside :class="{ '!hidden': !$display().lgAndUp.value }" class="w-full lg:w-1/4 bg-white flex flex-col justify-between border-r-2 relative px-8">
       <img draggable="false" class="w-[50%] mt-8" src="~/assets/auth-logo.svg" />
@@ -21,7 +21,7 @@
       <img :class="{ '!block': !$display().lgAndUp.value }" draggable="false" class="hidden w-2/4 sm:w-1/3 mb-10 self-center" src="~/assets/auth-logo.svg" />
       <div class="flex flex-col items-center mb-8 text-center">
         <h1 class="text-[28px] font-medium mb-1">{{ $dataStore.t('labels.welcomeHL') }}</h1>
-        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.needAuth') }}</span>
+        <span :class="[$styles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.needAuth') }}</span>
       </div>
       <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
         <base-rounded-input class="mb-1" v-model.trim="login" :rules="$rules.required" :loading="authLoading" :placeholder="$dataStore.t('buttons.userLogin')" type="text" />
@@ -35,19 +35,19 @@
           @append="showPassword = !showPassword"
           :type="showPassword ? ('' as InputTypes) : 'password'"
         />
-        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = false">{{
+        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$styles.textSimple, $styles.greyTextDark]" @click="isLogin = false">{{
           $dataStore.t('labels.resetPassword')
         }}</span>
-        <base-btn :text="$dataStore.t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm" />
+        <base-btn :text="$dataStore.t('buttons.login')" :disabled="authLoading" :btn="$styles.greenBtn" @click="submitAuthForm" />
       </v-form>
     </section>
     <section v-if="isLogin === false" class="w-full lg:w-3/4 flex flex-col justify-center items-center">
       <div class="flex flex-col items-center mb-4">
         <h1 class="text-[28px] font-medium mb-1">{{ $dataStore.t('labels.resetPassword') }}</h1>
-        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.resetType') }}</span>
+        <span :class="[$styles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.resetType') }}</span>
       </div>
-      <div class="p-[2px] mb-8 rounded-[12px] border-[1px] w-2/3 lg:w-[25vw]" :class="[$libStyles.whiteBg]">
-        <v-tabs v-model="resetPasswordType" density="compact" slider-color="#009c73" class="w-full base-reset-password rounded-[12px]" :class="[$libStyles.whiteBg]">
+      <div class="p-[2px] mb-8 rounded-[12px] border-[1px] w-2/3 lg:w-[25vw]" :class="[$styles.whiteBg]">
+        <v-tabs v-model="resetPasswordType" density="compact" slider-color="#009c73" class="w-full base-reset-password rounded-[12px]" :class="[$styles.whiteBg]">
           <v-tab :ripple="false" value="phone"> {{ $dataStore.t('form.phoneNumber') }} </v-tab>
           <v-tab :ripple="false" value="email"> {{ $dataStore.t('form.email') }} </v-tab>
         </v-tabs>
@@ -70,8 +70,8 @@
           :placeholder="$dataStore.t('form.email')"
           type="text"
         />
-        <span class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = true">{{ $dataStore.t('buttons.login') }}</span>
-        <base-btn :text="$dataStore.t('buttons.reset')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm" />
+        <span class="inline-block w-full text-end mb-4" :class="[$styles.textSimple, $styles.greyTextDark]" @click="isLogin = true">{{ $dataStore.t('buttons.login') }}</span>
+        <base-btn :text="$dataStore.t('buttons.reset')" :disabled="authLoading" :btn="$styles.greenBtn" @click="submitAuthForm" />
       </v-form>
     </section>
   </section>