@mythpe/quasar-ui-qui 0.2.19 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "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/MTransition.vue

@@ -10,29 +10,19 @@
   lang="ts"
   setup
 >
-import type { MTransitionProps as Props } from '../../types'
+import { MTransitionProps as Props } from '../../types'
 import { useTransition } from './useTransition'
 
 const props = defineProps<Props>()
-const { getClasses } = useTransition(props)
+const { computedProps } = useTransition(props)
 
 defineOptions({
-  name: 'MTransition',
-  inheritAttrs: !1
+  name: 'MTransition'
 })
 </script>
 
 <template>
-  <transition
-    v-bind="{
-      ...$props,
-      ...$attrs,
-      enterActiveClass: getClasses('in'),
-      leaveActiveClass: getClasses('out'),
-      appear: !noAppear,
-      css: !noCss
-    }"
-  >
+  <transition v-bind="computedProps">
     <slot />
   </transition>
 </template>

package/src/components/transition/MTransitionGroup.vue

@@ -14,25 +14,15 @@ import type { MTransitionGroupProps as Props } from '../../types'
 import { useTransition } from './useTransition'
 
 const props = defineProps<Props>()
-const { getClasses } = useTransition(props)
+const { computedProps } = useTransition(props)
 
 defineOptions({
-  name: 'MTransitionGroup',
-  inheritAttrs: !1
+  name: 'MTransitionGroup'
 })
 </script>
 
 <template>
-  <transition-group
-    v-bind="{
-      ...$props,
-      ...$attrs,
-      enterActiveClass: getClasses('in'),
-      leaveActiveClass: getClasses('out'),
-      appear: !noAppear,
-      css: !noCss
-    }"
-  >
+  <transition-group v-bind="computedProps">
     <slot />
   </transition-group>
 </template>

package/src/components/transition/useTransition.ts

@@ -6,6 +6,8 @@
  * Github: https://github.com/mythpe
  */
 
+import { computed } from 'vue'
+
 export function useTransition (props: any) {
   const getClasses = (mode: 'in' | 'out') => {
     if (mode === 'in' && props.enterActiveClass) {
@@ -50,5 +52,40 @@ export function useTransition (props: any) {
     }
     return classes.join(' ')
   }
-  return { getClasses }
+  const computedProps = computed(() => {
+    const p = {
+      ...props,
+      enterActiveClass: getClasses('in'),
+      leaveActiveClass: getClasses('out'),
+      appear: !props.noAppear,
+      css: !props.noCss
+    }
+    const remove = [
+      'in',
+      'inSlower',
+      'inSlow',
+      'inFast',
+      'inFaster',
+      'inDelay',
+      'inRepeat',
+      'out',
+      'outSlower',
+      'outSlow',
+      'outFast',
+      'outFaster',
+      'outDelay',
+      'outRepeat',
+      'noAppear',
+      'noCss',
+      'enterActiveClass',
+      'leaveActiveClass',
+      'appear',
+      'css'
+    ]
+    for (const removeKey in remove) {
+      delete p[removeKey]
+    }
+    return p
+  })
+  return { getClasses, computedProps }
 }