create-quasar 1.7.0 → 1.8.1

package/templates/app/quasar-v2/{js-vite-beta → ts-webpack-4}/BASE/src/components/EssentialLink.vue

@@ -18,9 +18,34 @@
     </q-item-section>
   </q-item>
 </template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+defineOptions({
+  name: 'EssentialLink'
+});
 
-<script>
-import { defineComponent } from 'vue'
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+};
+
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+});
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export interface EssentialLinkProps {
+  title: string;
+  caption?: string;
+  link?: string;
+  icon?: string;
+};
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -45,5 +70,5 @@ export default defineComponent({
       default: ''
     }
   }
-})
-</script>
+});
+</script><% } %>

package/templates/app/quasar-v2/{ts-webpack → ts-webpack-4}/BASE/src/components/ExampleComponent.vue

@@ -11,8 +11,8 @@
     <p>Clicks on todos: {{ clickCount }}</p>
   </div>
 </template>
-
-<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 import { Todo, Meta } from './models';
 
@@ -21,9 +21,10 @@ interface Props {
   todos?: Todo[];
   meta: Meta;
   active: boolean;
-}
+};
+
 const props = withDefaults(defineProps<Props>(), {
-  todos: () => [],
+  todos: () => []
 });
 
 const clickCount = ref(0);
@@ -33,7 +34,8 @@ function increment() {
 }
 
 const todoCount = computed(() => props.todos.length);
-<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+</script><% } else if (sfcStyle === 'composition') { %>
+<script lang="ts">
 import {
   defineComponent,
   PropType,
@@ -61,6 +63,7 @@ function useDisplayTodo(todos: Ref<Todo[]>) {
 
 export default defineComponent({
   name: 'ExampleComponent',
+
   props: {
     title: {
       type: String,
@@ -78,15 +81,19 @@ export default defineComponent({
       type: Boolean
     }
   },
-  setup(props) {
+
+  setup (props) {
     return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
-  },
-});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+  }
+});
+</script><% } else if (sfcStyle === 'options') { %>
+<script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { Todo, Meta } from './models';
 
 export default defineComponent({
   name: 'ExampleComponent',
+
   props: {
     title: {
       type: String,
@@ -104,41 +111,23 @@ export default defineComponent({
       type: Boolean
     }
   },
+
   data(): { clickCount: number } {
     return {
       clickCount: 0
     };
   },
+
   methods: {
-    increment(): void {
+    increment (): void {
       this.clickCount += 1;
     }
   },
+
   computed: {
-    todoCount(): number {
+    todoCount (): number {
       return this.todos.length;
     }
   }
-});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
-import { Vue, prop } from 'vue-class-component';
-import { Todo, Meta } from './models';
-
-class Props {
-  readonly title!: string;
-  readonly todos = prop<Todo[]>({ default: () => [] });
-  readonly meta!: Meta;
-  readonly active!: boolean;
-}
-
-export default class ExampleComponent extends Vue.with(Props) {
-  clickCount = 0;
-
-  increment () {
-    this.clickCount += 1
-  }
-
-  get todoCount () {
-    return this.todos.length
-  }
-}<% } %>
-</script>
+});
+</script><% } %>

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/layouts/MainLayout.vue

@@ -0,0 +1,245 @@
+<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 linksList"
+          :key="link.title"
+          v-bind="link"
+        />
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+
+defineOptions({
+  name: 'MainLayout'
+});
+
+const linksList: EssentialLinkProps[] = [
+  {
+    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'
+  }
+];
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+</script><% } else if (sfcStyle === 'composition') { %>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const linksList: EssentialLinkProps[] = [
+  {
+    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 {
+      linksList,
+      leftDrawerOpen,
+      toggleLeftDrawer () {
+        leftDrawerOpen.value = !leftDrawerOpen.value;
+      }
+    };
+  }
+});
+</script><% } else if (sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const linksList: EssentialLinkProps[] = [
+  {
+    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
+  },
+
+  data () {
+    return {
+      linksList,
+      leftDrawerOpen: false
+    }
+  },
+
+  methods: {
+    toggleLeftDrawer () {
+      this.leftDrawerOpen = !this.leftDrawerOpen;
+    }
+  }
+});
+</script><% } %>

package/templates/app/quasar-v2/ts-webpack-4/BASE/src/pages/ErrorNotFound.vue

@@ -0,0 +1,36 @@
+<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>
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+defineOptions({
+  name: 'ErrorNotFound'
+});
+</script><% } else if (sfcStyle === 'composition' || sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ErrorNotFound'
+});
+</script><% } %>

package/templates/app/quasar-v2/{ts-webpack → ts-webpack-4}/BASE/src/pages/IndexPage.vue

@@ -8,11 +8,15 @@
     ></example-component>
   </q-page>
 </template>
