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

package/src/components/{atoms/wt-context-menu → wt-context-menu}/wt-context-menu.vue

@@ -1,75 +1,93 @@
 <template>
-  <v-dropdown
+  <wt-tooltip
     class="wt-context-menu"
-    :shown="visible"
+    :visible="visible"
     :triggers="['click', 'touch']"
     placement="bottom-end"
+    popper-class="wt-context-menu__floating-wrapper"
   >
-    <slot name="activator"></slot>
-    <template #popper="{ hide }">
+    <template v-slot:activator>
+      <slot name="activator"></slot>
+    </template>
+    <template v-slot:default="{ hide }">
       <ul
         class="wt-context-menu__menu"
         :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
       >
         <li
           class="wt-context-menu__option-wrapper"
-          v-for="(option, index) in options"
+          v-for="(option, index) of options"
           :key="index"
         >
           <!--      <a> click.prevent prevents redirect to # -->
           <a
+            :class="[
+              { 'wt-context-menu__option--disabled': option.disabled },
+            ]"
             class="wt-context-menu__option"
             href="#"
             @click.prevent="handleOptionClick({ option, index, hide })"
           >
-            <slot name="option" v-bind="option">
+            <slot
+              v-bind="option"
+              name="option"
+            >
               {{ option.text || option }}
             </slot>
           </a>
         </li>
       </ul>
     </template>
-  </v-dropdown>
+  </wt-tooltip>
 </template>
 
