create-quasar 2.1.0 → 2.2.0

package/templates/ui-kit/quasar-v2/BASE/ui/README.md

@@ -1,24 +1,24 @@
-# <% if (features.component) { %>Component <%= componentName %><% if (features.directive) { %> and <% } } %><% if (features.directive) { %>Directive v-<%= directiveName %><% } %>
+# <% if (scope.features.component) { %>Component <%= scope.componentName %><% if (scope.features.directive) { %> and <% } } %><% if (scope.features.directive) { %>Directive v-<%= scope.directiveName %><% } %>
 
-[![npm](https://img.shields.io/npm/v/quasar-ui-<%= name %>.svg?label=quasar-ui-<%= name %>)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
-[![npm](https://img.shields.io/npm/dt/quasar-ui-<%= name %>.svg)](https://www.npmjs.com/package/quasar-ui-<%= name %>)
+[![npm](https://img.shields.io/npm/v/quasar-ui-<%= scope.name %>.svg?label=quasar-ui-<%= scope.name %>)](https://www.npmjs.com/package/quasar-ui-<%= scope.name %>)
+[![npm](https://img.shields.io/npm/dt/quasar-ui-<%= scope.name %>.svg)](https://www.npmjs.com/package/quasar-ui-<%= scope.name %>)
 
 **Compatible with Quasar UI v2 and Vue 3**.
 
-<% if (features.component) { %>
-# Component <%= componentName %>
+<% if (scope.features.component) { %>
+# Component <%= scope.componentName %>
 > Short description of the component
 <% } %>
 
-<% if (features.directive) { %>
-# Directive v-<%= directiveName %>
+<% if (scope.features.directive) { %>
+# Directive v-<%= scope.directiveName %>
 > Short description of the directive
 <% } %>
 
 # Usage
 
 ## Quasar CLI project
-<% if (features.ae) { %>
+<% if (scope.features.ae) { %>
 
 Install the [App Extension](../app-extension).
 
@@ -29,8 +29,8 @@ Create and register a boot file:
 
 ```js
 import Vue from 'vue'
-import Plugin from 'quasar-ui-<%= name %>'
-import 'quasar-ui-<%= name %>/dist/index.css'
+import Plugin from 'quasar-ui-<%= scope.name %>'
+import 'quasar-ui-<%= scope.name %>/dist/index.css'
 
 Vue.use(Plugin)
 ```
@@ -38,18 +38,18 @@ Vue.use(Plugin)
 **OR**:
 
 ```html
-<style src="quasar-ui-<%= name %>/dist/index.css"></style>
+<style src="quasar-ui-<%= scope.name %>/dist/index.css"></style>
 
 <script>
-import { <% if (features.component) { %>Component as <%= componentName %><% if (features.directive) { %>, <% } %><% } %><% if (features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= name %>'
+import { <% if (scope.features.component) { %>Component as <%= scope.componentName %><% if (scope.features.directive) { %>, <% } %><% } %><% if (scope.features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= scope.name %>'
 
 export default {
-  <% if (features.component) { %>
+  <% if (scope.features.component) { %>
   components: {
-    <%= componentName %>
-  }<% if (features.directive) { %>,<% } %>
+    <%= scope.componentName %>
+  }<% if (scope.features.directive) { %>,<% } %>
   <% } %>
-  <% if (features.directive) { %>
+  <% if (scope.features.directive) { %>
   directives: {
     Directive
   }
@@ -62,8 +62,8 @@ export default {
 
 ```js
 import Vue from 'vue'
-import Plugin from 'quasar-ui-<%= name %>'
-import 'quasar-ui-<%= name %>/dist/index.css'
+import Plugin from 'quasar-ui-<%= scope.name %>'
+import 'quasar-ui-<%= scope.name %>/dist/index.css'
 
 Vue.use(Plugin)
 ```
@@ -71,18 +71,18 @@ Vue.use(Plugin)
 **OR**:
 
 ```html
-<style src="quasar-ui-<%= name %>/dist/index.css"></style>
+<style src="quasar-ui-<%= scope.name %>/dist/index.css"></style>
 
 <script>
-import { <% if (features.component) { %>Component as <%= componentName %><% if (features.directive) { %>, <% } %><% } %><% if (features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= name %>'
+import { <% if (scope.features.component) { %>Component as <%= scope.componentName %><% if (scope.features.directive) { %>, <% } %><% } %><% if (scope.features.directive) { %>Directive<% } %> } from 'quasar-ui-<%= scope.name %>'
 
 export default {
-  <% if (features.component) { %>
+  <% if (scope.features.component) { %>
   components: {
-    <%= componentName %>
-  }<% if (features.directive) { %>,<% } %>
+    <%= scope.componentName %>
+  }<% if (scope.features.directive) { %>,<% } %>
   <% } %>
-  <% if (features.directive) { %>
+  <% if (scope.features.directive) { %>
   directives: {
     Directive
   }
@@ -93,23 +93,23 @@ export default {
 
 ## UMD variant
 
-Exports `window.<%= umdExportName %>`.
+Exports `window.<%= scope.umdExportName %>`.
 
 Add the following tag(s) after the Quasar ones:
 
 ```html
 <head>
   <!-- AFTER the Quasar stylesheet tags: -->
-  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.min.css" rel="stylesheet" type="text/css">
+  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= scope.name %>/dist/index.min.css" rel="stylesheet" type="text/css">
 </head>
 <body>
   <!-- at end of body, AFTER Quasar script(s): -->
-  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-<%= scope.name %>/dist/index.umd.min.js"></script>
 </body>
 ```
 If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
 ```html
-<link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= name %>/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
+<link href="https://cdn.jsdelivr.net/npm/quasar-ui-<%= scope.name %>/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
 ```
 
 # Setup
@@ -153,4 +153,4 @@ If you have a component that has assets, like language or icon-sets, you will ne
 If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
 
 # License
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

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

@@ -1,9 +1,9 @@
 {
-  "name": "quasar-ui-<%= name %>",
+  "name": "quasar-ui-<%= scope.name %>",
   "version": "0.0.1",
-  "author": "<%= author %>",
-  "description": "<%= packageDescription %>",
-  "license": "<%= license %>",
+  "author": "<%= scope.author %>",
+  "description": "<%= scope.packageDescription %>",
+  "license": "<%= scope.license %>",
   "module": "dist/index.esm.js",
   "main": "dist/index.common.js",
   "scripts": {

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

@@ -8,7 +8,7 @@ const { green, blue } = require('chalk')
 
 console.log()
 
-<% if (features.ae) { %>require('./script.app-ext.js').syncAppExt()<% } %>
+<% if (scope.features.ae) { %>require('./script.app-ext.js').syncAppExt()<% } %>
 require('./script.clean.js')
 
 console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`)

package/templates/ui-kit/quasar-v2/BASE/ui/build/script.javascript.js

@@ -67,7 +67,7 @@ const builds = [
         input: pathResolve('../src/index.umd.js')
       },
       output: {
-        name: '<%= umdExportName %>',
+        name: '<%= scope.umdExportName %>',
         file: pathResolve('../dist/index.umd.js'),
         format: 'umd'
       }
@@ -116,7 +116,7 @@ function addAssets (builds, type, injectName) {
           output: {
             file: addExtension(pathResolve(`../dist/${type}/${file}`), 'umd'),
             format: 'umd',
-            name: `<%= umdExportName %>.${injectName}.${name}`
+            name: `<%= scope.umdExportName %>.${injectName}.${name}`
           }
         },
         build: {

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/index.template.html

@@ -1,16 +1,21 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= '\<%= productName %\>' %></title>
+    <title><%= '<' + '%= productName %' + '>' %></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= '\<%= productDescription %\>' %>">
+    <meta name="description" content="<%= '<' + '%= productDescription %' + '>' %>">
     <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<%= '\<% if (ctx.mode.cordova || ctx.mode.capacitor) { %\>, viewport-fit=cover \<% } %\>' %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<%= '<' + '% if (ctx.mode.cordova || ctx.mode.capacitor) { %' + '>, viewport-fit=cover<' + '% } %' + '>' %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
   </head>
   <body>
-    <!-- DO NOT touch the following DIV -->
-    <div id="q-app"></div>
+    <!-- quasar:entry-point -->
   </body>
 </html>

package/templates/ui-kit/quasar-v2/BASE/ui/dev/src/layouts/MyLayout.vue

@@ -11,7 +11,7 @@
         />
 
         <q-toolbar-title>
-          quasar-ui-<%= name %> v{{ version }}
+          quasar-ui-<%= scope.name %> v{{ version }}
         </q-toolbar-title>
 
         <div>Quasar v{{ $q.version }}</div>

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

@@ -1,10 +1,10 @@
 <template>
   <q-page padding>
-    <% if (features.component) { %>
-    <<%= componentName %> />
+    <% if (scope.features.component) { %>
+    <<%= scope.componentName %> />
     <% } %>
-    <% if (features.directive) { %>
-    <div v-<%= directiveName %> class="directive-target">
+    <% if (scope.features.directive) { %>
+    <div v-<%= scope.directiveName %> class="directive-target">
       x
     </div>
     <% } %>

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

@@ -1,7 +1,7 @@
 @import 'quasar/src/css/variables.sass'
-<% if (features.component) { %>
+<% if (scope.features.component) { %>
 @import './components/Component.sass'
 <% } %>
-<% if (features.directive) { %>
+<% if (scope.features.directive) { %>
 @import './directives/Directive.sass'
 <% } %>

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

@@ -1,16 +1,16 @@
-<% if (features.component) { %>import Component from './components/Component'<% } %>
-<% if (features.directive) { %>import Directive from './directives/Directive'<% } %>
+<% if (scope.features.component) { %>import Component from './components/Component'<% } %>
+<% if (scope.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)<% } %>
+<% if (scope.features.component) { %>  app.component(Component.name, Component)<% } %>
+<% if (scope.features.directive) { %>  app.directive(Directive.name, Directive)<% } %>
 }
 
 export {
   version,
-<% if (features.component) { %>  Component,<% } %>
-<% if (features.directive) { %>  Directive,<% } %>
+<% if (scope.features.component) { %>  Component,<% } %>
+<% if (scope.features.directive) { %>  Directive,<% } %>
   install
 }

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

@@ -46,13 +46,13 @@
       const app = Vue.createApp({
         setup () {
           return {
-            version: <%= umdExportName %>.version
+            version: <%= scope.umdExportName %>.version
           }
         }
       })
 
       app.use(Quasar)
-      app.use(<%= umdExportName %>)
+      app.use(<%= scope.umdExportName %>)
       app.mount('#q-app')
     </script>
   </body>

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

@@ -1,13 +1,13 @@
-# Quasar App Extension <%= name %>
+# Quasar App Extension <%= scope.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 %>)
+[![npm](https://img.shields.io/npm/v/quasar-app-extension-<%= scope.name %>.svg?label=quasar-app-extension-<%= scope.name %>)](https://www.npmjs.com/package/quasar-app-extension-<%= scope.name %>)
+[![npm](https://img.shields.io/npm/dt/quasar-app-extension-<%= scope.name %>.svg)](https://www.npmjs.com/package/quasar-app-extension-<%= scope.name %>)
 
 # Install
 ```bash
-quasar ext add <%= name %>
+quasar ext add <%= scope.name %>
 ```
 Quasar CLI will retrieve it from NPM and install the extension.
 
@@ -17,7 +17,7 @@ Quasar CLI will retrieve it from NPM and install the extension.
 
 # Uninstall
 ```bash
-quasar ext remove <%= name %>
+quasar ext remove <%= scope.name %>
 ```
 
 # Info
@@ -30,4 +30,4 @@ quasar ext remove <%= name %>
 If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
 
 # License
-<%= license %> (c) <%= author %>
+<%= scope.license %> (c) <%= scope.author %>

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

@@ -1,12 +1,12 @@
 {
-  "name": "quasar-app-extension-<%= name %>",
+  "name": "quasar-app-extension-<%= scope.name %>",
   "version": "0.0.1",
-  "description": "<%= aeDescription %>",
-  "author": "<%= author %>",
-  "license": "<%= license %>",
+  "description": "<%= scope.aeDescription %>",
+  "author": "<%= scope.author %>",
+  "license": "<%= scope.license %>",
   "type": "module",
   "dependencies": {
-    "quasar-ui-<%= name %>": "latest"
+    "quasar-ui-<%= scope.name %>": "latest"
   },
   "engines": {
     "node": ">= 8.9.0",

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

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

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

@@ -7,7 +7,7 @@
 
 function extendConf (conf, api) {
   // register our boot file
-  conf.boot.push('~quasar-app-extension-<%= name %>/src/boot/register.js')
+  conf.boot.push('~quasar-app-extension-<%= scope.name %>/src/boot/register.js')
 
   if (api.hasWebpack) {
     // make sure app extension files & ui package gets transpiled
@@ -15,11 +15,11 @@ function extendConf (conf, api) {
       conf.build.webpackTranspileDependencies // q/app-webpack >= v4
       || conf.build.transpileDependencies // q/app-webpack v3
     )
-    transpileTarget.push(/quasar-app-extension-<%= name %>[\\/]src/)
+    transpileTarget.push(/quasar-app-extension-<%= scope.name %>[\\/]src/)
   }
 
   // make sure the stylesheet goes through webpack to avoid SSR issues
-  conf.css.push('~quasar-ui-<%= name %>/src/index.sass')
+  conf.css.push('~quasar-ui-<%= scope.name %>/src/index.sass')
 }
 
 export default function (api) {
@@ -35,12 +35,12 @@ export default function (api) {
     api.compatibleWith('@quasar/app-webpack', '^3.10.0 || ^4.0.0')
   }
 
-<% if (features.component) { %>
+<% if (scope.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) { %>
+  // api.registerDescribeApi('<%= scope.componentName %>', '~quasar-ui-<%= scope.name %>/src/components/<%= scope.componentName %>.json')
+<% } %><% if (scope.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')
+  // api.registerDescribeApi('<%= scope.directiveName %>', '~quasar-ui-<%= scope.name %>/src/directives/<%= scope.directiveName %>.json')
 <% } %>
 
   // We extend /quasar.conf.js

package/templates/ui-kit/quasar-v2/{index.js → create-quasar-script.js}

@@ -1,4 +1,4 @@
-export async function script ({ scope, utils }) {
+export function createQuasarScript({ scope, utils }) {
   utils.createTargetDir(scope)
   utils.renderTemplate('BASE', scope)
 
@@ -12,7 +12,10 @@ export async function script ({ scope, utils }) {
   if (scope.features.component) utils.renderTemplate('ui-component', scope)
   if (scope.features.directive) utils.renderTemplate('ui-directive', scope)
 
-  if (scope.features.ae && (scope.features.component || scope.features.directive)) {
+  if (
+    scope.features.ae &&
+    (scope.features.component || scope.features.directive)
+  ) {
     utils.renderTemplate('ui-ae', scope)
   }
 }

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

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

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

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

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

@@ -1,5 +1,5 @@
 export default {
-  name: '<%= directiveName %>',
+  name: '<%= scope.directiveName %>',
 
   mounted (_el) {
     //

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

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