@mythpe/quasar-ui-qui 0.0.8 → 0.0.9

package/.eslintrc.cjs

@@ -0,0 +1,103 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    extraFileExtensions: ['.vue']
+  },
+
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+    // https://typescript-eslint.io/getting-started/legacy-eslint-setup
+    // ESLint typescript rules
+    'plugin:@typescript-eslint/recommended',
+
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
+    //'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+     'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'standard'
+  ],
+
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue'
+
+  ],
+
+  globals: {
+    ga: 'readonly', // Google Analytics
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly'
+  },
+
+  // add your custom rules here
+  rules: {
+
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+    'no-void': 'off',
+    'multiline-ternary': 'off',
+
+    'import/first': 'off',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+
+    // The core 'import/named' rules
+    // does not work with type definitions
+    'import/named': 'off',
+
+    'prefer-promise-reject-errors': 'off',
+
+    quotes: ['warn', 'single', { avoidEscape: true }],
+
+    // this rule, if on, would require explicit return type on the `render` function
+    '@typescript-eslint/explicit-function-return-type': 'off',
+
+    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
+    '@typescript-eslint/no-var-requires': 'off',
+
+    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+    // does not work with type definitions
+    'no-unused-vars': 'off',
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    '@typescript-eslint/no-explicit-any': 'off'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
@@ -20,6 +20,10 @@
     "build:js": "node build/script.javascript.js",
     "build:css": "node build/script.css.js"
   },
+  "dependencies": {
+    "vee-validate": "^4.14.7",
+    "vue-i18n": "^10.0.4"
+  },
   "devDependencies": {
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
@@ -27,10 +31,19 @@
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
+    "@types/node": "^20.5.9",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.0.2",
     "chalk": "^4.1.0",
     "core-js": "^3.0.0",
     "cssnano": "^4.1.10",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.0.0",
     "fs-extra": "^8.1.0",
     "open": "^7.3.0",
     "postcss": "^8.1.9",
@@ -54,7 +67,9 @@
     "last 4 FirefoxAndroid versions",
     "last 4 iOS versions"
   ],
-  "dependencies": {
-    "vue-i18n": "^10.0.4"
+  "engines": {
+    "node": "^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
   }
 }

package/src/components/{MBtn.vue → form/MBtn.vue}

@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import type { MBtnProps } from '../types'
+import type { MBtnProps } from '../../types'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { extend } from 'quasar'
-import { MythOptions } from '../utils'
+import { MythOptions } from '../../utils'
 
 const props = defineProps<MBtnProps>()
-defineOptions({
-  name: 'MBtn',
-  inheritAttrs: !1
-})
 const options = computed(() => MythOptions.defaults.value.btn ?? {})
 const { t, te } = useI18n({ useScope: 'global' })
 const getLabel = computed(() => {
@@ -23,12 +19,13 @@ const getLabel = computed(() => {
   }
   return props.label
 })
+defineOptions({
+  name: 'MBtn',
+  inheritAttrs: !1
+})
 </script>
 
 <template>
-  <div>
-    <pre>{{ options }}</pre>
-  </div>
   <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
     <template
       v-if="!!options.loading && !$slots.loading"

package/src/components/grid/MBlock.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { MBlockProps } from '../../types'
+import { computed } from 'vue'
+import MythOptions from '../../utils'
+import { extend } from 'quasar'
+
+interface Props {
+  size?: MBlockProps['size'];
+  rounded?: MBlockProps['rounded'];
+  shadow?: MBlockProps['shadow'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  rounded: !1,
+  shadow: 'none'
+})
+const block = computed(() => MythOptions.defaults.value.block ?? {})
+const options = computed<Props>(() => extend(!0, { ...props }, block.value))
+defineOptions({ name: 'MBlock', inheritAttrs: !1 })
+</script>
+
+<template>
+  <div
+    :class="{
+      'm---block' : !0,
+      [`q-pa-${options.size}`] : !!options.size && options.size !== 'none',
+      'rounded-borders' : options.rounded === !0,
+      [`shadow-${options.shadow}`] : !!options.shadow && options.shadow !== 'none'
+    }"
+    v-bind="$attrs"
+  >
+    <pre style="direction: ltr;">{{ options }}</pre>
+    <slot />
+  </div>
+</template>

