hl-core 0.0.7 → 0.0.8

package/components/Button/BtnIcon.vue

@@ -0,0 +1,47 @@
+<template>
+  <button
+    type="button"
+    class="transition-all"
+    @click="$emit('clicked')"
+    :disabled="disabled"
+    :class="[
+        disabled ? 'disabled' : '',
+        classes,
+        btn,
+        $libStyles[`btnH${$capitalize(size)}` as keyof typeof $libStyles],
+      ]"
+  >
+    <i class="mdi" :class="icon"></i>
+  </button>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'BaseBtnIcon',
+  props: {
+    icon: { type: String, default: 'mdi-arrow-right-variant' },
+    size: {
+      type: String,
+      default: 'md',
+    },
+    classes: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    btn: {
+      type: String,
+      default: new Styles().blueBtn,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.disabled {
+  opacity: 0.3;
+}
+</style>

package/components/Button/ScrollButtons.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="absolute bottom-[12%] right-1 flex flex-col gap-4">
+    <v-btn style="backdrop-filter: blur(5px)" color="#A0B3D8"  variant="outlined" icon="mdi mdi-arrow-up" @click="$emit('up')"></v-btn>
+    <v-btn style="backdrop-filter: blur(5px)" color="#A0B3D8"  variant="outlined" icon="mdi mdi-arrow-down" @click="$emit('down')"></v-btn>
+  </div>
+</template>

package/components/Button/SortArrow.vue

@@ -0,0 +1,21 @@
+<template>
+  <i
+    class="transition-all mdi mdi-menu-down text-2xl"
+    :class="[$dataStore.isColumnAsc[sortKey] === false ? 'mdi-rotate-180' : '']"
+    :style="{
+      opacity: $dataStore.isColumnAsc[sortKey] === null ? 0 : 1,
+    }"
+  ></i>
+</template>
+
+<script>
+export default {
+  name: 'BaseSortArrow',
+  props: {
+    sortKey: {
+      type: String,
+      default: null,
+    },
+  },
+};
+</script>

package/components/Complex/Content.vue

@@ -0,0 +1,5 @@
+<template>
+  <aside class="w-full lg:flex lg:w-3/4">
+    <slot></slot>
+  </aside>
+</template>

package/components/Complex/ContentBlock.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full p-4" :class="[$libStyles.blueBgLight, $libStyles.rounded]">
+    <slot></slot>
+  </div>
+</template>

package/components/Complex/Page.vue

@@ -0,0 +1,43 @@
+<template>
+  <base-content class="flex-col" :class="[$libStyles.whiteBg]">
+    <base-header
+      class="justify-center lg:pl-14"
+      :has-back="hasBack"
+      :back-icon="backIcon"
+      :has-more="hasMore"
+      :more-icon="moreIcon"
+      :title="title"
+      @onBack="$emit('onBack')"
+      @onMore="$emit('onMore')"
+    ></base-header>
+    <slot></slot>
+  </base-content>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    hasBack: {
+      type: Boolean,
+      default: false,
+    },
+    backIcon: {
+      type: String,
+      default: 'mdi-arrow-left',
+    },
+    hasMore: {
+      type: Boolean,
+      default: false,
+    },
+    moreIcon: {
+      type: String,
+      default: 'mdi-cog-outline',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['onBack', 'onMore'],
+});
+</script>

