@mythpe/quasar-ui-qui 0.0.6 → 0.0.8

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto eol=lf

package/build/config.js

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,60 @@
+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

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

package/build/script.css.js

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,213 @@
+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

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

package/build/utils.js

@@ -0,0 +1,54 @@
+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/index.d.ts

@@ -0,0 +1,6 @@
+export * from './src/vue-plugin'
+export * from './src/types'
+export * from './src/utils'
+
+import * as VuePlugin from './src/vue-plugin'
+export default VuePlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
@@ -8,7 +8,7 @@
   "license": "MIT",
   "module": "src/index.esm.js",
   "main": "src/index.common.js",
-  "types": "types.d.ts",
+  "type": "module",
   "scripts": {
     "dev": "cd ../dev && yarn dev && cd ..",
     "dev:umd": "yarn build && node build/script.open-umd.js",
@@ -55,6 +55,6 @@
     "last 4 iOS versions"
   ],
   "dependencies": {
-    "vue-i18n": "^11.0.0-beta.1"
+    "vue-i18n": "^10.0.4"
   }
 }

package/src/components/MBtn.vue

@@ -10,7 +10,7 @@ defineOptions({
   name: 'MBtn',
   inheritAttrs: !1
 })
-const options = computed(() => MythOptions.getDefaults().btn ?? {})
+const options = computed(() => MythOptions.defaults.value.btn ?? {})
 const { t, te } = useI18n({ useScope: 'global' })
 const getLabel = computed(() => {
   if (props.label !== undefined) {

package/src/index.common.js

@@ -1,6 +1,5 @@
 export * from './vue-plugin'
-import * as VuePlugin from './vue-plugin'
-
-export * from './types'
+export * from './utils'
 
+import * as VuePlugin from './vue-plugin'
 export default VuePlugin

package/src/index.esm.js

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

package/src/index.umd.js

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

package/src/types/VuePlugin.d.ts

@@ -1,4 +1,5 @@
 import type { QBtnProps } from 'quasar'
+import type { Ref } from 'vue'
 
 export interface UiOptions {
   btn?: {
@@ -11,3 +12,11 @@ export interface UiOptions {
     }
   };
 }
+export interface MythOptionsContext {
+  defaults: Ref<UiOptions>;
+  getDefaults: () => UiOptions;
+  setDefaults: (values: Partial<UiOptions>) => void;
+  withDefaults: (values: Partial<UiOptions>) => void;
+  withBtnDefaults: (values: Partial<QBtnProps>) => void;
+  btnDefaults: () => UiOptions;
+}

package/src/types/index.d.ts

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

package/src/utils.js

@@ -0,0 +1,22 @@
+import { ref } from 'vue';
+const cmDefaults = ref({});
+const MythOptions = {
+    defaults: cmDefaults,
+    setDefaults(values) {
+        cmDefaults.value = { ...values };
+    },
+    withDefaults(values) {
+        cmDefaults.value = { ...cmDefaults.value, ...values };
+    },
+    withBtnDefaults(values) {
+        cmDefaults.value = {
+            ...cmDefaults.value,
+            btn: {
+                ...cmDefaults.value.btn,
+                props: { ...values }
+            }
+        };
+    }
+};
+export default MythOptions;
+export { MythOptions };

package/src/utils.ts

@@ -1,28 +1,26 @@
 import { ref } from 'vue'
 import type { UiOptions } from './types'
-import { QBtnProps } from 'quasar'
+import type { QBtnProps } from 'quasar'
 
-export const MythOptions = {
-  defaults: ref<UiOptions>({}),
-  getDefaults () {
-    return this.defaults.value
-  },
+const cmDefaults = ref<UiOptions>({})
+const MythOptions = {
+  defaults: cmDefaults,
   setDefaults (values: Partial<UiOptions>) {
-    this.defaults.value = { ...values }
+    cmDefaults.value = { ...values }
   },
   withDefaults (values: Partial<UiOptions>) {
-    this.defaults.value = { ...this.defaults.value, ...values }
+    cmDefaults.value = { ...cmDefaults.value, ...values }
   },
   withBtnDefaults (values: Partial<QBtnProps>) {
-    this.defaults.value = {
-      ...this.defaults.value,
+    cmDefaults.value = {
+      ...cmDefaults.value,
       btn: {
-        ...this.defaults.value.btn,
+        ...cmDefaults.value.btn,
         props: { ...values }
       }
     }
-  },
-  btnDefaults () {
-    return this.defaults.value.btn
   }
 }
+
+export default MythOptions
+export { MythOptions }

package/src/vue-plugin.js

@@ -6,8 +6,8 @@ const name = js.name
 const version = js.version
 
 function install (app, options = {}) {
-  MythOptions.setDefaults(options)
-  app.component(MBtn.name, MBtn)
+  MythOptions.withDefaults(options)
+  app.component('MBtn', MBtn)
 }
 
 export {
@@ -16,3 +16,10 @@ export {
   install,
   MythOptions
 }
+
+export default {
+  name,
+  version,
+  install,
+  MythOptions
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "Preserve",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

package/umd-test.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <meta content="IE=edge" http-equiv="X-UA-Compatible">
+ <meta content="telephone=no" name="format-detection">
+ <meta content="no" name="msapplication-tap-highlight">
+ <meta content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width" name="viewport">
+
+ <title>UMD test</title>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
+ <link href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css" rel="stylesheet" type="text/css">
+ <link href="dist/index.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+<div id="q-app">
+ <q-layout view="lHh Lpr fff">
+  <q-header class="glossy bg-primary">
+   <q-toolbar>
+    <q-toolbar-title>
+     quasar-ui-qui v{{ version }}
+    </q-toolbar-title>
+
+    <div>Quasar v{{ $q.version }}</div>
+   </q-toolbar>
+  </q-header>
+
+  <q-page-container>
+   <q-page padding>
+    <ul class="q-mb-lg">
+     <li>In /ui, run: "yarn build"</li>
+     <li class="text-red">You need to build & refresh page on each change manually.</li>
+     <li>Use self-closing tags only!</li>
+     <li>Example: &lt;my-component&gt;&lt;/my-component&gt;</li>
+    </ul>
+   </q-page>
+  </q-page-container>
+ </q-layout>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>
+<script src="dist/index.umd.js"></script>
+
+<script>
+ const app = Vue.createApp({
+  setup() {
+   return {
+    version: mythUi.version
+   }
+  }
+ })
+
+ app.use(Quasar)
+ app.use(mythUi)
+ app.mount('#q-app')
+</script>
+</body>
+</html>

package/types.d.ts

@@ -1 +0,0 @@
-export * from './src/types'