update breadcrumb

webdevelop-pro · Oct 28, 2024 · 860c38f · 860c38f
1 parent d8baee3
commit 860c38f
Show file tree

Hide file tree

Showing 16 changed files with 216 additions and 216 deletions.
diff --git a/src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue b/src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { PropType } from 'vue';
+import { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric } from 'vue-router';
 
 export interface IBreadcrumb {
   name: string;
-  routeName?: string;
-  params?: object;
+  routeTo?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
   link?: string;
 }
 
@@ -18,66 +18,67 @@ const props = defineProps({
 });
 
 const getComponent = (item: IBreadcrumb) => {
-  if (item.routeName) return 'router-link';
+  if (item.routeTo) return 'router-link';
   if (item.link) return 'a';
   return 'span';
 }
 </script>
 
 <template>
-  <section
-    class="BaseBreadcrumbs base-breadcrumbs is--no-margin"
-    :key="slug"
-  >
-    <ul class="base-breadcrumbs__container">
+    <ul
+      :key="slug"
+      class="BaseBreadcrumbs base-breadcrumbs is--no-margin"
+    >
       <li
         v-for="item in data"
-        :key="item.routeName + item.link + item.name"
+        :key="item.name"
         class="base-breadcrumbs__item-wrap"
       >
         <component
           :is="getComponent(item)"
-          :to="{ name: item.routeName, params: item.params }"
+          :to="item.routeTo"
           :href="item.link"
           class="base-breadcrumbs__item is--h6__title"
         >
           {{ item.name }}
         </component>
         <span class="base-breadcrumbs__divider">
+          <slot>
           /
+          </slot>
         </span>
       </li>
     </ul>
-  </section>
 </template>
 
 <style lang="sass" scoped>
 @import 'index.sass'
 .base-breadcrumbs
   $root: &
 
-  &__container
-    gap: 8px
-    display: flex
-    flex-wrap: wrap
-    padding-left: 0
-    margin: 0
+  gap: $base-bredcrumbs-gap
+  display: flex
+  flex-wrap: wrap
+  padding-left: 0
+  margin: 0
 
   &__divider
-    color: $gray-50
+    color: $base-bredcrumbs-divider-color
 
   &__item-wrap
-    gap: 8px
+    gap: $base-bredcrumbs-gap
     display: flex
 
     &:last-of-type
       #{$root}__item
-        color: $gray-50
+        line-height: inherit
+        color: $base-bredcrumbs-item-color
 
       #{$root}__divider
         display: none
 
   a
     color: inherit !important
     text-decoration: none !important
+    line-height: inherit
 </style>
diff --git a/src/components/BaseBreadcrumbs/index.sass b/src/components/BaseBreadcrumbs/index.sass
@@ -1,2 +1,6 @@
 @import 'UiKit/styles/_colors.sass'
 @import 'UiKit/styles/_global.sass'