package/src/index.common.js

@@ -2,4 +2,5 @@ export * from './vue-plugin'
 export * from './utils'
 
 import * as VuePlugin from './vue-plugin'
+
 export default VuePlugin

package/src/index.esm.js

@@ -2,4 +2,5 @@ export * from './vue-plugin'
 export * from './utils'
 
 import * as VuePlugin from './vue-plugin'
+
 export default VuePlugin

package/src/index.umd.js

@@ -2,4 +2,5 @@ export * from './vue-plugin'
 export * from './utils'
 
 import * as VuePlugin from './vue-plugin'
+
 export default VuePlugin

package/src/types/VuePlugin.d.ts

@@ -1,7 +1,9 @@
 import type { QBtnProps } from 'quasar'
 import type { Ref } from 'vue'
+import { MBlockProps } from './components'
 
 export interface UiOptions {
+  style?: Record<string, any>;
   btn?: {
     props?: Partial<QBtnProps>;
     loading?: {
@@ -11,7 +13,9 @@ export interface UiOptions {
       label?: boolean | undefined;
     }
   };
+  block?: Partial<MBlockProps>;
 }
+
 export interface MythOptionsContext {
   defaults: Ref<UiOptions>;
   getDefaults: () => UiOptions;

package/src/types/components.d.ts

@@ -0,0 +1,44 @@
+import type { GlobalComponentConstructor, QBtnProps, QBtnSlots } from 'quasar'
+import type { VNode } from 'vue'
+
+export interface MBtnProps extends QBtnProps {
+  //
+}
+
+export interface MBtnSlots extends QBtnSlots {
+  /**
+   * Use for custom content, instead of relying on 'icon' and 'label' props
+   */
+  default: () => VNode[];
+  /**
+   * Override the default QSpinner when in 'loading' state
+   */
+  loading: () => VNode[];
+}
+
+export interface MBlockProps {
+  /**
+   * Size of the padding block.
+   * Default: 'md'
+   */
+  readonly size?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+  /**
+   * Rounded block
+   */
+  readonly rounded?: boolean | undefined;
+  /**
+   * Shadow level
+   */
+  readonly shadow?: string | number | 'transition' | 'none' | undefined;
+}
+
+export interface MBlockSlots {
+  default?: () => VNode[];
+}
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
+    MBlock: GlobalComponentConstructor<MBlockProps, MBlockSlots>;
+  }
+}

package/src/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './MBtn'
+export * from './components'
 export * from './VuePlugin'

package/src/vue-plugin.js

@@ -1,6 +1,7 @@
-import MBtn from './components/MBtn.vue'
+import MBtn from './components/form/MBtn.vue'
 import js from '../package.json'
 import { MythOptions } from './utils'
+import MBlock from './components/grid/MBlock.vue'
 
 const name = js.name
 const version = js.version
