@webitel/ui-sdk 0.1.6 → 0.1.7-vue3

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

@@ -0,0 +1,179 @@
+<template>
+  <div
+    class="wt-checkbox"
+    :class="{
+      'wt-checkbox--active': isChecked,
+      'wt-checkbox--outline': outline,
+      'wt-checkbox--disabled': disabled,
+    }"
+  >
+    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
+      <input
+        class="wt-checkbox__input"
+        type="checkbox"
+        :value="value"
+        :checked="isChecked"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-checkbox__checkmark">
+      <wt-icon
+        :icon="checkboxIcon"
+        :color="iconColor"
+      ></wt-icon>
+    </span>
+      <!-- @slot Custom label markup -->
+      <slot name="label" v-bind="{ label, isChecked, disabled }">
+        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-checkbox',
+    model: {
+      prop: 'selected',
+      event: 'change',
+    },
+    props: {
+      value: {
+        type: [String, Boolean],
+        default: '',
+      },
+      selected: {
+        type: [Array, Boolean],
+        default: () => [],
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      outline: {
+        type: Boolean,
+        default: false,
+      },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    },
+    computed: {
+      isChecked() {
+        if (typeof this.selected === 'boolean') {
+          return this.selected;
+        }
+        return this.selected.includes(this.value);
+      },
+      checkboxIcon() {
+        return this.isChecked ? 'checkbox--checked' : 'checkbox';
+      },
+      iconColor() {
+        if (this.disabled) return 'disabled';
+        if (this.isChecked) return 'active';
+        return null;
+      },
+    },
+    methods: {
+      inputHandler() {
+        if (typeof this.selected === 'boolean') {
+          this.$emit('change', !this.selected);
+        } else {
+          let selected = [...this.selected];
+          if (selected.includes(this.value)) {
+            selected = selected.filter((value) => value !== this.value);
+          } else {
+            selected.push(this.value);
+          }
+          this.$emit('change', selected);
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-checkbox {
+    @include width-fit-content;
+    box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
+  }
+
+  .wt-checkbox__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+
+    .wt-checkbox__checkmark {
+      line-height: 0; // prevent icon height >> content
+    }
+  }
+
+  .wt-checkbox__label {
+    margin-left: var(--checkbox-icon-margin);
+    transition: var(--transition);
+    cursor: pointer;
+  }
+
+  /* Hide the browser's default checkbox */
+  .wt-checkbox__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .wt-checkbox:hover {
+    .wt-checkbox__label {
+      color: var(--form-label--hover-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+
+  .wt-checkbox--active {
+    .wt-checkbox__label {
+      color: var(--form-label--active-color);
+    }
+  }
+
+  .wt-checkbox--outline {
+    .wt-checkbox__label {
+      color: var(--form-outline-label-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline-color);
+    }
+
+    &.wt-checkbox--active {
+      .wt-checkbox__label {
+        color: var(--form-label--active-color);
+      }
+
+      ::v-deep .wt-icon__icon {
+        fill: var(--icon-outline--active-color);
+      }
+    }
+  }
+
+  .wt-checkbox--disabled {
+    pointer-events: none;
+
+    .wt-checkbox__label {
+      color: var(--form-label--disabled-color);
+    }
+  }
+</style>

package/src/components/molecules/wt-copy-action/__tests__/WtCopyAction.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
+import WtCopyAction from '../wt-copy-action.vue';
+
+describe('WtCopyAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCopyAction, {
+      stubs: {
+        WtIconBtn,
+      },
+    });
+    expect(wrapper.classes('wt-copy-action')).toBe(true);
+  });
+});

package/src/components/molecules/wt-copy-action/wt-copy-action.vue

@@ -0,0 +1,63 @@
+<template>
+  <wt-tooltip class="wt-copy-action">
+    <template v-slot:activator>
+      <wt-icon-btn
+        v-bind="$attrs"
+        :icon="copied ? 'done' : 'copy'"
+        class="copy-action"
+        @click="copy"
+      ></wt-icon-btn>
+    </template>
+    {{ copied ? copiedTooltip : copyTooltip }}
+  </wt-tooltip>
+</template>
+
+<script>
+import copy from 'clipboard-copy';
+
+let copiedIdTimeout = null;
+
+export default {
+  name: 'wt-copy-action',
+  data: () => ({
+    copied: false,
+  }),
+  props: {
+    value: {
+      type: String,
+    },
+    tooltips: {
+      type: Object,
+      default: () => ({
+        copy: '',
+        copied: '',
+      }),
+    },
+  },
+  computed: {
+    copyTooltip() {
+      return this.tooltips.copy || this.$t('webitelUI.copyAction.copy');
+    },
+    copiedTooltip() {
+      return this.tooltips.copied || this.$t('webitelUI.copyAction.copied');
+    },
+  },
+  methods: {
+    async copy() {
+      try {
+        await copy(this.value);
+        this.copied = this.value;
+        if (copiedIdTimeout) window.clearTimeout(copiedIdTimeout);
+        copiedIdTimeout = setTimeout(() => {
+          this.copied = null;
+        }, 1500);
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/molecules/wt-datepicker/__tests__/WtDatepicker.spec.js

@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDatepicker from '../wt-datepicker.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+
+describe('WtDatepicker', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtDatepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+    });
+    expect(wrapper.classes('wt-datepicker')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtDatepicker, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+});

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

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

@@ -0,0 +1,79 @@
+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]);
+  // });
+});