@webitel/ui-sdk 24.10.72 → 24.10.74

package/package.json

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

package/src/components/index.js

@@ -64,6 +64,9 @@ import WtTextarea from './wt-textarea/wt-textarea.vue';
 import WtTimeInput from './wt-time-input/wt-time-input.vue';
 import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
 import WtTooltip from './wt-tooltip/wt-tooltip.vue';
+import WtNavigationMenu
+  from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
+import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
 
 const Components = {
   WtActionBar,
@@ -128,6 +131,8 @@ const Components = {
   WtDummy,
   WtStepper,
   WtExpansionPanel,
+  WtNavigationMenu,
+  WtStartPage,
 };
 
 export default Components;

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue

@@ -0,0 +1,73 @@
+<template>
+  <ul class="nav-menu__category nav-menu-lvl-1">
+    <li
+      v-for="(category, key) of categories"
+      :key="key"
+      class="nav-menu__option"
+    >
+      <button
+        :class="{ 'nav-menu__item--selected': selected.value === category.value }"
+        class="nav-menu__item nav-menu__item--active"
+        @click="select(category)"
+      >
+        <wt-icon
+          :color="selected.value === category.value ? 'on-primary' : 'default'"
+          :icon="icons.find((icon) => icon.includes(category.value))"
+        />
+        {{ 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: () => ({}),
+  },
+  icons: {
+    type: Array,
+    default: () => ([]),
+  },
+});
+
+const emit = defineEmits(['select']);
+
+function select(category) {
+  emit('select', category);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../css/nav-menu';
+
+.nav-menu__item {
+  &--active {
+    background: var(--secondary-color);
+
+    &:hover {
+      background: var(--secondary-hover-color);
+    }
+  }
+
+  &--selected {
+    color: var(--primary-on-color);
+    background: var(--primary-color);
+
+    &:hover {
+      color: var(--primary-on-color);
+      background: var(--primary-color);
+    }
+  }
+}
+</style>

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-2.vue

@@ -0,0 +1,66 @@
+<template>
+  <ul class="nav-menu__category nav-menu-lvl-2">
+    <li
+      v-for="(category, key) of categories"
+      :key="key"
+      class="nav-menu__option
+             nav-menu__item
+             nav-menu-lvl-2--inner"
+    >
+      <span class="nav-menu-lvl-2__indicator" />
+      <router-link
+        :to="category.route"
+        class="nav-menu-lvl-2__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/nav-menu';
+
+.nav-menu-lvl-2 {
+  @extend %wt-scrollbar;
+  overflow-y: auto;
+
+  .nav-menu-lvl-2__indicator {
+    position: relative;
+    display: block;
+    width: var(--spacing-md);
+    height: var(--spacing-md);
+
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--spacing-2xs);
+      height: var(--spacing-2xs);
+      content: '';
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      background: var(--text-main-color);
+    }
+  }
+
+  &__link {
+    color: var(--text-main-color);
+
+    &:hover, &:active {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

package/src/components/on-demand/wt-navigation-menu/components/wt-navigation-menu.vue

@@ -0,0 +1,141 @@
+<template>
+  <section class="wt-navigation-menu">
+    <article class="wt-navigation-menu__wrapper">
+      <nav-menu-lvl-1
+        :categories="categories"
+        :icons="icons"
+        :selected="selected"
+        @select="select"
+      >
+        <nav-menu-lvl-2
+          :categories="subcategories"
+          class="wt-navigation-menu__categories--display"
+        />
+      </nav-menu-lvl-1>
+      <nav-menu-lvl-2
+        :categories="subcategories"
+        class="wt-navigation-menu__categories--hidden"
+      />
+    </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({
+
+  /** entire navigation hierarchy. Value: `{ value: string, name: string, subNav: [{ value: string, route: string, name: string}] }`
+   **/
+
+  nav: {
+    type: Array,
+    required: true,
+  },
+
+  /** array icons to display in 1 level menu
+   */
+
+  icons: {
+    type: Array,
+    default: () => ([]),
+  },
+});
+
+const selected = ref({});
+
+const categories = computed(() => {
+  return props.nav.map((navItem) => ({
+    ...navItem,
+    name: navItem.name,
+  }));
+});
+
+const subcategories = computed(() => {
+  if (!selected.value.subNav) return [];
+  return selected.value.subNav.map((subNav) => {
+    const route = selected.value.route ? `${selected.value.route}/${subNav.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>
+@import '../../../../css/main.scss';
+@import '../../../../css/styleguide/viewport-breakpoints/_viewport-breakpoints.scss';
+.wt-navigation-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
+  );
+
+  @media only screen and (max-width: $viewport-sm) {
+    --wrapper-width: 80%;
+  }
+
+  @media only screen and (max-width: $viewport-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-sm);
+    border-radius: var(--spacing-xs);
+    background: var(--content-wrapper-color);
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: var(--spacing-sm);
+
+    @media only screen and (max-width: $viewport-xs) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__categories--display {
+    display: none;
+
+    @media only screen and (max-width: $viewport-xs) {
+      display: block;
+    }
+  }
+
+  &__categories--hidden {
+    @media only screen and (max-width: $viewport-xs) {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss

@@ -0,0 +1,32 @@
+@import '../../../../css/main.scss';
+
+.nav-menu {
+  &__category {
+    height: 100%;
+    border-radius: var(--border-radius);
+  }
+
+  &__option {
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-2xs);
+    }
+  }
+
+  &__item {
+    @extend %typo-body-1;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--button-min-height);
+    padding: 18px 20px;
+    transition: var(--transition);
+    text-align: left;
+    color: var(--text-main-color);
+    border-radius: var(--border-radius);
+
+    .wt-icon {
+      margin-right: var(--spacing-xs);
+    }
+  }
+}

package/src/{modules/StartPage → components/on-demand/wt-start-page}/components/start-page-card.vue

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

package/src/components/on-demand/wt-start-page/components/start-page-logo.vue

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

package/src/components/on-demand/wt-start-page/components/wt-start-page.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="wt-start-page">
+    <start-page-logo
+      v-if="appLogo"
+      :logo="logo" />
+
+    <div class="wt-start-page__wrapper">
+      <start-page-card
+        v-for="card of navCards"
+        :key="card.value"
+        :card="card"
+      />
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import StartPageCard from './start-page-card.vue';
+import StartPageLogo from './start-page-logo.vue';
+
+const props = defineProps({
+
+  /** entire navigation hierarchy. Value: `{ value: string, route: string, name: string, text: string, images: object - { light: string, dark: string } }`
+   **/
+
+  nav: {
+    type: Array,
+    required: true,
+  },
+  appLogo: {
+    type: Object,
+  },
+  darkMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const logo = computed(() => {
+  return props.darkMode ? props.appLogo.dark : props.appLogo.light;
+});
+
+const navCards = computed(() => {
+  return props.nav.map((navItem) => ({
+    ...navItem,
+    image: props.darkMode ? navItem.images.dark : navItem.images.light,
+  }));
+});
+</script>
+
+<style scoped>
+.wt-start-page__wrapper {
+  display: grid;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 264px;
+  padding: var(--spacing-sm);
+  grid-template-columns: repeat(auto-fit, 264px);
+  grid-gap: var(--spacing-sm);
+}
+</style>

package/src/scripts/index.js

@@ -30,7 +30,7 @@ import {
   objSnakeToCamel,
   objCamelToSnake,
   objCamelToKebab,
-} from 'caseConverters.js';
+} from './caseConverters.js';
 
 
 export {

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

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

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