@@ -8,6 +9,7 @@ const version = js.version
 function install (app, options = {}) {
   MythOptions.withDefaults(options)
   app.component('MBtn', MBtn)
+  app.component('MBlock', MBlock)
 }
 
 export {

package/build/config.js

@@ -1,13 +0,0 @@
-const { name, author, version } = require('../package.json')
-const year = (new Date()).getFullYear()
-
-module.exports = {
-  name,
-  version,
-  banner:
-    '/*!\n' +
-    ' * ' + name + ' v' + version + '\n' +
-    ' * (c) ' + year + ' ' + author + '\n' +
-    ' * Released under the MIT License.\n' +
-    ' */\n'
-}

package/build/index.js

@@ -1,19 +0,0 @@
-process.env.NODE_ENV = 'production'
-
-const parallel = require('os').cpus().length > 1
-const runJob = parallel ? require('child_process').fork : require
-const { join } = require('path')
-const { createFolder } = require('./utils')
-const { green, blue } = require('chalk')
-
-console.log()
-
-require('./script.app-ext.js').syncAppExt()
-require('./script.clean.js')
-
-console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`)
-
-// createFolder('dist')
-
-// runJob(join(__dirname, './script.javascript.js'))
-// runJob(join(__dirname, './script.css.js'))

package/build/script.app-ext.js

@@ -1,60 +0,0 @@
-const
-  fs = require('fs'),
-  path = require('path'),
-  root = path.resolve(__dirname, '../..'),
-  resolvePath = file => path.resolve(root, file),
-  { blue } = require('chalk')
-
-const writeJson = function (file, json) {
-  return fs.writeFileSync(file, JSON.stringify(json, null, 2) + '\n', 'utf-8')
-}
-
-module.exports.syncAppExt = function (both = true) {
-  // make sure this project has an app-extension project
-  const appExtDir = resolvePath('app-extension')
-  if (!fs.existsSync(appExtDir)) {
-    return
-  }
-
-  // make sure this project has an ui project
-  const uiDir = resolvePath('ui')
-  if (!fs.existsSync(uiDir)) {
-    return
-  }
-
-  // get version and name from ui package.json
-  const { name, version } = require(resolvePath(resolvePath('ui/package.json')))
-
-  // read app-ext package.json
-  const appExtFile = resolvePath('app-extension/package.json')
-  let appExtJson = require(appExtFile),
-    finished = false
-
-  // sync version numbers
-  if (both === true) {
-    appExtJson.version = version
-  }
-
-  // check dependencies
-  if (appExtJson.dependencies !== void 0) {
-    if (appExtJson.dependencies[name] !== void 0) {
-      appExtJson.dependencies[name] = '^' + version
-      finished = true
-    }
-  }
-  // check devDependencies, if not finished
-  if (finished === false && appExtJson.devDependencies !== void 0) {
-    if (appExtJson.devDependencies[name] !== void 0) {
-      appExtJson.devDependencies[name] = '^' + version
-      finished = true
-    }
-  }
-
-  if (finished === true) {
-    writeJson(appExtFile, appExtJson)
-    console.log(` ⭐️ App Extension version ${blue(appExtJson.name)} synced with UI version.\n`)
-    return
-  }
-
-  console.error('   App Extension version and dependency NOT synced.\n')
-}

package/build/script.clean.js

@@ -1,6 +0,0 @@
-const
-  rimraf = require('rimraf'),
-  path = require('path')
-
-rimraf.sync(path.resolve(__dirname, '../dist/*'))
-console.log(' 💥 Cleaned build artifacts.\n')

package/build/script.css.js

@@ -1,75 +0,0 @@
-const path = require('path')
-const sass = require('sass')
-const postcss = require('postcss')
-const cssnano = require('cssnano')
-const rtl = require('rtlcss')
-const autoprefixer = require('autoprefixer')
-
-const buildConf = require('./config')
-const buildUtils = require('./utils')
-
-const postCssCompiler = postcss([autoprefixer])
-const postCssRtlCompiler = postcss([rtl({})])
-
-const nano = postcss([
-  cssnano({
-    preset: ['default', {
-      mergeLonghand: false,
-      convertValues: false,
-      cssDeclarationSorter: false,
-      reduceTransforms: false
-    }]
-  })
-])
-
-Promise
-  .all([
-    generate('src/index.sass', 'dist/index')
-  ])
-  .catch(e => {
-    console.error(e)
-    process.exit(1)
-  })
-
-/**
- * Helpers
- */
-
-function resolve (_path) {
-  return path.resolve(__dirname, '..', _path)
-}
-
-function generate (src, dest) {
-  src = resolve(src)
-  dest = resolve(dest)
-
-  return new Promise((resolve, reject) => {
-    sass.render({ file: src, includePaths: ['node_modules'] }, (err, result) => {
-      if (err) {
-        reject(err)
-        return
-      }
-
-      resolve(result.css)
-    })
-  })
-    .then(code => buildConf.banner + code)
-    .then(code => postCssCompiler.process(code, { from: void 0 }))
-    .then(code => {
-      code.warnings().forEach(warn => {
-        console.warn(warn.toString())
-      })
-      return code.css
-    })
-    .then(code => Promise.all([
-      generateUMD(dest, code),
-      postCssRtlCompiler.process(code, { from: void 0 })
-        .then(code => generateUMD(dest, code.css, '.rtl'))
-    ]))
-}
-
-function generateUMD (dest, code, ext = '') {
-  return buildUtils.writeFile(`${dest}${ext}.css`, code, true)
-    .then(code => nano.process(code, { from: void 0 }))
-    .then(code => buildUtils.writeFile(`${dest}${ext}.min.css`, code.css, true))
-}

package/build/script.javascript.js

@@ -1,213 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const fse = require('fs-extra')
-const rollup = require('rollup')
-const uglify = require('uglify-js')
-const buble = require('@rollup/plugin-buble')
-const json = require('@rollup/plugin-json')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const replace = require('@rollup/plugin-replace')
-
-const { version } = require('../package.json')
-
-const buildConf = require('./config')
-const buildUtils = require('./utils')
-
-const rollupPlugins = [
-  replace({
-    preventAssignment: false,
-    values: {
-      __UI_VERSION__: `'${version}'`
-    }
-  }),
-  nodeResolve({
-    extensions: ['.js'],
-    preferBuiltins: false
-  }),
-  json(),
-  buble({
-    objectAssign: 'Object.assign'
-  })
-]
-
-const builds = [
-  {
-    rollup: {
-      input: {
-        input: pathResolve('../src/index.esm.js')
-      },
-      output: {
-        file: pathResolve('../dist/index.esm.js'),
-        format: 'es'
-      }
-    },
-    build: {
-      // unminified: true,
-      minified: true
-    }
-  },
-  {
-    rollup: {
-      input: {
-        input: pathResolve('../src/index.common.js')
-      },
-      output: {
-        file: pathResolve('../dist/index.common.js'),
-        format: 'cjs'
-      }
-    },
-    build: {
-      // unminified: true,
-      minified: true
-    }
-  },
-  {
-    rollup: {
-      input: {
-        input: pathResolve('../src/index.umd.js')
-      },
-      output: {
-        name: 'mythUi',
-        file: pathResolve('../dist/index.umd.js'),
-        format: 'umd'
-      }
-    },
-    build: {
-      unminified: true,
-      minified: true,
-      minExt: true
-    }
-  }
-]
-
-// Add your asset folders here, if needed
-// addAssets(builds, 'icon-set', 'iconSet')
-// addAssets(builds, 'lang', 'lang')
-
-build(builds)
-
-/**
- * Helpers
- */
-
-function pathResolve (_path) {
-  return path.resolve(__dirname, _path)
-}
-
-// eslint-disable-next-line no-unused-vars
-function addAssets (builds, type, injectName) {
-  const
-    files = fs.readdirSync(pathResolve('../../ui/src/components/' + type)),
-    plugins = [buble(/* bubleConfig */)],
-    outputDir = pathResolve(`../dist/${type}`)
-
-  fse.mkdirp(outputDir)
-
-  files
-    .filter(file => file.endsWith('.js'))
-    .forEach(file => {
-      const name = file.substr(0, file.length - 3).replace(/-([a-z])/g, g => g[1].toUpperCase())
-      builds.push({
-        rollup: {
-          input: {
-            input: pathResolve(`../src/components/${type}/${file}`),
-            plugins
-          },
-          output: {
-            file: addExtension(pathResolve(`../dist/${type}/${file}`), 'umd'),
-            format: 'umd',
-            name: `mythUi.${injectName}.${name}`
-          }
-        },
-        build: {
-          minified: true
-        }
-      })
-    })
-}
-
-function build (builds) {
-  return Promise
-    .all(builds.map(genConfig).map(buildEntry))
-    .catch(buildUtils.logError)
-}
-
-function genConfig (opts) {
-  Object.assign(opts.rollup.input, {
-    plugins: rollupPlugins,
-    external: ['vue', 'quasar']
-  })
-
-  Object.assign(opts.rollup.output, {
-    banner: buildConf.banner,
-    globals: { vue: 'Vue', quasar: 'Quasar' }
-  })
-
-  return opts
-}
-
-function addExtension (filename, ext = 'min') {
-  const insertionPoint = filename.lastIndexOf('.')
-  return `${filename.slice(0, insertionPoint)}.${ext}${filename.slice(insertionPoint)}`
-}
-
-function buildEntry (config) {
-  return rollup
-    .rollup(config.rollup.input)
-    .then(bundle => bundle.generate(config.rollup.output))
-    .then(({ output }) => {
-      const code = config.rollup.output.format === 'umd'
-        ? injectVueRequirement(output[0].code)
-        : output[0].code
-
-      return config.build.unminified
-        ? buildUtils.writeFile(config.rollup.output.file, code)
-        : code
-    })
-    .then(code => {
-      if (!config.build.minified) {
-        return code
-      }
-
-      const minified = uglify.minify(code, {
-        compress: {
-          pure_funcs: ['makeMap']
-        }
-      })
-
-      if (minified.error) {
-        return Promise.reject(minified.error)
-      }
-
-      return buildUtils.writeFile(
-        config.build.minExt === true
-          ? addExtension(config.rollup.output.file)
-          : config.rollup.output.file,
-        buildConf.banner + minified.code,
-        true
-      )
-    })
-    .catch(err => {
-      console.error(err)
-      process.exit(1)
-    })
-}
-
-function injectVueRequirement (code) {
-  // eslint-disable-next-line
-  const index = code.indexOf(`Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue`)
-
-  if (index === -1) {
-    return code
-  }
-
-  const checkMe = ` if (Vue === void 0) {
-    console.error('[ Quasar ] Vue is required to run. Please add a script tag for it before loading Quasar.')
-    return
-  }
-  `
-
-  return code.substring(0, index - 1) +
-    checkMe +
-    code.substring(index)
-}

package/build/script.open-umd.js

@@ -1,6 +0,0 @@
-const { resolve } = require('path')
-const open = require('open')
-
-open(
-  resolve(__dirname, '../umd-test.html')
-)

package/build/utils.js

@@ -1,54 +0,0 @@
-const
-  fs = require('fs'),
-  path = require('path'),
-  zlib = require('zlib'),
-  { green, blue, red, cyan } = require('chalk')
-
-function getSize (code) {
-  return (code.length / 1024).toFixed(2) + 'kb'
-}
-
-module.exports.createFolder = function (folder) {
-  const dir = path.join(__dirname, '..', folder)
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir)
-  }
-}
-
-module.exports.writeFile = function (dest, code, zip) {
-  const banner = dest.indexOf('.json') > -1
-    ? red('[json]')
-    : dest.indexOf('.js') > -1
-      ? green('[js]  ')
-      : dest.indexOf('.ts') > -1
-        ? cyan('[ts]  ')
-        : blue('[css] ')
-
-  return new Promise((resolve, reject) => {
-    function report (extra) {
-      console.log(`${banner} ${path.relative(process.cwd(), dest).padEnd(41)} ${getSize(code).padStart(8)}${extra || ''}`)
-      resolve(code)
-    }
-
-    fs.writeFile(dest, code, err => {
-      if (err) return reject(err)
-      if (zip) {
-        zlib.gzip(code, (err, zipped) => {
-          if (err) return reject(err)
-          report(` (gzipped: ${getSize(zipped).padStart(8)})`)
-        })
-      } else {
-        report()
-      }
-    })
-  })
-}
-
-module.exports.readFile = function (file) {
-  return fs.readFileSync(file, 'utf-8')
-}
-
-module.exports.logError = function (err) {
-  console.error('\n' + red('[Error]'), err)
-  console.log()
-}

package/src/types/MBtn.d.ts

@@ -1,21 +0,0 @@
-import type { GlobalComponentConstructor, QBtnProps, QBtnSlots } from 'quasar'
-import type { VNode } from 'vue'
-
-export type MBtnProps = QBtnProps
-
-export interface MBtnSlots extends QBtnSlots {
-  /**
-   * Use for custom content, instead of relying on 'icon' and 'label' props
-   */
-  default: () => VNode[];
-  /**
-   * Override the default QSpinner when in 'loading' state
-   */
-  loading: () => VNode[];
-}
-
-declare module '@vue/runtime-core' {
-  interface GlobalComponents {
-    MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
-  }
-}