hl-core 0.0.8 → 0.0.9-beta.2

package/components/Input/Datepicker.vue

@@ -0,0 +1,45 @@
+<template>
+  <vue-date-picker
+    :model-value="modelValue"
+    :clearable="false"
+    :disabled="disabled"
+    :reaonly="readonly"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    locale="ru"
+    model-type="dd.MM.yyyy"
+    position="left"
+    menu-class-name="!left-[30vw] md:!left-[70vw] lg:!left-[75vw]"
+    :teleport="teleport"
+    :offset="-50"
+    :close-on-scroll="true"
+    :enable-time-picker="false"
+    cancel-text="Отменить"
+    select-text="Выбрать"
+  >
+    <template #trigger>
+      <v-icon icon="mdi mdi-calendar-blank-outline cursor-pointer" />
+    </template>
+  </vue-date-picker>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      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">
@@ -43,7 +43,6 @@ export default defineComponent({
   top: 20px;
 }
 .file-input .v-field__append-inner {
-  padding-top: 18px;
   padding-right: 6px;
 }
 .file-input .v-field__append-inner i {

package/components/Input/FormInput.vue

@@ -19,17 +19,31 @@
     :prepend-icon="prependIcon ? prependIcon : ''"
     :append-icon="appendIcon ? appendIcon : ''"
     :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
-    :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
     :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:append-inner="!props.readonly && $emit('append')"
     @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.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>
@@ -65,6 +79,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    suffix: {
+      type: String,
+      default: '',
+    },
     messages: {
       type: [String, Array<string>],
     },
@@ -108,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) => {
@@ -132,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;
@@ -143,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 {
@@ -168,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,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 />
+    <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">

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" @click="changeBridge('lka')" 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">
+      {{ $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,37 @@
       {{ 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="[$libStyles.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 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 +64,23 @@ 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);
+};
+
+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/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="[$libStyles.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]">
       <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>