npm - create-quasar - Versions diffs - 0.0.1 → 1.0.2 - Mend

create-quasar 0.0.1 → 1.0.2

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 (429) hide show

package/templates/app/quasar-v1/ts/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-v1/ts/BASE/src/layouts/MainLayout.vue ADDED Viewed

@@ -0,0 +1,225 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="leftDrawerOpen = !leftDrawerOpen"
+        />
+        <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
+      content-class="bg-grey-1"
+    >
+      <q-list>
+        <q-item-label
+          header
+          class="text-grey-8"
+        >
+          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 lang="ts">
+<% if (typescriptConfig === 'composition') { %>
+import { defineComponent, ref } from '@vue/composition-api';
+import EssentialLink from 'components/EssentialLink.vue'
+const linksData = [
+  {
+    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);
+    const essentialLinks = ref(linksData);
+    return {leftDrawerOpen, essentialLinks}
+  }
+});
+<% } else if (typescriptConfig === 'class') { %>
+import { Vue, Component } from 'vue-property-decorator';
+import EssentialLink from 'components/EssentialLink.vue'
+const linksData = [
+  {
+    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'
+  }
+];
+@Component({
+  components: { EssentialLink }
+})
+export default class MainLayout extends Vue {
+  leftDrawerOpen = false;
+  essentialLinks = linksData;
+}
+<% } else if (typescriptConfig === 'options') { %>
+import Vue from 'vue';
+import EssentialLink from 'components/EssentialLink.vue'
+const linksData = [
+  {
+    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 Vue.extend({
+  name: 'MainLayout',
+  components: { EssentialLink },
+  data() {
+    return {
+      leftDrawerOpen: false,
+      essentialLinks: linksData
+    }
+  }
+});
+<% } %>
+</script>

package/templates/app/quasar-v1/ts/BASE/src/pages/Error404.vue ADDED Viewed

@@ -0,0 +1,44 @@
+<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 lang="ts">
+<% if (typescriptConfig === 'composition') { %>
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  name: 'ErrorNotFound',
+});
+<% } else if (typescriptConfig === 'class') { %>
+import { Vue, Component } from 'vue-property-decorator';
+@Component
+export default class ErrorNotFound extends Vue {}
+<% } else if (typescriptConfig === 'options') { %>
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'ErrorNotFound'
+});
+<% } %>
+</script>

package/templates/app/quasar-v1/ts/BASE/src/pages/Index.vue ADDED Viewed

@@ -0,0 +1,119 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <example-component
+      title="Example component"
+      active
+      :todos="todos"
+      :meta="meta"
+    ></example-component>
+  </q-page>
+</template>
+<script lang="ts">
+import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+<% if (typescriptConfig === 'composition') { %>
+import { defineComponent, ref } from '@vue/composition-api';
+export default defineComponent({
+  name: 'PageIndex',
+  components: { ExampleComponent },
+  setup() {
+    const todos = ref<Todo[]>([
+      {
+        id: 1,
+        content: 'ct1'
+      },
+      {
+        id: 2,
+        content: 'ct2'
+      },
+      {
+        id: 3,
+        content: 'ct3'
+      },
+      {
+        id: 4,
+        content: 'ct4'
+      },
+      {
+        id: 5,
+        content: 'ct5'
+      }
+    ]);
+    const meta = ref<Meta>({
+      totalCount: 1200
+    });
+    return { todos, meta };
+  }
+});
+<% } else if (typescriptConfig === 'class') { %>
+import { Vue, Component } from 'vue-property-decorator';
+@Component({
+  components: { ExampleComponent }
+})
+export default class PageIndex extends Vue {
+  todos: Todo[] = [
+    {
+      id: 1,
+      content: 'ct1'
+    },
+    {
+      id: 2,
+      content: 'ct2'
+    },
+    {
+      id: 3,
+      content: 'ct3'
+    },
+    {
+      id: 4,
+      content: 'ct4'
+    },
+    {
+      id: 5,
+      content: 'ct5'
+    }
+  ];
+  meta: Meta = {
+    totalCount: 1200
+  };
+};
+<% } else if (typescriptConfig === 'options') { %>
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'PageIndex',
+  components: { ExampleComponent },
+  data() {
+    const todos: Todo[] = [
+      {
+        id: 1,
+        content: 'ct1'
+      },
+      {
+        id: 2,
+        content: 'ct2'
+      },
+      {
+        id: 3,
+        content: 'ct3'
+      },
+      {
+        id: 4,
+        content: 'ct4'
+      },
+      {
+        id: 5,
+        content: 'ct5'
+      }
+    ];
+    const meta: Meta = {
+      totalCount: 1200
+    };
+    return { todos, meta };
+  }
+});
+<% } %>
+</script>

