@webitel/ui-sdk 24.12.66 → 24.12.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.66",
+  "version": "24.12.68",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-popup/__tests__/WtPopup.spec.js

@@ -6,7 +6,7 @@ describe('WtPopup', () => {
     const wrapper = shallowMount(WtPopup, {
       stubs: { WtIconBtn: true },
     });
-    expect(wrapper.classes('wt-popup')).toBe(true);
+    expect(wrapper.exists()).toBe(true);
   });
 
   it('renders popup header via header slot', () => {

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

@@ -1,12 +1,25 @@
 <template>
+<!--  @slot check source code for scoped bindings :( -->
+  <slot
+    class="wt-popup-activator"
+    name="activator"
+    v-bind="{
+    shown: wrapperShown,
+    size,
+    disabled,
+    open: openPopup,
+    close: closePopup,
+    toggle: togglePopup,
+  } as ActivatorSlotScope"
+  />
   <div
-    v-show="wrapperShown"
+    v-show="wrapperShown || isCloseAnimationPlaying"
     :class="[`wt-popup--size-${size}`, { 'wt-popup--overflow': overflow }]"
     class="wt-popup"
   >
     <transition-slide :offset="[0, -1440 / 2]">
       <aside
-        v-if="shown"
+        v-if="wrapperShown"
         class="wt-popup__popup"
       >
         <header class="wt-popup__header">
@@ -18,7 +31,7 @@
           <wt-icon-btn
             class="wt-popup__close-btn"
             icon="close"
-            @click="$emit('close')"
+            @click="closePopup"
           />
         </header>
         <section
@@ -38,49 +51,120 @@
   </div>
 </template>
 
-<script>
-import { TransitionSlide } from '@morev/vue-transitions';
+<script lang="ts" setup>
+import {TransitionSlide} from '@morev/vue-transitions';
+import {defineEmits, defineProps, ref, watch} from 'vue';
 
-export default {
-  name: 'WtPopup',
-  components: {
-    TransitionSlide,
-  },
-  props: {
-    shown: {
-      type: Boolean,
-      default: true, // TODO: change me to false after refactor
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator: (v) => ['xs', 'sm', 'md', 'lg'].includes(v),
-    },
-    overflow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['close'],
-  data: () => ({
-    wrapperShown: false,
-  }),
-  watch: {
-    // overlay should be shown before popup to show animation properly
-    shown: {
-      handler(value) {
-        if (value) {
-          this.wrapperShown = true;
-        } else {
-          setTimeout(() => {
-            this.wrapperShown = value;
-          }, 200); // 200 -> 0.2s css var(--transition); duration
-        }
-      },
-      immediate: true,
-    },
-  },
+import {ComponentSize} from "../../enums/ComponentSize/ComponentSize.enum.ts";
+
+interface Props {
+  /**
+   * can be used to force popup visibility state
+   * even if it is controlled by activator slot
+   */
+  shown?: boolean;
+  size?: ComponentSize;
+  /**
+   * if true, popup contents will overflow popup container, without scrolling
+   * useful for small popups with select components, which have not enough space
+   * to show its dropdown content without scrolling the popup
+   */
+  overflow?: boolean;
+  /**
+   * disable popup visibility
+   * __even if `shown` prop is "true"__
+   */
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  shown: true,  // TODO: change me to false after refactor
+  size: ComponentSize.MD,
+  overflow: false,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  /**
+   * popup header "close" button clicked
+   */
+  close: [];
+  'popup:opened': [];
+  'popup:closed': [];
+}>();
+
+interface ActivatorSlotScope {
+  shown: Props['shown'];
+  size: Props['size'];
+  disabled: Props['disabled'];
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+const slots = defineSlots<{
+  activator?: ActivatorSlotScope;
+}>();
+
+const wrapperShown = ref(false);
+const isCloseAnimationPlaying = ref(false);
+
+
+const openPopup = () => {
+  wrapperShown.value = true;
+};
+
+const closePopup = () => {
+  isCloseAnimationPlaying.value = true;
+  wrapperShown.value = false;
+
+  setTimeout(() => {
+    isCloseAnimationPlaying.value = false;
+  }, 200); // 200 -> 0.2s css var(--transition); duration
 };
+
+const togglePopup = () => {
+  if (wrapperShown.value) {
+    closePopup();
+  } else {
+    openPopup();
+  }
+};
+
+// overlay should be shown before popup to show animation properly
+watch(
+  () => props.shown,
+  (value) => {
+
+    /*
+     * prop shown default value =true is used to allow backwards compatibility with
+     * older wt-popup API, when popup visibility was controlled simply by v-if
+     *
+     * however, in latest component API design using activator slot is recommended,
+     * but if that's so, there's no `shown` prop => it's true by default => popup is initially shown
+     * so we need to handle initial popup visibility depending on activator slot presence
+     */
+    const activatorMode = !!slots.activator;
+    if (activatorMode) return;
+
+
+    if (value) {
+      openPopup();
+    } else {
+      closePopup();
+    }
+  },
+  {immediate: true}
+);
+
+watch(wrapperShown, (value) => {
+  if (value) {
+    emit('popup:opened');
+  } else {
+    emit('popup:closed');
+  }
+});
+
 </script>
 
 <style lang="scss">

package/src/components/wt-table-column-select/__tests__/WtTableColumnSelect.spec.js

@@ -1,4 +1,5 @@
 import { mount, shallowMount } from '@vue/test-utils';
+
 import WtTableColumnSelect from '../wt-table-column-select.vue';
 
 describe('WtTableColumnSelect', () => {
@@ -26,6 +27,6 @@ describe('WtTableColumnSelect', () => {
     });
     wrapper.findComponent({ name: 'wt-icon-btn' }).vm.$emit('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.wt-table-column-select__popup').exists()).toBe(true);
+    expect(wrapper.find('.wt-popup').exists()).toBe(true);
   });
 });

package/src/enums/ComponentSize/ComponentSize.enum.js

@@ -10,4 +10,6 @@ const ComponentSize = Object.freeze({
   XXXL: '3xl',
 });
 
+export { ComponentSize };
+
 export default ComponentSize;

package/src/enums/ComponentSize/ComponentSize.enum.ts

@@ -0,0 +1,11 @@
+export enum ComponentSize {
+    XXXS = '3xs',
+    XXS = '2xs',
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+    XXXL = '3xl',
+}

package/src/scripts/compareSize.ts

@@ -1,12 +1,4 @@
-import ComponentSize from '../enums/ComponentSize/ComponentSize.enum.js';
-
-export enum eComponentSize {
-  XS = 'xs',
-  SM = 'sm',
-  MD = 'md',
-  LG = 'lg',
-  XL = 'xl',
-}
+import {ComponentSize} from '../enums/ComponentSize/ComponentSize.enum.ts';
 
 const numerics = Object.values(ComponentSize).reduce((nums, size, index) => {
   return {
@@ -68,8 +60,8 @@ export const greaterThen = (s1, s2) => {
  * @returns {boolean}
  */
 export const greaterOrEqual = (
-  s1: eComponentSize,
-  s2: eComponentSize,
+  s1: ComponentSize,
+  s2: ComponentSize,
 ): boolean => {
   return compareSize(s1, s2) >= 0;
 };