@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

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

@@ -1,215 +0,0 @@
-<template>
-  <div
-    class="wt-textarea"
-    :class="{
-      'wt-textarea--disabled': disabled,
-      'wt-textarea--invalid': invalid,
-    }"
-  >
-    <wt-label
-      :for="name"
-      :disabled="disabled"
-      :invalid="invalid"
-      v-bind="labelProps"
-    >
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
-    </wt-label>
-    <div class="wt-textarea__wrapper">
-      <textarea
-        :id="name"
-        ref="wt-textarea"
-        class="wt-textarea__textarea"
-        :value="value"
-        :placeholder="placeholder || label"
-        :disabled="disabled"
-        v-on="listeners"
-      ></textarea>
-      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
-        <slot name="after-input"></slot>
-        <wt-icon-btn
-          class="wt-textarea__reset-icon-btn"
-          :class="{ 'hidden': !value }"
-          icon="close--filled"
-          size="sm"
-          :disabled="disabled"
-          @click="$emit('input', '')"
-        ></wt-icon-btn>
-      </div>
-    </div>
-    <wt-input-info
-      v-if="isValidation"
-      :invalid="invalid"
-    >{{ validationText }}
-    </wt-input-info>
-  </div>
-</template>
-
-<script>
-  import validationMixin from '../../../mixins/validationMixin/validationMixin';
-
-  export default {
-    name: 'wt-textarea',
-    mixins: [validationMixin],
-    props: {
-      /**
-       * Current textarea value (`v-model`)
-       */
-      value: {
-        type: String,
-        default: '',
-      },
-      /**
-       * textarea label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * textarea placeholder
-       */
-      placeholder: {
-        type: String,
-      },
-      /**
-       * Native textarea disabled attribute
-       */
-      disabled: {
-        type: Boolean,
-        default: false,
-        description: 'Native textarea disabled attribute',
-      },
-      /**
-       * textarea name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-      chatMode: {
-        type: Boolean,
-        default: false,
-      },
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
-    },
-
-    computed: {
-      listeners() {
-        return {
-          ...this.$listeners,
-          input: (event) => this.$emit('input', event.target.value),
-          keypress: (event) => this.handleKeypress(event),
-        };
-      },
-
-      requiredLabel() {
-        return this.required ? `${this.label}*` : this.label;
-      },
-    },
-
-    methods: {
-      handleKeypress(event) {
-        if (!this.chatMode) return;
-        if (event.key === 'Enter' && !event.shiftKey) {
-          this.$emit('enter');
-          event.preventDefault();
-        }
-      },
-
-      updateInputPaddings() {
-        // cant test this thing cause vue test utils doesnt render elements width :/
-        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
-        const inputEl = this.$refs['wt-textarea'];
-        const defaultInputPadding = getComputedStyle(document.documentElement)
-          .getPropertyValue('--textarea-padding');
-        inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
-      },
-    },
-    mounted() {
-      this.updateInputPaddings();
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-textarea {
-    cursor: text;
-
-    &--disabled {
-      pointer-events: none;
-    }
-  }
-
-  .wt-textarea__wrapper {
-    position: relative;
-  }
-
-  .wt-label {
-    .wt-textarea:hover &,
-    .wt-textarea:focus-within & {
-      color: var(--form-label--hover-color);
-    }
-
-    .wt-textarea--invalid:hover &,
-    .wt-textarea--invalid:focus-within & {
-      color: var(--label--invalid-color);
-    }
-  }
-
-  .wt-textarea__textarea {
-    @extend %typo-body-1;
-    @extend %wt-scrollbar;
-    @include wt-placeholder;
-
-    display: block;
-    width: 100%;
-    min-height: var(--textarea-min-height);
-    box-sizing: border-box;
-    padding: var(--textarea-padding);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-    resize: none;
-
-    &:focus {
-      @include wt-placeholder('focus');
-
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-textarea--disabled & {
-      @include wt-placeholder('disabled');
-
-      background: var(--form-border--disabled-color);
-      border-color: var(--form-border--disabled-color);
-    }
-
-    .wt-textarea--invalid &,
-    .wt-textarea--invalid:hover & {
-      border-color: var(--false-color);
-      outline: none; // prevent outline overlapping false color
-    }
-  }
-
-  /* make icons black */
-  .wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
-  .wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-
-  .wt-textarea__after-wrapper {
-    display: flex;
-    gap: var(--input-after-wrapper-gap);
-    align-items: center;
-    position: absolute;
-    top: var(--input-icon-margin);
-    right: var(--input-icon-margin);
-    pointer-events: auto; // override --disabled p-events none
-  }
-</style>

package/src/components/molecules/wt-time-input/wt-time-input.vue

@@ -1,190 +0,0 @@
-<template>
-  <div
-    class="wt-time-input"
-    :class="{
-      'wt-time-input--outline': outline,
-      'wt-time-input--disabled': disabled,
-      'wt-time-input--invalid': invalid,
-    }"
-  >
-    <wt-label
-      v-if="hasLabel"
-      :for="name"
-      :outline="outline"
-      :disabled="disabled"
-      :invalid="invalid"
-      v-bind="labelProps"
-    >
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <div class="wt-time-input__wrapper">
-      <input
-        :id="name"
-        class="wt-time-input__input"
-        :value="value"
-        :min="0"
-        :max="maxValue"
-        :disabled="disabled"
-        type="number"
-        v-on="listeners"
-      >
-    </div>
-    <wt-input-info
-      v-if="showInfo"
-      :invalid="invalid"
-    >{{ validationText }}
-    </wt-input-info>
-  </div>
-</template>
-
-<script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
-
-  export default {
-    name: 'wt-time-input',
-    mixins: [validationMixin],
-    props: {
-      /**
-       * Current input value (`v-model`)
-       */
-      value: {
-        type: Number,
-        default: 0,
-      },
-      /**
-       * Form input label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Time type: day, minute, second
-       */
-      maxValue: {
-        type: Number,
-      },
-      /**
-       * Native input required attribute
-       */
-      required: {
-        type: Boolean,
-        default: false,
-        description: 'Native input required attribute',
-      },
-      /**
-       * Native input disabled attribute
-       */
-      disabled: {
-        type: Boolean,
-        default: false,
-        description: 'Native input disabled attribute',
-      },
-
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
-
-      hideInputInfo: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    computed: {
-      hasLabel() {
-        return !!(this.label || this.$slots.label);
-      },
-      listeners() {
-        return {
-          ...this.$listeners,
-          input: (event) => this.$emit('input', event.target.value),
-        };
-      },
-      showInfo() {
-        return this.isValidation && !this.hideInputInfo;
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-time-input {
-    display: inline-block;
-    cursor: text;
-
-    &--disabled {
-      pointer-events: none;
-    }
-  }
-
-  .wt-time-input__wrapper {
-    position: relative;
-  }
-
-  .wt-label {
-    text-align: center;
-
-    .wt-time-input:hover &,
-    .wt-time-input:focus-within & {
-      color: var(--form-label--hover-color);
-    }
-
-    .wt-time-input--invalid:hover &,
-    .wt-time-input--invalid:focus-within & {
-      color: var(--label--invalid-color);
-    }
-  }
-
-  .wt-time-input__input {
-    @extend %typo-body-1;
-
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    padding: var(--input-padding);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-
-    .wt-time-input:hover &,
-    &:focus {
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-time-input--outline & {
-      border-color: var(--form-outline-border-color);
-    }
-
-    .wt-time-input--outline:hover &,
-    .wt-time-input--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
-
-    .wt-time-input--disabled & {
-      background: var(--form-border--disabled-color);
-      border-color: var(--form-border--disabled-color);
-    }
-
-    .wt-time-input--invalid &,
-    .wt-time-input--invalid:hover & {
-      border-color: var(--false-color);
-      outline: none; // prevent outline overlapping false color
-    }
-  }
-</style>

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

@@ -1,24 +0,0 @@
-<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-notifications-bar/wt-notifications-bar.vue

@@ -1,71 +0,0 @@
-<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',
-    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" 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/organisms/wt-table/__tests__/WtTableDeleteAction.spec.js

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

package/src/components/organisms/wt-table/__tests__/WtTableEditAction.spec.js

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

package/src/components/organisms/wt-table/table-cells/wt-table-delete-action.vue

@@ -1,21 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template v-slot:activator>
-      <wt-icon-btn
-        icon="bucket"
-        @click="$emit('click')"
-      ></wt-icon-btn>
-    </template>
-    {{ $t('webitelUI.table.tableCells.deleteActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'wt-table-delete-action',
-};
-</script>
-
-<style scoped>
-
-</style>

package/src/components/organisms/wt-table/table-cells/wt-table-edit-action.vue

@@ -1,22 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template v-slot:activator>
-      <wt-icon-btn
-        class="table-action"
-        icon="edit"
-        @click="$emit('click')"
-      ></wt-icon-btn>
-    </template>
-    {{ $t('webitelUI.table.tableCells.editActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'wt-table-edit-action',
-};
-</script>
-
-<style scoped>
-
-</style>

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

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