@webitel/ui-sdk 0.1.1 → 0.1.2-vue3

package/src/components/molecules/wt-timepicker/wt-timepicker.vue

@@ -1,110 +1,173 @@
 <template>
-  <div class="wt-timepicker">
-    <wt-time-input
-      v-if="isHour"
-      v-model="hour"
-      :label="$t('webitelUI.timepicker.hour')"
-      :maxValue="23"
-      :disabled="disabled"
-    ></wt-time-input>
-    <wt-time-input
-      v-if="isMin"
-      v-model="min"
-      :label="$t('webitelUI.timepicker.min')"
-      :maxValue="59"
-      :disabled="disabled"
-    ></wt-time-input>
-    <wt-time-input
-      v-if="isSec"
-      v-model="sec"
-      :label="$t('webitelUI.timepicker.sec')"
-      :maxValue="59"
-      :disabled="disabled"
-    ></wt-time-input>
+  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
+    <wt-label
+      v-if="label"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      {{ `${label} (${format})` }}
+    </wt-label>
+    <div class="wt-timepicker__wrapper">
+      <wt-time-input
+        v-if="isHour"
+        v-model="hour"
+        :v="v"
+        :label="label ? null : $t('webitelUI.timepicker.hour') "
+        :maxValue="dateMode ? null : 23"
+        :disabled="disabled"
+        hide-input-info
+      ></wt-time-input>
+      <wt-time-input
+        v-if="isMin"
+        v-model="min"
+        :v="v"
+        :label="label ? null : $t('webitelUI.timepicker.min')"
+        :maxValue="59"
+        :disabled="disabled"
+        hide-input-info
+      ></wt-time-input>
+      <wt-time-input
+        v-if="isSec"
+        v-model="sec"
+        :v="v"
+        :label="label ? null :  $t('webitelUI.timepicker.sec')"
+        :maxValue="59"
+        :disabled="disabled"
+        hide-input-info
+      ></wt-time-input>
+    </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'wt-timepicker',
-    props: {
-      value: {
-        type: [String, Number],
-        default: 0,
-      },
-      label: {
-        type: String,
-      },
-      format: {
-        type: String,
-        default: 'hh:mm:ss',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
+const SEC_IN_HOUR = 60 * 60;
+const SEC_IN_MIN = 60;
+
+export default {
+  name: 'wt-timepicker',
+  mixins: [validationMixin],
+  props: {
+    value: {
+      type: [String, Number],
+      default: 0,
     },
-    model: {
-      prop: 'value',
-      event: 'change',
+    dateMode: {
+      type: Boolean,
+      default: false,
     },
-
-    created() {
+    label: {
+      type: String,
+      default: '',
+    },
+    format: {
+      type: String,
+      default: 'hh:mm:ss',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
     },
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
 
-    computed: {
-      isHour() {
-        return this.format.includes('hh');
+  computed: {
+    isHour() {
+      return this.format.includes('hh');
+    },
+    isMin() {
+      return this.format.includes('mm');
+    },
+    isSec() {
+      return this.format.includes('ss');
+    },
+    hour: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getHours()
+          : Math.floor(this.value / SEC_IN_HOUR);
       },
-      isMin() {
-        return this.format.includes('mm');
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setHours(value)
+          : this.value - this.hour * SEC_IN_HOUR + value * SEC_IN_HOUR;
+        this.$emit('input', newValue);
       },
-      isSec() {
-        return this.format.includes('ss');
+    },
+    min: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getMinutes()
+          : Math.floor((this.value / SEC_IN_MIN) % 60);
       },
-      hour: {
-        get() {
-          return new Date(+this.value).getHours();
-        },
-        set(value) {
-          const newValue = new Date(this.value).setHours(value);
-          this.$emit('change', newValue);
-        },
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setMinutes(value)
+          : this.value - this.min * SEC_IN_MIN + value * SEC_IN_MIN;
+        this.$emit('input', newValue);
       },
-      min: {
-        get() {
-          return new Date(+this.value).getMinutes();
-        },
-        set(value) {
-          const newValue = new Date(this.value).setMinutes(value);
-          this.$emit('change', newValue);
-        },
+    },
+    sec: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getSeconds()
+          : Math.floor(this.value % 60);
       },
-      sec: {
-        get() {
-          return new Date(+this.value).getSeconds();
-        },
-        set(value) {
-          const newValue = new Date(this.value).setSeconds(value);
-          this.$emit('change', newValue);
-        },
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setSeconds(value)
+          : this.value - this.sec + +value;
+        this.$emit('input', newValue);
       },
     },
+  },
 
-    methods: {},
-  };
+  methods: {},
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-timepicker {
-    display: flex;
+.wt-timepicker {
+  display: flex;
+  flex-direction: column;
+}
+
+.wt-label {
+  .wt-timepicker:hover &,
+  .wt-timepicker:focus-within & {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-timepicker--invalid:hover &,
+  .wt-timepicker--invalid:focus-within & {
+    color: var(--label--invalid-color);
   }
+}
 
-  .wt-time-input {
-    margin-right: var(--timepicker-input-margin);
+.wt-timepicker__wrapper {
+  display: flex;
+}
 
-    &:last-child {
-      margin-right: 0;
-    }
+.wt-time-input {
+  width: var(--timepicker-input-width);
+  margin-right: var(--timepicker-input-margin);
+
+  &:last-child {
+    margin-right: 0;
   }
+}
+
 </style>

package/src/components/organisms/wt-app-header/__tests__/WtAppHeader.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+import WtAppHeader from '../wt-app-header.vue';
+
+describe('WtAppHeader', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAppHeader);
+    expect(wrapper.classes('wt-app-header')).toBe(true);
+  });
+
+  it('renders a app-header content via default slot', () => {
+    const content = 'app header content';
+    const wrapper = shallowMount(WtAppHeader, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-app-header').text()).toBe(content);
+  });
+});

package/src/components/organisms/wt-app-header/__tests__/WtAppNavigator.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import WebitelApplications from '../../../../enums/WebitelApplications/WebitelApplications.enum';
+import WtAppNavigator from '../wt-app-navigator.vue';
+
+const apps = [
+  { name: WebitelApplications.ADMIN, href: '' },
+  { name: WebitelApplications.HISTORY, href: '' },
+  { name: WebitelApplications.SUPERVISOR, href: '' },
+];
+describe('WtAppNavigator', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAppNavigator);
+    expect(wrapper.classes('wt-app-navigator')).toBe(true);
+  });
+  it('renders specified app cards', () => {
+    const wrapper = shallowMount(WtAppNavigator, {
+      propsData: {
+        apps,
+      },
+    });
+    expect(wrapper.findAll('.wt-app-navigator__card').length).toBe(3);
+  });
+});

