hl-core 0.0.9-beta.9 → 0.0.10-beta.10

package/components/Input/FormInput.vue

@@ -33,13 +33,13 @@
       <v-icon
         v-if="appendInnerIcon.includes('mdi-calendar-blank-outline') === false"
         :icon="appendInnerIcon"
-        @click="appendInnerIcon.includes('mdi-magnify') ? $emit('append') : !props.readonly && $emit('append')"
+        @click="appendInnerIcon.includes('mdi-magnify') || appendInnerIcon.includes('mdi-credit-card-scan') ? $emit('append') : !props.readonly && $emit('append')"
       />
       <base-datepicker
         v-if="appendInnerIcon.includes('mdi-calendar-blank-outline') && !props.readonly"
         :model-value="modelValue"
+        :min-date="minDate"
         @update:modelValue="$emit('update:modelValue', $event)"
-        :teleport="teleport"
       />
     </template>
     <template v-if="loading" #loader>
@@ -49,6 +49,8 @@
 </template>
 
 <script lang="ts">
+import type { InputTypes, InputVariants } from '../../types';
+
 export default defineComponent({
   name: 'BaseFormInput',
   props: {
@@ -114,6 +116,10 @@ export default defineComponent({
       type: String,
       default: 'mdi-close',
     },
+    minDate: {
+      type: Date,
+      default: undefined,
+    },
     prependIcon: {
       type: String,
     },
@@ -139,10 +145,9 @@ export default defineComponent({
     const submitted = (event: any) => {
       emit('submitted', event);
     };
-
     return {
-      submitted,
       props,
+      submitted,
     };
   },
 });

package/components/Input/Monthpicker.vue

@@ -0,0 +1,34 @@
+<template>
+  <vue-date-picker
+    :model-value="modelValue"
+    :clearable="false"
+    :disabled="disabled"
+    :reaonly="readonly"
+    month-picker
+    locale="ru"
+    format="MM.yyyy"
+    :teleport="true"
+    :close-on-scroll="true"
+    cancel-text="Отменить"
+    select-text="Выбрать"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>

package/components/Input/PanelInput.vue

@@ -24,7 +24,7 @@
     :suffix="suffix"
     @keyup.enter.prevent="submitted"
     @click:control="!props.readonly && $emit('append')"
-    @click:clear="(props.readonly ? false : clearable) && $emit('update:modelValue', new Value())"
+    @click:clear="(props.readonly ? false : clearable) && $emit('update:modelValue', clearValue)"
     @click:append="!props.readonly && $emit('append-out')"
     @click:prepend="!props.readonly && $emit('prepend-out')"
     @click:append-inner="!props.readonly && $emit('append')"
@@ -39,6 +39,7 @@
 
 <script lang="ts">
 import { Value } from '../../composables/classes';
+import type { InputTypes, InputVariants } from '../../types';
 
 export default defineComponent({
   name: 'BasePanelInput',
@@ -50,6 +51,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    clearValue: {
+      type: Object,
+      default: new Value(),
+    },
     clearable: {
       type: Boolean,
       default: true,

package/components/Input/RoundedInput.vue

@@ -34,6 +34,8 @@
 </template>
 
 <script lang="ts">
+import type { InputTypes, InputVariants } from '../../types';
+
 export default defineComponent({
   name: 'BaseRoundedInput',
   props: {

package/components/Input/RoundedSelect.vue

@@ -7,7 +7,7 @@
     :placeholder="placeholder"
     :label="label"
     :variant="variant"
-    :density="(density as any)"
+    :density="density"
     :menu-icon="menuIcon"
     :clear-icon="clearIcon"
     :color="color"
@@ -21,6 +21,7 @@
     :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
     :items="items"
+    :hide-details="hideDetails"
     @click:append="!props.readonly && $emit('append-out')"
     @click:prepend="!props.readonly && $emit('prepend-out')"
     @click:append-inner="!props.readonly && $emit('append')"
@@ -34,6 +35,8 @@
 </template>
 
 <script lang="ts">
+import type { InputVariants } from '../../types';
+
 export default defineComponent({
   name: 'BaseRoundedSelect',
   props: {
@@ -81,9 +84,13 @@ export default defineComponent({
       default: 'solo',
     },
     density: {
-      type: String,
+      type: String as PropType<any>,
       default: 'compact',
     },
+    hideDetails: {
+      type: Boolean,
+      default: false,
+    },
     color: {
       type: String,
       default: '#009c73',

package/components/Input/SwitchInput.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="base-switch-input p-4 bg-white rounded-lg mb-3">
+    <v-switch v-model="field.modelValue" v-bind="switchProps" />
+  </div>
+</template>
+
+<script lang="ts">
+import type { SwitchInput } from '../../types/form';
+
+export default defineComponent({
+  name: 'asSwitchInput',
+  props: {
+    field: {
+      type: Object as PropType<SwitchInput>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const switchProps = computed(() => {
+      return {
+        label: props.field.label,
+        direction: props.field.direction,
+        disabled: props.field.disabled,
+        hideDetails: true,
+        color: '#009C73',
+      };
+    });
+    return { switchProps };
+  },
+});
+</script>
+
+<style>
+.base-switch-input .v-switch label {
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 20px !important;
+  opacity: 1 !important;
+}
+.base-switch-input .v-switch__track {
+  background: white !important;
+  border: 1.1px solid #e5e5ea;
+  height: 19px !important;
+  width: 100px !important;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.base-switch-input .switch-block .v-input--horizontal {
+  grid-template-areas: unset !important;
+}
+
+.base-switch-input .v-switch__thumb {
+  color: white;
+  width: 20px;
+  height: 20px;
+}
+
+.base-switch-input .v-selection-control--dirty .v-switch__track {
+  background: #009c73 !important;
+}
+
+.base-switch-input .v-switch .v-selection-control {
+  min-height: unset !important;
+}
+</style>

package/components/Input/TextInput.vue

@@ -0,0 +1,162 @@
+<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">
+import type { InputType } from '../../types/form';
+
+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,
+        clearable: false,
+        disabled: props.control.disabled,
+        readonly: props.control.readonly,
+        selectText: 'Выбрать',
+        cancelText: 'Закрыть',
+        closeOnScroll: true,
+        transitions: false,
+        teleport: true,
+        sixWeeks: true,
+      };
+    });
+
+    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,12 +17,17 @@
     <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)" />
+    <div v-if="side === 'right'" class="flex flex-col" id="right-panel-actions">
+      <slot></slot>
+    </div>
+    <base-panel-handler v-if="side === 'left' && whichPanel === 'panel'" @task="$emit('task', $event)" />
     <slot name="panel"></slot>
   </v-navigation-drawer>
 </template>
 
 <script lang="ts">
+import type { PanelTypes } from '../../types';
+
 export default defineComponent({
   name: 'BasePanel',
   props: {
@@ -29,6 +39,10 @@ export default defineComponent({
       type: String as PropType<PanelTypes>,
       default: 'panel',
     },
+    side: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'left',
+    },
   },
   emits: ['task'],
   setup(props) {

package/components/Layout/Header.vue

@@ -1,7 +1,14 @@
 <template>
-  <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$styles.blueBgLight, $styles.textSimple]">
+  <header class="relative w-full min-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="hasInfo && infoItems && infoItems.length && infoItems.filter(i => (typeof i.show === 'boolean' ? i.show : true)).length"
+      class="mdi text-xl cursor-pointer transition-all opacity-70"
+      :class="[infoIcon, $styles.blueText]"
+    >
+      <base-info-menu :options="infoItems" @clicked="$dataStore.copyToClipboard($event, false)" />
+    </i>
     <i
       v-if="hasMore"
       @click="$emit('onMore')"
@@ -13,6 +20,8 @@
 </template>
 
 <script lang="ts">
+import { MenuItem } from '../../composables/classes';
+
 export default defineComponent({
   props: {
     hasBack: {
@@ -33,7 +42,19 @@ export default defineComponent({
     },
     moreIcon: {
       type: String,
-      default: 'mdi-cog-outline',
+      default: 'mdi-dots-vertical',
+    },
+    hasInfo: {
+      type: Boolean,
+      default: false,
+    },
+    infoIcon: {
+      type: String,
+      default: '',
+    },
+    infoItems: {
+      type: Array as PropType<Array<MenuItem>>,
+      default: [],
     },
     title: {
       type: String,

package/components/Layout/Loader.vue

@@ -28,7 +28,8 @@ export default defineComponent({
     },
     bgColor: {
       type: String,
-      default: '#009C73',
+      default:
+        import.meta.env.VITE_PRODUCT === 'auletti' || import.meta.env.VITE_PARENT_PRODUCT === 'auletti' || import.meta.env.VITE_PRODUCT === 'lka-auletti' ? '#1B1918' : '#009c73',
     },
   },
 });

package/components/Layout/SettingsPanel.vue

@@ -9,11 +9,15 @@
       <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">
+    <base-panel-item
+      v-if="$dataStore.accessToken && (($dataStore.isEFO && $dataStore.hasAccess().toLKA) || ($dataStore.isAULETTI && $dataStore.hasAccess().toLKA_A))"
+      @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">
+    <base-panel-item v-if="($dataStore.isLKA || $dataStore.isLKA_A) && $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,18 +34,25 @@
       {{ $dataStore.t('historyStatementsAndStatuses') }}
       <i class="mdi mdi-history text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
+    <base-panel-item v-if="hasFAQ" @click="$router.push({ name: 'FAQ' })" class="cursor-pointer">
+      FAQ
+      <i class="mdi mdi-help text-xl text-[#A0B3D8]"></i>
+    </base-panel-item>
     <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 v-if="$dataStore.settings.open" class="absolute bottom-4 w-full flex flex-col items-center opacity-30 text-sm">
+      <p v-if="'version' in pkg && pkg.version">{{ pkg.version }}</p>
+      <p v-if="commitVersion">{{ `Current: #${commitVersion}` }}</p>
+      <p v-if="$dataStore.projectConfig">{{ `Latest: #${$dataStore.projectConfig.version}` }}</p>
     </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"
     />
@@ -54,6 +65,8 @@ import { changeBridge } from '#imports';
 import pkg from '../../package.json';
 const dialogSignOut = ref(false);
 const dataStore = useDataStore();
+const router = useRouter();
+const commitVersion = String(import.meta.env.VITE_COMMIT_VERSION ?? '');
 
 const handleFontSize = (action: 'increase' | 'decrease') => {
   if (action === 'increase' && dataStore.fontSize < 24) dataStore.fontSize += 2;
@@ -70,13 +83,13 @@ const logoutUser = async () => {
   await dataStore.logoutUser();
 };
 
-const isProduction = import.meta.env.VITE_MODE === 'production';
-
 const hasHistory = computed(() => {
-  return !dataStore.isLKA;
+  return !dataStore.isLKA && !dataStore.isLKA_A;
 });
 
+const hasFAQ = computed(() => router.hasRoute('FAQ') && !dataStore.isAULETTI && !dataStore.isAulettiParent);
+
 const openHistory = async () => {
-  dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge ? '' : dataStore.product);
+  dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge || dataStore.isDSO || dataStore.isUU ? '' : dataStore.product);
 };
 </script>

package/components/Menu/InfoMenu.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-menu
+    v-if="options && options.length && options.filter(i => (typeof i.show === 'boolean' ? i.show : true)).length"
+    open-on-click
+    activator="parent"
+    :close-on-content-click="false"
+    transition="scale-transition"
+  >
+    <base-form-text-section class="p-1 border-[1px] flex flex-col gap-3 elevation-3 w-[250px]">
+      <v-list lines="two" density="compact" class="!p-0">
+        <v-list-item v-for="(option, index) of options.filter(i => (typeof i.show === 'boolean' ? i.show : true))" :key="index" class="!px-3">
+          <v-list-item-title :class="[$styles.greenText]">{{ option.title }}</v-list-item-title>
+          <v-list-item-subtitle class="!opacity-50">{{ option.description }}</v-list-item-subtitle>
+          <template v-slot:append>
+            <v-btn color="#faae17" :icon="option.icon ? option.icon : 'mdi-content-copy'" variant="text" size="small" @click="$emit('clicked', option.title)"></v-btn>
+          </template>
+        </v-list-item>
+      </v-list>
+    </base-form-text-section>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { MenuItem } from '../../composables/classes';
+
+export default defineComponent({
+  emits: ['clicked'],
+  props: {
+    options: {
+      type: Array as PropType<Array<MenuItem>>,
+      default: [],
+    },
+  },
+});
+</script>

package/components/Menu/MenuNav.vue

@@ -6,7 +6,10 @@
       :has-back="hasBack"
       :back-icon="backIcon"
       :has-more="hasMore"
-      :hide-more-on-lg="hideOnLg"
+      :has-info="hasInfo"
+      :info-icon="infoIcon"
+      :info-items="infoItems"
+      :hide-more-on-lg="false"
       :more-icon="moreIcon"
       @onBack="$emit('onBack')"
       @onMore="$emit('onMore')"
@@ -47,12 +50,19 @@
           </div></div
       ></base-fade-transition>
     </section>
+    <base-text-block
+      v-if="$dataStore.showDisabledMessage"
+      class="opacity-70 absolute bottom-6 left-0 right-0 ml-auto mr-auto z-[100]"
+      :class="[$styles.redBorder]"
+      :icon="{ mdi: 'mdi-alert-circle-outline', color: '#FD2D39' }"
+      :text="$dataStore.t('toaster.viewError')"
+    />
   </aside>
 </template>
 
 <script lang="ts">
 import { MenuItem } from '../../composables/classes';
-import { RouteLocationNormalized } from 'vue-router';
+import { type RouteLocationNormalized } from 'vue-router';
 
 export default defineComponent({
   props: {
@@ -68,6 +78,18 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    hasInfo: {
+      type: Boolean,
+      default: false,
+    },
+    infoIcon: {
+      type: String,
+      default: '',
+    },
+    infoItems: {
+      type: Array as PropType<Array<MenuItem>>,
+      default: [],
+    },
     backIcon: {
       type: String,
       default: 'mdi-arrow-left',
@@ -78,7 +100,7 @@ export default defineComponent({
     },
     moreIcon: {
       type: String,
-      default: 'mdi-cog-outline',
+      default: 'mdi-dots-vertical',
     },
   },
   emits: ['onLink', 'onBack', 'onMore', 'clicked'],