@webitel/ui-sdk 3.1.35 → 3.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.35",
+  "version": "3.1.37",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

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

@@ -11,13 +11,15 @@
     </wt-label>
     <vue-datepicker
       ref="datepicker"
+      :locale="locale"
       :model-value="+value"
       :placeholder="label || placeholder"
       class="wt-datepicker__datepicker"
       v-bind="{ ...$attrs, ...$props }"
+      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
       @closed="isOpened = false"
       @open="isOpened = true"
-      @update:model-value="emit('change', $event.getTime())"
+      @update:model-value="emit('input', $event.getTime())"
     >
       <template v-slot:input-icon>
         <wt-icon
@@ -43,13 +45,34 @@
           icon="arrow-right"
         ></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>
@@ -61,9 +84,15 @@
 <script setup>
 import VueDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+// import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
+  mode: {
+    type: String,
+    default: 'date',
+    options: ['date', 'datetime'],
+  },
   value: {
     type: [String, Number],
     default: 'Date.now()',
@@ -95,60 +124,98 @@ const props = defineProps({
     description: 'Object with props, passed down to wt-label as props',
   },
 });
-const emit = defineEmits(['change']);
+const emit = defineEmits(['input']);
+
+// const i18n = useI18n();
 
 const isOpened = ref(false);
 const datepicker = ref(null); // template ref
+
+const locale = computed(() => {
+  const { locale } = { locale: 'ua' };
+  if (locale === 'ua') return 'uk';
+  return locale;
+});
+
+const isDateTime = props.mode === 'datetime';
 </script>
 
-<style lang="scss">
-:root {
-  /*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: 24px; /*Icon sizing in buttons*/
-  --dp-cell-size: 32px; /*Width and height of calendar cell*/
-  --dp-cell-padding: 4px; /*Padding in the cell*/
-  --dp-common-padding: var(--spacing-xs); /*Common padding used*/
-  --dp-input-icon-padding: 24px; /*Padding on the left side of the input if icon is present*/
-  --dp-input-padding: 6px 30px 6px 12px; /*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: 5px 0; /*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*/
-
-  /*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*/
-}
+<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;
+  }
+
+  .dp__input {
+    line-height: 24px;
+  }
 
-.wt-datepicker {
   .dp__arrow_top {
     display: none;
   }
 
+  /*
+  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;
+  }
+
+  // reset right/left arrow hover
+  .dp__inner_nav:hover {
+    background: inherit;
+  }
+
   .dp__menu {
     border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+  }
+
+  .dp__calendar_header_separator {
+    background: var(--secondary-color);
   }
 
   .dp__calendar_header,
   .dp__calendar_row {
     gap: var(--spacing-xs);
   }
+
+  // switch to time view
+  .dp__button {
+    display: none;
+  }
+
+  .dp__action_row {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+
+  .dp__selection_preview,
+  .dp__action_buttons {
+    width: 100%;
+  }
+
+  .dp__selection_preview {
+    text-align: center;
+  }
+
+  .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/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]);
-  // });
-});