@mythpe/quasar-ui-qui 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "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/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/components.d.ts

@@ -550,11 +550,12 @@ export interface MSelectSlots extends QInputSlots, QFieldSlots, BaseInputsSlots
 
 export interface MFileProps extends Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'>, Omit<BaseInputsProps, 'autocomplete'> {
   accept?: string | undefined;
-  images?: boolean;
-  svg?: boolean;
-  video?: boolean;
-  pdf?: boolean;
-  excel?: boolean;
+  images?: boolean | string;
+  svg?: boolean | string;
+  video?: boolean | string;
+  pdf?: boolean | string;
+  excel?: boolean | string;
+  dragDrop?: boolean | undefined;
 }
 
 export interface MFileSlots extends QFileSlots, BaseInputsSlots {

package/src/utils/vue-plugin.ts

@@ -7,54 +7,9 @@
  */
 
 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,
-  MDate,
-  MEditor,
-  MEmail,
-  MFadeTransition,
-  MFadeXTransition,
-  MField,
-  MFile,
-  MForm,
-  MHelpRow,
-  MHidden,
-  MHiddenInput,
-  MInput,
-  MInputFieldControl,
-  MInputLabel,
-  MMobile,
-  MOptions,
-  MOtp,
-  MPassword,
-  MPicker,
-  MRadio,
-  MRow,
-  MSelect,
-  MTime,
-  MToggle,
-  MTransition,
-  MTypingString,
-  MUploader,
-  MDialog,
-  MModalMenu,
-  MTooltip,
-  MDatatable,
-  MDtAvatar,
-  MDtBtn,
-  MDtContextmenuItems
-} from '../components'
 
 import type { InstallOptions } from '../types'
 