package/templates/app/quasar-v1/ts/BASE/src/router/index.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { route } from 'quasar/wrappers';
+import VueRouter from 'vue-router';
+<% if (preset.vuex) { %>import { Store } from "vuex";
+import { StateInterface } from '../store';
+<% } %>import routes from './routes';
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation
+ */
+export default route<% if (preset.vuex) { %><Store<StateInterface>><% } %>(function ({ Vue }) {
+  Vue.use(VueRouter);
+  const Router = new VueRouter({
+    scrollBehavior: () => ({ x: 0, y: 0 }),
+    routes,
+    // Leave these as is and change from quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    mode: process.env.VUE_ROUTER_MODE,
+    base: process.env.VUE_ROUTER_BASE
+  });
+  return Router;
+})

package/templates/app/quasar-v1/ts/BASE/src/router/routes.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { RouteConfig } from 'vue-router';
+const routes: RouteConfig[] = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      { path: '', component: () => import('pages/Index.vue') }
+    ]
+  },
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '*',
+    component: () => import('pages/Error404.vue')
+  }
+];
+export default routes;

package/templates/app/quasar-v1/ts/BASE/src/shims-vue.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

package/templates/app/quasar-v1/ts/BASE/tsconfig.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "extends": "@quasar/app/tsconfig-preset",
+  "compilerOptions": {
+    "baseUrl": "."<% if (typescriptConfig === 'class') { %>,
+    "experimentalDecorators": true<% } %><% if (preset.ie) { %>,
+    "target": "es5"<% } %>
+  }
+}

package/templates/app/quasar-v1/ts/axios/src/boot/axios.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import axios, { AxiosInstance } from 'axios';
+import { boot } from 'quasar/wrappers';
+declare module 'vue/types/vue' {
+  interface Vue {
+    $axios: AxiosInstance;
+  }
+}
+export default boot(({ Vue }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  Vue.prototype.$axios = axios;
+});

package/templates/app/quasar-v1/ts/composition/src/boot/composition-api.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import VueCompositionApi from '@vue/composition-api';
+import { boot } from 'quasar/wrappers';
+export default boot(({ Vue }) => {
+  Vue.use(VueCompositionApi);
+});

package/templates/app/quasar-v1/ts/css/src/css/app.css ADDED Viewed

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

package/templates/app/quasar-v1/ts/i18n/src/boot/i18n.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { boot } from 'quasar/wrappers';
+import messages from 'src/i18n';
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+declare module 'vue/types/vue' {
+  <% if (preset.lint && lintConfig === 'airbnb') { %>// eslint-disable-next-line no-shadow<% } %>
+  interface Vue {
+    i18n: VueI18n;
+  }
+}
+Vue.use(VueI18n);
+export const i18n = new VueI18n({
+  locale: "en-us",
+  fallbackLocale: "en-us",
+  messages
+});
+export default boot(({ app }) => {
+  // Set i18n instance on app
+  app.i18n = i18n;
+});

package/templates/app/quasar-v1/ts/i18n/src/i18n/en-US/index.ts 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-v1/ts/i18n/src/i18n/index.ts ADDED Viewed

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

package/templates/app/quasar-v1/ts/index.js ADDED Viewed

@@ -0,0 +1,77 @@
+module.exports = async function ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'select',
+      name: 'typescriptConfig',
+      message: 'Pick a Vue component style:',
+      initial: 0,
+      choices: [
+        { title: 'Composition API (recommended) (https://github.com/vuejs/composition-api)', value: 'composition' },
+        { title: 'Class-based (recommended) (https://github.com/vuejs/vue-class-component & https://github.com/kaorun343/vue-property-decorator)', value: 'class' },
+        { title: 'Options API', value: 'options' }
+      ]
+    },
+    {
+      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: 'Stylus (deprecated)', value: 'styl' },
+        { title: 'None (the others will still be available)', value: 'css' }
+      ]
+    },
+    {
+      type: 'select',
+      name: 'importStrategy',
+      message: 'Pick a Quasar components & directives import strategy: (can be changed later)',
+      initial: 0,
+      choices: [
+        {
+          title: '* Auto-import in-use Quasar components & directives\n        - also treeshakes Quasar; minimum bundle size',
+          value: 'auto'
+        },
+        {
+          title: '* Import everything from Quasar\n        - not treeshaking Quasar; biggest bundle size',
+          value: 'all'
+        }
+      ]
+    },
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'ESLint', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Vuex', value: 'vuex' },
+        { title: 'Axios', value: 'axios' },
+        { title: 'Vue-i18n', value: 'i18n' },
+        { title: 'IE11 support', value: 'ie' }
+      ],
+      format: utils.convertArrayToObject
+    },
+    {
+      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.vuex) utils.renderTemplate(utils.join(__dirname, 'vuex'), scope)
+  if (scope.preset.lint) utils.renderTemplate(utils.join(__dirname, 'lint'), scope)
+  if (scope.typescriptConfig === 'composition') utils.renderTemplate(utils.join(__dirname, 'composition'), scope)
+}

package/templates/app/quasar-v1/ts/lint/_eslintignore ADDED Viewed

@@ -0,0 +1,8 @@
+/dist
+/src-bex/www
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+<% if (preset.lint) { %>/src-ssr<% } %>