@mythpe/quasar-ui-qui 0.2.26 → 0.2.27

package/package.json

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

package/src/components/transition/MTransition.vue

@@ -17,8 +17,7 @@ const props = defineProps<Props>()
 const { computedProps } = useTransition(props)
 
 defineOptions({
-  name: 'MTransition',
-  inheritAttrs: !1
+  name: 'MTransition'
 })
 </script>
 

package/src/components/transition/MTransitionGroup.vue

@@ -17,8 +17,7 @@ const props = defineProps<Props>()
 const { computedProps } = useTransition(props)
 
 defineOptions({
-  name: 'MTransitionGroup',
-  inheritAttrs: !1
+  name: 'MTransitionGroup'
 })
 </script>
 

package/src/components/transition/useTransition.ts

@@ -6,16 +6,20 @@
  * Github: https://github.com/mythpe
  */
 
+import type { TransitionGroupProps, TransitionProps } from 'vue'
 import { computed } from 'vue'
 
 export function useTransition (props: any) {
-  const getClasses = (mode: 'in' | 'out') => {
+  const getClasses = (mode: 'in' | 'out' | 'appear') => {
     if (mode === 'in' && props.enterActiveClass) {
       return `animated ${props.enterActiveClass}`
     }
     if (mode === 'out' && props.leaveActiveClass) {
       return `animated ${props.leaveActiveClass}`
     }
+    if (mode === 'appear' && props.appearActiveClass) {
+      return `animated ${props.appearActiveClass}`
+    }
     const activeClass = props[mode]
     if (!activeClass) {
       return undefined
@@ -54,12 +58,13 @@ export function useTransition (props: any) {
   }
   const computedProps = computed(() => {
     const p = {
-      ...props,
+      // ...props,
       enterActiveClass: getClasses('in'),
       leaveActiveClass: getClasses('out'),
+      appearActiveClass: getClasses('appear'),
       appear: !props.noAppear,
       css: !props.noCss
-    }
+    } as TransitionProps | TransitionGroupProps
     const remove = [
       'in',
       'inSlower',
@@ -75,12 +80,14 @@ export function useTransition (props: any) {
       'outFaster',
       'outDelay',
       'outRepeat',
+      'appearSlower',
+      'appearSlow',
+      'appearFast',
+      'appearFaster',
+      'appearDelay',
+      'appearRepeat',
       'noAppear',
-      'noCss',
-      'enterActiveClass',
-      'leaveActiveClass',
-      'appear',
-      'css'
+      'noCss'
     ]
     for (const removeKey of remove) {
       delete p[removeKey]

package/src/index.sass

@@ -6,7 +6,6 @@
 
 //@import 'quasar/src/css/variables.sass'
 @import './style/main'
-@import './style/m-ck.css' #{"/* rtl:ignore */"}
 @import './style/ckeditor5'
 @import './style/m-container'
 @import './style/m-dt'

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

@@ -108,7 +108,7 @@ export type TransitionClass = GeneralTransitionClasses | InTransitionClasses | O
 export type TransitionDelay = boolean | string | number;
 export type TransitionRepeat = boolean | string | number;
 
-interface BaseTransitionProps {
+export interface BaseMTransitionProps {
   in?: TransitionClass | null;
   inSlower?: boolean;
   inSlow?: boolean;
@@ -123,13 +123,20 @@ interface BaseTransitionProps {
   outFaster?: boolean;
   outDelay?: TransitionDelay;
   outRepeat?: TransitionRepeat;
+  appear?: TransitionClass | null;
+  appearSlower?: boolean;
+  appearSlow?: boolean;
+  appearFast?: boolean;
+  appearFaster?: boolean;
+  appearDelay?: TransitionDelay;
+  appearRepeat?: TransitionRepeat;
   noAppear?: boolean;
   noCss?: boolean;
 }
 
-export type MTransitionGroupProps = BaseTransitionProps & Omit<TransitionGroupProps, 'appear'>;
+export type MTransitionProps = BaseMTransitionProps & Omit<TransitionProps, 'appear'>;
 
-export type MTransitionProps = BaseTransitionProps & Omit<TransitionProps, 'appear'>;
+export type MTransitionGroupProps = BaseMTransitionProps & Omit<TransitionGroupProps, 'appear'>;
 
 export interface MTransitionsSlots {
   default: () => VNode[];

package/src/style/m-ck.css

@@ -1,135 +0,0 @@
-/*
- * 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 url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
-@media print {
-  body {
-    margin: 0 !important;
-  }
-}
-
-.main-container {
-  /*font-family: 'Lato';*/
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
-  direction: ltr;
-}
-
-.ck-content {
-  font-family: 'Lato', sans-serif;
-  line-height: 1.6;
-  word-break: break-word;
-}
-
-.editor-container_classic-editor .editor-container__editor {
-  min-width: 795px;
-  max-width: 795px;
-}
-
-.editor-container_include-block-toolbar {
-  margin-left: 42px;
-}
-
-.ck-content h3.category {
-  font-family: 'Oswald', serif;
-  font-size: 20px;
-  font-weight: bold;
-  color: #555;
-  letter-spacing: 10px;
-  margin: 0;
-  padding: 0;
-}
-
-.ck-content h3.document-subtitle {
-  font-family: 'Oswald', serif;
-  font-size: 20px;
-  color: #555;
-  margin: 0 0 1em;
-  font-weight: bold;
-  padding: 0;
-}
-
-.ck-content p.info-box {
-  --background-size: 30px;
-  --background-color: #e91e63;
-  padding: 1.2em 2em;
-  border: 1px solid var(--background-color);
-  background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)),
-  linear-gradient(
-    135deg,
-    transparent calc(100% - var(--background-size)),
-    var(--background-color) calc(100% - var(--background-size)),
-    var(--background-color)
-  );
-  border-radius: 10px;
-  margin: 1.5em 2em;
-  box-shadow: 5px 5px 0 #ffe6ef;
-}
-
-.ck-content span.marker {
-  background: yellow;
-}
-
-.ck-content span.spoiler {
-  background: #000;
-  color: #000;
-}
-
-.ck-content span.spoiler:hover {
-  background: #000;
-  color: #fff;
-}
-
-.ck-content .button {
-  display: inline-block;
-  width: 260px;
-  border-radius: 8px;
-  margin: 0 auto;
-  padding: 12px;
-  color: #ffffff;
-  font-size: 24px;
-  font-weight: 700;
-  text-align: center;
-  text-decoration: none;
-}
-
-.ck-content .button--green {
-  background-color: #406b1e;
-}
-
-.ck-content .button--black {
-  background-color: #141517;
-}
-
-.editor_container__word-count .ck-word-count {
-  color: var(--ck-color-text);
-  display: flex;
-  height: 20px;
-  gap: var(--ck-spacing-small);
-  justify-content: flex-end;
-  font-size: var(--ck-font-size-base);
-  line-height: var(--ck-line-height-base);
-  font-family: var(--ck-font-face);
-  padding: var(--ck-spacing-small) var(--ck-spacing-standard);
-}
-
-.editor-container_include-word-count.editor-container_classic-editor .editor_container__word-count {
-  border: 1px solid var(--ck-color-base-border);
-  border-radius: var(--ck-border-radius);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top: none;
-}
-
-.editor-container_include-word-count.editor-container_classic-editor .editor-container__editor .ck-editor .ck-editor__editable {
-  border-radius: 0;
-}
-