@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/components/wt-notifications-bar/wt-notifications-bar.vue

@@ -0,0 +1,78 @@
+<template>
+  <aside class="wt-notifications-bar">
+    <transition-group name="wt-notifications-transition" tag="div">
+      <wt-notification
+        v-for="(notification, key) of notifications"
+        :type="notification.type"
+        :key="key+notification.text"
+        @close="closeNotification(notification)"
+      >{{ notification.text }}
+      </wt-notification>
+    </transition-group>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'wt-notifications-bar',
+  inject: ['$eventBus'],
+  data: () => ({
+    notificationDuration: 4000,
+    notifications: [],
+  }),
+  created() {
+    try {
+      this.$eventBus.$on('notification', this.showNotification);
+    } catch (err) {
+      console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
+    }
+  },
+  destroyed() {
+    this.$eventBus.$off('notification', this.showNotification);
+  },
+  methods: {
+    showNotification(notification) {
+      this.notifications.unshift(notification);
+      setTimeout(() => this.closeNotification(notification), this.notificationDuration);
+    },
+    closeNotification(notification) {
+      const index = this.notifications.indexOf(notification);
+      this.notifications.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-notifications-bar {
+  @extend %wt-scrollbar;
+
+  position: fixed;
+  top: var(--notifications-bar-corner-margin);
+  right: var(--notifications-bar-corner-margin);
+  max-height: var(--notifications-bar-max-height);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: var(--notifications-bar-z-index);
+
+  .wt-notification {
+    margin: var(--notifications-bar-notifications-margin);
+  }
+}
+
+.wt-notifications-transition-enter-active,
+.wt-notifications-transition-leave-active {
+  transition: all var(--transition);
+}
+
+.wt-notifications-transition-enter,
+.wt-notifications-transition-leave-to {
+  opacity: 0;
+  transform: translateX(60px);
+}
+</style>

package/src/components/wt-page-header/__tests__/wt-page-header.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPageHeader from '../wt-page-header.vue';
+
+describe('WtPageHeader', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPageHeader);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/wt-page-header/wt-page-header.vue

@@ -0,0 +1,83 @@
+<template>
+  <wt-headline>
+    <template v-slot:title-wrapper>
+      <slot>
+      </slot>
+    </template>
+    <template v-slot:title>
+      <slot name="title"></slot>
+    </template>
+    <template v-slot:actions>
+      <slot name="actions"></slot>
+      <slot
+        name="primary-action"
+        v-if="!hidePrimary"
+      >
+        <wt-button
+          :disabled="primaryDisabled"
+          @click="primaryAction"
+        >
+          {{ primaryText || $t('reusable.add') }}
+        </wt-button>
+      </slot>
+      <wt-button
+        v-if="!hideSecondary && !emptySecondary"
+        color="secondary"
+        :disabled="secondaryDisabled"
+        @click="secondaryAction"
+      >
+        {{ secondaryText || $t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-headline>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  hidePrimary: {
+    type: Boolean,
+    default: false,
+  },
+  hideSecondary: {
+    type: Boolean,
+    default: false,
+  },
+  primaryText: {
+    type: String,
+  },
+  primaryAction: {
+    type: Function,
+  },
+  primaryDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  secondaryText: {
+    type: String,
+  },
+  secondaryAction: {
+    type: Function,
+  },
+});
+
+const emptySecondary = computed(() => !(props.secondaryAction || props.secondaryText));
+</script>
+
+<style lang="scss" scoped>
+
+.wt-headline {
+  .wt-button {
+    margin-left: var(--spacing-sm);
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+</style>

package/src/components/wt-page-wrapper/__tests__/WtPageWrapper.spec.js

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPageWrapper from '../wt-page-wrapper.vue';
+
+describe('WtPageWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPageWrapper);
+    expect(wrapper.classes('wt-page-wrapper')).toBe(true);
+  });
+
+  it('renders page wrapper header via header slot', () => {
+    const content = 'Page Wrapper header';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { header: content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__header').text()).toBe(content);
+  });
+
+  it('renders page wrapper actions panel via actions panel slot', () => {
+    const content = 'Page Wrapper actions panel content';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { 'actions-panel': content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__actions-panel').text()).toBe(content);
+  });
+
+  it('renders page wrapper main content via main slot', () => {
+    const content = 'Page Wrapper main';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { main: content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__main').text()).toBe(content);
+  });
+});

package/src/components/wt-page-wrapper/_variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --page-wrapper-padding: var(--spacing-sm);
+  --page-wrapper-section-padding: var(--spacing-sm);
+  --page-wrapper-section-gap: var(--spacing-sm);
+}

package/src/components/wt-page-wrapper/wt-page-wrapper.vue

@@ -0,0 +1,58 @@
+<template>
+  <section class="wt-page-wrapper">
+    <div class="wt-page-wrapper__header">
+      <slot name="header"></slot>
+    </div>
+    <div v-if="actionsPanel" class="wt-page-wrapper__actions-panel">
+      <slot name="actions-panel"></slot>
+    </div>
+    <div class="wt-page-wrapper__main">
+      <slot name="main"></slot>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'wt-page-wrapper',
+  props: {
+    actionsPanel: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100%;
+  max-width: 100%;
+  padding: var(--page-wrapper-padding);
+  gap: var(--page-wrapper-section-gap);
+}
+
+.wt-page-wrapper__header,
+.wt-page-wrapper__actions-panel,
+.wt-page-wrapper__main {
+  box-sizing: border-box;
+  padding: var(--page-wrapper-section-padding);
+  border-radius: var(--border-radius);
+  background: var(--main-color);
+}
+
+.wt-page-wrapper__main {
+  display: flex;
+  flex: 1;
+  width: 100%;
+}
+
+</style>

package/src/components/wt-pagination/__tests__/WtPagination.spec.js

@@ -0,0 +1,38 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtPagination from '../wt-pagination.vue';
+
+describe('WtPagination', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPagination);
+    expect(wrapper.classes('wt-pagination')).toBe(true);
+  });
+
+  it('debounces size change event when debounce prop is true', async () => {
+    const props = {
+      size: '10',
+      debounce: true,
+      debounceDelay: 100,
+    };
+    const wrapper = shallowMount(WtPagination, {
+      props,
+    });
+    props.size = '20';
+    wrapper.setProps(props);
+    expect(wrapper.emitted().change).toBeFalsy();
+    await setTimeout(() => {
+      expect(wrapper.emitted().change[0].length).toBe(1);
+    }, 1000);
+  });
+
+  it('changes pages at icon btn click', async () => {
+    const wrapper = mount(WtPagination, {
+      props: { isNext: true, page: 2 },
+    });
+    const pageControls = wrapper.findAllComponents({ name: 'wt-icon-btn' });
+    pageControls.at(0).vm.$emit('click');
+    pageControls.at(1).vm.$emit('click');
+    console.info(wrapper.emitted());
+    expect(wrapper.emitted().prev.length).toBe(1);
+    expect(wrapper.emitted().next.length).toBe(1);
+  });
+});