-<script>
-export default {
-  name: 'wt-context-menu',
-  props: {
-    options: {
-      type: Array,
-      required: true,
-      description: '[{ text }] or [\'str\']',
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    width: {
-      type: [String],
-      default: 'auto',
-    },
-    minWidth: {
-      type: [String],
-      default: '160px',
-    },
-    maxWidth: {
-      type: [String],
-      default: '300px',
-    },
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    description: '[{ text, disabled, ... anything you need }]',
+  },
+  visible: {
+    type: Boolean,
+  },
+  width: {
+    type: [String],
+    default: 'auto',
   },
-  methods: {
-    handleOptionClick({ option, index, hide }) {
-      this.$emit('click', { option, index });
-      hide();
-    },
+  minWidth: {
+    type: [String],
+    default: '160px',
   },
-};
+  maxWidth: {
+    type: [String],
+    default: '300px',
+  },
+});
+
+const emit = defineEmits([
+  'click',
+]);
+
+function handleOptionClick({ option, index, hide }) {
+  emit('click', { option, index });
+  hide();
+}
+
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-context-menu {
   line-height: 0;
+
+  &.wt-tooltip :deep(.wt-context-menu__floating-wrapper) {
+    padding: 0;
+  }
 }
 
 .wt-context-menu__menu {
@@ -85,21 +103,29 @@ export default {
   &:first-of-type {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
   }
+
   &:last-of-type {
     border-radius: 0 0 var(--border-radius) var(--border-radius);
   }
+
   &:only-of-type {
     border-radius: var(--border-radius);
   }
-  &:hover {
-    background-color: var( --context-menu-option-color--hover);
-    transition: var(--transition);
-  }
 }
 
 .wt-context-menu__option {
   display: block;
   padding: var(--context-menu-option-padding);
   cursor: pointer;
+
+  &:hover {
+    background-color: var(--context-menu-option-color--hover);
+    transition: var(--transition);
+  }
+
+  &--disabled {
+    pointer-events: none;
+    color: var(--context-menu-option-color--disabled);
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } 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';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtDatepicker', () => {
   it('renders a component', () => {
@@ -16,12 +16,12 @@ describe('WtDatepicker', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtDatepicker, {
+    const wrapper = mount(WtDatepicker, {
       stubs: {
         WtLabel,
         WtIcon,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });

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

@@ -0,0 +1,56 @@
+: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: 24px; /*Height of the month-year select row*/
+  --dp-month-year-row-button-size: 24px; /*Specific height for the next/previous buttons*/
+  --dp-button-icon-height: var(--icon-md-size); /*Icon sizing in buttons*/
+  --dp-cell-size: 24px; /*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-3xs); /*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: 24px; /*Sizing for arrow buttons in the time picker*/
+
+  /*Font sizes*/
+  --dp-font-size: 12px; /*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*/
+}
+
+.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(--primary-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/components/wt-datepicker/wt-datepicker.vue

@@ -0,0 +1,240 @@
+<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 }"
+      ref="datepicker"
+      :locale="$i18n.locale === 'ua' ? 'uk' : $i18n.locale"
+      :model-value="+value"
+      :placeholder="label || placeholder"
+      class="wt-datepicker__datepicker"
+      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
+      :close-on-auto-apply="false"
+      auto-apply
+      @closed="isOpened = false"
+      @open="isOpened = true"
+      @update:model-value="emit('input', $event.getTime())"
+    >
+      <template v-slot:input-icon>
+        <wt-icon
+          :color="disabled ? 'disabled' : 'default'"
+          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__open-arrow"
+          icon="arrow-down"
+        ></wt-icon>
+      </template>
+      <template v-slot:arrow-left>
+        <wt-icon-btn
+          icon="arrow-left"
+        ></wt-icon-btn>
+      </template>
+      <template v-slot:arrow-right>
+        <wt-icon-btn
+          icon="arrow-right"
+        ></wt-icon-btn>
+      </template>
+      <template
+        v-if="isDateTime"
+        v-slot:time-picker="{ time, updateTime }"
+      >
+        <div class="datepicker__timepicker">
+          <wt-time-input
+            :value="time.hours"
+            max-value="23"
+            @input="updateTime"
+          ></wt-time-input>
+          :
+          <wt-time-input
+            :value="time.minutes"
+            max-value="59"
+            @input="updateTime($event, false)"
+          ></wt-time-input>
+        </div>
+      </template>
+    </vue-datepicker>
+  </div>
+</template>
+
+<script setup>
+import VueDatepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import { ref } from 'vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'date',
+    options: ['date', 'datetime'],
+  },
+  value: {
+    type: [String, Number],
+    default: 'Date.now()',
+  },
+  /**
+   * label above calendar input
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  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']);
+
+const isOpened = ref(false);
+const datepicker = ref(null); // template ref
+
+const isDateTime = props.mode === 'datetime';
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<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 {
+    @extend %typo-body-1;
+  }
+
+  .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;
+  }
+
+  .dp__month_year_select,
+  .dp__cell_inner {
+    @extend %typo-body-2;
+  }
+
+  // reset right/left arrow hover
+  .dp__inner_nav:hover {
+    background: inherit;
+  }
+
+  .dp__menu {
+    box-sizing: border-box;
+    min-width: 196px;
+    width: 196px;
+    padding: var(--spacing-xs);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+  }
+
+  .dp__calendar_wrap {
+    gap: var(--spacing-2xs);
+  }
+
+  .dp__calendar_header_item {
+    @extend %typo-subtitle-2;
+  }
+
+  .dp__calendar_header_separator {
+    background: var(--secondary-color);
+  }
+
+  .dp__calendar_header,
+  .dp__calendar_row {
+    gap: var(--spacing-3xs);
+  }
+
+  // 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;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+
+  .wt-time-input {
+    flex-grow: 1;
+  }
+}
+
+.wt-datepicker__open-arrow {
+  transition: var(--transition);
+
+  &--opened {
+    transform: rotate(180deg);
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <hr class="wt-divider">
+</template>
+
+<script>
+export default {
+  name: 'wt-divider',
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-divider {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 0;
+  max-height: 0;
+  padding: 0;
+  margin: 0;
+  border: var(--divider-border);
+  border-color: var(--divider-border-color);
+  border-top-width: thin;
+}
+</style>

package/src/components/wt-dummy/__tests__/WtDummy.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDummy from '../wt-dummy.vue';
+
+describe('WtDummy', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtDummy);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="wt-dummy">
+    <div class="wt-dummy__img">
+      <img
+        :src="src || dummy"
+        :width="size"
+        :height="size"
+        alt="dummy-picture"
+      >
+    </div>
+    <p
+      v-if="!hiddenText"
+      class="wt-dummy__text">{{ text || $t('webitelUI.dummy.text') }}</p>
+    <wt-button
+      v-if="showAction"
+      @click="emits('create')"
+      >{{ buttonText || $t('reusable.add') }}
+    </wt-button>
+  </div>
+</template>
+
+<script setup>
+import dummy from '../../assets/components/molecules/wt-dummy/dummy.svg';
+
+const props = defineProps({
+  src: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  buttonText: {
+    type: String,
+  },
+  showAction: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: [String, Number],
+    default: 200,
+  },
+  hiddenText: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits([
+  'create',
+]);
+
+</script>
+
+<style lang="scss" scoped>
+.wt-dummy {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+
+  &__img {
+    height: 200px;
+    width: 200px;
+  }
+
+  &__text {
+    @extend %typo-body-1;
+  }
+}
+</style>

package/src/components/{organisms/wt-error-page → wt-error-page}/__tests__/wt-error-page.spec.js

@@ -3,15 +3,15 @@ import ErrorPage from '../wt-error-page.vue';
 
 describe('Error Page', () => {
   it('renders a component', () => {
-    const wrapper = shallowMount(ErrorPage, { propsData: { type: '' } });
+    const wrapper = shallowMount(ErrorPage, { props: { type: '' } });
     expect(wrapper.exists()).toBe(true);
   });
   it('renders a component with 404 type', () => {
-    const wrapper = shallowMount(ErrorPage, { propsData: { type: '404' } });
+    const wrapper = shallowMount(ErrorPage, { props: { type: '404' } });
     expect(wrapper.exists()).toBe(true);
   });
   it('renders a component with 403 type', () => {
-    const wrapper = shallowMount(ErrorPage, { propsData: { type: '403' } });
+    const wrapper = shallowMount(ErrorPage, { props: { type: '403' } });
     expect(wrapper.exists()).toBe(true);
   });
 });

package/src/components/{organisms/wt-error-page → wt-error-page}/wt-error-page.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import pic403 from '../../../assets/components/organisms/wt-error-page/403.svg';
-import pic404 from '../../../assets/components/organisms/wt-error-page/404.svg';
+import pic403 from '../../assets/components/organisms/wt-error-page/403.svg';
+import pic404 from '../../assets/components/organisms/wt-error-page/404.svg';
 
 export default {
   name: 'wt-error-page',

package/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtExpansionPanel from '../wt-expansion-panel.vue';
+
+describe('WtExpansionPanel', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtExpansionPanel);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});