create-quasar 1.2.1 → 1.4.0

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/components/ExampleComponent.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <p>{{ title }}</p>
+    <ul>
+      <li v-for="todo in todos" :key="todo.id" @click="increment">
+        {{ todo.id }} - {{ todo.content }}
+      </li>
+    </ul>
+    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
+    <p>Active: {{ active ? 'yes' : 'no' }}</p>
+    <p>Clicks on todos: {{ clickCount }}</p>
+  </div>
+</template>
+
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Todo, Meta } from './models';
+
+interface Props {
+  title: string;
+  todos?: Todo[];
+  meta: Meta;
+  active: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+});
+
+const clickCount = ref(0);
+function increment() {
+  clickCount.value += 1;
+  return clickCount.value;
+}
+
+const todoCount = computed(() => props.todos.length);
+<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  computed,
+  ref,
+  toRef,
+  Ref,
+} from 'vue';
+import { Todo, Meta } from './models';
+
+function useClickCount() {
+  const clickCount = ref(0);
+  function increment() {
+    clickCount.value += 1
+    return clickCount.value;
+  }
+
+  return { clickCount, increment };
+}
+
+function useDisplayTodo(todos: Ref<Todo[]>) {
+  const todoCount = computed(() => todos.value.length);
+  return { todoCount };
+}
+
+export default defineComponent({
+  name: 'ExampleComponent',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    todos: {
+      type: Array as PropType<Todo[]>,
+      default: () => []
+    },
+    meta: {
+      type: Object as PropType<Meta>,
+      required: true
+    },
+    active: {
+      type: Boolean
+    }
+  },
+  setup (props) {
+    return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
+  },
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Todo, Meta } from './models';
+
+export default defineComponent({
+  name: 'ExampleComponent',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    todos: {
+      type: Array as PropType<Todo[]>,
+      default: () => [] as Todo[]
+    },
+    meta: {
+      type: Object as PropType<Meta>,
+      required: true
+    },
+    active: {
+      type: Boolean
+    }
+  },
+  data(): { clickCount: number } {
+    return {
+      clickCount: 0
+    };
+  },
+  methods: {
+    increment (): void {
+      this.clickCount += 1;
+    }
+  },
+  computed: {
+    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>

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/components/models.ts

@@ -0,0 +1,8 @@
+export interface Todo {
+  id: number;
+  content: string;
+}
+
+export interface Meta {
+  totalCount: number;
+}

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/env.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    NODE_ENV: string;
+    VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
+    VUE_ROUTER_BASE: string | undefined;
+  }
+}

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/layouts/MainLayout.vue

@@ -0,0 +1,295 @@
+<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>
+
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { ref } from 'vue';
+import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+
+const essentialLinks: 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
+}<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+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
+      }
+    }
+  }
+});<% } else if (typescriptConfig === 'options') { %><script lang="ts">
+import { defineComponent } 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
+  },
+
+  data() {
+    return {
+      leftDrawerOpen: false,
+      essentialLinks: linksList
+    }
+  },
+
+  methods: {
+    toggleLeftDrawer () {
+      this.leftDrawerOpen = !this.leftDrawerOpen
+    }
+  }
+});<% } else if (typescriptConfig === 'class') { %><script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+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'
+  }
+];
+
+@Options({
+  components: { EssentialLink }
+})
+export default class MainLayout extends Vue {
+  leftDrawerOpen = false;
+  essentialLinks = linksList;
+  toggleLeftDrawer () {
+    this.leftDrawerOpen = !this.leftDrawerOpen
+  }
+}<% } %>
+</script>

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/pages/ErrorNotFound.vue

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

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/pages/IndexPage.vue

@@ -0,0 +1,148 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <example-component
+      title="Example component"
+      active
+      :todos="todos"
+      :meta="meta"
+    ></example-component>
+  </q-page>
+</template>
+
+<% if (typescriptConfig === 'composition-setup') { %><script setup lang="ts">
+import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+import { ref } from 'vue';
+
+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
+});<% } else if (typescriptConfig === 'composition') { %><script lang="ts">
+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 () {
+    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 === 'options') { %><script lang="ts">
+import { Todo, Meta } from 'components/models';
+import ExampleComponent from 'components/ExampleComponent.vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'IndexPage',
+  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 };
+  }
+});<% } 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>

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/quasar.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+// Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
+// Removing this would break `quasar/wrappers` imports as those typings are declared
+//  into `@quasar/app-vite`
+// As a side effect, since `@quasar/app-vite` reference `quasar` to augment it,
+//  this declaration also apply `quasar` own
+//  augmentations (eg. adds `$q` into Vue component context)
+/// <reference types="@quasar/app-vite" />

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/router/index.ts

@@ -0,0 +1,37 @@
+import { route } from 'quasar/wrappers';
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+<% if (preset.vuex) { %>import { StateInterface } from '../store';
+<% } %>
+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<% if (preset.vuex) { %><StateInterface><% } %>(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.VUE_ROUTER_BASE),
+  });
+
+  return Router;
+});

package/templates/app/quasar-v2/ts-vite-beta/BASE/src/router/routes.ts

@@ -0,0 +1,18 @@
+import { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    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;