-
-<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+<% if (sfcStyle === 'composition-setup') { %>
+<script setup lang="ts">
+import { ref } from 'vue';
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-import { ref } from 'vue';
+
+defineOptions({
+  name: 'IndexPage'
+});
 
 const todos = ref<Todo[]>([
   {
@@ -36,17 +40,24 @@ const todos = ref<Todo[]>([
     content: 'ct5'
   }
 ]);
+
 const meta = ref<Meta>({
   totalCount: 1200
-});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+});
+</script><% } else if (sfcStyle === 'composition') { %>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
-  setup() {
+
+  components: {
+    ExampleComponent
+  },
+
+  setup () {
     const todos = ref<Todo[]>([
       {
         id: 1,
@@ -69,20 +80,28 @@ export default defineComponent({
         content: 'ct5'
       }
     ]);
+
     const meta = ref<Meta>({
       totalCount: 1200
     });
+
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+});
+</script><% } else if (sfcStyle === 'options') { %>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
-import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
-  data() {
+
+  components: {
+    ExampleComponent
+  },
+
+  data () {
     const todos: Todo[] = [
       {
         id: 1,
@@ -105,44 +124,12 @@ export default defineComponent({
         content: 'ct5'
       }
     ];
+
     const meta: Meta = {
       totalCount: 1200
     };
+
     return { todos, meta };
   }
-});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
-import { Vue, Options } from 'vue-class-component'
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-
-@Options({
-  components: { ExampleComponent }
-})
-export default class IndexPage 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
-  };
-};<% } %>
-</script>
+});
+</script><% } %>

package/templates/app/quasar-v2/{ts-webpack → ts-webpack-4}/i18n/src/boot/i18n.ts

@@ -23,7 +23,7 @@ declare module "vue-i18n" {
 
 export default boot(({ app }) => {
   const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
-    locale: 'en-US',<% if (typescriptConfig === 'composition' || typescriptConfig === 'composition-setup') { %>
+    locale: 'en-US',<% if (sfcStyle === 'composition' || sfcStyle === 'composition-setup') { %>
     legacy: false,<% } %>
     messages,
   });

package/templates/app/quasar-v2/ts-webpack-4/index.js

@@ -0,0 +1,55 @@
+export async function script ({ scope, utils }) {
+  await utils.prompts(scope, [
+    {
+      type: 'multiselect',
+      name: 'preset',
+      message: 'Check the features needed for your project:',
+      choices: [
+        { title: 'Linting (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('BASE', scope)
+  utils.renderTemplate(scope.css, scope)
+
+  if (scope.preset.axios) utils.renderTemplate('axios', scope)
+  if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
+  if (scope.preset.lint) {
+    utils.renderTemplate('lint', scope)
+    if (scope.lintConfig === 'prettier') {
+      utils.renderTemplate('prettier', scope)
+    }
+  }
+
+  if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
+  else if (scope.preset.vuex) utils.renderTemplate('vuex', scope)
+}

package/templates/app/quasar-v2/ts-webpack-4/lint/_.eslintignore

@@ -0,0 +1,8 @@
+/dist
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.cjs
+babel.config.cjs
+/quasar.config.*.temporary.compiled*

package/templates/app-extension/ae-v1/index.js

@@ -84,11 +84,11 @@ export async function script ({ scope, utils }) {
   ])
 
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
+  utils.renderTemplate('BASE', scope)
 
-  if (scope.preset.prompts) utils.renderTemplate(utils.join(import.meta.url, 'prompts-script'), scope)
-  if (scope.preset.install) utils.renderTemplate(utils.join(import.meta.url, 'install-script'), scope)
-  if (scope.preset.uninstall) utils.renderTemplate(utils.join(import.meta.url, 'uninstall-script'), scope)
+  if (scope.preset.prompts) utils.renderTemplate('prompts-script', scope)
+  if (scope.preset.install) utils.renderTemplate('install-script', scope)
+  if (scope.preset.uninstall) utils.renderTemplate('uninstall-script', scope)
 
   // nothing to install, so we'll skip it
   scope.skipDepsInstall = true

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

@@ -1,18 +1,18 @@
 export async function script ({ scope, utils }) {
   utils.createTargetDir(scope)
-  utils.renderTemplate(utils.join(import.meta.url, 'BASE'), scope)
+  utils.renderTemplate('BASE', scope)
 
   if (scope.features.ae) {
-    utils.renderTemplate(utils.join(import.meta.url, 'ae'), scope)
-    if (scope.preset.install) utils.renderTemplate(utils.join(import.meta.url, 'ae-install'), scope)
-    if (scope.preset.prompts) utils.renderTemplate(utils.join(import.meta.url, 'ae-prompts'), scope)
-    if (scope.preset.uninstall) utils.renderTemplate(utils.join(import.meta.url, 'ae-uninstall'), scope)
+    utils.renderTemplate('ae', scope)
+    if (scope.preset.install) utils.renderTemplate('ae-install', scope)
+    if (scope.preset.prompts) utils.renderTemplate('ae-prompts', scope)
+    if (scope.preset.uninstall) utils.renderTemplate('ae-uninstall', scope)
   }
 
-  if (scope.features.component) utils.renderTemplate(utils.join(import.meta.url, 'ui-component'), scope)
-  if (scope.features.directive) utils.renderTemplate(utils.join(import.meta.url, 'ui-directive'), scope)
+  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)) {
-    utils.renderTemplate(utils.join(import.meta.url, 'ui-ae'), scope)
+    utils.renderTemplate('ui-ae', scope)
   }
 }