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

package/components/Menu/MenuNav.vue

@@ -0,0 +1,68 @@
+<template>
+  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2">
+    <base-header
+      class="justify-center"
+      :title="title"
+      :has-back="hasBack"
+      :back-icon="backIcon"
+      @onBack="$emit('onBack')"
+    ></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>
+  </aside>
+</template>
+
+<script lang="ts">
+import { MenuItem } from '@/composables/classes';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: 'Заголовок',
+    },
+    items: {
+      type: Array<MenuItem>,
+      default: [],
+    },
+    selected: {
+      type: Object as PropType<MenuItem>,
+      default: new MenuItem(),
+    },
+    hasBack: {
+      type: Boolean,
+      default: false,
+    },
+    backIcon: {
+      type: String,
+      default: 'mdi-arrow-left',
+    },
+  },
+  emits: ['update:modelValue', 'onLink', 'onBack', 'clicked'],
+  setup(props, { emit }) {
+    const pickItem = (item: MenuItem) => {
+      emit('update:modelValue', item);
+      item.link ? emit('onLink', item) : emit('clicked', item);
+    };
+    return { pickItem };
+  },
+});
+</script>

package/components/Menu/MenuNavItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    :class="[
+      selected ? $libStyles.blueBg : $libStyles.blueBgLight,
+      selected ? $libStyles.whiteText : $libStyles.blackText,
+      $libStyles.rounded,
+      $libStyles.textSimple,
+    ]"
+    class="h-[60px] flex items-center hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all"
+  >
+    <span>{{ menuItem.title }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { MenuItem } from '@/composables/classes';
+
+export default defineComponent({
+  props: {
+    menuItem: {
+      type: Object as PropType<MenuItem>,
+      default: new MenuItem(),
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>

package/composables/axios.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+import interceptors from '@/api/interceptors';
+
+export const useAxios = (baseURL: string) => {
+  const axiosInstance = axios.create({
+    baseURL: baseURL,
+  });
+  interceptors(axiosInstance);
+
+  return axiosInstance;
+};