@webitel/ui-sdk 1.0.41 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --fix",
     "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
+    "publish-lib:testless": "npm run build && npm publish --access public",
     "prepare": "husky install"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
@@ -25,14 +26,17 @@
   ],
   "dependencies": {
     "@johmun/vue-tags-input": "^2.1.0",
-    "csv-stringify": "^5.5.3",
     "core-js": "^3.6.5",
+    "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.0.3",
     "file-saver": "^2.0.2",
+    "floating-vue": "^1.0.0-beta.17",
+    "i": "^0.3.7",
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
+    "npm": "^8.10.0",
     "plyr": "3.6.2",
     "vue": "^2.6.11",
     "vue-i18n": "^8.18.2",

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

@@ -1,9 +1,13 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import FloatingVue 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, {
@@ -48,7 +52,8 @@ describe('WtDatetimepicker', () => {
 
   it('Triggers change event after button "add" click', async () => {
     const now = Date.now();
-    const wrapper = shallowMount(WtDatetimepicker, {
+    const wrapper = mount(WtDatetimepicker, {
+      localVue,
       stubs: {
         WtLabel,
         WtIcon,
@@ -59,8 +64,11 @@ describe('WtDatetimepicker', () => {
         value: now,
       },
     });
-    wrapper.find('.wt-datetimepicker__preview').trigger('click');
+    wrapper.find('.wt-datetimepicker__preview').trigger('keyup.enter');
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
+    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,11 +1,12 @@
 <template>
-  <div
+  <v-dropdown
     class="wt-datetimepicker"
     :class="{
       'wt-datetimepicker--active': isOpened,
       'wt-datetimepicker--disabled': disabled,
     }"
-    v-clickaway="close"
+    :shown.sync="isOpened"
+    placement="bottom-start"
   >
     <wt-label :disabled="disabled" v-bind="labelProps">
       <!-- @slot Custom input label -->
@@ -13,11 +14,8 @@
     </wt-label>
     <div
       class="wt-datetimepicker__preview"
-      :class="{'wt-datetimepicker__preview--opened': isOpened}"
       tabindex="0"
-      @click="isOpened = !isOpened"
       @keyup.enter="isOpened = !isOpened"
-      @keyup.esc="isOpened = false"
     >
       <wt-icon class="wt-datetimepicker__calendar-icon" icon="calendar"></wt-icon>
       <input
@@ -26,57 +24,61 @@
         autocomplete="off"
         readonly
       >
-      <wt-icon class="wt-datetimepicker__arrow-icon" icon="arrow-down"></wt-icon>
+      <wt-icon
+        class="wt-datetimepicker__arrow-icon"
+        icon="arrow-down"
+      ></wt-icon>
     </div>
-
-    <div
-      class="wt-datetimepicker__form"
-      v-show="isOpened"
-    >
-      <div class="wt-datetimepicker__quick-filters-wrapper">
+    <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">
+          <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>
-      <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>
-  </div>
+
+    </template>
+  </v-dropdown>
 </template>
 
 <script>
@@ -206,16 +208,12 @@
   }
 
   .wt-datetimepicker__form {
-    position: absolute;
-    top: 100%;
-    left: 0;
     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);
-    z-index: var(--datetimepicker-form-z-index);
   }
 
   .wt-datetimepicker__quick-filters-wrapper {
@@ -283,7 +281,9 @@
     .wt-datetimepicker__preview__input {
       border-color: var(--form-border--active-color);
     }
+  }
 
+  .wt-datetimepicker--active {
     .wt-datetimepicker__arrow-icon {
       transform: translateY(-50%) rotate(180deg);
     }

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

@@ -6,7 +6,6 @@
 
   --datetimepicker-form-padding: var(--spacing-xs);
   --datetimepicker-form-bg-color: var(--main-color);
-  --datetimepicker-form-z-index: 5; // overflow selects' arrow
 
   --datetimepicker-form-content-margin: var(--spacing-xs);
-}
+}

package/src/css/main.scss

@@ -67,4 +67,9 @@ a {
 .hidden {
   opacity: 0;
   pointer-events: none;
-}
+}
+
+// https://github.com/Akryum/floating-vue/issues/488
+.v-popper__arrow-container {
+  display: none;
+}

package/CHANGELOG.md

@@ -1,44 +0,0 @@
-# Webitel UI Changelog
-
-## [1.0.0] - 02.02.2022
-
-### What's new
-
-1. Border-radius pill style: `--border-radius--pill: 50px`
-1. New typography styles (`subtitle`, `caption`, `overline`)
-1. 10 different Elevation variables (`--elevation-1` - `--elevation-10`)
-1. `secondary-50` icon color
-1. added `size` prop with `sm` and `md` values (default is `md`) for:
-    - `<wt-rounded-action>`
-    - `<wt-button>`
-    - `<wt-indicator>`
-
-### Breaking changes
-
-1. `<wt-badge>` renamed to `<wt-chip>`
-1. removed a dash (`-`) from spacings system (for ex. `--spacing--sm` -> `--spacing-sm`)
-1. Removed all deprecated spacings variables. Existing components moved to newest ones.
-1. Removed all deprecated colors variables. Existing components moved to newest ones.
-1. Removed deprecated `--box-shadow` css variable 
-1. Removed `strong` typography classes. (`strong` typo -> `subtitle` typo)
-1. Now font-family is used like "Montserrat" (without "Regular" or "Semi"). Boldness
- is regulated by `font-weight` property.
-1. Typo size suffixes update: `-sm`, `-md`, `-lg` -> `-3`, `-2`, `-1`
-1. Removed `--label-margin` variable. Now visual offset between label and input is
-provided by label's line-height
-
-### Changes
-
-1. Updated spacings: `spacing-multiplicator` value increased from `4px` to `8px`.
-1. Updated typography:
-    - updated font files, added special font files for each `font-weight`
-     property (`100`-`900`) and style (`italic`)
-    - font-sizes of typography
-    - line-heights of typography
-    
-1. (Almost?) all component paddings, spacings, etc. moved to `spacing` variables
-1. Refactored placeholder: 
-    - removed hover
-    - removeed outline styles
-    - focus style now is more transparent than default state
-1. Many component styles reviewed and updated