hl-core 0.0.7-beta.1 → 0.0.7-beta.11

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/Input/FormInput.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-text-field
+    class="rounded-input"
+    v-model="fieldModel"
+    v-maska="maska"
+    :rules="rules"
+    :loading="loading"
+    :placeholder="placeholder"
+    :type="type"
+    :variant="variant"
+    :clear-icon="clearIcon"
+    :color="color"
+    :hint="hint"
+    :clearable="clearable"
+    :disabled="disabled"
+    :prepend-inner-icon="prependIcon ? prependIcon : ''"
+    :append-icon="appendIcon ? appendIcon : ''"
+    :bg-color="bgColor ? bgColor : ''"
+    @keyup.enter.prevent="submitted"
+  >
+    <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';
+
+export default defineComponent({
+  name: 'BaseRoundedInput',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: 'Поле',
+    },
+    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,
+    },
+    bgColor: {
+      type: String,
+    },
+  },
+  emits: ['update:modelValue', 'submitted'],
+
+  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,
+    };
+  },
+});
+</script>
+
+<style>
+.rounded-input input:focus {
+  border: none !important;
+  outline: none !important;
+}
+
+/* .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;
+}
+</style>

package/components/Input/RoundedInput.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-text-field
+    class="rounded-input"
+    v-model="fieldModel"
+    v-maska="maska"
+    :rules="rules"
+    :loading="loading"
+    :placeholder="placeholder"
+    :type="type"
+    :variant="variant"
+    :clear-icon="clearIcon"
+    :color="color"
+    :hint="hint"
+    :clearable="clearable"
+    :disabled="disabled"
+    :prepend-inner-icon="prependIcon ? prependIcon : ''"
+    :append-icon="appendIcon ? appendIcon : ''"
+    :bg-color="bgColor ? bgColor : ''"
+    @keyup.enter.prevent="submitted"
+  >
+    <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';
+
+export default defineComponent({
+  name: 'BaseRoundedInput',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: 'Поле',
+    },
+    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,
+    },
+    bgColor: {
+      type: String,
+    },
+  },
+  emits: ['update:modelValue', 'submitted'],
+
+  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,
+    };
+  },
+});
+</script>
+
+<style>
+.rounded-input input:focus {
+  border: none !important;
+  outline: none !important;
+}
+
+.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;
+}
+</style>

package/components/Layout/Dialog.vue

@@ -0,0 +1,84 @@
+<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-text>
+        <slot v-if="text" name="content"></slot>
+        {{ text }}
+      </v-card-text>
+      <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: '',
+    },
+    text: {
+      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/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="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<'settings' | 'panel'>,
+      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

@@ -0,0 +1,48 @@
+<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>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    hasBack: {
+      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', 'onMore'],
+  setup() {
+    const dataStore = useDataStore();
+
+    const onClickOutside = () => {
+      dataStore.settings.open = false;
+    };
+
+    return { onClickOutside };
+  },
+});
+</script>

package/components/Layout/Loader.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-progress-circular :size="size" :width="width" :indeterminate="indeterminate" :color="color" :bg-color="bgColor"></v-progress-circular>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'BaseLoader',
+  props: {
+    size: {
+      type: Number,
+      default: 40,
+    },
+    width: {
+      type: Number,
+      default: 4,
+    },
+    indeterminate: {
+      type: Boolean,
+      default: true,
+    },
+    overlay: {
+      type: Boolean,
+      default: true,
+    },
+    color: {
+      type: String,
+      default: '#FAB31C',
+    },
+    bgColor: {
+      type: String,
+      default: '#009C73',
+    },
+  },
+});
+</script>

package/components/Layout/SettingsPanel.vue

@@ -0,0 +1,33 @@
+<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-plus" color="#A0B3D8" class="text-white" variant="flat"></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" :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 logoutUser = async () => {
+  dialog.value = false;
+  await dataStore.logoutUser();
+};
+</script>

package/components/Menu/MenuNav.vue

@@ -0,0 +1,125 @@
+<template>
+  <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>
+    <slot key="slot-content" name="content"></slot>
+    <section key="main" class="px-2 pt-[14px] flex flex-col gap-[10px]">
+      <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" :key="index">
+            <base-menu-nav-item
+              :menu-item="item"
+              :selected="!!selected.title && !!item.title && selected.title === item.title"
+              @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 && 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>
+
+<script lang="ts">
+import { MenuItem } from '@/composables/classes';
+import { RouteLocationNormalized } from 'vue-router';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: 'Заголовок',
+    },
+    selected: {
+      type: Object as PropType<MenuItem>,
+      default: new MenuItem(),
+    },
+    hasBack: {
+      type: Boolean,
+      default: false,
+    },
+    backIcon: {
+      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', '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);
+        if (typeof item.link === 'object') {
+          if (item.link && 'name' in item.link) {
+            router.push(item.link as RouteLocationNormalized);
+          } else {
+            dataStore.showToaster('warning', 'Отсутствует ссылка для перехода');
+          }
+        } else {
+          item.link ? emit('onLink', item) : emit('clicked', item);
+        }
+      }
+    };
+    const openTab = (item: MenuItem) => {
+      if (item.url) {
+        window.open(item.url, '_blank', 'noreferrer');
+      }
+    };
+
+    return { pickItem, openTab };
+  },
+});
+</script>