package/components/Dialog/Dialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-dialog v-model="fieldModel">
+    <v-card class="self-center w-full sm:w-3/4 md:w-2/3 lg:w-2/4 xl:w-[600px] rounded-lg !p-2">
+      <v-card-title>
+        <slot v-if="!title" name="title"></slot>
+        {{ title }}
+      </v-card-title>
+      <v-card-subtitle>
+        <slot v-if="!subtitle" name="subtitle"></slot>
+        {{ subtitle }}
+      </v-card-subtitle>
+      <v-card-actions class="gap-[16px]">
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$t('confirm.yes')" :btn="$libStyles.blueBtn" @click="$emit('yes')"></base-btn>
+        <base-btn v-if="actions === 'default'" class="!w-fit px-6" size="sm" :text="$t('confirm.no')" :btn="$libStyles.blueBtn" @click="$emit('no')" />
+        <slot v-if="actions !== 'default'" name="actions"></slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script lang="ts">
+export default defineComponent({
+  name: 'BaseDialog',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    actions: {
+      type: String,
+      default: 'default',
+    },
+  },
+  emits: ['update:modelValue', 'submitted', 'yes', 'no'],
+  setup(props, { emit }) {
+    const fieldModel = ref(props.modelValue);
+
+    const updateValue = (event: boolean) => {
+      fieldModel.value = event;
+    };
+
+    const submitted = (event: any) => {
+      emit('submitted', event);
+    };
+
+    watch(
+      fieldModel,
+      () => {
+        emit('update:modelValue', fieldModel.value);
+      },
+      { immediate: true },
+    );
+
+    watch(
+      () => props.modelValue,
+      () => {
+        fieldModel.value = props.modelValue;
+      },
+      { immediate: true },
+    );
+
+    return {
+      fieldModel,
+      submitted,
+      updateValue,
+    };
+  },
+});
+</script>

package/components/Dialog/FamilyDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-list lines="two" v-if="formStore.birthInfos && formStore.birthInfos.length" class="w-full !py-0">
+    <v-list-item @click="$emit('reset')" :append-icon="selected && Object.keys(selected).length === 0 ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'">
+      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{ $t('form.notChosen') }}</v-list-item-title>
+    </v-list-item>
+    <v-list-item
+      v-for="familyMember of formStore.birthInfos"
+      :key="familyMember.childIIN"
+      @click="$emit('selectFamilyMember', familyMember)"
+      :append-icon="familyMember && selected && selected.childIIN === familyMember.childIIN ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]'"
+    >
+      <v-list-item-title :class="[$libStyles.greenText, $libStyles.textTitle]">{{
+        `${familyMember.childSurName} ${familyMember.childName} ${familyMember.childPatronymic ? familyMember.childPatronymic : ''}`
+      }}</v-list-item-title>
+      <v-list-item-subtitle :class="[$libStyles.textSimple]"
+        ><span>{{ `${$t('form.iin')}:` }}</span
+        >{{ ` ${$reformatIin(familyMember.childIIN!)}` }}</v-list-item-subtitle
+      >
+    </v-list-item>
+  </v-list>
+  <base-list-empty class="w-full" v-else></base-list-empty>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    selected: {
+      type: Object as PropType<BirthInfoGKB>,
+    },
+  },
+  emits: ['selectFamilyMember', 'reset'],
+  setup() {
+    const formStore = useFormStore();
+    return {
+      formStore,
+    };
+  },
+});
+</script>

