hl-core 0.0.7-beta.14 → 0.0.7-beta.16

package/components/Form/ProductConditions.vue

@@ -0,0 +1,43 @@
+<template>
+  <section class="flex flex-col gap-4 px-[10px]">
+    <v-form ref="vForm" @submit="submitForm">
+      <base-form-section :title="$t('generalConditions')">
+        <base-form-input
+          v-model="formStore.productConditionsForm.requestedSumInsured"
+          :rules="$dataStore.rules.numbers"
+          :label="$t('productConditionsForm.requestedSumInsured')"
+        ></base-form-input>
+        <base-form-input
+          v-model="formStore.productConditionsForm.insurancePremiumPerMonth"
+          :rules="$dataStore.rules.numbers"
+          :label="$t('productConditionsForm.insurancePremiumAmount')"
+        ></base-form-input>
+      </base-form-section>
+    </v-form>
+    <base-btn :text="$t('buttons.calculate')" @click="submitForm"></base-btn>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    const formStore = useFormStore();
+    const vForm = ref<any>();
+
+    const submitForm = async () => {
+      vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        console.log(v);
+      });
+    };
+
+    return {
+      // State
+      formStore,
+      vForm,
+
+      // Functions
+      submitForm,
+    };
+  },
+});
+</script>

package/components/Form/ProductConditionsBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-3 pl-5 rounded border-[1px]" :class="[$libStyles.whiteBg]">
+  <div class="pt-3 pl-5 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
     <div>
       <p :class="[$libStyles.textTitle, $libStyles.greenText]">
         {{ $t('productConditions') }}
@@ -20,7 +20,7 @@
         {{ paymentPeriod }}
       </span>
       <div
-        class="transition-all h-[70px] w-[60px] relative place-self-end cursor-pointer"
+        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' })"
       >

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>

package/components/Input/FormInput.vue

@@ -1,22 +1,31 @@
 <template>
   <v-text-field
-    class="rounded-input"
+    class="form-input"
     :model-value="modelValue"
     v-maska="maska"
     :rules="rules"
     :loading="loading"
     :placeholder="placeholder"
+    :label="label"
+    :messages="messages"
     :type="type"
     :variant="variant"
     :clear-icon="clearIcon"
     :color="color"
     :hint="hint"
-    :clearable="clearable"
+    :clearable="readonly ? false : clearable"
     :disabled="disabled"
-    :prepend-inner-icon="prependIcon ? prependIcon : ''"
+    :readonly="readonly"
+    :prepend-icon="prependIcon ? prependIcon : ''"
     :append-icon="appendIcon ? appendIcon : ''"
+    :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
+    :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
     @keyup.enter.prevent="submitted"
