create-quasar 0.0.1 → 1.0.2

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/pages/Error404.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Error404'
+})
+</script>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/pages/Index.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-page padding class="row justify-center">
+    <q-list dense class="list">
+      <div class="text-h4 q-mb-md">Test pages</div>
+      <q-item
+        v-for="page in pages"
+        :key="page.path"
+        :to="page.path"
+      >
+        <q-item-section avatar>
+          <q-icon name="pages" />
+        </q-item-section>
+        <q-item-section>
+          {{ page.title }}
+        </q-item-section>
+        <q-item-section side>
+          <q-icon name="chevron_right" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-page>
+</template>
+
+<script>
+import pages from '../router/pages'
+
+export default {
+  setup () {
+    return {
+      pages
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.list
+  width: 700px
+  max-width: 100%
+</style>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/pages/Test1.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-page padding>
+    <% if (features.component) { %>
+    <<%= componentName %> />
+    <% } %>
+    <% if (features.directive) { %>
+    <div v-<%= directiveName %> class="directive-target">
+      x
+    </div>
+    <% } %>
+  </q-page>
+</template>
+
+<style lang="sass" scoped>
+.directive-target
+  width: 50px
+  height: 50px
+</style>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/router/index.js

@@ -0,0 +1,48 @@
+import { route } from 'quasar/wrappers'
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
+
+import routes from './routes'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default route(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
+  })
+
+  // we get each page from server first!
+  if (process.env.MODE === 'ssr' && process.env.CLIENT) {
+    console.log('!!!!')
+    console.log('On route change we deliberately load page from server -- in order to test hydration errors')
+    console.log('!!!!')
+
+    let reload = false
+    Router.beforeEach((to, _, next) => {
+      if (reload) {
+        window.location.href = to.fullPath
+        return
+      }
+      reload = true
+      next()
+    })
+  }
+
+  return Router
+})

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/router/pages.js

@@ -0,0 +1,27 @@
+/*
+ * Export files list for /pages folder
+ */
+
+function kebabCase (str) {
+  const result = str.replace(
+    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
+    match => '-' + match.toLowerCase()
+  )
+  return (str[0] === str[0].toUpperCase())
+    ? result.substring(1)
+    : result
+}
+
+function slugify (str) {
+  return encodeURIComponent(String(str).trim().replace(/\s+/g, '-'))
+}
+
+export default require.context('../pages', true, /^\.\/.*\.vue$/)
+  .keys()
+  .map(page => page.slice(2).replace('.vue', ''))
+  .filter(page => page !== 'Index' && page !== 'Error404')
+  .map(page => ({
+    file: page,
+    title: page + '.vue',
+    path: slugify(kebabCase(page))
+  }))

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/router/routes.js

@@ -0,0 +1,25 @@
+import pages from './pages'
+
+const children = pages.map(page => ({
+  path: page.path,
+  component: () => import('pages/' + page.file + '.vue')
+}))
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MyLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Index.vue') }
+    ].concat(children)
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/Error404.vue')
+  }
+]
+
+export default routes

package/templates/ui-kit/quasar-v2/BASE/ui/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "quasar-ui-<%= name %>",
+  "version": "0.0.1",
+  "author": "<%= author %>",
+  "description": "<%= packageDescription %>",
+  "license": "<%= license %>",
+  "module": "dist/index.esm.js",
+  "main": "dist/index.common.js",
+  "scripts": {
+    "dev": "cd dev && yarn dev && cd ..",
+    "dev:umd": "yarn build && node build/script.open-umd.js",
+    "dev:ssr": "cd dev && yarn 'dev:ssr' && cd ..",
+    "dev:ios": "cd dev && yarn 'dev:ios' && cd ..",
+    "dev:android": "cd dev && yarn 'dev:android' && cd ..",
+    "dev:electron": "cd dev && yarn 'dev:electron' && cd ..",
+    "build": "node build/index.js",
+    "build:js": "node build/script.javascript.js",
+    "build:css": "node build/script.css.js"
+  },
+  "repository": {
+    "type": "<%= repositoryType %>",
+    "url": "<%= repositoryURL %>"
+  },
+  "bugs": "<%= bugs %>",
+  "homepage": "<%= homepage %>",
+  "devDependencies": {
+    "autoprefixer": "^10.0.2",
+    "cssnano": "^4.1.10",
+    "postcss": "^8.1.9",
+    "rtlcss": "^2.6.1",
+    "sass": "1.32.0",
+    "quasar": "^2.0.0",
+    "@quasar/extras": "^1.0.0",
+    "core-js": "^3.0.0",
+    "@quasar/app-wepback": "^3.0.0",
+    "open": "^7.3.0",
+    "fs-extra": "^8.1.0",
+    "chalk": "^4.1.0",
+    "rimraf": "^3.0.0",
+    "rollup": "^2.45.0",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-json": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^2.4.2",
+    "uglify-js": "^3.13.3",
+    "zlib": "^1.0.5"
+  },
+  "browserslist": [
+    "last 4 Chrome versions",
+    "last 4 Firefox versions",
+    "last 2 Edge versions",
+    "last 4 Safari versions",
+    "last 4 Android versions",
+    "last 4 ChromeAndroid versions",
+    "last 4 FirefoxAndroid versions",
+    "last 4 iOS versions"
+  ]
+}

