quasarwind 1.0.0

package/template/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "quasar_project_tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "d": "vite",
+    "build": "vue-tsc -b && vite build",
+    "b": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.17.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "pinia": "^3.0.3",
+    "quasar": "^2.18.5",
+    "tailwindcss": "^4.1.13",
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@quasar/app-vite": "^2.4.0",
+    "@quasar/vite-plugin": "^1.10.0",
+    "@types/node": "^24.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/parser": "^8.44.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-vue": "^10.4.0",
+    "globals": "^16.4.0",
+    "prettier": "3.6.2",
+    "sass-embedded": "^1.93.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.6",
+    "vite-plugin-vue-devtools": "^8.0.2",
+    "vue-tsc": "^3.0.7"
+  }
+}

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+ <router-view></router-view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

package/template/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template/src/components/ExampleComponent.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="q-pa-md q-gutter-md grid grid-cols-4">
+    <q-card class="my-card">
+      <q-card-section>
+        {{ lorem }}
+      </q-card-section>
+    </q-card>
+
+    <q-card
+      class="my-card text-white"
+      style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
+    >
+      <q-card-section>
+        <div class="text-h6">Our Changing Planet</div>
+        <div class="text-subtitle2">by John Doe</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">21323
+        {{ lorem }}
+      </q-card-section>
+    </q-card>
+
+    <q-card dark bordered class="bg-grey-9 my-card">
+      <q-card-section>
+        <div class="text-h6">Our Changing Planet</div>
+        <div class="text-subtitle2">by John Doe</div>
+      </q-card-section>
+
+      <q-separator dark inset />
+
+      <q-card-section>
+        {{ lorem }}
+      </q-card-section>
+    </q-card>
+
+    <q-card flat bordered class="my-card">
+      <q-card-section>
+        <div class="text-h6">Our Changing Planet</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        PPPP  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. dfsdfsadfsdfsddfsdfsdfsd
+      </q-card-section>
+
+      <q-separator inset />
+
+      <q-card-section>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.  sdfs
+      </q-card-section>
+    </q-card>
+  </div>
+
+  <div class="text-3xl font-bold underline">
+    Hello world 1!
+  </div>
+
+  <q-btn label="click me" color="primary" @click="store.increment">&nbsp; 
+    {{ store.doubleCount }}</q-btn>
+
+</template>
+
+<script setup lang="ts">
+import { useCounterStore } from '../stores/example-store';
+
+ const store = useCounterStore()
+
+  const lorem= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+</script>
+
+<style scoped>
+
+</style>

package/template/src/css/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template/src/layout/MainLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="fullscreen" style="background: linear-gradient(135deg, #1f2937 0%, #374151 100%)">
+    <router-view />
+  </div>
+</template>
+
+<script setup lang="ts">
+console.log('DirName:', __dirname)
+</script>
+
+<style scoped></style>

package/template/src/main.ts

@@ -0,0 +1,44 @@
+import { createApp } from 'vue'
+import { Quasar } from 'quasar'
+
+// Import icon libraries
+import '@quasar/extras/roboto-font/roboto-font.css'
+import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
+import '@quasar/extras/material-icons-round/material-icons-round.css'
+import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'
+import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css'
+import '@quasar/extras/material-symbols-rounded/material-symbols-rounded.css'
+import '@quasar/extras/material-symbols-sharp/material-symbols-sharp.css'
+import '@quasar/extras/mdi-v7/mdi-v7.css'
+import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
+import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
+import '@quasar/extras/ionicons-v4/ionicons-v4.css'
+import '@quasar/extras/eva-icons/eva-icons.css'
+import '@quasar/extras/themify/themify.css'
+import '@quasar/extras/line-awesome/line-awesome.css'
+import '@quasar/extras/bootstrap-icons/bootstrap-icons.css'
+import './css/app.css'
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
+// /home/ecs/Mis_Repos/skuSyncAll/vite_quasar/quasarProjectTailwind/node_modules/quasar/src/css
+// Assumes your root component is App.vue
+// and placed in same folder as main.js
+import App from './App.vue'
+import { router } from './router'
+import { createPinia } from 'pinia'
+
+const appMain = createApp(App)
+// Assumes you have a <div id="app"></div> in your index.html
+
+
+appMain.use(Quasar)
+appMain.use(router)
+
+const pinia = createPinia()
+appMain.use(pinia)
+
+appMain.mount('#app')
+
+

package/template/src/page/NotFound.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="fullscreen place-items-center bg-gray-900 px-6 py-24 sm:py-32 lg:px-8">
+    <div class="text-center">
+      <p class="text-base font-semibold text-indigo-400">404</p>
+      <h1 class="mt-4 text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl">Page not found</h1>
+      <p class="mt-6 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">Sorry, we couldn’t find the page you’re looking for.</p>
+      <div class="mt-10 flex items-center justify-center gap-x-6">
+        <a
+          href="#"
+          class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+          >Go back home</a
+        >
+        <a href="#" class="text-sm font-semibold text-white">Contact support <span aria-hidden="true">&rarr;</span></a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/template/src/router/index.ts

@@ -0,0 +1,7 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import { routes } from "./routes";
+
+export const router = createRouter({
+    history: createWebHashHistory(import.meta.env.BASE_URL),
+    routes: routes
+});

package/template/src/router/routes.ts

@@ -0,0 +1,20 @@
+import type { RouteRecordRaw } from "vue-router";
+
+export const routes: RouteRecordRaw[] = [
+        {
+            path: "",
+            name: "home",
+            component: () => import("../layout/MainLayout.vue"),
+            children: [
+                {
+                    path: "",
+                    component: () => import("../components/ExampleComponent.vue"),
+                },
+            ],
+        },
+        {
+           path: '/:catchAll(.*)*',
+           name: 'NotFound',
+           component: () => import("../page/NotFound.vue"),
+        },
+    ]

package/template/src/stores/example-store.ts

@@ -0,0 +1,25 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  
+  const counter = ref(0)
+
+    //   getters
+    const doubleCount = computed(() => counter.value * 2)
+
+    //    actions
+    const increment = () => {
+      counter.value++
+    }
+
+  return {
+    doubleCount,
+
+    increment
+  }
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot));
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+// import { fileURLToPath } from 'node:url'
+// import path from 'path'
+import vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import tailwindcss from '@tailwindcss/vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: { transformAssetUrls }
+    }),
+
+    // @quasar/plugin-vite options list:
+    // https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
+    quasar({
+      // sassVariables: path.resolve(__dirname,'node_modules/quasar/src/css/variables.sass'),
+      sassVariables: true,
+    }),
+
+    // tailwinds
+    tailwindcss(),
+
+    vueDevTools(),
+  ]
+})