@mythpe/quasar-ui-qui 0.2.18 → 0.2.20

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -233,7 +233,7 @@ defineOptions({
   >
     <MColumn :class="contentClass">
       <slot name="top" />
-      <MTransition>
+      <MTransitionGroup>
         <div
           v-if="label !== undefined"
           key="label"
@@ -362,7 +362,7 @@ defineOptions({
             @click="openWindow(url)"
           />
         </div>
-      </MTransition>
+      </MTransitionGroup>
       <slot name="caption">
         <div
           v-if="!!caption"

package/src/components/form/MSignaturePad.vue

@@ -160,7 +160,7 @@ watch(url, (url) => {
       name="top-input"
       v-bind="scopes"
     />
-    <MTransition>
+    <MTransitionGroup>
       <div
         key="top"
         class="row justify-between items-center q-mb-lg"
@@ -285,7 +285,7 @@ watch(url, (url) => {
           </MColumn>
         </MTransition>
       </div>
-    </MTransition>
+    </MTransitionGroup>
     <slot
       :confirmed="confirmed"
       name="bottom-input"

package/src/components/transition/useTransition.ts

@@ -6,15 +6,19 @@
  * Github: https://github.com/mythpe
  */
 
-import { useMyth } from '../../composable'
-
 export function useTransition (props: any) {
-  const { theme } = useMyth()
   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.in) : (props.leaveActiveClass || props.out)
-    classes.push(activeClass || defMode)
+    if (mode === 'in' && props.enterActiveClass) {
+      return `animated ${props.enterActiveClass}`
+    }
+    if (mode === 'out' && props.leaveActiveClass) {
+      return `animated ${props.leaveActiveClass}`
+    }
+    const activeClass = props[mode]
+    if (!activeClass) {
+      return undefined
+    }
+    const classes: string[] = ['animated', activeClass]
     const keys = [
       `${mode}Slower`,
       `${mode}Slow`,

package/src/types/api/MTransition.d.ts

@@ -109,14 +109,14 @@ export type TransitionDelay = boolean | string | number;
 export type TransitionRepeat = boolean | string | number;
 
 interface BaseTransitionProps {
-  in?: TransitionClass;
+  in?: TransitionClass | null;
   inSlower?: boolean;
   inSlow?: boolean;
   inFast?: boolean;
   inFaster?: boolean;
   inDelay?: TransitionDelay;
   inRepeat?: TransitionRepeat;
-  out?: TransitionClass;
+  out?: TransitionClass | null;
   outSlower?: boolean;
   outSlow?: boolean;
   outFast?: boolean;