npm - create-quasar - Versions diffs - 1.2.0 → 1.3.0 - Mend

create-quasar 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (231) hide show

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/components/EssentialLink.vue ADDED Viewed

@@ -0,0 +1,49 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>{{ caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'EssentialLink',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    caption: {
+      type: String,
+      default: ''
+    },
+    link: {
+      type: String,
+      default: '#'
+    },
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/index.template.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= '\<%= productName %\>' %></title>
+    <meta charset="utf-8">
+    <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\<% } %\>' %>">
+    <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>
+  </body>
+</html>

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/layouts/MainLayout.vue ADDED Viewed

@@ -0,0 +1,116 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+        <q-toolbar-title>
+          Quasar App
+        </q-toolbar-title>
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+    <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+    >
+      <q-list>
+        <q-item-label
+          header
+        >
+          Essential Links
+        </q-item-label>
+        <EssentialLink
+          v-for="link in essentialLinks"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+import EssentialLink from 'components/EssentialLink.vue'
+const linksList = [
+  {
+    title: 'Docs',
+    caption: 'quasar.dev',
+    icon: 'school',
+    link: 'https://quasar.dev'
+  },
+  {
+    title: 'Github',
+    caption: 'github.com/quasarframework',
+    icon: 'code',
+    link: 'https://github.com/quasarframework'
+  },
+  {
+    title: 'Discord Chat Channel',
+    caption: 'chat.quasar.dev',
+    icon: 'chat',
+    link: 'https://chat.quasar.dev'
+  },
+  {
+    title: 'Forum',
+    caption: 'forum.quasar.dev',
+    icon: 'record_voice_over',
+    link: 'https://forum.quasar.dev'
+  },
+  {
+    title: 'Twitter',
+    caption: '@quasarframework',
+    icon: 'rss_feed',
+    link: 'https://twitter.quasar.dev'
+  },
+  {
+    title: 'Facebook',
+    caption: '@QuasarFramework',
+    icon: 'public',
+    link: 'https://facebook.quasar.dev'
+  },
+  {
+    title: 'Quasar Awesome',
+    caption: 'Community Quasar projects',
+    icon: 'favorite',
+    link: 'https://awesome.quasar.dev'
+  }
+]
+export default defineComponent({
+  name: 'MainLayout',
+  components: {
+    EssentialLink
+  },
+  setup () {
+    const leftDrawerOpen = ref(false)
+    return {
+      essentialLinks: linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer () {
+        leftDrawerOpen.value = !leftDrawerOpen.value
+      }
+    }
+  }
+})
+</script>

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/pages/ErrorNotFound.vue ADDED Viewed

@@ -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: 'ErrorNotFound'
+})
+</script>

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/pages/IndexPage.vue ADDED Viewed

@@ -0,0 +1,17 @@
+<template>
+  <q-page class="flex flex-center">
+    <img
+      alt="Quasar logo"
+      src="~assets/quasar-logo-vertical.svg"
+      style="width: 200px; height: 200px"
+    >
+  </q-page>
+</template>
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IndexPage'
+})
+</script>

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/router/index.js ADDED Viewed

@@ -0,0 +1,30 @@
+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)
+  })
+  return Router
+})

package/templates/app/quasar-v2/js-webpack-beta/BASE/src/router/routes.js ADDED Viewed

@@ -0,0 +1,19 @@
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/IndexPage.vue') }
+    ]
+  },
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue')
+  }
+]
+export default routes

package/templates/app/quasar-v2/js-webpack-beta/axios/src/boot/axios.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { boot } from 'quasar/wrappers'
+import axios from 'axios'
+// Be careful when using SSR for cross-request state pollution
+// due to creating a Singleton instance here;
+// If any client changes this (global) instance, it might be a
+// good idea to move this instance creation inside of the
+// "export default () => {}" function below (which runs individually
+// for each client)
+const api = axios.create({ baseURL: 'https://api.example.com' })
+export default boot(({ app }) => {
+  // for use inside Vue files (Options API) through this.$axios and this.$api
+  app.config.globalProperties.$axios = axios
+  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
+  //       so you won't necessarily have to import axios in each vue file
+  app.config.globalProperties.$api = api
+  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+  //       so you can easily perform requests against your app's API
+})
+export { api }

package/templates/app/quasar-v2/js-webpack-beta/css/src/css/app.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ /* app global css */

package/templates/app/quasar-v2/js-webpack-beta/i18n/src/boot/i18n.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { boot } from 'quasar/wrappers'
+import { createI18n } from 'vue-i18n'
+import messages from 'src/i18n'
+export default boot(({ app }) => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    globalInjection: true,
+    messages
+  })
+  // Set i18n instance on app
+  app.use(i18n)
+})

package/templates/app/quasar-v2/js-webpack-beta/i18n/src/i18n/en-US/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+// This is just an example,
+// so you can safely delete all default props below
+export default {
+  failed: 'Action failed',
+  success: 'Action was successful'
+}

package/templates/app/quasar-v2/js-webpack-beta/i18n/src/i18n/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import enUS from './en-US'
+export default {
+  'en-US': enUS
+}

package/templates/app/quasar-v2/js-webpack-beta/index.js ADDED Viewed

