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

package/components/Input/SwitchInput.vue

@@ -0,0 +1,64 @@
+<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">
+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: #2aa65c !important;
+}
+
+.base-switch-input .v-switch .v-selection-control {
+  min-height: unset !important;
+}
+</style>

package/components/Input/TextInput.vue

@@ -0,0 +1,159 @@
+<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,
+        clearable: false,
+        disabled: props.control.disabled,
+        readonly: props.control.readonly,
+        selectText: 'Выбрать',
+        cancelText: 'Закрыть',
+        closeOnScroll: true,
+        transitions: false,
+        teleport: 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,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,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/SettingsPanel.vue

@@ -9,7 +9,7 @@
       <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.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>
@@ -30,6 +30,10 @@
       {{ $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>
@@ -39,9 +43,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"
     />
@@ -54,6 +59,7 @@ import { changeBridge } from '#imports';
 import pkg from '../../package.json';
 const dialogSignOut = ref(false);
 const dataStore = useDataStore();
+const router = useRouter();
 
 const handleFontSize = (action: 'increase' | 'decrease') => {
   if (action === 'increase' && dataStore.fontSize < 24) dataStore.fontSize += 2;
@@ -70,13 +76,13 @@ const logoutUser = async () => {
   await dataStore.logoutUser();
 };
 
-const isProduction = import.meta.env.VITE_MODE === 'production';
-
 const hasHistory = computed(() => {
   return !dataStore.isLKA;
 });
 
+const hasFAQ = computed(() => !useEnv().isProduction && router.hasRoute('FAQ'));
+
 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')"
@@ -68,6 +71,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 +93,7 @@ export default defineComponent({
     },
     moreIcon: {
       type: String,
-      default: 'mdi-cog-outline',
+      default: 'mdi-dots-vertical',
     },
   },
   emits: ['onLink', 'onBack', 'onMore', 'clicked'],