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

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

@@ -1,203 +0,0 @@
-<template>
-  <div
-    :class="{
-      'wt-datepicker--disabled': disabled,
-    }"
-    class="wt-datepicker"
-  >
-    <wt-label v-bind="labelProps" :disabled="disabled">
-      <!-- @slot Custom input label -->
-      <slot v-bind="{ label }" name="label">{{ label }}</slot>
-    </wt-label>
-    <vue-datepicker
-      v-bind="{ ...$attrs, ...$props }"
-      :placeholder="label || placeholder"
-      :value="+value"
-      class="wt-datepicker__datepicker"
-      monday-first
-      @input="$emit('change', $event.getTime())"
-    >
-      <template slot="afterDateInput">
-        <wt-icon
-          :color="disabled ? 'disabled' : 'default'"
-          class="wt-datepicker__calendar-icon"
-          icon="calendar"
-        ></wt-icon>
-        <wt-icon
-          :color="disabled ? 'disabled' : 'default'"
-          class="wt-datepicker__arrow-icon"
-          icon="arrow-down"
-        ></wt-icon>
-      </template>
-      <template slot="beforeCalendarHeader">
-        <wt-icon
-          class="wt-datepicker__month-arrow wt-datepicker__month-arrow--left"
-          icon="arrow-left"
-        ></wt-icon>
-        <wt-icon
-          class="wt-datepicker__month-arrow wt-datepicker__month-arrow--right"
-          icon="arrow-right"
-        ></wt-icon>
-      </template>
-    </vue-datepicker>
-  </div>
-</template>
-
-<script>
-import VueDatepicker from 'vuejs-datepicker';
-
-export default {
-  name: 'wt-datepicker',
-  components: {
-    VueDatepicker,
-  },
-  props: {
-    value: {
-      type: [String, Number],
-      default: 'Date.now()',
-    },
-    /**
-     * label above calendar input
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    format: {
-      type: [String, Function],
-    },
-    maximumView: {
-      type: String,
-      default: 'day',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    disabledDates: {
-      type: Object,
-    },
-    lang: {
-      type: String,
-      default: 'en',
-    },
-    labelProps: {
-      type: Object,
-      description: 'Object with props, passed down to wt-label as props',
-    },
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.wt-datepicker__calendar-icon {
-  position: absolute;
-  top: var(--spacing-xs);
-  left: var(--input-padding);
-  pointer-events: none;
-}
-
-.wt-datepicker__arrow-icon {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--input-padding);
-  pointer-events: none;
-}
-
-.wt-datepicker__month-arrow {
-  position: absolute;
-  top: var(--spacing-xs);
-  pointer-events: none;
-
-  &--right {
-    right: var(--spacing-xs);
-  }
-
-  &--left {
-    left: var(--spacing-xs);
-  }
-}
-
-::v-deep .vdp-datepicker {
-  min-width: var(--datepicker-width);
-
-  // preview input
-  > div:first-child {
-    position: relative;
-
-    input {
-      @extend %typo-body-1;
-      @include wt-placeholder;
-      box-sizing: border-box;
-      width: 100%;
-      padding: var(--datepicker-padding);
-      border: var(--datepicker-border);
-      border-color: var(--form-border-color);
-      border-radius: var(--border-radius);
-
-      &:focus {
-        @include wt-placeholder('focus');
-      }
-    }
-
-    .vdp-datepicker__calendar-button {
-      display: none;
-    }
-  }
-
-  @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
-}
-
-.wt-datepicker:hover,
-.wt-datepicker:focus-within {
-  .wt-label {
-    color: var(--form-label--hover-color);
-  }
-
-  ::v-deep .vdp-datepicker {
-    min-width: var(--datepicker-width);
-
-    // preview input
-    > div:first-child {
-
-      input {
-        border-color: var(--form-border--hover-color);
-      }
-    }
-  }
-}
-
-.wt-datepicker:focus-within {
-  ::v-deep .vdp-datepicker {
-    // arrow down icon
-    .vdp-datepicker__calendar-button:before {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.wt-datepicker--disabled {
-  pointer-events: none;
-
-  ::v-deep .vdp-datepicker {
-    min-width: var(--datepicker-width);
-
-    // preview input
-    > div:first-child {
-
-      input {
-        border-color: var(--form-border--disabled-color);
-        background: var(--form-border--disabled-color);
-      }
-    }
-  }
-}
-</style>

package/src/components/molecules/wt-datetimepicker/__tests__/WtDatetimepicker.spec.js

@@ -1,79 +0,0 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
-import FloatingVue, { Dropdown, Popper } from 'floating-vue';
-import WtDatetimepicker from '../wt-datetimepicker.vue';
-import WtLabel from '../../wt-label/wt-label.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
-import WtButton from '../../../atoms/wt-button/wt-button.vue';
-
-const localVue = createLocalVue();
-localVue.use(FloatingVue);
-
-describe('WtDatetimepicker', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtDatetimepicker, {
-      stubs: {
-        WtLabel,
-        WtIcon,
-        WtButton,
-        WtTimepicker: true,
-      },
-    });
-    expect(wrapper.classes('wt-datetimepicker')).toBe(true);
-  });
-
-  it('renders label text when passed', () => {
-    const label = 'Hello there';
-    const wrapper = shallowMount(WtDatetimepicker, {
-      stubs: {
-        WtLabel,
-        WtIcon,
-        WtButton,
-        WtTimepicker: true,
-      },
-      propsData: { label },
-    });
-    expect(wrapper.find('.wt-label').text()).toBe(label);
-  });
-
-  it('opens form at preview click', async () => {
-    const wrapper = shallowMount(WtDatetimepicker, {
-      // stubs: {
-      //   WtLabel,
-      //   WtIcon,
-      //   WtButton,
-      //   WtTimepicker: true,
-      // },
-    });
-    expect(wrapper.find('.wt-datetimepicker__form').element).not.toBeVisible();
-    wrapper.find('.wt-datetimepicker__preview').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find('.wt-datetimepicker__form').isVisible()).toBe(true);
-  });
-
-  // dunno how to test content of VDropdown popper template :(
-  // it('Triggers change event after button "add" click', async () => {
-  //   const now = Date.now();
-  //   const wrapper = mount(WtDatetimepicker, {
-  //     localVue,
-  //     stubs: {
-  //       WtLabel,
-  //       WtIcon,
-  //       WtButton,
-  //       VDropdown: Dropdown,
-  //       WtTimepicker: true,
-  //     },
-  //     propsData: {
-  //       value: now,
-  //     },
-  //   });
-  //   wrapper.setData({ isOpened: true });
-  //   // wrapper.find('.wt-datetimepicker__preview').trigger('keyup.enter');
-  //   await wrapper.vm.$nextTick();
-  //   await wrapper.vm.$nextTick();
-  //   await wrapper.vm.$nextTick();
-  //   console.info(wrapper.html());
-  //   expect(wrapper.find('.wt-datetimepicker__form').exists()).toBe(true);
-  //   wrapper.find('.wt-datetimepicker__actions > .wt-button').trigger('click');
-  //   expect(wrapper.emitted().change.pop()).toEqual([now]);
-  // });
-});

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

@@ -1,300 +0,0 @@
-<template>
-  <v-dropdown
-    class="wt-datetimepicker"
-    :class="{
-      'wt-datetimepicker--active': isOpened,
-      'wt-datetimepicker--disabled': disabled,
-    }"
-    :shown.sync="isOpened"
-    placement="bottom-start"
-  >
-    <wt-label :disabled="disabled" v-bind="labelProps">
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <div
-      class="wt-datetimepicker__preview"
-      tabindex="0"
-      @keyup.enter="isOpened = !isOpened"
-    >
-      <wt-icon class="wt-datetimepicker__calendar-icon" icon="calendar"></wt-icon>
-      <input
-        class="wt-datetimepicker__preview__input"
-        :value="displayValue"
-        autocomplete="off"
-        readonly
-      >
-      <wt-icon
-        class="wt-datetimepicker__arrow-icon"
-        icon="arrow-down"
-      ></wt-icon>
-    </div>
-    <template v-slot:popper>
-      <div
-        class="wt-datetimepicker__form"
-      >
-        <div class="wt-datetimepicker__quick-filters-wrapper">
-        <span class="wt-datetimepicker__quick-filter" @click="setLastHour">
-          {{$t('webitelUI.datetimepicker.lastHour')}}
-        </span>
-          <span class="wt-datetimepicker__quick-filter" @click="setLastDay">
-                {{$t('webitelUI.datetimepicker.lastDay')}}
-        </span>
-        </div>
-        <div class="wt-datetimepicker__form-wrapper">
-          <!--        <datepicker-->
-          <!--          class="wt-datetimepicker__datepicker"-->
-          <!--          :value="draft"-->
-          <!--          :maximum-view="'day'"-->
-          <!--          :disabled-dates="disabledDates"-->
-          <!--          monday-first-->
-          <!--          inline-->
-          <!--          @input="setDraft($event.getTime())"-->
-          <!--        ></datepicker>-->
-          <wt-datepicker
-            class="wt-datetimepicker__datepicker"
-            :value="draft"
-            :maximum-view="'day'"
-            :disabled-dates="disabledDates"
-            monday-first
-            inline
-            @change="setDraft"
-          ></wt-datepicker>
-          <wt-timepicker
-            class="wt-datetimepicker__timepicker"
-            v-model="draft"
-            format="hh:mm"
-            date-mode
-          ></wt-timepicker>
-        </div>
-        <div class="wt-datetimepicker__actions">
-          <wt-button @click="input">
-            {{$t('reusable.add')}}
-          </wt-button>
-          <wt-button color="secondary" @click="close">
-            {{$t('reusable.cancel')}}
-          </wt-button>
-        </div>
-      </div>
-
-    </template>
-  </v-dropdown>
-</template>
-
-<script>
-  // import Datepicker from 'vuejs-datepicker';
-
-  export default {
-    name: 'wt-datetimepicker',
-    components: {
-      // Datepicker,
-    },
-
-    props: {
-      value: {
-        type: [String, Number],
-        default: 0,
-      },
-      label: {
-        type: String,
-        default: '',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      disabledDates: {
-        type: Object,
-      },
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
-    },
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-
-    watch: {
-      isOpened: {
-        handler() {
-          this.draft = this.value;
-        },
-        immediate: true,
-      },
-    },
-
-    data: () => ({
-      isOpened: false,
-      draft: 0,
-    }),
-
-    computed: {
-      // prop value representation on picker preview
-      displayValue() {
-        // const date = new Date(+this.value).toLocaleDateString();
-        // const time = new Date(+this.value).toLocaleTimeString() // https://stackoverflow.com/questions/17913681/how-do-i-use-tolocaletimestring-without-displaying-seconds
-        //   .slice(0, 5);
-        // return `${date} ${time}`;
-        return new Date(+this.value).toLocaleString();
-      },
-    },
-
-    methods: {
-      setLastHour() {
-        const value = Date.now() - 60 * 60 * 10 ** 3; // 60 min x 60 sec x 1000 ms
-        this.$emit('change', value);
-        this.close();
-      },
-      setLastDay() {
-        const value = Date.now() - 24 * 60 * 60 * 10 ** 3; // 24hour x 60 min x 60 sec x 1000 ms
-        this.$emit('change', value);
-        this.close();
-      },
-
-      input() {
-        this.$emit('change', this.draft);
-        this.close();
-      },
-
-      setDraft(value) {
-        this.draft = value;
-      },
-
-      close() {
-        this.isOpened = false;
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-datetimepicker {
-    position: relative;
-  }
-
-  .wt-datetimepicker__preview {
-    position: relative;
-    cursor: text;
-    outline: none;
-
-    &__input {
-      @extend %typo-body-1;
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-      padding: var(--datetimepicker-padding);
-      border: var(--datetimepicker-border);
-      border-color: var(--form-border-color);
-      border-radius: var(--border-radius);
-    }
-
-    .wt-datetimepicker__calendar-icon {
-      position: absolute;
-      top: 50%;
-      left: var(--datetimepicker-icon-margin);
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-
-    .wt-datetimepicker__arrow-icon {
-      position: absolute;
-      top: 50%;
-      right: var(--datetimepicker-icon-margin);
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-  }
-
-  .wt-datetimepicker__form {
-    padding: var(--datetimepicker-form-padding);
-    background: var(--datetimepicker-form-bg-color);
-    box-sizing: border-box;
-    border: var(--datetimepicker-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-  }
-
-  .wt-datetimepicker__quick-filters-wrapper {
-    text-align: center;
-    display: flex;
-    justify-content: space-evenly;
-    margin-bottom: var(--datetimepicker-form-content-margin);
-  }
-
-  .wt-datetimepicker__quick-filter {
-    @extend %typo-caption;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  .wt-datetimepicker__form-wrapper {
-    display: flex;
-    flex-direction: column;
-
-    .wt-datetimepicker__datepicker ::v-deep {
-      .wt-datepicker__calendar-icon,
-      .wt-datepicker__arrow-icon {
-        display: none;
-      }
-      .vdp-datepicker__calendar {
-        padding: 0;
-        border-color: transparent;
-        box-shadow: none;
-      }
-    }
-
-    .wt-datetimepicker__timepicker {
-      margin: var(--datetimepicker-form-content-margin) auto 0;
-    }
-  }
-
-  .wt-datetimepicker__actions {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--datetimepicker-form-content-margin);
-
-    .wt-button {
-      &.secondary {
-        margin-left: var(--datetimepicker-form-content-margin);
-      }
-    }
-  }
-
-  .wt-datetimepicker:hover {
-    .wt-label {
-      color: var(--form-label--hover-color);
-    }
-
-    .wt-datetimepicker__preview__input {
-      border-color: var(--form-border--hover-color);
-    }
-  }
-
-  .wt-datetimepicker:focus-within,
-  .wt-datetimepicker--active {
-    .wt-label {
-      color: var(--form-label--active-color);
-    }
-
-    .wt-datetimepicker__preview__input {
-      border-color: var(--form-border--active-color);
-    }
-  }
-
-  .wt-datetimepicker--active {
-    .wt-datetimepicker__arrow-icon {
-      transform: translateY(-50%) rotate(180deg);
-    }
-  }
-
-  .wt-datetimepicker--disabled {
-    pointer-events: none;
-
-    .wt-datetimepicker__preview__input {
-      border-color: var(--form-border--disabled-color);
-      background: var(--form-border--disabled-color);
-    }
-  }
-</style>

package/src/components/molecules/wt-icon-btn/wt-icon-btn.vue

@@ -1,75 +0,0 @@
-<template>
-  <div :class="{ 'wt-icon-btn--disabled': disabled }" class="wt-icon-btn">
-    <button class="wt-icon-btn__button" type="button">
-      <wt-icon
-        :color="iconColor"
-        :icon="icon"
-        :icon-prefix="iconPrefix"
-        :size="size"
-        @click.native="$emit('click', $event)"
-      ></wt-icon>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'wt-icon-btn',
-  props: {
-    icon: {
-      type: String,
-      required: true,
-    },
-    iconPrefix: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    color: {
-      type: String,
-    },
-  },
-  computed: {
-    iconColor() {
-      if (this.disabled) return 'disabled';
-      return this.color;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.wt-icon-btn {
-  position: relative;
-  display: inline-block;
-
-  .wt-icon {
-    display: flex;
-  }
-
-  // add hover style only for "default" icon color cause non-default already may have opacity 1
-  &:hover ::v-deep .wt-icon__icon.wt-icon__icon--color-default {
-    fill: var(--icon-color--hover);
-  }
-
-  &:hover ::v-deep .wt-icon--color-icon-secondary .wt-icon__icon {
-    fill: var(--icon-color);
-  }
-
-  // icon "disabled" color is set from iconColor computed
-  &--disabled {
-    pointer-events: none;
-  }
-}
-
-.wt-icon-btn,
-.wt-icon-btn__button {
-  line-height: 0;
-}
-</style>