@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/components/organisms/wt-table-column-select/wt-table-column-select.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="wt-table-column-select">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="column-select"
+          @click="openPopup"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableColumnSelect.title') }}
+    </wt-tooltip>
+    <wt-popup
+      v-if="isColumnSelectPopup"
+      class="wt-table-column-select__popup"
+      @close="close"
+    >
+      <template slot="title">
+        {{ $t('webitelUI.tableColumnSelect.title') }}
+      </template>
+      <template slot="main">
+        <ul class="wt-table-column-select__popup__list">
+          <li
+            v-for="(col, key) of changeableDraft"
+            :key="key"
+            class="wt-table-column-select__popup__item"
+            @click.capture.prevent="col.show = !col.show"
+          >
+            <wt-checkbox v-model="col.show" :label="col.text" />
+          </li>
+        </ul>
+      </template>
+      <template slot="actions">
+        <wt-button
+          @click="setShownColumns"
+        >{{ $t('reusable.add') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="close"
+        >{{ $t('reusable.cancel') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script>
+import deepCopy from 'deep-copy';
+
+export default {
+  name: 'wt-table-column-select',
+  props: {
+    headers: {
+      type: Array,
+      required: true,
+      description: 'Each header should have following schema: { value: String, show: Boolean, text: String }',
+    },
+    staticHeaders: {
+      type: Array,
+      default: () => [],
+      description: 'Header values to exclude from selection',
+    },
+  },
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
+  data: () => ({
+    draft: [], // headers draft
+    isColumnSelectPopup: false,
+  }),
+
+  watch: {
+    isColumnSelectPopup: {
+      handler() {
+        this.fillHeadersDraft();
+      },
+    },
+  },
+  computed: {
+    changeableDraft() {
+      return this.draft.filter((header) => !this.staticHeaders.includes(header.value));
+    },
+  },
+  methods: {
+    openPopup() {
+      this.isColumnSelectPopup = true;
+    },
+    close() {
+      this.isColumnSelectPopup = false;
+    },
+    fillHeadersDraft() {
+      this.draft = deepCopy(this.headers);
+    },
+    setShownColumns() {
+      this.$emit('change', this.draft);
+      this.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-table-column-select {
+  line-height: 0; // prevent 24x28 icon heght :/
+}
+
+.wt-table-column-select__popup__list {
+  @extend %wt-scrollbar;
+  overflow: auto;
+  width: 550px; // fixme popup fixed sizes
+  max-height: 35vh; // fixme popup fixed sizes
+}
+
+.wt-table-column-select__popup__item {
+  margin-bottom: var(--spacing-xs);
+}
+</style>

package/src/components/transitions/__tests__/ExpandTransition.spec.js

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

package/src/components/transitions/wt-expand-transition.vue

@@ -0,0 +1,70 @@
+<script>
+/* eslint-disable no-param-reassign */
+// https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
+export default {
+  name: 'wt-expand-transition',
+  functional: true,
+  render(createElement, context) {
+    const data = {
+      props: {
+        name: 'expand',
+      },
+      on: {
+        afterEnter(element) {
+          element.style.height = 'auto';
+        },
+        enter(element) {
+          const { width } = getComputedStyle(element);
+          element.style.width = width;
+          element.style.position = 'absolute';
+          element.style.visibility = 'hidden';
+          element.style.height = 'auto';
+
+          const { height } = getComputedStyle(element);
+          element.style.width = null;
+          element.style.position = null;
+          element.style.visibility = null;
+          element.style.height = 0;
+
+          // Force repaint to make sure the
+          // animation is triggered correctly.
+          // eslint-disable-next-line no-unused-expressions
+          getComputedStyle(element).height;
+
+          // eslint-disable-next-line no-return-assign
+          requestAnimationFrame(() => element.style.height = height);
+        },
+        leave(element) {
+          const { height } = getComputedStyle(element);
+          element.style.height = height;
+          // eslint-disable-next-line no-unused-expressions
+          getComputedStyle(element).height;
+
+          // eslint-disable-next-line no-return-assign
+          requestAnimationFrame(() => element.style.height = 0);
+        },
+      },
+    };
+    return createElement('transition', data, context.children);
+  },
+};
+</script>
+
+<style lang="scss">
+.expand-enter-active,
+.expand-leave-active {
+  transition: height var(--transition);
+  overflow: hidden;
+}
+
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+}
+/*
+  // expand animation optimization
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+ */
+</style>

package/src/css/components/_components.scss

@@ -1,25 +1,45 @@
-@import "atoms/wt-badge/variables";
-@import "atoms/wt-button/variables";
-@import "atoms/wt-icon/variables";
-@import "atoms/wt-input-info/variables";
-@import "atoms/wt-divider/variables";
-@import "atoms/wt-label/variables";
-@import "atoms/wt-loader/variables";
-@import "atoms/wt-tooltip/variables";
-
-@import "molecules/wt-icon-btn/variables";
-@import "molecules/wt-popup/variables";
-@import "molecules/wt-radio/variables";
-@import "molecules/wt-checkbox/variables";
-@import "molecules/wt-datepicker/variables";
-@import "molecules/wt-datetimepicker/variables";
-@import "molecules/wt-input/variables";
-@import "molecules/wt-notification/variables";
-@import "molecules/wt-search-bar/variables";
-@import "molecules/wt-select/variables";
-@import "molecules/wt-switcher/variables";
-@import "molecules/wt-tabs/variables";
-@import "molecules/wt-textarea/variables";
-@import "molecules/wt-timepicker/variables";
-
-@import "organisms/wt-pagination/variables";
+@import 'atoms/wt-avatar/variables';
+@import 'atoms/wt-badge/variables';
+@import 'atoms/wt-chip/variables';
+@import "atoms/wt-button/variables";
+@import "atoms/wt-icon/variables";
+@import "atoms/wt-indicator/variables";
+@import "atoms/wt-input-info/variables";
+@import "atoms/wt-divider/variables";
+@import "atoms/wt-label/variables";
+@import "atoms/wt-loader/variables";
+@import "atoms/wt-rounded-action/variables";
+@import "atoms/wt-tooltip/variables";
+@import "atoms/wt-context-menu/variables";
+
+@import "molecules/wt-icon-btn/variables";
+@import "molecules/wt-popup/variables";
+@import "molecules/wt-progress-bar/variables";
+@import "molecules/wt-radio/variables";
+@import "molecules/wt-checkbox/variables";
+@import "molecules/wt-datepicker/variables";
+@import "molecules/wt-datetimepicker/variables";
+@import "molecules/wt-input/variables";
+@import "molecules/wt-notification/variables";
+@import "molecules/wt-search-bar/variables";
+@import "molecules/wt-select/variables";
+@import "molecules/wt-slider/variables";
+@import "molecules/wt-switcher/variables";
+@import "molecules/wt-tabs/variables";
+@import "molecules/wt-tags-input/variables";
+@import "molecules/wt-textarea/variables";
+@import "molecules/wt-timepicker/variables";
+@import "molecules/wt-button-select/variables";
+@import "molecules/wt-load-bar/variables";
+
+@import "organisms/wt-headline/variables";
+@import "organisms/wt-headline-nav/variables";
+@import "organisms/wt-app-header/variables";
+@import "organisms/wt-navigation-bar/variables";
+@import "organisms/wt-notifications-bar/variables";
+@import "organisms/wt-page-wrapper/variables";
+@import "organisms/wt-pagination/variables";
+@import "organisms/wt-status-select/variables";
+@import "organisms/wt-table/variables";
+@import "organisms/wt-table-actions/variables";
+@import "organisms/wt-player/variables";

package/src/css/components/atoms/wt-avatar/_variables.scss

@@ -0,0 +1,14 @@
+:root {
+  --avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
+  --avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
+  --avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
+  --avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 9);
+  --avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 12);
+
+  --avatar-size: var(--avatar-size--size-md);
+
+  --online-color: var(--true-color);
+  --dnd-color: var(--accent-color);
+  --busy-color: var(--false-color);
+  --offline-color: var(--secondary-color);
+}

package/src/css/components/atoms/wt-badge/_variables.scss

@@ -1,6 +1,3 @@
-
-:root {
-  --badge-padding: 5px 10px;
-  --badge-border-radius: 20px;
-  --badge-bg-color: var(--main-secondary-accent-color);
-}
+:root {
+  --wt-badge-size: var(--spacing-xs);
+}

package/src/css/components/atoms/wt-button/_variables.scss

@@ -1,47 +1,47 @@
-%typo-btn {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-btn-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 24px;
-}
-
-:root {
-  --btn-padding: 11px 19px;
-  --btn-lg-padding: 10px 29px;
-  --btn-border: 1px solid;
-
-  // BUTTON COLORS
-  --btn-dark-font-color: #000;
-  --btn-light-font-color: #fff;
-
-  --btn-primary-color: var(--main-accent-color);
-  --btn-primary--hover-color: #EFB917;
-
-  --btn-secondary-color: #808080;
-  --btn-secondary-bg-color: transparent;
-  --btn-secondary--hover-color: #000;
-
-  --btn-disabled-color: var(--disabled-color);
-  --btn-disabled-bg-color: transparent;
-
-  --btn-true-color: var(--true-color);
-  --btn-true--hover-color: var(--true--hover-color);
-
-  --btn-false-color: var(--false-color);
-  --btn-false--hover-color: var(--false--hover-color);
-
-  --btn-hold-color: var(--hold-color);
-  --btn-hold--hover-color: var(--hold--hover-color);
-
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer--hover-color: var(--transfer--hover-color);
-}
+
+:root {
+  --btn-min-width: 90px;
+  --btn-border-size: 2px;
+  --btn-padding: var(--spacing-xs) var(--spacing-sm);
+
+  --btn-padding--size-md: var(--btn-padding);
+  --btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
+
+  --btn-padding--outline:
+    calc(var(--spacing-xs) - var(--btn-border-size))
+    calc(var(--spacing-sm) - var(--btn-border-size));
+  --btn-padding--size-md--outline: var(--btn-padding--outline);
+  --btn-padding--size-sm--outline:
+    calc(var(--spacing-2xs) - var(--btn-border-size))
+    calc(var(--spacing-xs) - var(--btn-border-size));
+
+  --btn-border: var(--btn-border-size) solid;
+
+  // BUTTON COLORS
+  --btn-dark-font-color: var(--text-primary-color);
+  --btn-light-font-color: var(--text-contrast-color);
+
+  --btn-accent-color: hsla(var(--_accent-color), var(--_opacity--default));
+  --btn-accent--hover-color: hsla(var(--_accent-color), var(--_opacity--hover));
+
+  --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
+  --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
+
+  --btn-disabled-font-color: var(--secondary-color-50);
+  --btn-disabled-color: hsla(var(--_secondary-color-hue), 15%, 75%, var(--_opacity--active));
+
+  --btn-true-color: var(--true-color);
+  --btn-true--hover-color: var(--true--hover-color);
+
+  --btn-false-color: var(--false-color);
+  --btn-false--hover-color: var(--false--hover-color);
+
+  --btn-hold-color: var(--hold-color);
+  --btn-hold--hover-color: var(--hold--hover-color);
+
+  --btn-transfer-color: var(--transfer-color);
+  --btn-transfer--hover-color: var(--transfer--hover-color);
+
+  --btn-job-color: var(--job-color);
+  --btn-job--hover-color: var(--job--hover-color);
+}

package/src/css/components/atoms/wt-chip/_variables.scss

@@ -0,0 +1,7 @@
+
+:root {
+  --chip-padding: var(--spacing-2xs) var(--spacing-sm);
+  --chip-border-radius: var(--spacing-lg);
+  --chip-bg-color: var(--accent-secondary-color);
+  --chip-bg-color--outline: var(--secondary-color);
+}

package/src/css/components/atoms/wt-chip/wt-chip.scss

@@ -0,0 +1,41 @@
+.wt-chip {
+  @extend %typo-body-2;
+
+  display: inline-block;
+  padding: var(--chip-padding);
+  color: var(--text-primary-color);
+  border-radius: var(--chip-border-radius);
+  background: var(--chip-bg-color);
+
+  &--main-color {
+    background: var(--chip-bg-color);
+  }
+
+  &--outline-color {
+    background: var(--chip-bg-color--outline);
+  }
+
+  &--accent-color {
+    background: var(--accent-color);
+  }
+
+  &--secondary-color {
+    background: var(--secondary-color);
+  }
+
+  &--secondary-50-color {
+    background: var(--secondary-color-50);
+  }
+
+  &--success-color {
+    background: var(--true-color);
+  }
+
+  &--danger-color {
+    background: var(--false-color);
+  }
+
+  &--transfer-color {
+    background: var(--transfer-color);
+  }
+}

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -0,0 +1,7 @@
+:root {
+  --context-menu-option-color--hover: var(--secondary-color);
+
+  --context-menu-background-color: var(--main-color);
+
+  --context-menu-option-padding: var(--spacing-xs);
+}

package/src/css/components/atoms/wt-divider/_variables.scss

@@ -1,5 +1,5 @@
-
-:root {
-  --divider-border: 1px solid;
-  --divider-border-color: var(--main-page-bg-color);
+
+:root {
+  --divider-border: 1px solid;
+  --divider-border-color: var(--page-bg-color);
 }

package/src/css/components/atoms/wt-icon/_variables.scss

@@ -1,29 +1,8 @@
-
-:root {
-  --icon-xl-size: 50px;
-  --icon-lg-size: 32px;
-  --icon-md-size: 24px;
-  --icon-sm-size: 16px;
-  --icon-xs-size: 8px;
-
-  // ICON COLORS
-  --icon-primary-color: #808080;
-  --icon--active-color: #000;
-  --icon--hover-color: #000;
-  --icon-outline-color: var(--main-ouline-color);
-  --icon-outline--active-color: #808080;
-  --icon-outline--hover-color: #808080;
-  --icon--disabled-color: #EAEAEA;
-
-  --icon-hold-color: var(--hold-color);
-  --icon-hold--hover-color: var(--hold--hover-color);
-
-  --icon-true-color: var(--true-color);
-  --icon-true--hover-color: var(--true--hover-color);
-
-  --icon-false-color: var(--false-color);
-  --icon-false--hover-color: var(--false--hover-color);
-
-  --icon-transfer-color: var(--transfer-color);
-  --icon-transfer--hover-color: var(--transfer--hover-color);
+
+:root {
+  --icon-xl-size: 40px;
+  --icon-lg-size: 32px;
+  --icon-md-size: 24px;
+  --icon-sm-size: 16px;
+  --icon-xs-size: 8px;
 }

package/src/css/components/atoms/wt-indicator/_variables.scss

@@ -0,0 +1,22 @@
+:root {
+  --indicator-dot-size--size-sm: var(--spacing-xs);
+  --indicator-dot-size--size-md: var(--spacing-sm);
+  --indicator-dot-size: var(--indicator-size--size-md);
+  --indicator-dot-offset: var(--spacing-2xs);
+
+  --indicator-text-margin: var(--spacing-2xs);
+  
+  --indicator-primary-color: var(--accent-color);
+
+  --indicator-secondary-color: var(--secondary-color);
+
+  --indicator-disabled-color: var(--disabled-color);
+
+  --indicator-true-color: var(--true-color);
+
+  --indicator-false-color: var(--false-color);
+
+  --indicator-transfer-color: var(--transfer-color);
+
+  --indicator-break-out-color: hsla(36, 90%, 50%, 1);
+}

package/src/css/components/atoms/wt-input-info/_variables.scss

@@ -1,6 +1,7 @@
-
-:root {
-  --input-info-margin: 5px;
-  --input-info-color: var(--form-label-color);
-  --input-info--invalid-color: var(--false-color);
+
+:root {
+  --input-info-min-height: 12px;
+  --input-info-margin: 5px;
+  --input-info-color: var(--form-label-color);
+  --input-info--invalid-color: var(--false-color);
 }

package/src/css/components/atoms/wt-label/_variables.scss

@@ -1,5 +1,4 @@
-
-:root {
-  --label-margin: 10px;
-  --label--invalid-color: var(--false-color);
+
+:root {
+  --label--invalid-color: var(--false-color);
 }

package/src/css/components/atoms/wt-loader/_variables.scss

@@ -1,8 +1,8 @@
-
-:root {
-  --loader-size: 44px;
-  --loader-dot-size: 6px;
-  --loader-path-color: var(--main-primary-accent-color);
-  --loader-dot-color: var(--main-accent-color);
-  --loader-animation-duration: 3s;
+
+:root {
+  --loader-size: 44px;
+  --loader-dot-size: 6px;
+  --loader-path-color: var(--contrast-color);
+  --loader-dot-color: var(--accent-color);
+  --loader-animation-duration: 3s;
 }

package/src/css/components/atoms/wt-rounded-action/_variables.scss

@@ -0,0 +1,7 @@
+:root {
+  --rounded-action-padding: calc(var(--spacing-xs) - var(--btn-border-size));
+
+  --rounded-action-padding--outline: calc(var(--spacing-xs) - var(--btn-border-size));
+
+  --rounded-action-bg-color: var(--main-color);
+}

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,10 +1,29 @@
-
-:root {
-  --tooltip-padding: 10px 20px;
-  --tooltip-z-index: 100;
-
-  --tooltip-light-text-color: #000;
-  --tooltip-light-bg-color: #fff;
-  --tooltip-dark-text-color: #fff;
-  --tooltip-dark-bg-color: #464858;
-}
+
+:root {
+  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
+
+  --tooltip-light-text-color: var(--text-primary-color);
+  --tooltip-light-bg-color: var(--main-color);
+  --tooltip-dark-text-color: var(--text-contrast-color);
+  --tooltip-dark-bg-color: var(--contrast-color);
+
+  --tooltip-elevation: var(--elevation-10);
+}
+
+// cause we need to set styles to element somewhere in the HTML, not inside .wt-tooltip scope
+.wt-tooltip__popper .v-popper__inner {
+  @extend %typo-body-1;
+  max-width: 80vw;
+  max-height: 80vh;
+  padding: var(--tooltip-padding);
+  color: var(--tooltip-light-text-color);
+  background: var(--tooltip-light-bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--tooltip-elevation);
+  transition: var(--transition);
+}
+
+.wt-tooltip--contrast__popper .v-popper__inner {
+  color: var(--tooltip-dark-text-color);
+  background: var(--tooltip-dark-bg-color);
+}

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -0,0 +1,18 @@
+.wt-button-select {
+  --button-select-button-padding: var(--spacing-xs) var(--spacing-sm);
+
+  --button-select-icon-button-padding: var(--spacing-xs);
+
+  --button-select-buttons-gap: 1px;
+
+  --button-select-icon-color-primary: var(--btn-accent-color);
+  --button-select-icon-color-secondary: var(--btn-secondary-color);
+  --button-select-icon-color-dark: var(--btn-dark-font-color);
+  --button-select-icon-color-ligth: var(--main-color);
+
+  --button-select-icon-color-primary--hover: var(--btn-accent--hover-color);
+  --button-select-icon-color-danger--hover: var(--btn-false--hover-color);
+  --button-select-icon-color-success--hover: var(--btn-true--hover-color);
+  --button-select-icon-color-transfer--hover: var(--btn-transfer--hover-color);
+  --button-select-icon-color-secondary--hover: var(--btn-secondary--hover-color);
+}

package/src/css/components/molecules/wt-checkbox/_variables.scss

@@ -1,4 +1,4 @@
-
-:root {
-  --checkbox-icon-margin: 10px;
+
+:root {
+  --checkbox-icon-margin: var(--spacing-xs);
 }