hl-core 0.0.7-beta.9 → 0.0.8

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>

package/components/Input/FormInput.vue

@@ -0,0 +1,171 @@
+<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="props.readonly ? false : clearable"
+    :disabled="disabled"
+    :readonly="props.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="!props.readonly && $emit('append-out')"
+    @click:prepend="!props.readonly && $emit('prepend-out')"
+    @click:append-inner="!props.readonly && $emit('append')"
+    @click:prepend-inner="!props.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">
+export default defineComponent({
+  name: 'BaseFormInput',
+  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<InputVariants>,
+      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'],
+
+  setup(props, { emit }) {
+    const submitted = (event: any) => {
+      emit('submitted', event);
+    };
+
+    return {
+      submitted,
+      props,
+    };
+  },
+});
+</script>
+
+<style>
+.form-input input:focus {
+  border: none !important;
+  outline: none !important;
+}
+.form-input input {
+  padding-top: 30px;
+}
+.form-input .v-field {
+  box-shadow: none;
+  font-size: 14px;
+}
+.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="!props.readonly && $emit('append')"
+    @click:clear="(props.readonly ? false : clearable) && $emit('update:modelValue', new Value())"
+    @click:append="!props.readonly && $emit('append-out')"
+    @click:prepend="!props.readonly && $emit('prepend-out')"
+    @click:append-inner="!props.readonly && $emit('append')"
+    @click:prepend-inner="!props.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 { Value } from '@/composables/classes';
+
+export default defineComponent({
+  name: 'BasePanelInput',
+  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<InputVariants>,
+      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,
+      props,
+    };
+  },
+});
+</script>

package/components/Input/RoundedInput.vue

@@ -1,44 +1,44 @@
 <template>
   <v-text-field
     class="rounded-input"
-    v-model="fieldModel"
+    :model-value="modelValue"
     v-maska="maska"
     :rules="rules"
     :loading="loading"
     :placeholder="placeholder"
+    :label="label"
     :type="type"
     :variant="variant"
     :clear-icon="clearIcon"
     :color="color"
     :hint="hint"
-    :clearable="clearable"
+    :clearable="props.readonly ? false : clearable"
     :disabled="disabled"
-    :prepend-inner-icon="prependIcon ? prependIcon : ''"
+    :readonly="props.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="!props.readonly && $emit('append-out')"
+    @click:prepend="!props.readonly && $emit('prepend-out')"
+    @click:append-inner="!props.readonly && $emit('append')"
+    @click:prepend-inner="!props.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>
+      <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';
-
 export default defineComponent({
   name: 'BaseRoundedInput',
   props: {
     modelValue: {
-      type: String,
-      default: '',
+      required: false,
     },
     loading: {
       type: Boolean,
@@ -52,9 +52,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,
@@ -73,9 +81,7 @@ export default defineComponent({
       default: 'text',
     },
     variant: {
-      type: String as PropType<
-        'solo' | 'filled' | 'outlined' | 'plain' | 'underlined'
-      >,
+      type: String as PropType<InputVariants>,
       default: 'solo',
     },
     color: {
@@ -92,34 +98,26 @@ 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 fieldModel = ref(props.modelValue || '');
-
-    const updateValue = (event: any) => {
-      emit('update:modelValue', fieldModel.value);
-    };
-
     const submitted = (event: any) => {
       emit('submitted', event);
     };
 
-    watch(
-      fieldModel,
-      () => {
-        updateValue(fieldModel.value);
-      },
-      { immediate: true },
-    );
-
     return {
-      fieldModel,
       submitted,
+      props
     };
   },
 });
@@ -130,14 +128,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

@@ -3,20 +3,13 @@
     v-model="$dataStore[whichPanel].open"
     :temporary="$dataStore[whichPanel].overlay"
     location="right"
-    class="sm:!w-[400px] lg:!relative"
-    :class="[
-      $dataStore[whichPanel].overlay ? 'lg:!hidden' : '',
-      $dataStore[whichPanel].open ? '!w-full lg:!w-[420px]' : 'lg:!w-[0px]',
-    ]"
+    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]']"
+    :disable-resize-watcher="true"
+    :disable-route-watcher="true"
   >
-    <base-header
-      :title="panelTitle"
-      :has-back="true"
-      back-icon="mdi-close"
-      class="justify-center"
-      @onBack="$dataStore[whichPanel].open = false"
-    ></base-header>
-    <div>
+    <base-header :title="panelTitle" :has-back="true" back-icon="mdi-close" class="justify-center" @onBack="closePanel"></base-header>
+    <div class="flex flex-col" :id="$dataStore.panelAction === null ? 'panel-actions' : ''">
       <slot></slot>
     </div>
   </v-navigation-drawer>
@@ -31,12 +24,21 @@ export default defineComponent({
       default: '',
     },
     whichPanel: {
-      type: String as PropType<'settings' | 'panel'>,
+      type: String as PropType<PanelTypes>,
       default: 'panel',
     },
   },
-  setup() {
-    return {};
+  setup(props) {
+    const dataStore = useDataStore();
+
+    const closePanel = () => {
+      dataStore[props.whichPanel].open = false;
+      dataStore.panelAction = null;
+    };
+
+    return {
+      closePanel,
+    };
   },
 });
 </script>

package/components/Layout/Header.vue

@@ -1,22 +1,8 @@
 <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]"
-  >
-    <i
-      v-if="hasBack"
-      @click="$emit('onBack')"
-      class="absolute left-5 mdi text-xl cursor-pointer"
-      :class="[backIcon]"
-    ></i>
-    {{ title }}
-    <i
-      v-if="hasMore"
-      @click="$emit('onMore')"
-      class="mdi absolute right-5 text-xl cursor-pointer"
-      :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '']"
-    >
-    </i>
+  <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$libStyles.blueBgLight, $libStyles.textSimple]">
+    <i v-if="hasBack" @click="$emit('onBack')" class="absolute left-5 mdi text-xl cursor-pointer" :class="[backIcon]"></i>
+    <span class="mx-10">{{ title }}</span>
+    <i v-if="hasMore" @click="$emit('onMore')" class="mdi absolute right-5 text-xl cursor-pointer" :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '']"> </i>
   </header>
 </template>
 

package/components/Layout/Loader.vue

@@ -1,11 +1,5 @@
 <template>
-  <v-progress-circular
-    :size="size"
-    :width="width"
-    :indeterminate="indeterminate"
-    :color="color"
-    :bg-color="bgColor"
-  ></v-progress-circular>
+  <v-progress-circular :size="size" :width="width" :indeterminate="indeterminate" :color="color" :bg-color="bgColor"></v-progress-circular>
 </template>
 
 <script lang="ts">