@webitel/ui-sdk 25.8.21 → 25.8.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.21",
+  "version": "25.8.22",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",

package/src/components/transitions/cases/wt-replace-transition.vue

@@ -1,8 +1,10 @@
 <template>
   <wt-transition
-    class="wt-replace-transition"
-    :duration="props.duration"
+    :appear="appear"
+    :duration="duration"
+    :mode="mode"
     :name="transitionName"
+    class="wt-replace-transition"
   >
     <template #default>
       <slot />
@@ -16,11 +18,12 @@ import { computed } from 'vue';
 import WtTransition from '../wt-transition.vue';
 
 const props = defineProps({
-  // can choose replace pattern [opacity, slide ets]
+  // can choose replace pattern [opacity, slide-up ets]
   // ATTENTION!! need to add another names(patterns) to <wt-transition/>, now we have fade-opacity only
   pattern: {
     type: String,
     default: 'opacity',
+    options: ['opacity', 'slide-up'],
   },
   duration: {
     type: String,
@@ -30,6 +33,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  mode: {
+    type: String,
+    default: 'out-in',
+  },
 });
 
 const transitionName = computed(() => `fade-${props.pattern}`);

package/src/components/transitions/wt-transition.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
+    :appear="appear"
+    :class="[`wt-transition--${duration}`]"
+    :mode="mode"
+    :name="name"
     class="wt-transition"
-    :class="[`wt-transition--${props.duration}`]"
-    :mode="props.mode"
-    :appear="props.appear"
-    :name="props.name"
   >
     <slot />
   </transition>
@@ -32,16 +32,6 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
-.fade-opacity-enter-active,
-.fade-opacity-leave-active {
-  transition: opacity;
-}
-
-.fade-opacity-enter,
-.fade-opacity-leave-to {
-  opacity: 0;
-}
-
 .wt-transition {
   &--fast {
     transition-duration: var(--transition-fast);
@@ -53,4 +43,32 @@ const props = defineProps({
     transition-duration: var(--transition-slow);
   }
 }
+
+// opacity
+.fade-opacity-enter-active,
+.fade-opacity-leave-active {
+  transition: opacity;
+}
+
+.fade-opacity-enter,
+.fade-opacity-leave-to {
+  opacity: 0;
+}
+
+// slide-up
+.fade-slide-up-enter-active,
+.fade-slide-up-leave-active {
+  transition-timing-function: ease;
+  transition-property: transform;
+}
+
+.fade-slide-up-enter-from,
+.fade-slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+.fade-slide-up-enter-to,
+.fade-slide-up-leave-from {
+  transform: translateY(0);
+}
 </style>

package/types/components/transitions/cases/wt-replace-transition.vue.d.ts

@@ -5,10 +5,12 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     pattern: string;
+    mode: string;
     appear: boolean;
     duration: string;
     $props: {
         readonly pattern?: string;
+        readonly mode?: string;
         readonly appear?: boolean;
         readonly duration?: string;
     };