@mythpe/quasar-ui-qui 0.2.16 → 0.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/form/MEditor.vue

@@ -259,13 +259,13 @@ defineOptions({
       name="bottom-input"
       v-bind="inputScope"
     />
-    <MFadeXTransition>
+    <MTransition>
       <p
         v-if="!!errorMessage"
         class="text-body2 text-negative"
       >
         {{ errorMessage }}
       </p>
-    </MFadeXTransition>
+    </MTransition>
   </MCol>
 </template>

package/src/components/form/MOtp.vue

@@ -269,7 +269,7 @@ defineOptions({
       {{ otpErrors[0] }}
     </div>
     <slot name="after-input" />
-    <MFadeTransition>
+    <MTransition>
       <div
         v-if="!noTiming"
         class="q-mt-sm"
@@ -277,8 +277,8 @@ defineOptions({
         <span>{{ __('myth.otp.expire_line') }}:&nbsp;</span>
         <span>{{ getTime }}</span>
       </div>
-    </MFadeTransition>
-    <MFadeTransition>
+    </MTransition>
+    <MTransition>
       <div
         v-if="!noSendAgain"
         class="q-mt-sm"
@@ -289,7 +289,7 @@ defineOptions({
           @click="onResend()"
         >{{ __('myth.otp.send_again_btn') }}</span>
       </div>
-    </MFadeTransition>
+    </MTransition>
     <slot name="after-all" />
   </MCol>
 </template>

package/src/components/form/MUploader.vue

@@ -313,7 +313,7 @@ defineOptions({
     :sm="sm"
     :xs="xs"
   >
-    <MFadeTransition>
+    <MTransition>
       <div
         v-if="!!error"
         class="row items-center q-pa-sm bg-negative text-white q-mb-xs rounded-borders"
@@ -324,7 +324,7 @@ defineOptions({
         />
         {{ error }}
       </div>
-    </MFadeTransition>
+    </MTransition>
     <q-uploader
       ref="uploader"
       :accept="accepts.join(',')"

package/src/components/transition/useTransition.ts

@@ -13,7 +13,7 @@ export function useTransition (props: any) {
   const getClasses = (mode: 'in' | 'out') => {
     const classes: string[] = ['animated']
     const defMode = mode === 'in' ? theme.value.inTransition : theme.value.outTransition
-    const activeClass = mode === 'in' ? props.enterActiveClass : props.leaveActiveClass
+    const activeClass = mode === 'in' ? (props.enterActiveClass || props.in) : (props.leaveActiveClass || props.out)
     classes.push(activeClass || defMode)
     const keys = [
       `${mode}Slower`,