hl-core 0.0.7-beta.2 → 0.0.7-beta.20

package/components/Input/PanelInput.vue

@@ -0,0 +1,132 @@
+<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 { 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,
+    };
+  },
+});
+</script>

package/components/Input/RoundedInput.vue

@@ -1,43 +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="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>
-      <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 '@/models';
-
 export default defineComponent({
   name: 'BaseRoundedInput',
   props: {
     modelValue: {
-      type: String,
-      default: '',
+      required: false,
     },
     loading: {
       type: Boolean,
@@ -51,9 +52,21 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     placeholder: {
       type: String,
-      default: 'Поле',
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    maska: {
+      type: String,
+      default: '',
     },
     hint: {
       type: String,
@@ -68,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: {
@@ -87,33 +98,24 @@ 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,
     };
   },
@@ -125,14 +127,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

@@ -0,0 +1,42 @@
+<template>
+  <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]']"
+  >
+    <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>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'BasePanel',
+  props: {
+    panelTitle: {
+      type: String,
+      default: '',
+    },
+    whichPanel: {
+      type: String as PropType<PanelTypes>,
+      default: 'panel',
+    },
+  },
+  setup(props) {
+    const dataStore = useDataStore();
+
+    const closePanel = () => {
+      dataStore[props.whichPanel].open = false;
+      dataStore.panelAction = null;
+    };
+
+    return {
+      closePanel,
+    };
+  },
+});
+</script>

package/components/Layout/Header.vue

@@ -1,15 +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-lg cursor-pointer"
-      :class="[backIcon]"
-    ></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>
     {{ title }}
+    <i v-if="hasMore" @click="$emit('onMore')" class="mdi absolute right-5 text-xl cursor-pointer" :class="[moreIcon, hideMoreOnLg ? 'lg:!hidden' : '']"> </i>
   </header>
 </template>
 
@@ -20,15 +13,36 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    hasMore: {
+      type: Boolean,
+      default: false,
+    },
+    hideMoreOnLg: {
+      type: Boolean,
+      default: false,
+    },
     backIcon: {
       type: String,
       default: 'mdi-arrow-left',
     },
+    moreIcon: {
+      type: String,
+      default: 'mdi-cog-outline',
+    },
     title: {
       type: String,
       default: '',
     },
   },
-  emits: ['onBack'],
+  emits: ['onBack', 'onMore'],
+  setup() {
+    const dataStore = useDataStore();
+
+    const onClickOutside = () => {
+      dataStore.settings.open = false;
+    };
+
+    return { onClickOutside };
+  },
 });
 </script>

package/components/Layout/Loader.vue

@@ -1,10 +1,5 @@
 <template>
-  <v-progress-circular
-    :size="size"
-    :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">
@@ -15,10 +10,18 @@ export default defineComponent({
       type: Number,
       default: 40,
     },
+    width: {
+      type: Number,
+      default: 4,
+    },
     indeterminate: {
       type: Boolean,
       default: true,
     },
+    overlay: {
+      type: Boolean,
+      default: true,
+    },
     color: {
       type: String,
       default: '#FAB31C',

package/components/Layout/SettingsPanel.vue

@@ -0,0 +1,48 @@
+<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" @click="handleFontSize('decrease')"></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>
+      <i class="mdi mdi-account-outline text-2xl text-[#A0B3D8]"></i
+    ></base-panel-item>
+    <base-panel-item
+      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>
+    </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-drawer>
+</template>
+
+<script lang="ts" setup>
+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();
+};
+</script>

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,37 +1,51 @@
 <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"
       :has-back="hasBack"
       :back-icon="backIcon"
+      :has-more="hasMore"
+      :hide-more-on-lg="hideMoreOnLg"
+      :more-icon="moreIcon"
       @onBack="$emit('onBack')"
+      @onMore="$emit('onMore')"
     ></base-header>
-    <transition-group enter-active-class="animate__animated animate__fadeIn">
-      <slot name="content"></slot>
-      <section
-        v-if="items && items.length"
-        class="px-2 pt-[14px] flex flex-col gap-[10px]"
-      >
-        <slot name="start"></slot>
-        <base-menu-nav-item
-          v-for="(item, index) of items"
-          :key="index"
-          :menu-item="item"
-          :selected="
-            selected.title && item.title && selected.title === item.title
-          "
-          @click="pickItem(item)"
-        >
-        </base-menu-nav-item>
-        <slot name="end"></slot>
-      </section>
-    </transition-group>
+    <slot key="slot-content" name="content"></slot>
+    <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]">
+          <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"
+              :disabled="typeof item.disabled === 'boolean' ? item.disabled : false"
+              @click.left="pickItem(item)"
+              @click.middle="openTab(item)"
+            >
+            </base-menu-nav-item>
+            <hr v-if="item.hasLine" class="mt-[10px]" />
+          </div>
+        </div>
+      </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="'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>
+    </section>
   </aside>
 </template>
 
 <script lang="ts">
 import { MenuItem } from '@/composables/classes';