package/src/components/wt-pagination/_variables.scss

@@ -0,0 +1,5 @@
+
+:root {
+  --pagination-gap: var(--spacing-xs);
+  --pagination-size-input-width: 70px;
+}

package/src/components/wt-pagination/wt-pagination.vue

@@ -0,0 +1,148 @@
+<template>
+  <footer class="wt-pagination">
+    <div class="wt-pagination__size">
+      <div class="wt-pagination__size-text">{{ $t('webitelUI.pagination.sizeText') }}</div>
+      <wt-input
+        :number-max="1000"
+        :number-min="1"
+        :value="size"
+        class="wt-pagination__size-input"
+        type="number"
+        @input="inputHandler"
+      ></wt-input>
+    </div>
+    <div class="wt-pagination__page-controls">
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!prev"
+            class="wt-pagination__page-control"
+            icon="arrow-left"
+            @click="goPrev"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.prev') }}
+      </wt-tooltip>
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!next"
+            class="wt-pagination__page-control"
+            icon="arrow-right"
+            @click="goNext"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.next') }}
+      </wt-tooltip>
+    </div>
+  </footer>
+</template>
+
+<script>
+import debounce from '../../scripts/debounce';
+
+export default {
+  name: 'wt-pagination',
+  props: {
+    size: {
+      type: [String, Number],
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+    prev: {
+      type: Boolean,
+      default: false,
+    },
+    debounce: {
+      type: Boolean,
+      default: false,
+    },
+    debounceDelay: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  emits: ['change', 'input', 'prev', 'next'],
+  model: {
+    prop: 'size',
+    event: 'change',
+  },
+
+  watch: {
+    size(value) {
+      this.changeSize(value);
+    },
+  },
+
+  data: () => ({
+    defaultSize: '10',
+  }),
+
+  created() {
+    if (this.debounce) this.changeSize = debounce(this.changeSize, this.debounceDelay);
+  },
+
+  methods: {
+    inputHandler(value) {
+      const size = (value >= 0 && value <= 1000)
+        ? value
+        : this.defaultSize;
+      this.$emit('input', size);
+      this.changeSize(size);
+    },
+    changeSize(value) {
+      this.$emit('change', value);
+    },
+    goNext() {
+      this.$emit('next');
+    },
+    goPrev() {
+      this.$emit('prev');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-pagination {
+  @extend %typo-body-1;
+
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.wt-pagination__size {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pagination-gap);
+}
+
+.wt-pagination__size-text {
+  margin-right: var(--pagination-gap);
+}
+
+.wt-pagination__size-input {
+  width: var(--pagination-size-input-width);
+}
+
+.wt-pagination__page-controls {
+  display: flex;
+  align-items: center;
+}
+
+.wt-pagination__page-control {
+  margin-left: var(--pagination-gap);
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+</style>

package/src/components/wt-player/__tests__/WtPlayer.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPlayer from '../wt-player.vue';
+
+describe('WtPlayer', () => {
+  xit('renders a component', () => {
+    const wrapper = shallowMount(WtPlayer);
+    expect(wrapper.classes('wt-player')).toBe(true);
+  });
+});

package/src/components/wt-player/_variables.scss

@@ -0,0 +1,8 @@
+.wt-player {
+  --plyr-color-main: var(--primary-color);
+  --plyr-audio-control-color: var(--icon-primary-color);
+  // --plyr-control-toggle-checked-background: var(--main-color);
+  --player-close-icon-transform-translate-x: var(--spacing-md);
+  // "-1 * var" for use the negative value of a variable
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));
+}

package/src/components/wt-player/wt-player.vue

@@ -0,0 +1,208 @@
+<template>
+  <aside
+    class="wt-player"
+    :class="[`wt-player--position-${position}`]"
+  >
+    <component
+      :is="playerType"
+      class="wt-player__player"
+      ref="player"
+      :src="src"
+      :autoplay="autoplay"
+      controls
+      v-on="listeners"
+    ></component>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
+    <wt-icon-btn
+      v-if="closable"
+      class="wt-player__close-icon"
+      ref="close-icon"
+      icon="close"
+      @click="$emit('close')"
+    ></wt-icon-btn>
+  </aside>
+</template>
+
+<script>
+import Plyr from 'plyr';
+
+export default {
+  name: 'wt-player',
+  props: {
+    src: {},
+    autoplay: {
+      type: Boolean,
+      default: true,
+    },
+    loop: {
+      type: Boolean,
+      default: false,
+    },
+    download: {
+      type: [String, Function, Boolean],
+      default: () => (url) => url.replace('/stream', '/download'),
+    },
+    mime: {
+      type: String,
+      default: 'audio',
+    },
+    // plyr-specific options
+    resetOnEnd: {
+      type: Boolean,
+      default: false,
+    },
+    invertTime: {
+      type: Boolean,
+      default: true,
+    },
+    // plyr is caching volume settings so we should reset them at init
+    resetVolume: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: true,
+    },
+    position: {
+      type: String,
+      default: 'sticky',
+    },
+  },
+  data: () => ({
+    player: null,
+  }),
+
+  watch: {
+    src() {
+      this.setupDownload();
+    },
+    download() {
+      this.setupDownload();
+    },
+  },
+
+  mounted() {
+    this.setupPlayer();
+  },
+
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+      };
+    },
+    playerType() {
+      return this.mime.includes('video') ? 'video' : 'audio';
+    },
+  },
+
+  methods: {
+    async setupPlayer() {
+      await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref
+      const baseURL = this.$baseURL || (process || import.meta).env.BASE_URL;
+      if (this.player) this.player.destroy();
+      const controls = [
+        'play-large', 'play', 'progress', 'current-time',
+        'mute', 'volume', 'captions', 'settings', 'pip',
+        'airplay', 'fullscreen',
+      ];
+      if (this.download) controls.push('download');
+      this.player = new Plyr(this.$refs.player, {
+        // this.player = new Plyr('.wt-player__player', {
+        autoplay: this.autoplay,
+        loadSprite: false,
+        resetOnEnd: this.resetOnEnd,
+        invertTime: this.invertTime,
+        iconUrl: `${baseURL}img/plyr.svg`,
+        controls,
+        loop: {
+          active: this.loop,
+        },
+      });
+
+      if (this.resetVolume) this.makeVolumeReset();
+      if (this.download) this.setupDownload();
+
+      if (this.closable) this.appendCloseIcon();
+      this.$emit('initialized', this.player);
+    },
+    makeVolumeReset() {
+      this.player.volume = 1;
+      this.player.muted = false;
+    },
+    setupDownload() {
+      if (!this.download) this.setupPlayer();
+      else if (typeof this.download === 'string') {
+        this.player.download = this.download;
+      } else if (typeof this.download === 'function') {
+        this.player.download = this.download(this.src);
+      }
+    },
+    appendCloseIcon() {
+      const plyrControls = this.$refs.player.plyr?.elements?.controls;
+      const closeIcon = this.$refs['close-icon'].$el;
+      if (plyrControls) {
+        plyrControls.append(closeIcon);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../node_modules/plyr/src/sass/plyr';
+@import './variables.scss';
+
+.wt-player {
+  @extend %typo-body-2;
+  bottom: 60px;
+
+  &--position {
+    &-sticky {
+      position: sticky;
+    }
+
+    &-relative {
+      position: relative;
+      bottom: unset;
+    }
+
+    &-static {
+      position: static;
+    }
+  }
+
+  .plyr {
+    max-width: 100%; // prevents <video> container overflow
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+  }
+
+  &__close-icon {
+    //transform: translate(var(--player-close-icon-transform-translate-x),
+    //  var(--player-close-icon-transform-translate-y));
+  }
+
+  .plyr__control:hover, {
+    background: var(--accent-secondary-color);
+    color: var(--text-primary-color);
+  }
+
+  .plyr__control--overlaid svg {
+    left: 0; // reset plyr style for video "play" button icon
+  }
+
+  //.plyr__control[role='menuitemradio']::before,
+  //.plyr__control[role='menuitemradio']:hover::before {
+  //  border: 2px solid var(--secondary-color);
+  //  background: var(--main-color);
+  //}
+  //
+  //.plyr__control[role='menuitemradio']::after {
+  //  background: var(--secondary-color);
+  //}
+}
+
+</style>