@webitel/ui-sdk 24.10.34 → 24.10.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.34",
+  "version": "24.10.37",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/enums/WebitelApplications/CrmConfigurationSections.enum.js

@@ -4,6 +4,7 @@ const CrmConfigurationSections = Object.freeze({
 	SERVICE_CATALOG: 'service-catalog',
 	PRIORITIES: 'priorities',
 	STATUSES: 'statuses',
+	SOURCES: 'sources',
 	CLOSURE_REASONS: 'closure-reasons',
 	CONTACT_GROUPS: 'contact-groups',
 	CASE_SOURCES: 'case-sources',

package/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-1.vue

@@ -0,0 +1,65 @@
+<template>
+  <ul class="nav-menu__category nav-menu__category--lvl-1">
+    <li
+      v-for="(category, key) of categories"
+      :key="key"
+      class="nav-menu__category-option__wrapper"
+    >
+      <button
+        :class="{ 'nav-menu__category-option--selected': selected.value === category.value }"
+        class="nav-menu__category-option nav-menu__category-option--lvl-1"
+        @click="select(category)"
+      >
+        <wt-icon
+          :color="selected.value === category.value ? 'on-primary' : 'default'"
+          :icon="category.value"
+          icon-prefix="nav"
+        />
+        {{ category.name }}
+      </button>
+      <div v-show="selected.value === category.value">
+        <slot />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+  import { defineProps, defineEmits } from 'vue';
+
+  const props = defineProps({
+    categories: {
+      type: Array,
+      default: () => [],
+    },
+    selected: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+
+  const emit = defineEmits(['select']);
+
+  function select(category) {
+    emit('select', category);
+  }
+</script>
+
+<style lang="scss" scoped>
+@import '../../css/navMenu';
+
+.nav-menu__category-option--lvl-1 {
+  background: var(--lvl-1-bg);
+  text-transform: uppercase;
+  padding: var(--spacing-xs) var(--spacing-sm);
+
+  &:hover {
+    background: var(--lvl-1-bg--hover);
+  }
+
+  &.nav-menu__category-option--selected {
+    color: var(--lvl-1-text--selected);
+    background: var(--lvl-1-bg--selected);
+  }
+}
+</style>

package/src/modules/NavigationMenu/components/_internals/nav-menu-lvl-2.vue

@@ -0,0 +1,77 @@
+<template>
+  <ul class="nav-menu__category nav-menu__category--lvl-2">
+    <li
+      v-for="(category, key) of categories"
+      :key="key"
+      class="nav-menu__category-option__wrapper nav-menu__category-option
+            nav-menu__category-option--lvl-2"
+      >
+      <span class="nav-menu__category-indicator" />
+      <router-link
+        :to="category.route"
+        class="nav-menu__link"
+      >
+        {{ category.name }}
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+  import { defineProps } from 'vue';
+
+  const props = defineProps({
+    categories: {
+      type: Array,
+      default: () => [],
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+@import '../../css/navMenu';
+
+.nav-menu{
+  &__category{
+    &--lvl-2 {
+      display: flex;
+      flex-direction: column;
+      overflow-y: scroll;
+      padding: var(--spacing-xs);
+      box-shadow: var(--elevation-6);
+      border-radius: var(--spacing-xs);
+      gap: var(--spacing-xs);
+    }
+    &-option{
+      @extend %typo-subtitle-1;
+    }
+    &-indicator {
+      position: relative;
+      display: block;
+      width: var(--icon-md-size);
+      height: var(--icon-md-size);
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: var(--headline-nav-indicator-size);
+        height: var(--headline-nav-indicator-size);
+        background: var(--text-main-color);
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+      }
+    }
+
+  }
+  &__link {
+    @extend %typo-subtitle-1;
+    color: var(--text-main-color);
+
+    &:hover, &:active {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<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

@@ -0,0 +1,20 @@
+.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-card.vue

@@ -0,0 +1,73 @@
+<template>
+  <article class="start-page-card">
+    <header class="start-page-card__header">
+      <wt-icon v-if="card.disabled" icon="lock"/>
+      {{ card.name }}
+    </header>
+    <section class="start-page-card__main-section">
+      <img :src="card.image" :alt="card.name">
+      <p class="start-page-card__description">
+        {{ card.text }}
+      </p>
+    </section>
+    <footer>
+      <wt-button
+        class="start-page-card__button"
+        :disabled="card.disabled"
+        color="secondary"
+        wide
+        @click="open"
+      >
+        {{ $t('reusable.open') }}
+      </wt-button>
+    </footer>
+  </article>
+</template>
+
+<script setup>
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const props = defineProps({
+    card: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const open = () => {
+    return router.push(props.card.route);
+  };
+</script>
+
+<style lang="scss" scoped>
+.start-page-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  width: 264px;
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--content-wrapper-color);
+  color: var(--text-main-color);
+
+  &__header {
+    @extend %typo-heading-4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &__description {
+    @extend %typo-body-1;
+    height: 78px;
+    //in order to cut text after 3rd line:
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+
+</style>

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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,59 @@
+<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>