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

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

@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="wt-time-input"
+    :class="{
+      'wt-time-input--outline': outline,
+      'wt-time-input--disabled': disabled,
+      'wt-time-input--invalid': invalid,
+    }"
+  >
+    <wt-label
+      v-bind="labelProps"
+      v-if="hasLabel"
+      :for="name"
+      :outline="outline"
+      :disabled="disabled"
+      :invalid="invalid"
+    >
+      <!-- @slot Custom input label -->
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ label }}</slot>
+    </wt-label>
+    <div class="wt-time-input__wrapper">
+      <input
+        :id="name"
+        class="wt-time-input__input"
+        :value="value"
+        :min="0"
+        :max="maxValue"
+        :disabled="disabled"
+        type="number"
+        @input="$emit('input', $event.target.value)"
+      >
+    </div>
+    <wt-input-info
+      v-if="showInfo"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import validationMixin from '../../mixins/validationMixin/validationMixin';
+
+export default {
+  name: 'wt-time-input',
+  mixins: [validationMixin],
+  props: {
+    /**
+     * Current input value (`v-model`)
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * Form input label
+     */
+    label: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Form input name
+     */
+    name: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Time type: day, minute, second
+     */
+    maxValue: {
+      type: Number,
+    },
+    /**
+     * Native input required attribute
+     */
+    required: {
+      type: Boolean,
+      default: false,
+      description: 'Native input required attribute',
+    },
+    /**
+     * Native input disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      description: 'Native input disabled attribute',
+    },
+
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+
+    hideInputInfo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
+    showInfo() {
+      return this.isValidation && !this.hideInputInfo;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-time-input {
+  display: inline-block;
+  cursor: text;
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+
+.wt-time-input__wrapper {
+  position: relative;
+}
+
+.wt-label {
+  text-align: center;
+
+  .wt-time-input:hover &,
+  .wt-time-input:focus-within & {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-time-input--invalid:hover &,
+  .wt-time-input--invalid:focus-within & {
+    color: var(--label--invalid-color);
+  }
+}
+
+.wt-time-input__input {
+  @extend %typo-body-1;
+
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--input-padding);
+  color: var(--form-input-color);
+  border: var(--input-border);
+  border-color: var(--form-border-color);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+
+  .wt-time-input:hover &,
+  &:focus {
+    border-color: var(--form-border--hover-color);
+  }
+
+  .wt-time-input--outline & {
+    border-color: var(--form-outline-border-color);
+  }
+
+  .wt-time-input--outline:hover &,
+  .wt-time-input--outline &:focus {
+    border-color: var(--form-outline-border--hover-color);
+  }
+
+  .wt-time-input--disabled & {
+    background: var(--form-border--disabled-color);
+    border-color: var(--form-border--disabled-color);
+  }
+
+  .wt-time-input--invalid &,
+  .wt-time-input--invalid:hover & {
+    border-color: var(--false-color);
+    outline: none; // prevent outline overlapping false color
+  }
+}
+</style>

package/src/components/{molecules/wt-timepicker → wt-timepicker}/__tests__/WtTimepicker.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtTimepicker from '../wt-timepicker.vue';
 import WtTimeInput from '../../wt-time-input/wt-time-input.vue';
 
@@ -13,22 +13,22 @@ describe('WtTimepicker', () => {
   });
 
   it('renders only specified by format time inputs', () => {
-    const wrapper = shallowMount(WtTimepicker, {
+    const wrapper = mount(WtTimepicker, {
       stubs: {
         WtTimeInput,
       },
-      propsData: { format: 'mm' },
+      props: { format: 'mm' },
     });
     expect(wrapper.findAllComponents(WtTimeInput).length).toBe(1);
   });
 
-  it('Correctly converts value from MIN time-input to output', () => {
+  it('Correctly converts value from MIN time-input to output', async () => {
     const value = 0;
-    const wrapper = shallowMount(WtTimepicker, {
-      stubs: {
-        WtTimeInput,
-      },
-      propsData: { value },
+    const wrapper = mount(WtTimepicker, {
+      // stubs: {
+      //   WtTimeInput,
+      // },
+      props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(0).vm.$emit('input', 21);
     expect(wrapper.emitted().input[0]).toEqual([21 * 60 * 60]);
@@ -36,11 +36,11 @@ describe('WtTimepicker', () => {
 
   it('Correctly converts value from HOUR time-input to output', () => {
     const value = 0;
-    const wrapper = shallowMount(WtTimepicker, {
+    const wrapper = mount(WtTimepicker, {
       stubs: {
         WtTimeInput,
       },
-      propsData: { value },
+      props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(1).vm.$emit('input', 21);
     expect(wrapper.emitted().input[0]).toEqual([21 * 60]);
@@ -48,11 +48,11 @@ describe('WtTimepicker', () => {
 
   it('Correctly converts value from SEC time-input to output', () => {
     const value = 0;
-    const wrapper = shallowMount(WtTimepicker, {
+    const wrapper = mount(WtTimepicker, {
       stubs: {
         WtTimeInput,
       },
-      propsData: { value },
+      props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(2).vm.$emit('input', 21);
     expect(wrapper.emitted().input[0]).toEqual([21]);

package/src/components/{molecules/wt-timepicker → wt-timepicker}/wt-timepicker.vue

@@ -1,39 +1,42 @@
 <template>
   <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
     <wt-label
+      v-bind="labelProps"
       v-if="label"
       :invalid="invalid"
-      v-bind="labelProps"
     >
       {{ `${label} (${format})` }}
     </wt-label>
     <div class="wt-timepicker__wrapper">
       <wt-time-input
         v-if="isHour"
-        v-model="hour"
+        :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
         :maxValue="dateMode ? null : 23"
         :disabled="disabled"
         hide-input-info
+        @input="hour = $event"
       ></wt-time-input>
       <wt-time-input
         v-if="isMin"
-        v-model="min"
+        :value="min"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.min')"
         :maxValue="59"
         :disabled="disabled"
         hide-input-info
+        @input="min = $event"
       ></wt-time-input>
       <wt-time-input
         v-if="isSec"
-        v-model="sec"
+        :value="sec"
         :v="v"
         :label="label ? null :  $t('webitelUI.timepicker.sec')"
         :maxValue="59"
         :disabled="disabled"
         hide-input-info
+        @input="sec = $event"
       ></wt-time-input>
     </div>
     <wt-input-info
@@ -45,7 +48,7 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
@@ -139,7 +142,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-timepicker {
   display: flex;
   flex-direction: column;

package/src/components/{atoms/wt-tooltip → wt-tooltip}/__tests__/WtTooltip.spec.js

@@ -20,7 +20,7 @@ describe('WtTooltip', () => {
 
   it('changed tooltip color, if prop is passed', () => {
     const wrapper = shallowMount(WtTooltip, {
-      propsData: {
+      props: {
         contrast: true,
       },
     });

package/src/components/wt-tooltip/_internals/useTooltipTriggerSubscriptions.js

@@ -0,0 +1,68 @@
+// https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/util/events.ts
+import { onBeforeUnmount, onMounted } from 'vue';
+
+const SHOW_EVENT_MAP = {
+  hover: 'mouseenter',
+  focus: 'focus',
+  click: 'click',
+  touch: 'touchstart',
+  pointer: 'pointerdown',
+};
+
+// https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/util/events.ts
+const HIDE_EVENT_MAP = {
+  hover: 'mouseleave',
+  focus: 'blur',
+  click: 'click',
+  touch: 'touchend',
+  pointer: 'pointerup',
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useTooltipTriggerSubscriptions = ({
+                                                 target, triggers, show, hide,
+                                               }) => {
+  const subscribeTriggers = () => {
+    const setEventListeners = (target, triggers) => {
+      triggers.forEach((trigger) => {
+        const showEvent = SHOW_EVENT_MAP[trigger];
+        if (showEvent) {
+          target.addEventListener(showEvent, show);
+        } else {
+          console.log(`No Tooltip Show event for ${trigger} trigger`);
+        }
+        const hideEvent = HIDE_EVENT_MAP[trigger];
+        if (hideEvent) {
+          target.addEventListener(hideEvent, hide);
+        } else {
+          console.log(`No Tooltip Hide event for ${trigger} trigger`);
+        }
+      });
+    };
+
+    setEventListeners(target.value, triggers);
+  };
+  const unsubscribeTriggers = () => {
+    const unsetEventListeners = (target, triggers) => {
+      triggers.forEach((trigger) => {
+        const showEvent = SHOW_EVENT_MAP[trigger];
+        if (showEvent) {
+          target.removeEventListener(showEvent, show);
+        } else {
+          console.log(`No Tooltip Show event for ${trigger} trigger`);
+        }
+        const hideEvent = HIDE_EVENT_MAP[trigger];
+        if (hideEvent) {
+          target.removeEventListener(hideEvent, hide);
+        } else {
+          console.log(`No Tooltip Hide event for ${trigger} trigger`);
+        }
+      });
+    };
+
+    unsetEventListeners(target.value, triggers);
+  };
+
+  onMounted(() => subscribeTriggers());
+  onBeforeUnmount(() => unsubscribeTriggers());
+};

package/src/components/wt-tooltip/_internals/wt-tooltip-floating.vue

@@ -0,0 +1,48 @@
+<template>
+  <aside
+    class="wt-tooltip-floating"
+    ref="floating"
+  >
+    <slot></slot>
+  </aside>
+</template>
+
+<script setup>
+/*
+* We need to create separate floating component so that we could set
+* eventListeners on it at mount
+*
+* wt-tooltip itself can't do it, because floating is rendered conditionally
+* through v-if so that there's no way to attach eventListeners to floating
+* on tooltip mount
+* */
+
+import { ref } from 'vue';
+import { useTooltipTriggerSubscriptions } from './useTooltipTriggerSubscriptions';
+
+const props = defineProps({
+  triggers: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits([
+  'show',
+  'hide',
+]);
+
+const floating = ref(null);
+
+useTooltipTriggerSubscriptions({
+  target: floating,
+  triggers: props.triggers,
+  show: () => emit('show'),
+  hide: () => emit('hide'),
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/wt-tooltip/_variables.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
+
+  --tooltip-light-text-color: var(--text-primary-color);
+  --tooltip-light-bg-color: var(--main-color);
+  --tooltip-dark-text-color: var(--text-contrast-color);
+  --tooltip-dark-bg-color: var(--contrast-color);
+
+  --tooltip-elevation: var(--elevation-10);
+}

package/src/components/wt-tooltip/wt-tooltip.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    :class="{
+      'wt-tooltip--contrast': contrast,
+      'wt-tooltip--visible': isVisible,
+     }"
+    class="wt-tooltip"
+  >
+    <div
+      ref="activator"
+      class="wt-tooltip__activator"
+    >
+      <slot name="activator"></slot>
+    </div>
+    <wt-tooltip-floating
+      v-if="isVisible"
+      ref="floating"
+      class="wt-tooltip__floating"
+      v-clickaway="hideTooltip"
+      :class="[popperClass]"
+      :style="floatingStyles"
+      :triggers="popperTriggers"
+      @show="showTooltip"
+      @hide="hideTooltip"
+    >
+      <slot v-bind="{ hide: hideTooltip }"></slot>
+    </wt-tooltip-floating>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, onMounted, watch,
+} from 'vue';
+import {
+  useFloating, autoPlacement, shift, flip, offset, autoUpdate,
+} from '@floating-ui/vue';
+import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions';
+import WtTooltipFloating from './_internals/wt-tooltip-floating.vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  contrast: {
+    type: Boolean,
+    default: false,
+  },
+  placement: {
+    type: String,
+    default: 'auto',
+  },
+  popperTriggers: {
+    type: Array,
+    default: () => [],
+  },
+  triggers: {
+    type: Array,
+    default: () => ['hover', 'focus', 'touch'],
+  },
+  popperClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const activator = ref(null);
+const floating = ref(null);
+
+const isVisible = ref(false);
+
+const showTooltip = (event = {}) => {
+  if (isVisible.value) return;
+  isVisible.value = true;
+
+  // https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/components/Popper.ts#L884
+  event.usedByTooltip = true;
+};
+
+const hideTooltip = (event = {}) => {
+  if (event.usedByTooltip) return;
+  isVisible.value = false;
+};
+
+// https://floating-ui.com/docs/misc#clipping
+const { floatingStyles } = useFloating(activator, floating, {
+  placement: props.placement === 'auto' ? null : props.placement,
+  strategy: 'fixed', // https://floating-ui.com/docs/computeposition#strategy
+  // https://floating-ui.com/docs/middleware
+
+  /* WE SHOULD USE v-if INSTEAD OF OPACITY VISIBILITY
+  TOGGLE BECAUSE OF PERFORMANCE ISSUES, RELATED TO USAGE OF AUTO_UPDATE OF POSITIONS
+  */
+  whileElementsMounted: autoUpdate, // https://floating-ui.com/docs/vue#anchoring
+  middleware: [
+    shift(), offset(4),
+    props.placement === 'auto' ? autoPlacement() : flip(),
+  ],
+});
+
+useTooltipTriggerSubscriptions({
+  target: activator,
+  triggers: props.triggers,
+  show: showTooltip,
+  hide: hideTooltip,
+});
+
+watch(props.visible, (value) => {
+  if (value) showTooltip();
+  else hideTooltip();
+});
+
+onMounted(() => {
+  if (props.visible) showTooltip();
+});
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-tooltip {
+  display: inline-block;
+  height: fit-content;
+
+  &__activator {
+    line-height: 0;
+  }
+
+  .wt-tooltip-floating {
+    @extend %typo-body-2;
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    color: var(--contrast-color);
+    background: var(--main-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+    z-index: 1000;
+  }
+
+  &--contrast {
+    .wt-tooltip-floating {
+      color: var(--main-color);
+      background: var(--contrast-color);
+    }
+  }
+}
+</style>

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -0,0 +1,14 @@
+import { useCachedInterval } from '../useCachedInterval';
+
+describe('useCachedInterval', () => {
+  it('subscribe', (done) => {
+    const callback = jest.fn();
+    const { subscribe } = useCachedInterval({ timeout: 10 });
+    subscribe(callback);
+    expect(callback).toHaveBeenCalledTimes(1);
+    setTimeout(() => {
+      expect(callback).toHaveBeenCalledTimes(2);
+      done();
+    }, 10);
+  });
+});

package/src/composables/useCachedInterval/useCachedInterval.js

@@ -0,0 +1,21 @@
+import { onBeforeUnmount } from 'vue';
+import preventHiddenPageCallsDecorator
+  from '../../scripts/preventHiddenPageCallsDecorator';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useCachedInterval = ({
+                             timeout,
+                             localStorageKey = 'auto-refresh',
+                           }) => {
+  let interval = null;
+
+  onBeforeUnmount(() => {
+    if (interval) clearInterval(interval);
+  });
+  const subscribe = (callback) => {
+    const _timeout = timeout || +localStorage.getItem(localStorageKey) || 5 * 60 * 1000;
+    callback();
+    interval = setInterval(preventHiddenPageCallsDecorator(callback), _timeout);
+  };
+  return { subscribe };
+};