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

package/components/Input/TextInput.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="base-text-input flex justify-between items-center pr-4 mb-[1px] bg-[#fff]" @click="$emit('onClickField')">
+    <v-text-field v-model="control.modelValue" v-bind="textFieldProps" v-maska="mask">
+      <div v-if="hasSuffix" class="absolute top-[27px] left-[18px] flex items-center justify-center">
+        <p class="opacity-0 inline-block mr-[2px]">{{ control.modelValue }}</p>
+        <span>{{ suffix }}</span>
+      </div>
+    </v-text-field>
+    <v-icon v-if="control.iconName" :icon="`mdi cursor-pointer ${iconsList[control.iconName]}`" color="#A0B3D8" />
+    <vue-date-picker v-if="control.maska === 'date'" v-model="control.modelValue" v-bind="datePickerProps" @update:modelValue="$emit('update:modelValue', $event)">
+      <template #trigger>
+        <v-icon icon="mdi mdi-calendar-blank-outline cursor-pointer" color="#a0b3d8" />
+      </template>
+    </vue-date-picker>
+  </div>
+</template>
+
+<script lang="ts">
+const iconsList: { [key: string]: string } = {
+  arrowRight: 'mdi-chevron-right',
+  search: 'mdi-magnify',
+  sms: 'mdi-message-text',
+  clear: 'mdi-close',
+};
+
+const suffixList: { [key: string]: string } = {
+  kzt: '₸',
+  usd: '$',
+  percent: '%',
+};
+
+export default defineComponent({
+  props: {
+    control: {
+      type: Object as PropType<InputType>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const mask = computed(() => (props.control.maska ? useMask()[props.control.maska] : ''));
+    const dataStore = useDataStore();
+
+    const textFieldProps = computed(() => {
+      return {
+        label: props.control.label,
+        placeholder: props.control.placeholder,
+        disabled: props.control.disabled,
+        maxLength: props.control.maxLength,
+        readonly: props.control.readonly || props.control.iconName === 'arrowRight',
+      };
+    });
+
+    const datePickerProps = computed(() => {
+      return {
+        locale: 'ru',
+        flow: ['calendar'],
+        modelType: 'dd.MM.yyyy',
+        enableTimePicker: false,
+        altPosition: () => ({ top: 0, left: -275 }),
+        clearable: false,
+        disabled: props.control.disabled,
+        readonly: props.control.readonly,
+        selectText: 'Выбрать',
+        cancelText: 'Закрыть',
+        offset: '-50',
+        class: 'max-w-max z-[10]',
+        closeOnScroll: true,
+        transitions: false,
+      };
+    });
+
+    const hasSuffix = computed(() => {
+      return props.control.suffix && props.control.type === 'number' && props.control.modelValue;
+    });
+
+    const suffix = computed(() => {
+      return hasSuffix.value ? suffixList[props.control.suffix!] : '';
+    });
+
+    const onClickIcon = async () => {
+      if (props.control.fetchFrom) {
+        dataStore.rightPanel.open = true;
+        dataStore.rightPanel.title = 'test panel name';
+      }
+    };
+
+    return {
+      // State
+      datePickerProps,
+      textFieldProps,
+      hasSuffix,
+      mask,
+      suffix,
+      iconsList,
+      // Functions
+      onClickIcon,
+    };
+  },
+});
+</script>
+<style>
+.base-text-input .v-field__append-inner i {
+  color: #a0b3d8 !important;
+  margin-left: 10px;
+  margin-right: 4px;
+}
+.base-text-input .v-field__append-inner {
+  margin-top: 12px;
+  cursor: pointer;
+  padding-right: 6px;
+}
+.base-text-input .v-field__outline,
+.base-text-input .v-field__overlay,
+.base-text-input .v-field__loader {
+  display: none !important;
+}
+
+.base-text-input .v-input__prepend {
+  padding-top: 0;
+  display: flex;
+  align-items: center;
+}
+.base-text-input .v-field__append-inner {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.base-text-input .v-file-input {
+  padding: 0px;
+}
+.base-text-input .v-messages,
+.base-text-input .v-messages__message,
+.base-text-input .v-input__details {
+  min-height: unset !important;
+}
+.base-text-input .v-messages__message {
+  transition: all 0.5s;
+  margin-bottom: 10px;
+}
+.base-text-input .v-input__details {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
+.base-text-input .dp__action_buttons button {
+  padding: 6px 9px;
+  height: unset;
+}
+.base-text-input .dp__action_select {
+  background: #a0b3d8;
+  color: white;
+}
+.base-text-input .dp__action_select:hover {
+  background: #97acd6;
+}
+.base-text-input .dp__active_date,
+.base-text-input .dp__overlay_cell_active {
+  background: #a0b3d8;
+}
+</style>

package/components/Layout/Drawer.vue

@@ -2,9 +2,14 @@
   <v-navigation-drawer
     v-model="$dataStore[whichPanel].open"
     :temporary="$dataStore[whichPanel].overlay"
-    location="right"
-    class="sm:!w-[400px] lg:!relative !right-0"
-    :class="[$dataStore[whichPanel].overlay ? 'lg:!hidden' : '', $dataStore[whichPanel].open ? '!w-full lg:!w-[420px]' : 'lg:!w-[0px]']"
+    :location="side"
+    class="sm:!w-[400px]"
+    :class="[
+      $dataStore[whichPanel].overlay ? 'lg:!hidden' : '',
+      $dataStore[whichPanel].open ? '!w-full lg:!w-1/4' : 'lg:!w-[0px]',
+      side === 'left' ? '!left-0 !absolute' : '!right-0',
+      side === 'right' && $dataStore[whichPanel].open ? 'lg:!relative' : '',
+    ]"
     :disable-resize-watcher="true"
     :disable-route-watcher="true"
   >
@@ -12,7 +17,10 @@
     <div v-if="$dataStore.panelAction === null" class="flex flex-col" id="panel-actions">
       <slot></slot>
     </div>
-    <base-panel-handler v-else />
+    <div v-if="side === 'right'" class="flex flex-col" id="right-panel-actions">
+      <slot></slot>
+    </div>
+    <base-panel-handler v-else @task="$emit('task', $event)" />
     <slot name="panel"></slot>
   </v-navigation-drawer>
 </template>
@@ -29,7 +37,12 @@ export default defineComponent({
       type: String as PropType<PanelTypes>,
       default: 'panel',
     },
+    side: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'left',
+    },
   },
+  emits: ['task'],
   setup(props) {
     const dataStore = useDataStore();
 

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
@@ -33,7 +33,7 @@ export default defineComponent({
     },
     moreIcon: {
       type: String,
-      default: 'mdi-cog-outline',
+      default: 'mdi-dots-vertical',
     },
     title: {
       type: String,

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 && $dataStore.accessToken && $dataStore.hasAccess().toLKA" @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>
@@ -39,9 +39,10 @@
     </div>
     <base-dialog
       v-model="dialogSignOut"
-      :title="$dataStore.t('dialog.exit')"
-      :subtitle="$dataStore.t('dialog.dataWillClear')"
-      actions="default"
+      :title="$dataStore.t('dialog.confirmExit')"
+      :subtitle="$dataStore.t('dialog.exit') + $dataStore.t('dialog.dataWillClear')"
+      :confirm="$dataStore.t('confirm.exit')"
+      :icon="{ mdi: 'exit-to-app', color: '#FD2D39' }"
       @yes="logoutUser"
       @no="dialogSignOut = false"
     />
@@ -49,6 +50,8 @@
 </template>
 
 <script lang="ts" setup>
+import { changeBridge } from '#imports';
+
 import pkg from '../../package.json';
 const dialogSignOut = ref(false);
 const dataStore = useDataStore();
@@ -68,19 +71,11 @@ const logoutUser = async () => {
   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');
+  dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge || dataStore.isDSO || dataStore.isUU ? '' : 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

@@ -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

@@ -6,13 +6,13 @@
       :has-back="hasBack"
       :back-icon="backIcon"
       :has-more="hasMore"
-      :hide-more-on-lg="hideOnLg"
+      :hide-more-on-lg="false"
       :more-icon="moreIcon"
       @onBack="$emit('onBack')"
       @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]">
@@ -78,7 +78,7 @@ export default defineComponent({
     },
     moreIcon: {
       type: String,
-      default: 'mdi-cog-outline',
+      default: 'mdi-dots-vertical',
     },
   },
   emits: ['onLink', 'onBack', 'onMore', 'clicked'],

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"