@webitel/ui-sdk 3.1.34 → 3.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.34",
+  "version": "3.1.36",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -31,6 +31,7 @@
     "@vue/compat": "^3.2.47",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
+    "@vuepic/vue-datepicker": "^4.4.0",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
@@ -49,7 +50,6 @@
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^4.1.6",
-    "vuejs-datepicker": "^1.6.2",
     "webitel-sdk": "^0.1.184"
   },
   "devDependencies": {

package/src/components/index.js

@@ -14,7 +14,6 @@ import WtContextMenu from './atoms/wt-context-menu/wt-context-menu.vue';
 
 import WtCheckbox from './molecules/wt-checkbox/wt-checkbox.vue';
 import WtDatepicker from './molecules/wt-datepicker/wt-datepicker.vue';
-import WtDatetimepicker from './molecules/wt-datetimepicker/wt-datetimepicker.vue';
 import WtIconBtn from './molecules/wt-icon-btn/wt-icon-btn.vue';
 import WtInput from './molecules/wt-input/wt-input.vue';
 import WtNotification from './molecules/wt-notification/wt-notification.vue';
@@ -70,7 +69,6 @@ const Components = {
   WtRoundedAction,
   WtCheckbox,
   WtDatepicker,
-  WtDatetimepicker,
   WtIconBtn,
   WtInput,
   WtHint,

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

@@ -5,199 +5,217 @@
     }"
     class="wt-datepicker"
   >
-    <wt-label v-bind="labelProps" :disabled="disabled">
+    <wt-label :disabled="disabled" v-bind="labelProps">
       <!-- @slot Custom input label -->
-      <slot v-bind="{ label }" name="label">{{ label }}</slot>
+      <slot name="label" v-bind="{ label }">{{ label }}</slot>
     </wt-label>
     <vue-datepicker
-      v-bind="{ ...$attrs, ...$props }"
+      ref="datepicker"
+      :locale="locale"
+      :model-value="+value"
       :placeholder="label || placeholder"
-      :value="+value"
       class="wt-datepicker__datepicker"
-      monday-first
-      @input="$emit('change', $event.getTime())"
+      v-bind="{ ...$attrs, ...$props }"
+      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
+      @closed="isOpened = false"
+      @open="isOpened = true"
+      @update:model-value="emit('input', $event.getTime())"
     >
-      <template v-slot:afterDateInput>
+      <template v-slot:input-icon>
         <wt-icon
           :color="disabled ? 'disabled' : 'default'"
-          class="wt-datepicker__calendar-icon"
           icon="calendar"
         ></wt-icon>
+      </template>
+      <template v-slot:clear-icon>
         <wt-icon
+          :class="{ 'wt-datepicker__open-arrow--opened': isOpened }"
           :color="disabled ? 'disabled' : 'default'"
-          class="wt-datepicker__arrow-icon"
+          class="wt-datepicker__open-arrow"
           icon="arrow-down"
         ></wt-icon>
       </template>
-      <template v-slot:beforeCalendarHeader>
-        <wt-icon
-          class="wt-datepicker__month-arrow wt-datepicker__month-arrow--left"
+      <template v-slot:arrow-left>
+        <wt-icon-btn
           icon="arrow-left"
-        ></wt-icon>
-        <wt-icon
-          class="wt-datepicker__month-arrow wt-datepicker__month-arrow--right"
+        ></wt-icon-btn>
+      </template>
+      <template v-slot:arrow-right>
+        <wt-icon-btn
           icon="arrow-right"
-        ></wt-icon>
+        ></wt-icon-btn>
+      </template>
+      <template
+        v-if="isDateTime"
+        v-slot:time-picker="{ time, updateTime }"
+      >
+        <div class="datepicker__timepicker">
+          <wt-time-input
+            :label="$t('webitelUI.timepicker.hour')"
+            :value="time.hours"
+            max-value="23"
+            @input="updateTime"
+          ></wt-time-input>
+          <wt-time-input
+            :label="$t('webitelUI.timepicker.min')"
+            :value="time.minutes"
+            max-value="59"
+            @input="updateTime($event, false)"
+          ></wt-time-input>
+        </div>
+      </template>
+      <template v-slot:action-select>
+        <wt-button
+          wide
+          @click="datepicker.selectDate()"
+        >{{ $t('reusable.ok') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          wide
+          @click="datepicker.closeMenu()"
+        >{{ $t('reusable.cancel') }}
+        </wt-button>
       </template>
     </vue-datepicker>
   </div>
 </template>
 
-<script>
-import VueDatepicker from 'vuejs-datepicker';
-
-export default {
-  name: 'wt-datepicker',
-  components: {
-    VueDatepicker,
+<script setup>
+import VueDatepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'date',
+    options: ['date', 'datetime'],
   },
-  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',
-    },
+  value: {
+    type: [String, Number],
+    default: 'Date.now()',
   },
-  model: {
-    prop: 'value',
-    event: 'change',
+  /**
+   * label above calendar input
+   */
+  label: {
+    type: String,
+    default: '',
   },
-};
-</script>
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  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',
+  },
+});
+const emit = defineEmits(['input']);
 
