hl-core 0.0.8 → 0.0.9-beta.10

package/components/Input/RoundedSelect.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-select
+    class="rounded-select"
+    :model-value="modelValue"
+    :rules="rules"
+    :loading="loading"
+    :placeholder="placeholder"
+    :label="label"
+    :variant="variant"
+    :density="(density as any)"
+    :menu-icon="menuIcon"
+    :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',
+    },
+    density: {
+      type: String,
+      default: 'compact',
+    },
+    color: {
+      type: String,
+      default: '#009c73',
+    },
+    menuIcon: {
+      type: String,
+      default: 'mdi-chevron-down',
+    },
+    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-input {
+  flex: unset !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,10 +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>
-    <div class="flex flex-col" :id="$dataStore.panelAction === null ? 'panel-actions' : ''">
+    <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 @task="$emit('task', $event)" />
+    <slot name="panel"></slot>
   </v-navigation-drawer>
 </template>
 
@@ -28,6 +30,7 @@ export default defineComponent({
       default: 'panel',
     },
   },
+  emits: ['task'],
   setup(props) {
     const dataStore = useDataStore();
 

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>
+  <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 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">

package/components/Layout/SettingsPanel.vue

@@ -1,16 +1,24 @@
 <template>
   <base-drawer :panel-title="$dataStore.menu.title" which-panel="settings">
     <base-panel-item>
-      <v-btn size="x-small" icon="mdi-minus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('decrease')"></v-btn>
+      <v-btn size="x-small" icon="mdi-minus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('decrease')" />
       Шрифт
-      <v-btn size="x-small" icon="mdi-plus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('increase')"></v-btn>
+      <v-btn size="x-small" icon="mdi-plus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('increase')" />
     </base-panel-item>
     <base-panel-item>
-      <v-text-field v-model="$dataStore.user.fullName" :readonly="true" hide-details variant="plain" :label="$dataStore.user.roles?.join(', ')"></v-text-field>
+      <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 && $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 && $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>
     <base-panel-item
-      v-for="panelItem of dataStore.settings.items.filter(i => (typeof i.show === 'boolean' ? i.show : true))"
+      v-for="panelItem of dataStore.settings.items.filter(i => $dataStore.filters.show(i))"
       :key="panelItem.title!"
       class="cursor-pointer"
       @click="panelItem.action ? panelItem.action() : null"
@@ -18,23 +26,39 @@
       {{ panelItem.title }}
       <i v-if="panelItem.icon" class="mdi text-xl text-[#A0B3D8]" :class="[panelItem.icon]"></i>
     </base-panel-item>
-    <base-panel-item @click="dialog = true" class="cursor-pointer">
-      Выход
-      <i class="mdi mdi-logout text-xl text-[#A0B3D8]"></i>
+    <base-panel-item v-if="hasHistory" @click="openHistory" class="cursor-pointer">
+      {{ $dataStore.t('historyStatementsAndStatuses') }}
+      <i class="mdi mdi-history text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
-
-    <base-dialog v-model="dialog" :title="$t('dialog.exit')" :subtitle="$t('dialog.dataWillClear')" actions="default" @yes="logoutUser" @no="dialog = false"> </base-dialog
-  ></base-drawer>
+    <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>
+    <div v-if="$dataStore.settings.open && 'version' in pkg && pkg.version" class="absolute bottom-2 w-full flex items-center justify-center opacity-30 text-sm">
+      <p>{{ pkg.version }}</p>
+    </div>
+    <base-dialog
+      v-model="dialogSignOut"
+      :title="$dataStore.t('dialog.exit')"
+      :subtitle="$dataStore.t('dialog.dataWillClear')"
+      actions="default"
+      @yes="logoutUser"
+      @no="dialogSignOut = false"
+    />
+  </base-drawer>
 </template>
 
 <script lang="ts" setup>
-const dialog = ref(false);
+import { changeBridge } from '#imports';
+
+import pkg from '../../package.json';
+const dialogSignOut = ref(false);
 const dataStore = useDataStore();
 
 const handleFontSize = (action: 'increase' | 'decrease') => {
   if (action === 'increase' && dataStore.fontSize < 24) dataStore.fontSize += 2;
   if (action === 'decrease' && dataStore.fontSize > 14) dataStore.fontSize -= 2;
-  if (dataStore.isEFO) {
+  if (dataStore.isBridge) {
     dataStore.sendToChild(constants.postActions.font, dataStore.fontSize);
   } else {
     dataStore.sendToParent(constants.postActions.font, dataStore.fontSize);
@@ -42,7 +66,17 @@ const handleFontSize = (action: 'increase' | 'decrease') => {
 };
 
 const logoutUser = async () => {
-  dialog.value = false;
+  dialogSignOut.value = false;
   await dataStore.logoutUser();
 };
+
+const isProduction = import.meta.env.VITE_MODE === 'production';
+
+const hasHistory = computed(() => {
+  return !dataStore.isLKA;
+});
+
+const openHistory = async () => {
+  dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge ? '' : dataStore.product);
+};
 </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

@@ -0,0 +1,30 @@
+<template>
+  <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="[$styles.textSimple]" :menu-item="item" @click="$emit(item.id)" />
+      </div>
+    </base-form-text-section>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { MenuItem } from '../../composables/classes';
+
+export default defineComponent({
+  props: {
+    items: {
+      type: Array as PropType<MenuItem[]>,
+      default: [],
+    },
+    activator: {
+      type: String,
+      default: 'parent',
+    },
+    top: {
+      type: Number,
+      default: 10,
+    },
+  },
+});
+</script>

package/components/Menu/MenuNav.vue

@@ -6,21 +6,21 @@
       :has-back="hasBack"
       :back-icon="backIcon"
       :has-more="hasMore"
-      :hide-more-on-lg="hideMoreOnLg"
+      :hide-more-on-lg="hideOnLg"
       :more-icon="moreIcon"
       @onBack="$emit('onBack')"
       @onMore="$emit('onMore')"
-    ></base-header>
+    />
     <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]">
-          <div v-for="(item, index) of $dataStore.menuItems.filter(i => (typeof i.show === 'boolean' ? i.show : true))" :key="index">
+          <div v-for="(item, index) of $dataStore.menuItems.filter(i => $dataStore.filters.show(i))" :key="index">
             <base-menu-nav-item
               :menu-item="item"
               :selected="!!selected.title && !!item.title && selected.title === item.title"
-              :disabled="typeof item.disabled === 'boolean' ? item.disabled : false"
+              :disabled="$dataStore.filters.disabled(item)"
               @click.left="pickItem(item)"
               @click.middle="openTab(item)"
             >
@@ -32,10 +32,17 @@
       <slot name="end"></slot>
       <slot name="actions"></slot>
       <base-fade-transition>
-        <div v-if="$dataStore.buttons && $dataStore.buttons.length" class="flex flex-col gap-[10px] justify-self-end absolute bottom-5 lg:bottom-[30%] w-full pr-4">
+        <div v-if="$dataStore.buttons && $dataStore.buttons.length" class="flex flex-col gap-[10px] justify-self-end absolute bottom-5 lg:bottom-[10%] w-full pr-4">
           <div v-for="(item, index) of $dataStore.buttons" :key="index">
             <transition enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster">
-              <base-btn v-if="'show' in item ? item.show : true" :text="item.title!" :btn="item.color" :disabled="item.disabled" @click="item.action"> </base-btn>
+              <base-btn
+                v-if="$dataStore.filters.show(item)"
+                :text="item.title!"
+                :btn="item.color"
+                :disabled="item.disabled"
+                :loading="$dataStore.isButtonsLoading"
+                @click="item.action"
+              />
             </transition>
           </div></div
       ></base-fade-transition>
@@ -44,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { MenuItem } from '@/composables/classes';
+import { MenuItem } from '../../composables/classes';
 import { RouteLocationNormalized } from 'vue-router';
 
 export default defineComponent({
@@ -69,10 +76,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    hideMoreOnLg: {
-      type: Boolean,
-      default: false,
-    },
     moreIcon: {
       type: String,
       default: 'mdi-cog-outline',
@@ -84,7 +87,7 @@ export default defineComponent({
     const router = useRouter();
 
     const pickItem = async (item: MenuItem) => {
-      if (item.title !== dataStore.menu.selectedItem.title && (typeof item.disabled === 'boolean' ? !item.disabled : true)) {
+      if (item.title !== dataStore.menu.selectedItem.title && !dataStore.filters.disabled(item)) {
         if (typeof item.link === 'object') {
           if (item.link && 'name' in item.link) {
             await router.push(item.link as RouteLocationNormalized);
@@ -102,7 +105,20 @@ export default defineComponent({
       }
     };
 
-    return { pickItem, openTab };
+    const hideOnLg = computed(() => {
+      switch (router.currentRoute.value.name) {
+        case 'Insurance-Product':
+        case 'Menu':
+        case 'History':
+        case 'Main':
+        case 'taskId':
+          return false;
+        default:
+          return true;
+      }
+    });
+
+    return { pickItem, openTab, hideOnLg };
   },
 });
 </script>

package/components/Menu/MenuNavItem.vue

@@ -1,22 +1,25 @@
 <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"
+    class="h-[60px] flex items-center justify-between hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all group"
   >
     <span>{{ menuItem.title }}</span>
-    <i v-if="menuItem.icon" class="mdi text-xl pr-4" :class="[menuItem.icon]"></i>
+    <div class="flex items-center">
+      <i v-if="menuItem.icon" class="mdi text-xl pr-4" :class="[menuItem.icon]"></i>
+      <base-chip :chip="menuItem.chip" />
+    </div>
     <v-tooltip v-if="menuItem.description" activator="parent" location="bottom">{{ menuItem.description }}</v-tooltip>
   </div>
 </template>
 
 <script lang="ts">
-import { MenuItem } from '@/composables/classes';
+import { MenuItem } from '../../composables/classes';
 
 export default defineComponent({
   props: {