hl-core 0.0.7-beta.9 → 0.0.8-beta.1

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,22 +3,16 @@
     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 v-if="$dataStore.panelAction === null" class="flex flex-col" id="panel-actions">
       <slot></slot>
     </div>
+    <base-panel-handler v-else></base-panel-handler>
   </v-navigation-drawer>
 </template>
 
@@ -31,12 +25,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">

package/components/Layout/SettingsPanel.vue

@@ -1,59 +1,29 @@
 <template>
   <base-drawer :panel-title="$dataStore.menu.title" which-panel="settings">
     <base-panel-item>
-      <v-btn
-        size="x-small"
-        icon="mdi-minus"
-        color="#A0B3D8"
-        class="text-white"
-        variant="flat"
-      ></v-btn>
+      <v-btn size="x-small" icon="mdi-minus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('decrease')"></v-btn>
       Шрифт
-      <v-btn
-        size="x-small"
-        icon="mdi-plus"
-        color="#A0B3D8"
-        class="text-white"
-        variant="flat"
-      ></v-btn>
+      <v-btn size="x-small" icon="mdi-plus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('increase')"></v-btn>
     </base-panel-item>
     <base-panel-item>
-      <v-text-field
-        v-model="$dataStore.user.fullName"
-        :readonly="true"
-        hide-details
-        variant="plain"
-        :label="$dataStore.user.roles?.join(', ')"
-      ></v-text-field>
+      <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"
+      v-for="panelItem of dataStore.settings.items.filter(i => (typeof i.show === 'boolean' ? 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>
+      <i v-if="panelItem.icon" class="mdi text-xl text-[#A0B3D8]" :class="[panelItem.icon]"></i>
     </base-panel-item>
     <base-panel-item @click="dialog = true" class="cursor-pointer">
       Выход
       <i class="mdi mdi-logout text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
 
-    <base-dialog
-      v-model="dialog"
-      :title="$t('dialog.exit')"
-      :subtitle="$t('dialog.dataWillClear')"
-      actions="default"
-      @yes="logoutUser"
-      @no="dialog = false"
-    >
-    </base-dialog
+    <base-dialog v-model="dialog" :title="$t('dialog.exit')" :subtitle="$t('dialog.dataWillClear')" actions="default" @yes="logoutUser" @no="dialog = false"> </base-dialog
   ></base-drawer>
 </template>
 
@@ -61,6 +31,16 @@
 const dialog = ref(false);
 const dataStore = useDataStore();
 
+const handleFontSize = (action: 'increase' | 'decrease') => {
+  if (action === 'increase' && dataStore.fontSize < 24) dataStore.fontSize += 2;
+  if (action === 'decrease' && dataStore.fontSize > 14) dataStore.fontSize -= 2;
+  if (dataStore.isEFO) {
+    dataStore.sendToChild(constants.postActions.font, dataStore.fontSize);
+  } else {
+    dataStore.sendToParent(constants.postActions.font, dataStore.fontSize);
+  }
+};
+
 const logoutUser = async () => {
   dialog.value = false;
   await dataStore.logoutUser();

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

@@ -1,5 +1,5 @@
 <template>
-  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2">
+  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2 relative">
     <base-header
       class="justify-center"
       :title="title"
@@ -12,21 +12,15 @@
       @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>
-      <transition enter-active-class="animate__animated animate__fadeIn">
-        <div
-          v-if="$dataStore.menuItems && $dataStore.menuItems.length"
-          class="flex flex-col gap-[10px]"
-        >
-          <div v-for="(item, index) of $dataStore.menuItems" :key="index">
+      <base-fade-transition>
+        <div v-if="$dataStore.menuItems && $dataStore.menuItems.length" class="flex flex-col gap-[10px]">
+          <div v-for="(item, index) of $dataStore.menuItems.filter(i => (typeof i.show === 'boolean' ? i.show : true))" :key="index">
             <base-menu-nav-item
               :menu-item="item"
-              :selected="
-                !!selected.title &&
-                !!item.title &&
-                selected.title === item.title
-              "
+              :selected="!!selected.title && !!item.title && selected.title === item.title"
+              :disabled="typeof item.disabled === 'boolean' ? item.disabled : false"
               @click.left="pickItem(item)"
               @click.middle="openTab(item)"
             >
@@ -34,8 +28,17 @@
             <hr v-if="item.hasLine" class="mt-[10px]" />
           </div>
         </div>
-      </transition>
+      </base-fade-transition>
       <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-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="typeof item.show === 'boolean' ? item.show : true" :text="item.title!" :btn="item.color" :disabled="item.disabled" @click="item.action"> </base-btn>
+            </transition>
+          </div></div
+      ></base-fade-transition>
     </section>
   </aside>
 </template>
@@ -75,22 +78,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) => {
-      if (item.title !== dataStore.menu.selectedItem.title) {
-        emit('update:modelValue', item);
+    const pickItem = async (item: MenuItem) => {
+      if (item.title !== dataStore.menu.selectedItem.title && (typeof item.disabled === 'boolean' ? !item.disabled : true)) {
         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/Menu/MenuNavItem.vue

@@ -5,17 +5,13 @@
       selected ? $libStyles.whiteText : $libStyles.blackText,
       $libStyles.rounded,
       $libStyles.textSimple,
+      disabled ? 'cursor-not-allowed opacity-50' : '',
     ]"
     class="h-[60px] flex items-center justify-between hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all"
   >
     <span>{{ menuItem.title }}</span>
     <i v-if="menuItem.icon" class="mdi text-xl pr-4" :class="[menuItem.icon]"></i>
-    <v-tooltip
-      v-if="menuItem.description"
-      activator="parent"
-      location="bottom"
-      >{{ menuItem.description }}</v-tooltip
-    >
+    <v-tooltip v-if="menuItem.description" activator="parent" location="bottom">{{ menuItem.description }}</v-tooltip>
   </div>
 </template>
 
@@ -32,6 +28,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 });
 </script>