package/components/Form/FormBlock.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="pt-3 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
+    <div class="ml-5">
+      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
+      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+    </div>
+    <div class="ml-5 mt-6 grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center">
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('form.fullName') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('form.iin') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $t('form.gender') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium"> {{ $t('form.birthDate') }} </span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('form.Country') }} </span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $t('code') }}</span>
+    </div>
+    <div v-if="isMultiple" class="ml-5 flex flex-col">
+      <div v-for="(each, index) of member" :key="index" class="grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center relative">
+        <span :class="[getMemberInfo(each).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
+        <span :class="[getMemberInfo(each).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
+        <span :class="[getMemberInfo(each).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
+        <span :class="[getMemberInfo(each).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
+        <span :class="[getMemberInfo(each).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
+        <div
+          class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
+          :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+          @click="$emit('onMore', { whichForm, index })"
+        >
+          <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+        </div>
+      </div>
+    </div>
+    <div v-else class="ml-5 grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center relative">
+      <span :class="[getMemberInfo(member).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(member).fullName }}</span>
+      <span :class="[getMemberInfo(member).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(member).iin }}</span>
+      <span :class="[getMemberInfo(member).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(member).gender }} </span>
+      <span :class="[getMemberInfo(member).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(member).birthDate }} </span>
+      <span :class="[getMemberInfo(member).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(member).birthPlace }} </span>
+      <span :class="[getMemberInfo(member).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(member).sectorCode }} </span>
+      <div
+        class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
+        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+        @click="$emit('onMore', { whichForm })"
+      >
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+      </div>
+    </div>
+    <div
+      v-if="isMultiple && more"
+      :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple]"
+      class="cursor-pointer rounded-b-lg h-[36px] flex items-center font-medium justify-center"
+      @click="memberStore.addMember(whichForm)"
+    >
+      {{ $t('buttons.add') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Member } from '@/composables/classes';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    whichForm: {
+      type: String as PropType<MemberFormTypes>,
+      default: '',
+    },
+    more: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['onMore', 'addMember'],
+  setup(props) {
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const memberStore = useMemberStore();
+    const multipleMembers = ['insuredForm', 'beneficiaryForm', 'beneficialOwnerForm'];
+    const isMultiple = ref(multipleMembers.includes(props.whichForm));
+    const member: Member = formStore[props.whichForm as MemberKeys];
+
+    const getMemberInfo = (memberData: Member) => {
+      return {
+        fullName: computed(() => (memberData && memberData.getFullNameShorted() ? memberData.getFullNameShorted() : null)).value,
+        iin: computed(() => (memberData && memberData.iin ? memberData.iin : null)).value,
+        gender: computed(() => (memberData && memberData.gender.nameRu ? (memberData.gender.nameRu as string).charAt(0) : null)).value,
+        birthDate: computed(() => (memberData && memberData.birthDate ? memberData.birthDate : null)).value,
+        birthPlace: computed(() => (memberData && memberData.birthPlace.nameRu ? (memberData.birthPlace.nameRu as string).substring(0, 3) : null)).value,
+        sectorCode: computed(() => (memberData && memberData.economySectorCode.ids ? (memberData.economySectorCode.ids as string).slice(-1) : null)).value,
+      };
+    };
+
+    return {
+      // State
+      formStore,
+      memberStore,
+      member,
+      isMultiple,
+
+      // Computed
+
+      // Functions
+      getMemberInfo,
+    };
+  },
+});
+</script>

package/components/Form/FormSection.vue

@@ -0,0 +1,18 @@
+<template>
+  <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
+    <h2 :class="[$libStyles.textTitle]" class="font-medium text-center w-full mb-4">{{ title }}</h2>
+    <slot></slot>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: 'Заголовок',
+      required: true,
+    },
+  },
+});
+</script>

package/components/Form/FormTextSection.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col justify-between rounded-lg" :class="[$libStyles.whiteBg]">
+    <span v-if="title" class="p-4" :class="[$libStyles.textTitle]">{{ title }}</span>
+    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$libStyles.textSimple]">{{ subtitle }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+    },
+    subtitle: {
+      type: String,
+    },
+  },
+});
+</script>