-<style lang="scss" scoped>
-.wt-datepicker__calendar-icon {
-  position: absolute;
-  top: var(--spacing-xs);
-  left: var(--input-padding);
-  pointer-events: none;
-}
+const i18n = useI18n();
 
-.wt-datepicker__arrow-icon {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--input-padding);
-  pointer-events: none;
-}
+const isOpened = ref(false);
+const datepicker = ref(null); // template ref
 
-.wt-datepicker__month-arrow {
-  position: absolute;
-  top: var(--spacing-xs);
-  pointer-events: none;
+const locale = computed(() => {
+  const { locale } = i18n;
+  if (locale === 'ua') return 'uk';
+  return locale;
+});
 
-  &--right {
+const isDateTime = props.mode === 'datetime';
+</script>
+
+<style lang="scss" scoped>
+.wt-datepicker :deep(.dp__main) {
+  .dp__input_icon {
+    left: var(--spacing-xs);
+    line-height: 0;
+  }
+
+  .dp__clear_icon {
     right: var(--spacing-xs);
+    line-height: 0;
   }
 
-  &--left {
-    left: var(--spacing-xs);
+  .dp__input {
+    line-height: 24px;
   }
-}
 
-::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;
-    }
+  .dp__arrow_top {
+    display: none;
   }
 
-  @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
-}
+  /*
+  don't know why but month or year selection doesn't work
+  suppose its related to compatibility build
+   */
+  .dp__month_year_wrap {
+    pointer-events: none;
+  }
 
-.wt-datepicker:hover,
-.wt-datepicker:focus-within {
-  .wt-label {
-    color: var(--form-label--hover-color);
+  // reset right/left arrow hover
+  .dp__inner_nav:hover {
+    background: inherit;
   }
 
-  ::v-deep .vdp-datepicker {
-    min-width: var(--datepicker-width);
+  .dp__menu {
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+  }
 
-    // preview input
-    > div:first-child {
+  .dp__calendar_header_separator {
+    background: var(--secondary-color);
+  }
 
-      input {
-        border-color: var(--form-border--hover-color);
-      }
-    }
+  .dp__calendar_header,
+  .dp__calendar_row {
+    gap: var(--spacing-xs);
   }
-}
 
-.wt-datepicker:focus-within {
-  ::v-deep .vdp-datepicker {
-    // arrow down icon
-    .vdp-datepicker__calendar-button:before {
-      transform: rotate(180deg);
-    }
+  // switch to time view
+  .dp__button {
+    display: none;
   }
-}
 
-.wt-datepicker--disabled {
-  pointer-events: none;
+  .dp__action_row {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
 
-  ::v-deep .vdp-datepicker {
-    min-width: var(--datepicker-width);
+  .dp__selection_preview,
+  .dp__action_buttons {
+    width: 100%;
+  }
 
-    // preview input
-    > div:first-child {
+  .dp__selection_preview {
+    text-align: center;
+  }
 
-      input {
-        border-color: var(--form-border--disabled-color);
-        background: var(--form-border--disabled-color);
-      }
-    }
+  .dp__action_buttons {
+    display: flex;
+    gap: var(--spacing-xs);
   }
 }
+
+.datepicker__timepicker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+}
 </style>

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

@@ -22,6 +22,7 @@
       <input
         :id="name"
         ref="wt-input"
+        v-bind="$attrs"
         :class="{
           'wt-input--is-password': isPassword,
         }"
@@ -33,6 +34,7 @@
         :value="value || modelValue"
         class="wt-input__input"
         @input="inputHandler"
+        @keyup="$emit('keyup', $event)"
       >
       <div
         ref="after-wrapper"

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

@@ -1,21 +1,56 @@
-
 :root {
-  --datepicker-padding:
-    var(--input-padding)
-    calc(
-      var(--input-padding)
-    + var(--icon-md-size)
-    + var(--spacing-xs)
-    );
-  --datepicker-icon-margin: var(--spacing-xs);
-  --datepicker-border: 1px solid;
+  /*General*/
+  --dp-font-family: 'Montserrat';
+  --dp-border-radius: var(--border-radius); /*Configurable border-radius*/
+  --dp-cell-border-radius: var(--border-radius); /*Specific border radius for the calendar cell*/
+
+  /*Sizing*/
+  --dp-button-heigh: 32px; /*Size for buttons in overlays*/
+  --dp-month-year-row-height: 32px; /*Height of the month-year select row*/
+  --dp-month-year-row-button-size: 32px; /*Specific height for the next/previous buttons*/
+  --dp-button-icon-height: var(--icon-md-size); /*Icon sizing in buttons*/
+  --dp-cell-size: 32px; /*Width and height of calendar cell*/
+  --dp-cell-padding: var(--spacing-2xs); /*Padding in the cell*/
+  --dp-common-padding: var(--spacing-xs); /*Common padding used*/
+  --dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding on the left side of the input if icon is present*/
+  --dp-input-padding: calc(var(--spacing-xs) - 1px) calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding in the input*/
+  //--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
+  --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
+  --dp-row-maring: var(--spacing-xs); /*Adjust the spacing between rows in the calendar*/
+  --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
+  --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
+  --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
+  --dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
 
-  --datepicker-cell-size: var(--spacing-lg);
-  --datepicker-cell-gap: var(--spacing-xs);
-  --datepicker-calendar-padding: var(--spacing-xs);
-  --datepicker-calendar-header-margin: var(--spacing-xs);
+  /*Font sizes*/
+  --dp-font-size: 14px; /*Default font-size*/
+  --dp-preview-font-size: 12px; /*Font size of the date preview in the action row*/
+  --dp-time-font-size: 12px; /*Font size in the time picker*/
+
+  /*Transitions*/
+  --dp-animation-duration: var(--transition); /*Transition duration*/
+  --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
+  --dp-transition-timing: ease-out; /*Timing on slide animations*/
+}
 
-  --datepicker-selected-cell-text-color: var(--main-color);
-  --datepicker-selected-cell-bg-color: var(--accent-color);
-  --datepicker-cell--hover-color: var(--secondary-color-50);
+.dp__theme_light {
+  --dp-background-color: var(--main-color);
+  --dp-text-color: var(--contrast-color);
+  --dp-hover-color: var(--secondary-color-50);
+  --dp-hover-text-color: var(--contrast-color);
+  --dp-hover-icon-color: var(--icon-color--hover);
+  --dp-primary-color: var(--accent-color);
+  --dp-primary-text-color: var(--main-color);
+  --dp-secondary-color: var(--secondary-color);
+  --dp-border-color: var(--form-border-color);
+  --dp-menu-border-color: transparent;
+  --dp-border-color-hover: var(--form-border--hover-color);
+  --dp-disabled-color: var(--disabled-color);
+  //--dp-scroll-bar-background: #f3f3f3;
+  //--dp-scroll-bar-color: #959595;
+  --dp-success-color: var(--true-color);
+  //--dp-success-color-disabled: #a3d9b1;
+  --dp-icon-color: var(--icon-color);
+  --dp-danger-color: var(--false-color);
+  //--dp-highlight-color: rgba(25, 118, 210, 0.1);
 }

package/src/locale/i18n.js

@@ -13,6 +13,7 @@ const messages = {
 
 // eslint-disable-next-line new-cap
 export default new createI18n({
+  legacy: false,
   locale: 'en',
   fallbackLocale: 'en',
   messages,

package/src/modules/QueryFilters/components/filter-datetime.vue

@@ -1,9 +1,10 @@
 <template>
-  <wt-datetimepicker
+  <wt-datepicker
     :value="filterSchema.value"
     :label="label"
+    mode="datetime"
     @change="handleChange"
-  ></wt-datetimepicker>
+  ></wt-datepicker>
 </template>
 
 <script>

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

@@ -1,82 +0,0 @@
-import { shallowMount, mount } 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';
-
-describe('WtDatetimepicker', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtDatetimepicker, {
-      global: {
-        plugins: [FloatingVue],
-        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 = mount(WtDatetimepicker, {
-      global: {
-        plugins: [FloatingVue],
-        stubs: {
-          WtLabel,
-          WtIcon,
-          WtButton,
-          WtTimepicker: true,
-        },
-      },
-      props: { 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,
-  //     },
-  //     props: {
-  //       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]);
-  // });
-});