+
+$base-bredcrumbs-gap: 8px
+$base-bredcrumbs-divider-color: $gray-50
+$base-bredcrumbs-item-color: $gray-50
diff --git a/src/components/BaseImage/BaseImage.vue b/src/components/BaseImage/BaseImage.vue
@@ -35,6 +35,7 @@ const onImageLoaded = () => {
 			:src="src || defaulImage"
 			:alt="alt"
 			:key="src"
+            loading="lazy"
 			class="base-image__image"
             :class="[`is--${fit}`, { 'is--default-image': !src }]"
 			@load="onImageLoaded"

diff --git a/src/components/common/MenuNavigation/MenuNavigationItem.vue b/src/components/common/MenuNavigation/MenuNavigationItem.vue
@@ -13,7 +13,7 @@ const props = defineProps({
 
 const emit = defineEmits(['open', 'closed']);
 
-const iconMap = import.meta.glob('Docs/public/images/menu/**/*.svg', { eager: true, import: 'default' });
+const iconMap = import.meta.glob('@/assets/images/menu/**/*.svg', { eager: true, import: 'default' });
 
 const route = useRoute();
 
@@ -26,8 +26,8 @@ const getActive = (name: string) => {
 
 const getSvgComponent = (childItem) => {
   const iconPath = childItem?.frontmatter?.menuIcon;
-  if (iconPath && iconMap[`/public${iconPath}`]) {
-    return iconMap[`/public${iconPath}`];
+  if (iconPath && iconMap[`../src/assets${iconPath}`]) {
+    return iconMap[`../src/assets${iconPath}`];
   }
   return null;
 };
@@ -152,6 +152,9 @@ watch(() => route.path, () => {
                     <BaseSvgIcon
                         name="arrow-right"
                     />
+                    <span class="is--link-text-hidden">
+                        {{ item.title }}
+                    </span>
                 </BaseButton>
             </div>
         </div>
@@ -180,6 +183,7 @@ watch(() => route.path, () => {
         align-items: center
         height: 100%
         display: flex
+        user-select: none
 
         @include media-lte(desktop-md)
             height: auto

diff --git a/src/styles/_fonts.sass b/src/styles/_fonts.sass
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap')
+// @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap')
 
 @font-face
   font-family: Avenir
@@ -41,20 +41,3 @@
   font-weight: 600
   font-display: swap
   src: url("UiKit/assets/fonts/Avenir-Medium/Avenir-Medium.woff2") format("woff2"), url("UiKit/assets/fonts/Avenir-Medium/Avenir-Medium.woff") format("woff"), url("UiKit/assets/fonts/Avenir-Medium/Avenir-Medium.ttf") format("truetype")
-
-
-@import 'UiKit/styles/_mixins.sass'
-@import 'UiKit/styles/_colors.sass'
-
-
-em,
-i
-  +font(300)
-  font-style: italic
-strong, b
-  +font(800)
-
-sup
-  font-size: 100%
-
-
diff --git a/src/styles/_global.sass b/src/styles/_global.sass
@@ -5,8 +5,6 @@
 .is--uppercase
     text-transform: uppercase
 
-
-
 .is--lt-tablet-show
     display: none !important
     @include media-lte(tablet)
@@ -103,31 +101,6 @@
 
 
 
-.base-button
-    svg
-        width: 18px
-    &.is--size-small
-        svg
-            width: 15px
-
-
-.base-tag
-    cursor: pointer
-    &.is--active
-        background-color: $secondary !important
-    @media(hover: hover) and (pointer: fine)
-        &:hover
-            background-color: $secondary !important
-
-.is--tags-inline
-    display: flex
-    align-content: center
-    gap: 12px
-    align-self: stretch
-    flex-wrap: wrap
-
-.is--tags-inline + *
-    margin-top: 20px
 
 .is--side-block
     flex-shrink: 0
@@ -155,6 +128,8 @@
         top: 123px
         width: 21%
         max-width: 312px
+        // max-height: calc(100% - 123px)
+        // overflow: auto
 
 .is--flex-row
     display: flex
@@ -234,106 +209,13 @@ hr
     border-top: 0
     border-bottom: 1px solid $gray-50
 
-em
-    font-style: italic
-    font-weight: inherit
-
-
-blockquote,
-q
-    border: 1px solid $gray-20
-    background: $gray-10
-    display: flex
-    padding: 40px
-    align-items: flex-start
-    gap: 28px
-    align-self: stretch
-    position: relative
-
-    p:first-of-type
-        margin: 0
-
-    &::before,
-    &::after
-        content: ""
-        position: absolute
-        width: 70px
-        height: 50px
-        z-index: 0
-        border: none
-        background-image: url("UiKit/assets/sign-left.svg")
-
-    &::before
-        left: 12px
-        top: 12px
-
-    &::after
-        right: 12px
-        bottom: 12px
-        transform: rotate(180deg)
-
-    *
-        z-index: 1
-
-
 // SPACINGS
 
 
 
-
-
-.base-button:not(.is--no-margin)
-    margin-top: 40px
-    & + &
-        margin-top: 20px
-
-* + .slider-swiper
-    margin-top: 60px
-    @include media-lte(tablet)
-      margin-top: 100px
-
-
-blockquote,
-q,
 pre
     margin-top: 60px
 
-
-
-.is--no-margin
-    li + li,
-    h1 + *,
-    .is--h1__title + *,
-    h2 + *,
-    .is--h2__title + *,
-    h3 + *,
-    .is--h3__title + *,
-    h4 + *,
-    .is--h4__title + *,
-    h5 + *,
-    .is--h5__title + *,
-    h6 + *,
-    .is--h6__title + *,
-    .is--subheading-1 + *,
-    .is--subheading-2 + *,
-    * + h1,
-    * + h2,
-    * + h3,
-    * + h4,
-    * + h5,
-    * + h6,
-    * + .is--h1__title,
-    * + .is--h2__title,
-    * + .is--h3__title,
-    * + .is--h4__title,
-    * + .is--h5__title,
-    * + .is--h6__title,
-    a,
-    .base-button,
-    ul,
-    ol
-        margin-top: 0 !important
-
 .is--margin-top-4
     margin-top: 4px !important
 .is--margin-top-8
@@ -374,16 +256,8 @@ pre
     @include media-lte(tablet)
         padding-bottom: 100px !important
 
-.base-breadcrumbs + *
-    margin-top: 40px
-    @include media-lt(tablet)
-      margin-top: 60px
 
 
-.is--container + .is--container:last-child .base-breadcrumbs
-    margin-top: 90px
-    @include media-lt(tablet)
-      margin-top: 60px
 
 .is--link-text-hidden
     border: 0

diff --git a/src/styles/components/_bold.sass b/src/styles/components/_bold.sass
@@ -0,0 +1,4 @@
+
+
+strong, b
+  +font(800)
diff --git a/src/styles/components/_breadcrumbs.sass b/src/styles/components/_breadcrumbs.sass
@@ -0,0 +1,11 @@
+
+.base-breadcrumbs + *
+    margin-top: 40px
+    @include media-lt(tablet)
+      margin-top: 60px
+
+
+.is--container + .is--container:last-child .base-breadcrumbs
+    margin-top: 90px
+    @include media-lt(tablet)
+      margin-top: 60px
diff --git a/src/styles/components/_button.sass b/src/styles/components/_button.sass
@@ -0,0 +1,21 @@
+
+
+.base-button
+    svg
+        width: 18px
+    &.is--size-small
+        svg
+            width: 15px
+
+
+
+
+.base-button:not(.is--no-margin)
+    margin-top: 40px
+    & + &
+        margin-top: 20px
+
+
+.is--no-margin
+    .base-button
+        margin-top: 0 !important