+import { RouteLocationNormalized } from 'vue-router';
 
 export default defineComponent({
   props: {
@@ -39,10 +53,6 @@ export default defineComponent({
       type: String,
       default: 'Заголовок',
     },
-    items: {
-      type: Array<MenuItem>,
-      default: [],
-    },
     selected: {
       type: Object as PropType<MenuItem>,
       default: new MenuItem(),
@@ -55,14 +65,44 @@ export default defineComponent({
       type: String,
       default: 'mdi-arrow-left',
     },
+    hasMore: {
+      type: Boolean,
+      default: false,
+    },
+    hideMoreOnLg: {
+      type: Boolean,
+      default: false,
+    },
+    moreIcon: {
+      type: String,
+      default: 'mdi-cog-outline',
+    },
   },
-  emits: ['update:modelValue', 'onLink', 'onBack', 'clicked'],
+  emits: ['onLink', 'onBack', 'onMore', 'clicked'],
   setup(props, { emit }) {
-    const pickItem = (item: MenuItem) => {
-      emit('update:modelValue', item);
-      item.link ? emit('onLink', item) : emit('clicked', item);
+    const dataStore = useDataStore();
+    const router = useRouter();
+
+    const pickItem = async (item: MenuItem) => {
+      if (item.title !== dataStore.menu.selectedItem.title) {
+        if (typeof item.link === 'object') {
+          if (item.link && 'name' in item.link) {
+            await router.push(item.link as RouteLocationNormalized);
+          } else {
+            dataStore.showToaster('warning', 'Отсутствует ссылка для перехода');
+          }
+        } else {
+          emit('onLink', item);
+        }
+      }
+    };
+    const openTab = (item: MenuItem) => {
+      if (item.url) {
+        window.open(item.url, '_blank', 'noreferrer');
+      }
     };
-    return { pickItem };
+
+    return { pickItem, openTab };
   },
 });
 </script>

package/components/Menu/MenuNavItem.vue

@@ -5,10 +5,13 @@
       selected ? $libStyles.whiteText : $libStyles.blackText,
       $libStyles.rounded,
       $libStyles.textSimple,
+      disabled ? 'cursor-not-allowed opacity-50' : '',
     ]"
-    class="h-[60px] flex items-center hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all"
+    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>
   </div>
 </template>
 
@@ -25,6 +28,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 });
 </script>

package/components/Panel/PanelItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <p class="transition-all h-[64px] px-4 flex justify-between items-center border-b-[1px] hover:border-b-[#A0B3D8] text-[16px]">
+    <slot></slot>
+  </p>
+</template>

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>

package/components/Transitions/FadeTransition.vue

@@ -0,0 +1,5 @@
+<template>
+  <transition-group enter-active-class="animate__animated animate__fadeIn">
+    <slot></slot>
+  </transition-group>
+</template>