@webitel/ui-sdk 24.10.73 → 24.10.75

package/src/modules/NavigationMenu/components/navigation-menu.vue

@@ -1,125 +0,0 @@
-<template>
-  <section class="nav-menu">
-    <article class="nav-menu__wrapper">
-      <nav-menu-lvl-1
-        :categories="categories"
-        :selected="selected"
-        @select="select"
-      >
-        <nav-menu-lvl-2
-          :categories="subcategories"
-          class="nav-menu__inner-lvl-2"
-        />
-      </nav-menu-lvl-1>
-      <nav-menu-lvl-2
-        :categories="subcategories"
-        class="nav-menu__outer-lvl-2"
-      />
-    </article>
-  </section>
-</template>
-
-<script setup>
-  import { ref, computed, onMounted } from 'vue';
-  import NavMenuLvl1 from './_internals/nav-menu-lvl-1.vue';
-  import NavMenuLvl2 from './_internals/nav-menu-lvl-2.vue';
-
-  const props = defineProps({
-    navItems: {
-      type: Array,
-      required: true,
-    },
-  });
-
-  const selected = ref({});
-  const categories = computed(() => {
-    return props.navItems.map((navItem) => ({
-      ...navItem,
-      name: navItem.name,
-    }));
-  });
-
-  const subcategories = computed(() => {
-    if (!selected.value.subNav) return [];
-    return selected.value.subNav.map((subNav) => {
-      const route = `${subNav.route}`;
-      const name = subNav.name;
-      return {
-        ...subNav,
-        name,
-        route,
-      };
-    });
-  });
-
-  onMounted(() => {
-    initSelected();
-  });
-
-  function initSelected() {
-    select(categories.value[0]);
-  }
-
-  function select(category) {
-    selected.value = category;
-  }
-</script>
-
-<style lang="scss" scoped>
-  .nav-menu {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    justify-content: center;
-    height: 100%;
-
-    --button-min-height: 60px;
-    --wrapper-width: 60%;
-    --wrapper-height: calc(
-      var(--spacing-sm) * 2
-      + var(--button-min-height) * 7
-      + var(--spacing-2xs) * 6
-    );
-    --lvl-1-bg: var(--dp-18-surface-color);
-    --lvl-1-bg--hover: var(--dp-20-surface-color);
-    --lvl-1-bg--selected: var(--primary-color);
-    --lvl-1-text--selected: var(--primary-on-color);
-
-    @media (#{$media} and #{$media-width-xs}) {
-      --wrapper-width: 100%;
-      --wrapper-height: 100%;
-    }
-
-    &__wrapper {
-      @extend %wt-scrollbar;
-
-      display: grid;
-      box-sizing: border-box;
-      width: var(--wrapper-width);
-      height: var(--wrapper-height);
-      margin: auto;
-      padding: var(--spacing-xs);
-      border-radius: var(--spacing-xs);
-      background: var(--dp-20-surface-color);
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: var(--spacing-sm);
-
-      @media (#{$media} and #{$media-width-xs}) {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    &__inner-lvl-2{
-      display: none;
-
-      @media (#{$media} and #{$media-width-xs}) {
-        display: block;
-      }
-    }
-    &__outer-lvl-2{
-      @media (#{$media} and #{$media-width-xs}) {
-        display: none;
-      }
-    }
-  }
-</style>

package/src/modules/NavigationMenu/css/_navMenu.scss

@@ -1,20 +0,0 @@
-.nav-menu__category {
-  height: 100%;
-  border-radius: var(--border-radius);
-
-  &-option {
-    @extend %typo-subtitle-2;
-
-    display: flex;
-    align-items: center;
-    width: 100%;
-    transition: var(--transition);
-    text-align: left;
-    color: var(--text-main-color);
-    border-radius: var(--spacing-xs);
-
-    .wt-icon {
-      margin-right: var(--spacing-xs);
-    }
-  }
-}

package/src/modules/StartPage/components/start-page-logo.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="start-page-logo">
-    <img :src="image">
-  </div>
-</template>
-
-<script setup>
-  const props = defineProps({
-    image: {
-      type: String,
-      required: true,
-    },
-  });
-</script>
-
-<style lang="scss" scoped>
-  .start-page-logo{
-    min-height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

package/src/modules/StartPage/components/the-start-page.vue

@@ -1,59 +0,0 @@
-<template>
-<start-page-logo :image="logo"/>
-<div class="start-page-wrapper">
-  <start-page-card
-    v-for="(card) of navCards"
-    :key="card.value"
-    :card="card"
-  />
-</div>
-</template>
-
-<script setup>
-  import { computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
-  import { useStore } from 'vuex';
-  import StartPageCard from './start-page-card.vue';
-  import StartPageLogo from './start-page-logo.vue';
-
-  // Vuex store access
-  const store = useStore();
-
-  const { t } = useI18n();
-
-  const props = defineProps({
-    nav: {
-      type: Array,
-      required: true,
-    },
-    appLogo: {
-      type: Object,
-      required: true,
-    }
-  });
-
-  const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
-
-  const logo = computed(() => {
-    return darkMode.value ? props.appLogo.dark : props.appLogo.light;
-  });
-
-  const navCards = computed(() => {
-    return props.nav.map((navItem) => ({
-      ...navItem,
-      image: darkMode.value ? navItem.images.dark : navItem.images.light,
-    }));
-  });
-</script>
-
-<style scoped>
-.start-page-wrapper {
-  box-sizing: border-box;
-  min-width: 264px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 264px);
-  justify-content: center;
-  grid-gap: var(--spacing-sm);
-  padding: var(--spacing-sm);
-}
-</style>