@@ -107,60 +62,60 @@ function install (app: App, options: InstallOptions = {}) {
   // }
 
   // Form.
-  app.component('MAvatarViewer', MAvatarViewer)
-  app.component('MAxios', MAxios)
-  app.component('MBtn', MBtn)
-  app.component('MCheckbox', MCheckbox)
-  // app.component('MCkeditor', MCkeditor)
-  app.component('MColor', MColor)
-  app.component('MDate', MDate)
-  app.component('MEditor', MEditor)
-  app.component('MEmail', MEmail)
-  app.component('MField', MField)
-  app.component('MFile', MFile)
-  app.component('MForm', MForm)
-  app.component('MHidden', MHidden)
-  app.component('MHiddenInput', MHiddenInput)
-  app.component('MInput', MInput)
-  app.component('MInputFieldControl', MInputFieldControl)
-  app.component('MInputLabel', MInputLabel)
-  app.component('MMobile', MMobile)
-  app.component('MOptions', MOptions)
-  app.component('MOtp', MOtp)
-  app.component('MPassword', MPassword)
-  app.component('MPicker', MPicker)
-  app.component('MRadio', MRadio)
-  app.component('MSelect', MSelect)
-  app.component('MTime', MTime)
-  app.component('MToggle', MToggle)
-  app.component('MUploader', MUploader)
+  app.component('MAvatarViewer', defineAsyncComponent(() => import('../components/form/MAvatarViewer.vue')))
+  app.component('MAxios', defineAsyncComponent(() => import('../components/form/MAxios.vue')))
+  app.component('MBtn', defineAsyncComponent(() => import('../components/form/MBtn.vue')))
+  app.component('MCheckbox', defineAsyncComponent(() => import('../components/form/MCheckbox.vue')))
+  app.component('MCkeditor', defineAsyncComponent(() => import('../components/form/MCkeditor.vue')))
+  app.component('MColor', defineAsyncComponent(() => import('../components/form/MColor.vue')))
+  app.component('MDate', defineAsyncComponent(() => import('../components/form/MDate.vue')))
+  app.component('MEditor', defineAsyncComponent(() => import('../components/form/MEditor.vue')))
+  app.component('MEmail', defineAsyncComponent(() => import('../components/form/MEmail.vue')))
+  app.component('MField', defineAsyncComponent(() => import('../components/form/MField.vue')))
+  app.component('MFile', defineAsyncComponent(() => import('../components/form/MFile.vue')))
+  app.component('MForm', defineAsyncComponent(() => import('../components/form/MForm.vue')))
+  app.component('MHidden', defineAsyncComponent(() => import('../components/form/MHidden.vue')))
+  app.component('MHiddenInput', defineAsyncComponent(() => import('../components/form/MHiddenInput.vue')))
+  app.component('MInput', defineAsyncComponent(() => import('../components/form/MInput.vue')))
+  app.component('MInputFieldControl', defineAsyncComponent(() => import('../components/form/MInputFieldControl.vue')))
+  app.component('MInputLabel', defineAsyncComponent(() => import('../components/form/MInputLabel.vue')))
+  app.component('MMobile', defineAsyncComponent(() => import('../components/form/MMobile.vue')))
+  app.component('MOptions', defineAsyncComponent(() => import('../components/form/MOptions.vue')))
+  app.component('MOtp', defineAsyncComponent(() => import('../components/form/MOtp.vue')))
+  app.component('MPassword', defineAsyncComponent(() => import('../components/form/MPassword.vue')))
+  app.component('MPicker', defineAsyncComponent(() => import('../components/form/MPicker.vue')))
+  app.component('MRadio', defineAsyncComponent(() => import('../components/form/MRadio.vue')))
+  app.component('MSelect', defineAsyncComponent(() => import('../components/form/MSelect.vue')))
+  app.component('MTime', defineAsyncComponent(() => import('../components/form/MTime.vue')))
+  app.component('MToggle', defineAsyncComponent(() => import('../components/form/MToggle.vue')))
+  app.component('MUploader', defineAsyncComponent(() => import('../components/form/MUploader.vue')))
 
   // Grid.
-  app.component('MBlock', MBlock)
-  app.component('MCol', MCol)
-  app.component('MColumn', MColumn)
-  app.component('MContainer', MContainer)
-  app.component('MHelpRow', MHelpRow)
-  app.component('MRow', MRow)
+  app.component('MBlock', defineAsyncComponent(() => import('../components/grid/MBlock.vue')))
+  app.component('MCol', defineAsyncComponent(() => import('../components/grid/MCol.vue')))
+  app.component('MColumn', defineAsyncComponent(() => import('../components/grid/MColumn.vue')))
+  app.component('MContainer', defineAsyncComponent(() => import('../components/grid/MContainer.vue')))
+  app.component('MHelpRow', defineAsyncComponent(() => import('../components/grid/MHelpRow.vue')))
+  app.component('MRow', defineAsyncComponent(() => import('../components/grid/MRow.vue')))
 
   // Typography.
-  app.component('MTypingString', MTypingString)
+  app.component('MTypingString', defineAsyncComponent(() => import('../components/typography/MTypingString.vue')))
 
   // Transitions.
-  app.component('MTransition', MTransition)
-  app.component('MFadeTransition', MFadeTransition)
-  app.component('MFadeXTransition', MFadeXTransition)
+  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')))
 
   // Modals.
-  app.component('MDialog', MDialog)
-  app.component('MModalMenu', MModalMenu)
-  app.component('MTooltip', MTooltip)
+  app.component('MDialog', defineAsyncComponent(() => import('../components/modal/MDialog.vue')))
+  app.component('MModalMenu', defineAsyncComponent(() => import('../components/modal/MModalMenu.vue')))
+  app.component('MTooltip', defineAsyncComponent(() => import('../components/modal/MTooltip.vue')))
 
   // Datatable
-  app.component('MDatatable', MDatatable)
-  app.component('MDtAvatar', MDtAvatar)
-  app.component('MDtBtn', MDtBtn)
-  app.component('MDtContextmenuItems', MDtContextmenuItems)
+  app.component('MDatatable', defineAsyncComponent(() => import('../components/datatable/MDatatable.vue')))
+  app.component('MDtAvatar', defineAsyncComponent(() => import('../components/datatable/MDtAvatar.vue')))
+  app.component('MDtBtn', defineAsyncComponent(() => import('../components/datatable/MDtBtn.vue')))
+  app.component('MDtContextmenuItems', defineAsyncComponent(() => import('../components/datatable/MDtContextmenuItems.vue')))
 }
 
 export {