package/templates/ui-kit/quasar-v2/BASE/ui/src/index.common.js

@@ -0,0 +1,2 @@
+
+export * from './vue-plugin'

package/templates/ui-kit/quasar-v2/BASE/ui/src/index.esm.js

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

package/templates/ui-kit/quasar-v2/BASE/ui/src/index.sass

@@ -0,0 +1,3 @@
+@import 'quasar/src/css/variables.sass'
+@import './components/Component.sass'
+@import './directives/Directive.sass'

package/templates/ui-kit/quasar-v2/BASE/ui/src/index.umd.js

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

package/templates/ui-kit/quasar-v2/BASE/ui/src/vue-plugin.js

@@ -0,0 +1,16 @@
+<% if (features.component) { %>import Component from './components/Component'<% } %>
+<% if (features.directive) { %>import Directive from './directives/Directive'<% } %>
+
+const version = __UI_VERSION__
+
+function install (app) {
+<% if (features.component) { %>  app.component(Component.name, Component)<% } %>
+<% if (features.directive) { %>  app.directive(Directive.name, Directive)<% } %>
+}
+
+export {
+  version,
+<% if (features.component) { %>  Component,<% } %>
+<% if (features.directive) { %>  Directive,<% } %>
+  install
+}

package/templates/ui-kit/quasar-v2/BASE/ui/umd-test.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
+
+    <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: <%= umdExportName %>.version
+          }
+        }
+      })
+
+      app.use(Quasar)
+      app.use(<%= umdExportName %>)
+      app.mount('#q-app')
+    </script>
+  </body>
+</html>

package/templates/ui-kit/quasar-v2/ae/app-extension/README.md

