@mythpe/quasar-ui-qui 0.2.15 → 0.2.17

package/package.json

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

@@ -11,20 +11,11 @@
   setup
 >
 import type { MTransitionProps as Props } from '../../types'
+import { useTransition } from './useTransition'
 
-interface P {
-  enterIn?: Props['enterIn'];
-  enterOut?: Props['enterOut'];
-  slowIn?: Props['slowIn'];
-  slowOut?: Props['slowIn'];
-}
+const props = defineProps<Props>()
+const { getClasses } = useTransition(props)
 
-withDefaults(defineProps<P>(), {
-  enterIn: () => 'fadeIn',
-  enterOut: () => 'fadeOut',
-  slowIn: () => !1,
-  slowOut: () => !1
-})
 defineOptions({
   name: 'MTransition',
   inheritAttrs: !1
@@ -32,13 +23,16 @@ defineOptions({
 </script>
 
 <template>
-  <TransitionGroup
-    :enter-active-class="`animated ${enterIn} ${slowIn ? 'slow' : ''}`"
-    :leave-active-class="`animated ${enterOut} ${slowOut ? 'slow' : ''}`"
-    appear
-    name="m__transition__fade"
-    v-bind="$attrs"
+  <transition
+    v-bind="{
+      ...$props,
+      ...$attrs,
+      enterActiveClass: getClasses('in'),
+      leaveActiveClass: getClasses('out'),
+      appear: !noAppear,
+      css: !noCss
+    }"
   >
     <slot />
-  </TransitionGroup>
+  </transition>
 </template>

package/src/components/transition/MTransitionGroup.vue

@@ -0,0 +1,38 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+import type { MTransitionGroupProps as Props } from '../../types'
+import { useTransition } from './useTransition'
+
+const props = defineProps<Props>()
+const { getClasses } = useTransition(props)
+
+defineOptions({
+  name: 'MTransitionGroup',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <transition-group
+    v-bind="{
+      ...$props,
+      ...$attrs,
+      enterActiveClass: getClasses('in'),
+      leaveActiveClass: getClasses('out'),
+      appear: !noAppear,
+      css: !noCss
+    }"
+  >
+    <slot />
+  </transition-group>
+</template>

package/src/components/transition/index.ts

@@ -6,10 +6,9 @@
  * Github: https://github.com/mythpe
  */
 
-import MFadeTransition from './MFadeTransition.vue'
-import MFadeXTransition from './MFadeXTransition.vue'
 import MTransition from './MTransition.vue'
+import MTransitionGroup from './MTransitionGroup.vue'
 
-export { MFadeTransition, MFadeXTransition, MTransition }
+export { MTransitionGroup, MTransition }
 
 export default {}

package/src/components/transition/useTransition.ts

@@ -0,0 +1,50 @@
+/*
+ * MyTh Ahmed Faiz Copyright © 2016-2025 All rights reserved.
+ * Email: mythpe@gmail.com
+ * Mobile: +966590470092
+ * Website: https://www.4myth.com
+ * 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.leaveActiveClass
+    classes.push(activeClass || defMode)
+    const keys = [
+      `${mode}Slower`,
+      `${mode}Slow`,
+      `${mode}Fast`,
+      `${mode}Faster`
+    ]
+    for (const k of keys) {
+      if (props[k]) {
+        classes.push(k.replace(mode, '').toLowerCase())
+      }
+    }
+    const delay = props[`${mode}Delay`] || false
+    if (delay) {
+      if (delay === !0) {
+        classes.push('delay-1s')
+      }
+      if (typeof delay === 'number' || typeof delay === 'string') {
+        classes.push(`delay-${delay}s`)
+      }
+    }
+    const repeat = props[`${mode}Repeat`] || false
+    if (repeat) {
+      if (repeat === !0) {
+        classes.push('repeat')
+      }
+      if (typeof repeat === 'number' || typeof repeat === 'string') {
+        classes.push(`repeat-${repeat}`)
+      }
+    }
+    return classes.join(' ')
+  }
+  return { getClasses }
+}

package/src/plugin/defineAsyncComponents.ts

@@ -44,8 +44,7 @@ export const defineAsyncComponents = function (app: App) {
 
   // Transitions.
   app.component('MTransition', defineAsyncComponent(() => import('../components/transition/MTransition.vue')))
-  app.component('MFadeTransition', defineAsyncComponent(() => import('../components/transition/MFadeTransition.vue')))
-  app.component('MFadeXTransition', defineAsyncComponent(() => import('../components/transition/MFadeXTransition.vue')))
+  app.component('MTransitionGroup', defineAsyncComponent(() => import('../components/transition/MTransitionGroup.vue')))
 
   // Modals.
   app.component('MDialog', defineAsyncComponent(() => import('../components/modal/MDialog.vue')))

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

@@ -1,12 +1,136 @@
-import type { TransitionGroupProps, VNode } from 'vue'
+import type { TransitionGroupProps, TransitionProps, VNode } from 'vue'
 
-export interface MTransitionProps extends TransitionGroupProps {
-  enterIn?: string;
-  enterOut?: string;
-  slowIn?: boolean;
-  slowOut?: boolean;
+export type GeneralTransitionClasses =
+  'bounce' |
+  'flash' |
+  'flip' |
+  'headShake' |
+  'heartBeat' |
+  'hinge' |
+  'jello' |
+  'pulse' |
+  'rubberBand' |
+  'shake' |
+  'shakeX' |
+  'shakeY' |
+  'swing' |
+  'tada' |
+  'wobble';
+
+export type InTransitionClasses =
+  'backInDown' |
+  'backInLeft' |
+  'backInRight' |
+  'backInUp' |
+  'bounceIn' |
+  'bounceInDown' |
+  'bounceInLeft' |
+  'bounceInRight' |
+  'bounceInUp' |
+  'fadeIn' |
+  'fadeInBottomLeft' |
+  'fadeInBottomRight' |
+  'fadeInDown' |
+  'fadeInDownBig' |
+  'fadeInLeft' |
+  'fadeInLeftBig' |
+  'fadeInRight' |
+  'fadeInRightBig' |
+  'fadeInTopLeft' |
+  'fadeInTopRight' |
+  'fadeInUp' |
+  'fadeInUpBig' |
+  'flipInX' |
+  'flipInY' |
+  'jackInTheBox' |
+  'lightSpeedInLeft' |
+  'lightSpeedInRight' |
+  'rollIn' |
+  'rotateIn' |
+  'rotateInDownLeft' |
+  'rotateInDownRight' |
+  'rotateInUpLeft' |
+  'rotateInUpRight' |
+  'slideInDown' |
+  'slideInLeft' |
+  'slideInRight' |
+  'slideInUp' |
+  'zoomIn' |
+  'zoomInDown' |
+  'zoomInLeft' |
+  'zoomInRight' |
+  'zoomInUp';
+type OutTransitionClasses =
+  'backOutDown' |
+  'backOutLeft' |
+  'backOutRight' |
+  'backOutUp' |
+  'bounceOut' |
+  'bounceOutDown' |
+  'bounceOutLeft' |
+  'bounceOutRight' |
+  'bounceOutUp' |
+  'fadeOut' |
+  'fadeOutBottomLeft' |
+  'fadeOutBottomRight' |
+  'fadeOutDown' |
+  'fadeOutDownBig' |
+  'fadeOutLeft' |
+  'fadeOutLeftBig' |
+  'fadeOutRight' |
+  'fadeOutRightBig' |
+  'fadeOutTopLeft' |
+  'fadeOutTopRight' |
+  'fadeOutUp' |
+  'fadeOutUpBig' |
+  'flipOutX' |
+  'flipOutY' |
+  'lightSpeedOutLeft' |
+  'lightSpeedOutRight' |
+  'rollOut' |
+  'rotateOut' |
+  'rotateOutDownLeft' |
+  'rotateOutDownRight' |
+  'rotateOutUpLeft' |
+  'rotateOutUpRight' |
+  'slideOutDown' |
+  'slideOutLeft' |
+  'slideOutRight' |
+  'slideOutUp' |
+  'zoomOut' |
+  'zoomOutDown' |
+  'zoomOutLeft' |
+  'zoomOutRight' |
+  'zoomOutUp';
+
+export type TransitionClass = GeneralTransitionClasses | InTransitionClasses | OutTransitionClasses;
+
+export type TransitionDelay = boolean | string | number;
+export type TransitionRepeat = boolean | string | number;
+
+interface BaseTransitionProps {
+  in?: TransitionClass;
+  inSlower?: boolean;
+  inSlow?: boolean;
+  inFast?: boolean;
+  inFaster?: boolean;
+  inDelay?: TransitionDelay;
+  inRepeat?: TransitionRepeat;
+  out?: TransitionClass;
+  outSlower?: boolean;
+  outSlow?: boolean;
+  outFast?: boolean;
+  outFaster?: boolean;
+  outDelay?: TransitionDelay;
+  outRepeat?: TransitionRepeat;
+  noAppear?: boolean;
+  noCss?: boolean;
 }
 
+export type MTransitionGroupProps = BaseTransitionProps & Omit<TransitionGroupProps, 'appear'>;
+
+export type MTransitionProps = BaseTransitionProps & Omit<TransitionProps, 'appear'>;
+
 export interface MTransitionsSlots {
   default: () => VNode[];
 }

package/src/types/components.d.ts

@@ -33,7 +33,7 @@ import type {
   QUploaderProps,
   QUploaderSlots
 } from 'quasar'
-import type { MaybeRefOrGetter, TransitionProps, UnwrapNestedRefs, VNode } from 'vue'
+import type { MaybeRefOrGetter, UnwrapNestedRefs, VNode } from 'vue'
 import type { TypedOptions } from 'typed.js'
 import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
 import type { ThemeShadow, ThemeSize } from './theme'
@@ -41,7 +41,7 @@ import type { ApiInterface, HelpersStubSchema } from './api-helpers'
 import type { MDatatableProps, MDatatableSlots, MDtAvatarProps, MDtAvatarSlots, MDtBtnProps, MDtBtnSlots, MDtContextmenuItemsProps, MDtContextmenuItemsSlots } from './m-datatable'
 import type { EditorConfig } from 'ckeditor5'
 import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer'
-import type { MTransitionProps, MTransitionsSlots } from './api/MTransition'
+import type { MTransitionGroupProps, MTransitionProps, MTransitionsSlots } from './api/MTransition'
 import type { MAxiosProps, MAxiosSlots } from './api/MAxios'
 import type { MSelectProps, MSelectSlots } from './api/MSelect'
 import type { MSignaturePadProps, MSignaturePadSlots } from './api/MSignaturePad'
@@ -1046,8 +1046,8 @@ declare module '@vue/runtime-core' {
 
     // Transitions.
     MTransition: GlobalComponentConstructor<MTransitionProps, MTransitionsSlots>;
-    MFadeTransition: GlobalComponentConstructor<TransitionProps, MTransitionsSlots>;
-    MFadeXTransition: GlobalComponentConstructor<TransitionProps, MTransitionsSlots>;
+    MTransitionGroup: GlobalComponentConstructor<MTransitionGroupProps, MTransitionsSlots>;
+
     // Modals.
     MDialog: GlobalComponentConstructor<MDialogProps, MDialogSlots>;
     MModalMenu: GlobalComponentConstructor<MModalMenuProps, MModalMenuSlots>;

package/src/types/theme.d.ts

@@ -1,11 +1,33 @@
 import type { NamedColor, QBtnProps, QInputProps } from 'quasar'
+import type { TransitionClass } from './api/MTransition'
 
-export type ThemeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' | string;
-export type ThemeShadow = string | number | 'transition' | 'none';
-export type ThemeRounded = boolean;
-export type ThemeFluid = boolean;
-export type ThemeInput =
-  Partial<Pick<QInputProps, 'standout'
+/**
+ * Standard size options with string extension capability
+ */
+export type ThemeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' | string
+
+/**
+ * Shadow configuration options
+ */
+export type ThemeShadow = string | number | 'transition' | 'none'
+
+/**
+ * Rounded corners configuration
+ */
+export type ThemeRounded = boolean
+
+/**
+ * Fluid layout behavior
+ */
+export type ThemeFluid = boolean
+
+/**
+ * Input styling properties based on QInput with additional topLabel option
+ */
+export type ThemeInput = Partial<
+  Pick<
+    QInputProps,
+    | 'standout'
     | 'dense'
     | 'filled'
     | 'outlined'
@@ -21,68 +43,118 @@ export type ThemeInput =
     | 'stackLabel'
     | 'color'
     | 'textColor'
-  >>
-  & {
-  topLabel?: boolean;
+  >
+> & {
+  /** Displays label above the input field */
+  topLabel?: boolean
 }
-export type ThemeBtn = Partial<Pick<QBtnProps, 'flat'
-  | 'outline'
-  | 'push'
-  | 'unelevated'
-  | 'noCaps'
-  | 'rounded'
-  | 'glossy'
-  | 'square'
-  | 'padding'
-  | 'ripple'
-  | 'dense'
-  | 'color'
-  | 'textColor'
->>
-
-export type Theme = {
-  size: ThemeSize;
-  rounded: ThemeRounded;
-  shadow: ThemeShadow;
-  fluid: ThemeFluid;
-  button: ThemeBtn;
-  input: ThemeInput;
-};
 
+/**
+ * Button styling properties based on QBtn
+ */
+export type ThemeBtn = Partial<
+  Pick<
+    QBtnProps,
+    | 'flat'
+    | 'outline'
+    | 'push'
+    | 'unelevated'
+    | 'noCaps'
+    | 'rounded'
+    | 'glossy'
+    | 'square'
+    | 'padding'
+    | 'ripple'
+    | 'dense'
+    | 'color'
+    | 'textColor'
+  >
+>
+
+/**
+ * Loading animation configuration for buttons
+ */
 export type ButtonLoadingOptions = {
-  type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail' | 'spinner';
-  color?: NamedColor | undefined;
-  size?: string | undefined;
-  label?: boolean;
+  /** Type of loading indicator */
+  type:
+    | 'audio' | 'ball' | 'bars' | 'box'
+    | 'clock' | 'comment' | 'cube' | 'dots'
+    | 'facebook' | 'gears' | 'grid' | 'hearts'
+    | 'hourglass' | 'infinity' | 'ios' | 'orbit'
+    | 'oval' | 'pie' | 'puff' | 'radio'
+    | 'rings' | 'tail' | 'spinner'
+  /** Color of the loading indicator */
+  color?: NamedColor | undefined
+  /** Size of the loading indicator */
+  size?: string | undefined
+  /** Whether to show loading text */
+  label?: boolean
+}
+
+/**
+ * Complete theme configuration
+ */
+export interface Theme {
+  /** Base size for components */
+  size: ThemeSize
+  /** Rounded corners setting */
+  rounded: ThemeRounded
+  /** Shadow configuration */
+  shadow: ThemeShadow
+  /** Fluid layout behavior */
+  fluid: ThemeFluid
+  /** Default button styles */
+  button: ThemeBtn
+  /** Default input styles */
+  input: ThemeInput
 }
 
+/**
+ * Theme context with default values
+ */
 export interface ThemeContext {
   /**
-   * Default size of theme.
+   * Default transition for "in" state
    */
-  size: ThemeSize;
+  inTransition: TransitionClass
   /**
-   * Theme rounded.
+   * Default transition for "out" state
    */
-  rounded: ThemeRounded;
+  outTransition: TransitionClass
+
   /**
-   * Theme shadow.
+   * Base size for all components
    */
-  shadow: ThemeShadow;
+  size: ThemeSize
+
   /**
-   * Theme fluid.
+   * Global rounded corners setting
    */
-  fluid: ThemeFluid;
+  rounded: ThemeRounded
+
   /**
-   * Default buttons style.
+   * Global shadow setting
    */
-  buttons: ThemeBtn;
+  shadow: ThemeShadow
+
   /**
-   * Default inputs style.
+   * Fluid layout behavior
    */
-  inputs: ThemeInput;
+  fluid: ThemeFluid
+
+  /**
+   * Default button styles
+   */
+  buttons: ThemeBtn
+
+  /**
+   * Default input styles
+   */
+  inputs: ThemeInput
+
   /**
-   * Default of loading slot of q-btn.
+   * Default loading configuration for buttons
+   * Set to false to disable
    */
-  buttonLoading: ButtonLoadingOptions | false;
+  buttonLoading: ButtonLoadingOptions | false
 }

package/src/utils/createMyth.ts

@@ -4,7 +4,7 @@ import type { AxiosInstance } from 'axios'
 import { extend } from 'quasar'
 
 export const createMyth = (options: InstallOptions) => {
-  const defaultOptions: MythApi = {
+  const defaultOptions = {
     asyncComponents: !1,
     api: {
       url: '',
@@ -12,6 +12,8 @@ export const createMyth = (options: InstallOptions) => {
       axios: {} as AxiosInstance
     },
     theme: {
+      inTransition: 'fadeIn',
+      outTransition: 'fadeOut',
       size: 'md',
       rounded: !0,
       shadow: 2,

package/src/components/transition/MFadeTransition.vue

@@ -1,27 +0,0 @@
-<!--
-  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
-  - Email: mythpe@gmail.com
-  - Mobile: +966590470092
-  - Website: https://www.4myth.com
-  - Github: https://github.com/mythpe
-  -->
-
-<script
-  lang="ts"
-  setup
->
-defineOptions({
-  name: 'MFadeTransition',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <Transition
-    appear
-    name="myth-transition__fade"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Transition>
-</template>

package/src/components/transition/MFadeXTransition.vue

@@ -1,26 +0,0 @@
-<!--
-  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
-  - Email: mythpe@gmail.com
-  - Mobile: +966590470092
-  - Website: https://www.4myth.com
-  - Github: https://github.com/mythpe
-  -->
-<script
-  lang="ts"
-  setup
->
-defineOptions({
-  name: 'MFadeXTransition',
-  inheritAttrs: !1
-})
-</script>
-
-<template>
-  <Transition
-    appear
-    name="myth-transition__fade-x"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Transition>
-</template>