package/components/Form/FormToggle.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-4"
+    :class="[$libStyles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
+  >
+    <v-switch
+      class="base-toggle"
+      :model-value="modelValue"
+      @update:modelValue="
+        $emit('update:modelValue', $event);
+        $emit('clicked');
+      "
+      color="#009C73"
+      hide-details
+      :disabled="disabled"
+    >
+    </v-switch>
+    <p :class="[$libStyles.textSimple]">{{ `${title}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['update:modelValue', 'clicked'],
+});
+</script>
+
+<style>
+.v-input.base-toggle {
+  width: fit-content;
+  flex: unset !important;
+}
+</style>

package/components/Form/ProductConditionsBlock.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
+    <div>
+      <p :class="[$libStyles.textTitle, $libStyles.greenText]">
+        {{ $t('productConditions') }}
+      </p>
+      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+    </div>
+    <div class="mt-6 grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.requestedSumInsured') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('productConditionsForm.insurancePremiumPerMonth') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.coverPeriod') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('productConditionsForm.payPeriod') }}</span>
+    </div>
+    <div class="grid grid-cols-3 lg:grid-cols-5 auto-rows-fr items-center">
+      <span :class="[amount === null && $libStyles.emptyBlockCol]">{{ amount }} </span>
+      <span :class="[premium === null && $libStyles.emptyBlockCol]"> {{ premium }}</span>
+      <span :class="[coverPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ coverPeriod }} </span>
+      <span :class="[paymentPeriod === null && $libStyles.emptyBlockCol]" class="hidden lg:block">
+        {{ paymentPeriod }}
+      </span>
+      <div
+        class="rounded-br-lg transition-all h-[70px] w-[60px] relative place-self-end cursor-pointer"
+        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+        @click="$emit('onMore', { whichForm: 'productConditions' })"
+      >
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    subtitle: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const formStore = useFormStore();
+
+    const amount = computed(() =>
+      formStore.productConditionsForm && formStore.productConditionsForm.requestedSumInsured ? formStore.productConditionsForm.requestedSumInsured : null,
+    );
+    const premium = computed(() =>
+      formStore.productConditionsForm && formStore.productConditionsForm.insurancePremiumPerMonth ? formStore.productConditionsForm.insurancePremiumPerMonth : null,
+    );
+    const coverPeriod = computed(() => (formStore.productConditionsForm && formStore.productConditionsForm.coverPeriod ? formStore.productConditionsForm.coverPeriod : null));
+    const paymentPeriod = computed(() =>
+      formStore.productConditionsForm && formStore.productConditionsForm.paymentPeriod && !!formStore.productConditionsForm.paymentPeriod.nameRu
+        ? formStore.productConditionsForm.paymentPeriod.nameRu
+        : null,
+    );
+    return {
+      // State
+      formStore,
+
+      // Computed
+      amount,
+      premium,
+      coverPeriod,
+      paymentPeriod,
+    };
+  },
+});
+</script>

package/components/Input/EmptyFormField.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="h-[60px] bg-white rounded border-b-[1px] border-b-[#f3f6fc] flex items-center pl-4" :class="[$libStyles.textTitle]">
+    <slot></slot>
+  </div>
+</template>

package/components/Input/FileInput.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-file-input
+    class="file-input"
+    :disabled="disabled"
+    prepend-icon=""
+    append-inner-icon="mdi mdi-file-document"
+    @click:append-inner="$emit('input', $event)"
+    @input="$emit('input', $event)"
+    variant="solo"
+    show-size
+    multiple
+    accept=".pdf,.doc,.jpeg,.jpg,.jpg"
+    truncate-length="15"
+    clear-icon="mdi mdi-close"
+    :label="$t('labels.chooseDoc')"
+  ></v-file-input>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>
+
+<style>
+.file-input input:focus {
+  border: none !important;
+  outline: none !important;
+}
+.file-input input {
+  padding-top: 30px;
+}
+.file-input .v-field {
+  box-shadow: none;
+  font-size: 14px;
+}
+.file-input .v-label.v-field-label {
+  top: 20px;
+}
+.file-input .v-field__append-inner {
+  padding-top: 18px;
+  padding-right: 6px;
+}
+.file-input .v-field__append-inner i {
+  color: #a0b3d8 !important;
+  margin-left: 10px;
+  margin-right: 4px;
+}
+.file-input {
+  border-bottom: 1px solid #f3f6fc;
+}
+.file-input.v-input--error {
+  border-color: #ff5449;
+}
+.file-input.v-input--error .v-input__details {
+  display: block;
+}
+.file-input .v-input__details {
+  display: none;
+  background-color: white;
+  padding-top: 0 !important;
+}
+.file-input .v-field--error {
+  border-color: #ff5449;
+}
+</style>