+    @click:append="!readonly && $emit('append-out')"
+    @click:prepend="!readonly && $emit('prepend-out')"
+    @click:append-inner="!readonly && $emit('append')"
+    @click:prepend-inner="!readonly && $emit('prepend')"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="loading" #loader>
@@ -32,8 +41,7 @@ export default defineComponent({
   name: 'BaseRoundedInput',
   props: {
     modelValue: {
-      type: String,
-      default: '',
+      required: false,
     },
     loading: {
       type: Boolean,
@@ -47,9 +55,20 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     placeholder: {
       type: String,
-      default: 'Поле',
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    messages: {
+      type: [String, Array<string>],
     },
     maska: {
       type: String,
@@ -85,11 +104,17 @@ export default defineComponent({
     appendIcon: {
       type: String,
     },
+    prependInnerIcon: {
+      type: String,
+    },
+    appendInnerIcon: {
+      type: String,
+    },
     bgColor: {
       type: String,
     },
   },
-  emits: ['update:modelValue', 'submitted'],
+  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out'],
 
   setup(props, { emit }) {
     const submitted = (event: any) => {
@@ -104,19 +129,44 @@ export default defineComponent({
 </script>
 
 <style>
-.rounded-input input:focus {
+.form-input input:focus {
   border: none !important;
   outline: none !important;
 }
-
-/* .rounded-input .v-field {
-  border-radius: 8px;
-  border: 1px solid #dadada;
+.form-input input {
+  padding-top: 30px;
+}
+.form-input .v-field {
   box-shadow: none;
   font-size: 14px;
-} */
-
-.rounded-input .v-field--error {
+}
+.form-input .v-label.v-field-label {
+  top: 20px;
+}
+.form-input .v-field__append-inner {
+  padding-top: 18px;
+  padding-right: 6px;
+}
+.form-input .v-field__append-inner i {
+  color: #a0b3d8 !important;
+  margin-left: 10px;
+  margin-right: 4px;
+}
+.form-input {
+  border-bottom: 1px solid #f3f6fc;
+}
+.form-input.v-input--error {
+  border-color: #ff5449;
+}
+.form-input.v-input--error .v-input__details {
+  display: block;
+}
+.form-input .v-input__details {
+  display: none;
+  background-color: white;
+  padding-top: 0 !important;
+}
+.form-input .v-field--error {
   border-color: #ff5449;
 }
 </style>

package/components/Input/PanelInput.vue

@@ -0,0 +1,133 @@
+<template>
+  <v-text-field
+    class="form-input"
+    :model-value="modelValue"
+    v-maska="maska"
+    :rules="rules"
+    :loading="loading"
+    :placeholder="placeholder"
+    :label="label"
+    :messages="messages"
+    :type="type"
+    :variant="variant"
+    :clear-icon="clearIcon"
+    :color="color"
+    :hint="hint"
+    :clearable="clearable"
+    :disabled="disabled"
+    :readonly="true"
+    :prepend-icon="prependIcon ? prependIcon : ''"
+    :append-icon="appendIcon ? appendIcon : ''"
+    :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
+    :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
+    :bg-color="bgColor ? bgColor : ''"
+    @keyup.enter.prevent="submitted"
+    @click:control="!readonly && $emit('append')"
+    @click:clear="(readonly ? false : clearable) && $emit('update:modelValue', new Value())"
+    @click:append="!readonly && $emit('append-out')"
+    @click:prepend="!readonly && $emit('prepend-out')"
+    @click:append-inner="!readonly && $emit('append')"
+    @click:prepend-inner="!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></v-progress-linear>
+    </template>
+  </v-text-field>
+</template>
+
+<script lang="ts">
+import { InputTypes } from '@/composables/models';
+import { Value } from '@/composables/classes';
+
+export default defineComponent({
+  name: 'BaseRoundedInput',
+  props: {
+    modelValue: {
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    messages: {
+      type: [String, Array<string>],
+    },
+    maska: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    rules: {
+      type: Array<any>,
+      default: [],
+    },
+    type: {
+      type: String as PropType<InputTypes>,
+      default: 'text',
+    },
+    variant: {
+      type: String as PropType<'solo' | 'filled' | 'outlined' | 'plain' | 'underlined'>,
+      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', 'clear'],
+
+  setup(props, { emit }) {
+    const submitted = (event: any) => {
+      emit('submitted', event);
+    };
+
+    return {
+      submitted,
+      Value,
+    };
+  },
+});
+</script>

package/components/Input/RoundedInput.vue

@@ -6,17 +6,25 @@
     :rules="rules"
     :loading="loading"
     :placeholder="placeholder"
+    :label="label"
     :type="type"
     :variant="variant"
     :clear-icon="clearIcon"
     :color="color"
     :hint="hint"
-    :clearable="clearable"
+    :clearable="readonly ? false : clearable"
     :disabled="disabled"
-    :prepend-inner-icon="prependIcon ? prependIcon : ''"
+    :readonly="readonly"
+    :prepend-icon="prependIcon ? prependIcon : ''"
     :append-icon="appendIcon ? appendIcon : ''"
+    :prepend-inner-icon="prependInnerIcon ? prependInnerIcon : ''"
+    :append-inner-icon="appendInnerIcon ? appendInnerIcon : ''"
     :bg-color="bgColor ? bgColor : ''"
     @keyup.enter.prevent="submitted"
+    @click:append="!readonly && $emit('append-out')"
+    @click:prepend="!readonly && $emit('prepend-out')"
+    @click:append-inner="!readonly && $emit('append')"
+    @click:prepend-inner="!readonly && $emit('prepend')"
     @update:modelValue="$emit('update:modelValue', $event)"
   >
     <template v-if="loading" #loader>
@@ -29,11 +37,11 @@
 import { InputTypes } from '@/composables/models';
 
 export default defineComponent({
+  extends: {},
   name: 'BaseRoundedInput',
   props: {
     modelValue: {
-      type: String,
-      default: '',
+      required: false,
     },
     loading: {
       type: Boolean,
@@ -47,9 +55,17 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     placeholder: {
       type: String,
-      default: 'Поле',
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
     },
     maska: {
       type: String,
@@ -85,11 +101,17 @@ export default defineComponent({
     appendIcon: {
       type: String,
     },
+    prependInnerIcon: {
+      type: String,
+    },
+    appendInnerIcon: {
+      type: String,
+    },
     bgColor: {
       type: String,
     },
   },
-  emits: ['update:modelValue', 'submitted'],
+  emits: ['update:modelValue', 'submitted', 'prepend', 'append', 'prepend-out', 'append-out'],
 
   setup(props, { emit }) {
     const submitted = (event: any) => {
@@ -108,14 +130,15 @@ export default defineComponent({
   border: none !important;
   outline: none !important;
 }
-
+.rounded-input .v-label.v-field-label {
+  top: 20px;
+}
 .rounded-input .v-field {
   border-radius: 8px;
   border: 1px solid #dadada;
   box-shadow: none;
   font-size: 14px;
 }
-
 .rounded-input .v-field--error {
   border-color: #ff5449;
 }

package/components/Layout/Drawer.vue

@@ -7,7 +7,7 @@
     :class="[$dataStore[whichPanel].overlay ? 'lg:!hidden' : '', $dataStore[whichPanel].open ? '!w-full lg:!w-[420px]' : 'lg:!w-[0px]']"
   >
     <base-header :title="panelTitle" :has-back="true" back-icon="mdi-close" class="justify-center" @onBack="closePanel"></base-header>
-    <div class="flex flex-col" id="panel-actions">
+    <div class="flex flex-col" :id="$dataStore.panelAction === null ? 'panel-actions' : ''">
       <slot></slot>
     </div>
   </v-navigation-drawer>

package/components/Layout/SettingsPanel.vue

@@ -9,7 +9,12 @@
       <v-text-field v-model="$dataStore.user.fullName" :readonly="true" hide-details variant="plain" :label="$dataStore.user.roles?.join(', ')"></v-text-field>
       <i class="mdi mdi-account-outline text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
-    <base-panel-item v-for="panelItem of dataStore.settings.items" :key="panelItem.title!" class="cursor-pointer" @click="panelItem.action ? panelItem.action() : null">
+    <base-panel-item
+      v-for="panelItem of dataStore.settings.items.filter(i => ('show' in i ? i.show : true))"
+      :key="panelItem.title!"
+      class="cursor-pointer"
+      @click="panelItem.action ? panelItem.action() : null"
+    >
       {{ panelItem.title }}
       <i v-if="panelItem.icon" class="mdi text-xl text-[#A0B3D8]" :class="[panelItem.icon]"></i>
     </base-panel-item>

package/components/List/ListEmpty.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="border-[1px] rounded-lg h-[80px] mx-[10px] mt-[14px] flex place-content-center" :class="[$libStyles.blueBgLight, $libStyles.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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    text: {
+      type: String,
+      default: 'Отсутствуют данные',
+    },
+    icon: {
+      type: String,
+    },
+  },
+});
+</script>

package/components/Menu/MenuNav.vue

@@ -12,7 +12,7 @@
       @onMore="$emit('onMore')"
     ></base-header>
     <slot key="slot-content" name="content"></slot>
-    <section key="main" class="px-2 pt-[14px] flex flex-col gap-[10px]">
+    <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]">
@@ -31,27 +31,10 @@
       <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-[30%] 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 && typeof item.show === 'boolean'
-                    ? item.show
-                    : true
-                "
-                :text="item.title!"
-                :btn="item.color"
-                :disabled="!!item.disabled"
-                @click="item.action"
-              >
-              </base-btn>
+            <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>
             </transition>
           </div></div
       ></base-fade-transition>
@@ -94,22 +77,21 @@ export default defineComponent({
       default: 'mdi-cog-outline',
     },
   },
-  emits: ['update:modelValue', 'onLink', 'onBack', 'onMore', 'clicked'],
+  emits: ['onLink', 'onBack', 'onMore', 'clicked'],
   setup(props, { emit }) {
     const dataStore = useDataStore();
     const router = useRouter();
 
-    const pickItem = (item: MenuItem) => {
+    const pickItem = async (item: MenuItem) => {
       if (item.title !== dataStore.menu.selectedItem.title) {
-        emit('update:modelValue', item);
         if (typeof item.link === 'object') {
           if (item.link && 'name' in item.link) {
-            router.push(item.link as RouteLocationNormalized);
+            await router.push(item.link as RouteLocationNormalized);
           } else {
             dataStore.showToaster('warning', 'Отсутствует ссылка для перехода');
           }
         } else {
-          item.link ? emit('onLink', item) : emit('clicked', item);
+          emit('onLink', item);
         }
       }
     };

package/components/Panel/PanelSelectItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex justify-between px-4 items-center cursor-pointer h-[60px]" :class="[$libStyles.rounded, $libStyles.blueBgLight, $libStyles.blueBgLightHover]">
+    <span :class="[$libStyles.textSimple]">{{ text }}</span>
+    <i class="mdi text-xl" :class="[selected ? `mdi-radiobox-marked ${$libStyles.greenText}` : 'mdi-radiobox-blank text-[#636363]']"></i>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    text: {
+      type: [String, Number],
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>