@mythpe/quasar-ui-qui 0.0.45 → 0.0.47

package/package.json

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

package/src/components/form/MInput.vue

@@ -10,7 +10,6 @@
   lang="ts"
   setup
 >
-
 import { useField } from 'vee-validate'
 import { reactive, toValue, useTemplateRef } from 'vue'
 import type { MInputProps as Props } from '../../types'
@@ -170,5 +169,11 @@ defineOptions({
       name="bottom-input"
       v-bind="scopes"
     />
+    <div>
+      <div>theme</div>
+      <pre>{{ theme }}</pre>
+      <div>attrs</div>
+      <pre>{{ attrs }}</pre>
+    </div>
   </MCol>
 </template>

package/src/components/form/MUploader.vue

@@ -458,7 +458,7 @@ defineOptions({
             v-for="(file,i) in scope.files"
             :key="`fi-${i}`"
           >
-            <UploaderItem
+            <MUploaderItem
               :collection="collection"
               :default-file-icon="defaultFileIcon"
               :delete-media-icon="deleteMediaIcon"
@@ -482,7 +482,7 @@ defineOptions({
               v-for="f in attachments"
               :key="f.key"
             >
-              <UploaderItem
+              <MUploaderItem
                 :collection="collection"
                 :default-file-icon="defaultFileIcon"
                 :delete-media-icon="deleteMediaIcon"

package/src/components/parials/{UploaderItem.vue → MUploaderItem.vue}

@@ -150,7 +150,7 @@ const onUpdateField = (data: any) => {
       })
   }
 }
-defineOptions({ name: 'UploaderItem' })
+defineOptions({ name: 'MUploaderItem' })
 </script>
 
 <template>

package/src/components/parials/index.ts

@@ -1,3 +1,3 @@
-import UploaderItem from './UploaderItem.vue'
+import MUploaderItem from './MUploaderItem.vue'
 
-export { UploaderItem }
+export { MUploaderItem }

package/src/plugin/defineAsyncComponents.ts

@@ -0,0 +1,59 @@
+import { type App, defineAsyncComponent } from 'vue'
+
+export const defineAsyncComponents = function (app: App) {
+  // Form.
+  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', 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', defineAsyncComponent(() => import('../components/typography/MTypingString.vue')))
+
+  // 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')))
+
+  // Modals.
+  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', 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')))
+}

package/src/plugin/defineComponents.ts

@@ -0,0 +1,8 @@
+import { type App, defineComponent } from 'vue'
+import * as Components from '../components'
+
+export const defineComponents = function (app: App) {
+  for (const key in Components) {
+    app.component(key, defineComponent(Components[key]))
+  }
+}

package/src/plugin/defineOptions.ts

@@ -0,0 +1,38 @@
+import { myth } from '../utils'
+import type { InstallOptions } from '../types'
+
+export const defineOptions = (options: InstallOptions) => {
+  if (options.rounded !== undefined) {
+    myth.rounded.value = options.rounded
+  }
+  if (options.shadow !== undefined) {
+    myth.shadow.value = options.shadow
+  }
+  if (options.fluid !== undefined) {
+    myth.setFluid(options.fluid)
+  }
+  if (options.size !== undefined) {
+    myth.setSize(options.size)
+  }
+  if (options.props !== undefined) {
+    myth.withProps(options.props)
+  }
+  if (options.rules !== undefined) {
+    myth.withRules(options.rules)
+  }
+  if (options.themeBtn !== undefined) {
+    myth.themeBtn.value = options.themeBtn
+  }
+  if (options.themeInput !== undefined) {
+    myth.setThemeInput(options.themeInput)
+  }
+  if (options.baseUrl !== undefined) {
+    myth.baseUrl.value = options.baseUrl
+  }
+  if (options.api !== undefined) {
+    myth.setApi(options.api)
+  }
+  if (options.mAxios !== undefined) {
+    myth.mAxios.value = options.mAxios
+  }
+}

package/src/types/install-options.d.ts

@@ -4,6 +4,7 @@ import type { HelpersStubSchema } from './api-helpers'
 import type { AxiosInstance } from 'axios'
 
 export interface InstallOptions {
+  asyncComponents?: boolean | undefined;
   size?: ThemeSize;
   rounded?: ThemeRounded;
   shadow?: ThemeShadow;

package/src/utils/Str.ts

@@ -7,8 +7,8 @@
  */
 
 import lodash from 'lodash'
-import inflection from 'lodash-inflection'
-lodash.mixin(inflection)
+// import inflection from 'lodash-inflection'
+// lodash.mixin(inflection)
 
 export const Str = {
   /**
@@ -81,7 +81,7 @@ export const Str = {
     return lodash.pascalCase(string)
   },
   pluralize (string?: string): string {
-    return lodash.pluralize(string)
+    return lodash.pluralize?.(string)
   },
   singular (string?: string): string {
     return lodash.singularize(string)

package/src/utils/vue-plugin.ts

@@ -7,48 +7,20 @@
  */
 
 import type { App } from 'vue'
-import { defineAsyncComponent } from 'vue'
 import { name, version } from '../../package.json'
-import { myth } from './myth'
 
 import type { InstallOptions } from '../types'
+import { defineOptions } from '../plugin/defineOptions'
+import { defineAsyncComponents } from '../plugin/defineAsyncComponents'
+import { defineComponents } from '../plugin/defineComponents'
 
 function install (app: App, options: InstallOptions = {}) {
-  console.log(options)
-  if (options.rounded !== undefined) {
-    myth.rounded.value = options.rounded
+  defineOptions(options)
+  if (options?.asyncComponents) {
+    defineAsyncComponents(app)
+  } else {
+    defineComponents(app)
   }
-  if (options.shadow !== undefined) {
-    myth.shadow.value = options.shadow
-  }
-  if (options.fluid !== undefined) {
-    myth.setFluid(options.fluid)
-  }
-  if (options.size !== undefined) {
-    myth.setSize(options.size)
-  }
-  if (options.props !== undefined) {
-    myth.withProps(options.props)
-  }
-  if (options.rules !== undefined) {
-    myth.withRules(options.rules)
-  }
-  if (options.themeBtn !== undefined) {
-    myth.themeBtn.value = options.themeBtn
-  }
-  if (options.themeInput !== undefined) {
-    myth.setThemeInput(options.themeInput)
-  }
-  if (options.baseUrl !== undefined) {
-    myth.baseUrl.value = options.baseUrl
-  }
-  if (options.api !== undefined) {
-    myth.setApi(options.api)
-  }
-  if (options.mAxios !== undefined) {
-    myth.mAxios.value = options.mAxios
-  }
-
   // const importList = import.meta.glob('./components/**/*.vue')
   // const startIndex = '/components/'.length
   // const routes = Object.keys(importList).map(key => {
@@ -61,62 +33,6 @@ function install (app: App, options: InstallOptions = {}) {
   // for (const routesKey in routes) {
   //   console.log(routesKey)
   // }
-
-  // Form.
-  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', 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', defineAsyncComponent(() => import('../components/typography/MTypingString.vue')))
-
-  // 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')))
-
-  // Modals.
-  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', 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 {