@@ -0,0 +1,33 @@
+# Quasar App Extension <%= name %>
+
+> Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
+
+[![npm](https://img.shields.io/npm/v/quasar-app-extension-<%= name %>.svg?label=quasar-app-extension-<%= name %>)](https://www.npmjs.com/package/quasar-app-extension-<%= name %>)
+[![npm](https://img.shields.io/npm/dt/quasar-app-extension-<%= name %>.svg)](https://www.npmjs.com/package/quasar-app-extension-<%= name %>)
+
+# Install
+```bash
+quasar ext add <%= name %>
+```
+Quasar CLI will retrieve it from NPM and install the extension.
+
+## Prompts
+
+> If your app extension uses prompts, explain them here, otherwise remove this section and remove prompts.js file.
+
+# Uninstall
+```bash
+quasar ext remove <%= name %>
+```
+
+# Info
+> Add longer information here that will help the user of your app extension.
+
+# Other Info
+> Add other information that's not as important to know
+
+# Donate
+If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
+
+# License
+<%= license %> (c) <%= author %>

package/templates/ui-kit/quasar-v2/ae/app-extension/_npmignore

@@ -0,0 +1,17 @@
+.DS_Store
+.thumbs.db
+yarn.lock
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.editorconfig
+.eslintignore
+.eslintrc.js

package/templates/ui-kit/quasar-v2/ae/app-extension/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "quasar-app-extension-<%= name %>",
+  "version": "0.0.1",
+  "description": "<%= aeDescription %>",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "main": "src/index.js",
+  "repository": {
+    "type": "<%= repositoryType %>",
+    "url": "<%= repositoryURL %>"
+  },
+  "bugs": "<%= bugs %>",
+  "homepage": "<%= homepage %>",
+  "dependencies": {
+    "quasar-ui-<%= name %>": "latest"
+  },
+  "engines": {
+    "node": ">= 8.9.0",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
+  }
+}

package/templates/ui-kit/quasar-v2/ae/app-extension/src/boot/register.js

@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers'
+import VuePlugin from 'quasar-ui-<%= name %>'
+
+export default boot(({ app }) => {
+  app.use(VuePlugin)
+})

package/templates/ui-kit/quasar-v2/ae/app-extension/src/index.js

@@ -0,0 +1,43 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js
+ */
+
+function extendConf (conf) {
+  // register our boot file
+  conf.boot.push('~quasar-app-extension-<%= name %>/src/boot/register.js')
+
+  // make sure app extension files & ui package gets transpiled
+  conf.build.transpileDependencies.push(/quasar-app-extension-<%= name %>[\\/]src/)
+
+  // make sure the stylesheet goes through webpack to avoid SSR issues
+  conf.css.push('~quasar-ui-<%= name %>/src/index.sass')
+}
+
+module.exports = function (api) {
+  // Quasar compatibility check; you may need
+  // hard dependencies, as in a minimum version of the "quasar"
+  // package or a minimum version of "@quasar/app-*" CLI
+  api.compatibleWith('quasar', '^2.0.0')
+
+  if (api.hasVite) {
+    api.compatibleWith('@quasar/app-vite', '^1.0.0-alpha.0')
+  }
+  else if (api.hasWebpack) {
+    api.compatibleWith('@quasar/app-webpack', '^3.4.0')
+  }
+
+<% if (features.component) { %>
+  // Uncomment the line below if you provide a JSON API for your component
+  // api.registerDescribeApi('<%= componentName %>', '~quasar-ui-<%= name %>/src/components/<%= componentName %>.json')
+<% } %><% if (features.directive) { %>
+  // Uncomment the line below if you provide a JSON API for your directive
+  // api.registerDescribeApi('<%= directiveName %>', '~quasar-ui-<%= name %>/src/directives/<%= directiveName %>.json')
+<% } %>
+
+  // We extend /quasar.conf.js
+  api.extendQuasarConf(extendConf)
+}

package/templates/ui-kit/quasar-v2/ae-install/app-extension/src/install.js

@@ -0,0 +1,10 @@
+/**
+ * Quasar App Extension install script
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/install-api
+ * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/InstallAPI.js
+ */
+
+module.exports = function (api) {
+  //
+}

package/templates/ui-kit/quasar-v2/ae-prompts/app-extension/src/prompts.js

@@ -0,0 +1,44 @@
+/**
+ * Quasar App Extension prompts script
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/prompts-api
+ *
+ * Inquirer prompts
+ * (answers are available as "api.prompts" in the other scripts)
+ * https://www.npmjs.com/package/inquirer#question
+ *
+ * Example:
+
+  return [
+    {
+      name: 'name',
+      type: 'string',
+      required: true,
+      message: 'Quasar CLI Extension name (without prefix)',
+    },
+    {
+      name: 'preset',
+      type: 'checkbox',
+      message: 'Check the features needed for your project:',
+      choices: [
+        {
+          name: 'Install script',
+          value: 'install'
+        },
+        {
+          name: 'Prompts script',
+          value: 'prompts'
+        },
+        {
+          name: 'Uninstall script',
+          value: 'uninstall'
+        }
+      ]
+    }
+  ]
+
+ */
+
+module.exports = function () {
+  return []
+}

package/templates/ui-kit/quasar-v2/ae-uninstall/app-extension/src/uninstall.js

@@ -0,0 +1,10 @@
+/**
+ * Quasar App Extension uninstall script
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/uninstall-api
+ * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/UninstallAPI.js
+ */
+
+module.exports = function (api) {
+  //
+}

package/templates/ui-kit/quasar-v2/index.js

@@ -0,0 +1,19 @@
+
+module.exports = async function ({ scope, utils }) {
+  utils.createTargetDir(scope)
+  utils.renderTemplate(utils.join(__dirname, 'BASE'), scope)
+
+  if (scope.features.ae) {
+    utils.renderTemplate(utils.join(__dirname, 'ae'), scope)
+    if (scope.preset.install) utils.renderTemplate(utils.join(__dirname, 'ae-install'), scope)
+    if (scope.preset.prompts) utils.renderTemplate(utils.join(__dirname, 'ae-prompts'), scope)
+    if (scope.preset.uninstall) utils.renderTemplate(utils.join(__dirname, 'ae-uninstall'), scope)
+  }
+
+  if (scope.features.component) utils.renderTemplate(utils.join(__dirname, 'ui-component'), scope)
+  if (scope.features.directive) utils.renderTemplate(utils.join(__dirname, 'ui-directive'), scope)
+
+  if (scope.features.ae && (scope.features.component || scope.features.directive)) {
+    utils.renderTemplate(utils.join(__dirname, 'ui-ae'), scope)
+  }
+}

package/templates/ui-kit/quasar-v2/ui-ae/ui/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/templates/ui-kit/quasar-v2/ui-component/ui/src/components/Component.js

@@ -0,0 +1,13 @@
+import { h } from 'vue'
+import { QBadge } from 'quasar'
+
+export default {
+  name: '<%= componentName %>',
+
+  setup () {
+    return () => h(QBadge, {
+      class: '<%= componentName %>',
+      label: '<%= componentName %>'
+    })
+  }
+}

package/templates/ui-kit/quasar-v2/ui-component/ui/src/components/Component.sass

@@ -0,0 +1,2 @@
+.<%= componentName %>
+  font-weight: bold

package/templates/ui-kit/quasar-v2/ui-directive/ui/src/directives/Directive.js

@@ -0,0 +1,7 @@
+export default {
+  name: '<%= directiveName %>',
+
+  mounted (el) {
+    //
+  }
+}

package/templates/ui-kit/quasar-v2/ui-directive/ui/src/directives/Directive.sass

@@ -0,0 +1,2 @@
+.<%= directiveName %>
+  font-size: 14px