@@ -0,0 +1,62 @@
+module.exports = async function ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'select',
+      name: 'css',
+      message: 'Pick your CSS preprocessor:',
+      initial: 0,
+      choices: [
+        { title: 'Sass with SCSS syntax', value: 'scss' },
+        { title: 'Sass with indented syntax', value: 'sass' },
+        { title: 'None (the others will still be available)', value: 'css' }
+      ]
+    },
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
+        { title: 'State Management (Vuex) [DEPRECATED by Vue Team]', value: 'vuex', description: 'See https://vuejs.org/guide/scaling-up/state-management.html#pinia' },
+        { title: 'Axios', value: 'axios' },
+        { title: 'Vue-i18n', value: 'i18n' }
+      ],
+      format: values => {
+        let result = values
+        if (values.includes('vuex') && values.includes('pinia')) {
+          console.log()
+          utils.logger.warn('Only one state management package can be used. Picking the recommended Pinia and dropping Vuex.')
+          console.log()
+          result = values.filter(entry => entry !== 'vuex')
+        }
+        return utils.convertArrayToObject(result)
+      }
+    },
+    {
+      type: (_, { preset }) => preset.lint ? 'select' : null,
+      name: 'lintConfig',
+      message: 'Pick an ESLint preset:',
+      choices: [
+        { title: 'Prettier', value: 'prettier', description: 'https://github.com/prettier/prettier' },
+        { title: 'Standard', value: 'standard', description: 'https://github.com/standard/standard' },
+        { title: 'Airbnb', value: 'airbnb', description: 'https://github.com/airbnb/javascript' }
+      ]
+    }
+  ])
+  utils.createTargetDir(scope)
+  utils.renderTemplate(utils.join(__dirname, 'BASE'), scope)
+  utils.renderTemplate(utils.join(__dirname, scope.css), scope)
+  if (scope.preset.axios) utils.renderTemplate(utils.join(__dirname, 'axios'), scope)
+  if (scope.preset.i18n) utils.renderTemplate(utils.join(__dirname, 'i18n'), scope)
+  if (scope.preset.lint) utils.renderTemplate(utils.join(__dirname, 'lint'), scope)
+  if (scope.preset.pinia) utils.renderTemplate(utils.join(__dirname, 'pinia'), scope)
+  else if (scope.preset.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), scope)
+}

package/templates/app/quasar-v2/js-webpack-beta/lint/_.eslintignore ADDED Viewed

@@ -0,0 +1,9 @@
+/dist
+/src-bex/www
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+babel.config.js
+/quasar.config.*.temporary.compiled*

package/templates/app/quasar-v2/js-webpack-beta/lint/_.eslintrc.cjs ADDED Viewed

@@ -0,0 +1,101 @@
+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,
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 2021, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module' // Allows for the use of imports
+  },
+  env: {
+    browser: true,
+    'vue/setup-compiler-macros': true
+  },
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // '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)
+    <% if (lintConfig === 'standard') { %>'standard'
+    <% } else if (lintConfig === 'airbnb') { %>'airbnb-base'
+    <% } else if (lintConfig === 'prettier') { %>// https://github.com/prettier/eslint-config-prettier#installation
+    // usage with Prettier, provided by 'eslint-config-prettier'.
+    'prettier'<% } %>
+  ],
+  plugins: [
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue',
+    <% if (lintConfig === 'prettier') { %>
+    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
+    // Prettier has not been included as plugin to avoid performance impact
+    // add it as an extension for your IDE
+    <% } %>
+  ],
+  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: {
+    <% if (lintConfig === 'standard') { %>
+    // 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/named': 'error',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    <% } else if (lintConfig === 'airbnb') { %>
+    'no-param-reassign': 'off',
+    'no-void': 'off',
+    'no-nested-ternary': 'off',
+    'max-classes-per-file': 'off',
+    'import/first': 'off',
+    'import/named': 'error',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+    <% } %>
+    'prefer-promise-reject-errors': 'off',
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

package/templates/app/quasar-v2/js-webpack-beta/pinia/src/stores/example-store.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++;
+    },
+  },
+});

package/templates/app/quasar-v2/js-webpack-beta/pinia/src/stores/index.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+  return pinia
+})

package/templates/app/quasar-v2/js-webpack-beta/pinia/src/stores/store-flag.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}

package/templates/app/quasar-v2/js-webpack-beta/sass/src/css/app.sass ADDED Viewed

	@@ -0,0 +1 @@
1	+ // app global css in Sass form

package/templates/app/quasar-v2/js-webpack-beta/sass/src/css/quasar.variables.sass ADDED Viewed

@@ -0,0 +1,25 @@
+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+// Check documentation for full list of Quasar variables
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+$primary   : #1976D2
+$secondary : #26A69A
+$accent    : #9C27B0
+$dark      : #1D1D1D
+$dark-page : #121212
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037

package/templates/app/quasar-v2/js-webpack-beta/scss/src/css/app.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ // app global css in SCSS form

package/templates/app/quasar-v2/js-webpack-beta/scss/src/css/quasar.variables.scss ADDED Viewed

@@ -0,0 +1,25 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+// Check documentation for full list of Quasar variables
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+$primary   : #1976D2;
+$secondary : #26A69A;
+$accent    : #9C27B0;
+$dark      : #1D1D1D;
+$dark-page : #121212;
+$positive  : #21BA45;
+$negative  : #C10015;
+$info      : #31CCEC;
+$warning   : #F2C037;

package/templates/app/quasar-v2/js-webpack-beta/vuex/src/store/index.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { store } from 'quasar/wrappers'
+import { createStore } from 'vuex'
+// import example from './module-example'
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+export default store(function (/* { ssrContext } */) {
+  const Store = createStore({
+    modules: {
+      // example
+    },
+    // enable strict mode (adds overhead!)
+    // for dev mode and --debug builds only
+    strict: process.env.DEBUGGING
+  })
+  return Store
+})

package/templates/app/quasar-v2/js-webpack-beta/vuex/src/store/module-example/actions.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export function someAction (/* context */) {
2	+ }

package/templates/app/quasar-v2/js-webpack-beta/vuex/src/store/module-example/getters.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export function someGetter (/* state */) {
2	+ }