@mythpe/quasar-ui-qui 0.0.30 → 0.0.32

package/package.json

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

package/src/components/form/MBtn.vue

@@ -177,7 +177,14 @@ defineOptions({
 </script>
 
 <template>
-  <q-btn v-bind="{...$props,...attrs,label:loading?`${getLabel} ...`:getLabel}">
+  <q-btn
+    v-bind="{
+      ...$props,
+      ...attrs,
+      label: loading ? `${getLabel} ...` : getLabel,
+      ariaLabel: 'ariaLabel' in attrs && attrs.ariaLabel ? __(attrs.ariaLabel) : getLabel
+    }"
+  >
     <template
       v-if="!!btnLoading && !$slots.loading"
       #loading

package/src/components/form/MCkeditor.vue

@@ -380,7 +380,6 @@ defineOptions({
       v-else
       :dir="isRtl ? 'rtl' : 'ltr'"
       :style="`direction: ${isRtl ? 'rtl' : 'ltr'}`"
-      v-bind="$attrs"
     >
       <ckeditor
         ref="input"

package/src/components/form/index.ts

@@ -10,7 +10,7 @@ import MAxios from './MAxios.vue'
 import MAvatarViewer from './MAvatarViewer.vue'
 import MBtn from './MBtn.vue'
 import MCheckbox from './MCheckbox.vue'
-import MCkeditor from './MCkeditor.vue'
+// import MCkeditor from './MCkeditor.vue'
 import MColor from './MColor.vue'
 import MDate from './MDate.vue'
 import MEditor from './MEditor.vue'
@@ -39,7 +39,7 @@ export {
   MAvatarViewer,
   MBtn,
   MCheckbox,
-  MCkeditor,
+  // MCkeditor,
   MColor,
   MDate,
   MEditor,

package/src/index.sass

@@ -5,6 +5,7 @@
 // Github: https://github.com/mythpe
 
 @import 'quasar/src/css/variables.sass'
+@import './style/ckeditor5.sass'
 @import './style/main.sass'
 @import './style/m-container.sass'
 @import './style/print.sass'

package/src/style/ckeditor5.sass

@@ -0,0 +1,15 @@
+@import 'ckeditor5/ckeditor5.css' #{"/* rtl:ignore */"}
+
+$ck-z-dialog: 9999
+$ck-z-panel: calc(var(--ck-z-default) + var(--ck-z-dialog))
+
+:root
+  --ck-z-dialog: 9999 !important
+  --ck-z-panel: calc(var(--ck-z-default) + var(--ck-z-dialog)) !important
+
+
+.ck-body-wrapper [class*='ck-powered-by']
+  display: none !important
+
+.ck.ck-block-toolbar-button
+  transform: translateX(10px)

package/src/types/plugin-props-option.d.ts

@@ -2,7 +2,8 @@ import type {
   MAvatarViewerProps,
   MBlockProps,
   MBtnProps,
-  MCheckboxProps, MCkeditorProps,
+  MCheckboxProps,
+  MCkeditorProps,
   MColProps,
   MColumnProps,
   MContainerProps,
@@ -28,10 +29,15 @@ import type {
 import type {
   QBtnDropdownProps,
   QBtnProps,
-  QCardProps, QDialogOptions,
+  QCardProps,
+  QDialogOptions,
   QDialogProps,
-  QFieldProps, QIconProps, QItemLabelProps,
-  QItemProps, QItemSectionProps, QListProps,
+  QFieldProps,
+  QIconProps,
+  QItemLabelProps,
+  QItemProps,
+  QItemSectionProps,
+  QListProps,
   QMenuProps,
   QNotifyCreateOptions,
   QPageStickyProps,

package/src/utils/vue-plugin.ts

@@ -7,20 +7,24 @@
  */
 
 import type { App } from 'vue'
+import { defineAsyncComponent } from 'vue'
 import { name, version } from '../../package.json'
 import { myth } from './myth'
 import {
   MAvatarViewer,
   MAxios,
   MBlock,
-  MBtn,
   MCheckbox,
-  MCkeditor,
   MCol,
   MColor,
   MColumn,
   MContainer,
+  MDatatable,
   MDate,
+  MDialog,
+  MDtAvatar,
+  MDtBtn,
+  MDtContextmenuItems,
   MEditor,
   MEmail,
   MFadeTransition,
@@ -35,6 +39,7 @@ import {
   MInputFieldControl,
   MInputLabel,
   MMobile,
+  MModalMenu,
   MOptions,
   MOtp,
   MPassword,
@@ -44,19 +49,14 @@ import {
   MSelect,
   MTime,
   MToggle,
+  MTooltip,
   MTransition,
   MTypingString,
-  MUploader,
-  MDialog,
-  MModalMenu,
-  MTooltip,
-  MDatatable,
-  MDtAvatar,
-  MDtBtn,
-  MDtContextmenuItems
+  MUploader
 } from '../components'
 
 import type { InstallOptions } from '../types'
+import { QSpinner } from 'quasar'
 
 function install (app: App, options: InstallOptions = {}) {
   if (options.rounded !== undefined) {
@@ -109,9 +109,17 @@ function install (app: App, options: InstallOptions = {}) {
   // Form.
   app.component('MAvatarViewer', MAvatarViewer)
   app.component('MAxios', MAxios)
-  app.component('MBtn', MBtn)
+  // app.component('MBtn', MBtn)
+  app.component('MBtn', defineAsyncComponent({
+    loader: () => import('../components/form/MBtn.vue'),
+    loadingComponent: QSpinner,
+    delay: 4000
+  }))
   app.component('MCheckbox', MCheckbox)
-  app.component('MCkeditor', MCkeditor)
+  app.component('MCkeditor', defineAsyncComponent({
+    loader: () => import('../components/form/MCkeditor.vue'),
+    delay: 0
+  }))
   app.component('MColor', MColor)
   app.component('MDate', MDate)
   app.component('MEditor', MEditor)