package/src/components/organisms/wt-app-header/__tests__/WtHeaderActions.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeaderActions from '../wt-header-actions.vue';
+
+describe('WtHeaderActions', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeaderActions);
+    expect(wrapper.classes('wt-header-actions')).toBe(true);
+  });
+
+  it('renders user data', () => {
+    const user = {
+      name: 'user nanme',
+      account: 'acc@ou.nt',
+    };
+    const wrapper = shallowMount(WtHeaderActions, {
+      propsData: { user },
+    });
+    expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.name);
+    expect(wrapper.find('.wt-header-actions__account').text()).toBe(user.account);
+  });
+});

package/src/components/organisms/wt-app-header/wt-app-header.vue

@@ -0,0 +1,24 @@
+<template>
+  <header class="wt-app-header">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+  export default {
+    name: 'wt-app-header',
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-app-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--wt-app-header-content-gap);
+    min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
+    padding: var(--wt-app-header-padding);
+    box-sizing: border-box;
+    background: var(--header-color);
+  }
+</style>

package/src/components/organisms/wt-app-header/wt-app-navigator.vue

@@ -0,0 +1,249 @@
+<template>
+  <div v-clickaway="close" class="wt-app-navigator">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          :class="{'active': isOpened}"
+          class="wt-app-navigator__btn"
+          icon="app-navigator"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.appNavigator.title') }}
+    </wt-tooltip>
+
+    <transition name="fade">
+      <nav
+        v-show="isOpened"
+        class="wt-app-navigator__nav-wrapper"
+      >
+        <h3 class="wt-app-navigator__nav-title">
+          {{ $t('webitelUI.appNavigator.title') }}
+        </h3>
+        <ul class="wt-app-navigator__nav">
+
+          <li
+            v-if="formattedApps[WebitelApplications.AGENT]"
+            :class="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AGENT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AGENT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AGENT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.SUPERVISOR]"
+            :class="{'active': formattedApps[WebitelApplications.SUPERVISOR].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.SUPERVISOR].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.SUPERVISOR]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.HISTORY]"
+            :class="{'active': formattedApps[WebitelApplications.HISTORY].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.HISTORY].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.HISTORY]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.HISTORY]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="false && formattedApps[WebitelApplications.AUDIT]"
+            :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AUDIT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ADMIN]"
+            :class="{'active': formattedApps[WebitelApplications.ADMIN].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.ADMIN].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ADMIN]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.ADMIN]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ANALYTICS]"
+            :class="{'active': formattedApps[WebitelApplications.ANALYTICS].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.ANALYTICS].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ANALYTICS]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+              >
+            </a>
+          </li>
+
+        </ul>
+      </nav>
+    </transition>
+  </div>
+</template>
+
+<script>
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+
+export default {
+  name: 'wt-app-navigator',
+  data: () => ({
+    WebitelApplications,
+    isOpened: false,
+  }),
+
+  props: {
+    currentApp: {
+      type: String,
+    },
+    apps: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  computed: {
+    formattedApps() {
+      return this.apps.reduce((apps, app) => ({
+        ...apps,
+        [app.name]: {
+          ...app,
+          currentApp: this.currentApp === app.name,
+        },
+      }), {});
+    },
+  },
+
+  methods: {
+    close() {
+      this.isOpened = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-app-navigator {
+  position: relative;
+  z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  align-items: center;
+}
+
+// dropdown part
+.wt-app-navigator__nav-wrapper {
+  @extend %wt-scrollbar;
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  overflow: auto;
+  max-height: var(--wt-app-navigator-max-height);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  padding: var(--wt-app-header-content-gap);
+  transition: var(--transition);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-10);
+}
+
+.wt-app-navigator__nav-title {
+  @extend %typo-subtitle-1;
+  margin-bottom: var(--wt-app-header-content-gap);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+// ul with li apps
+.wt-app-navigator__nav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--wt-app-navigator-item-gap);
+}
+
+.wt-app-navigator__card {
+  box-sizing: border-box;
+  width: var(--wt-app-navigator-item-size);
+  height: var(--wt-app-navigator-item-size);
+  transition: var(--transition);
+  border: var(--wt-app-navigator-item-border);
+  border-color: var(--wt-app-navigator-item-border-color);
+  border-radius: var(--border-radius);
+
+  &.active, &:hover {
+    border-color: var(--wt-app-navigator-item-border-color--hover);
+  }
+}
+
+// a tag
+.wt-app-navigator__card__link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+// img inside a
+.wt-app-navigator__card__img {
+  width: 100%;
+  height: 100%;
+}
+</style>