add usage with Vue

phonzammi · Nov 13, 2024 · e6b4f2b · e6b4f2b
1 parent 4d01ea4
commit e6b4f2b
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 29 deletions.
diff --git a/boilerplates/panda-css/files/panda.config.ts b/boilerplates/panda-css/files/panda.config.ts
@@ -5,12 +5,19 @@ export default defineConfig({
   preflight: true,
 
   // Where to look for your css declarations
-  include: [
-    "./components/**/*.{js,jsx,ts,tsx}",
-    "./layouts/**/*.{js,jsx,ts,tsx}",
-    "./pages/**/*.{js,jsx,ts,tsx}",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  include: BATI.has("vue")
+    ? [
+        "./components/**/*.{js,jsx,ts,tsx,vue}",
+        "./layouts/**/*.{js,jsx,ts,tsx,vue}",
+        "./pages/**/*.{js,jsx,ts,tsx,vue}",
+        "./src/**/*.{js,jsx,ts,tsx,vue}",
+      ]
+    : [
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./layouts/**/*.{js,jsx,ts,tsx}",
+        "./pages/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{js,jsx,ts,tsx}",
+      ],
 
   // Files to exclude
   exclude: [],

diff --git a/boilerplates/vue/files/components/Content.vue b/boilerplates/vue/files/components/Content.vue
@@ -4,14 +4,20 @@
     <div id="page-content" class="p-5 pb-12 min-h-screen">
       <slot />
     </div>
-    <!-- !BATI.has("tailwindcss") -->
+    <!-- BATI.has("panda-css") -->
+    <div id="page-content" :class="css({ p: '20px', pb: '50px', minH: '100vh' })">
+      <slot />
+    </div>
+    <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
     <div id="page-content" style="padding: 20px; padding-bottom: 50px; min-height: 100vh">
       <slot />
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>
 
 <style>
 /* Page Transition Animation */

diff --git a/boilerplates/vue/files/components/Counter.vue b/boilerplates/vue/files/components/Counter.vue
@@ -7,19 +7,33 @@
   >
     Counter {{ state.count }}
   </button>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <button
+    type="button"
+    :class="
+      css({
+        display: 'inline-block',
+        border: '1px solid black',
+        rounded: 'sm',
+        bg: 'gray.200',
+        px: 1,
+        py: 0.5,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: '16px',
+      })
+    "
+    @click="state.count++"
+  >
+    Counter {{ state.count }}
+  </button>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <button type="button" @click="state.count++">Counter {{ state.count }}</button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from "vue";
+import { css } from "../styled-system/css";
 
-export default {
-  setup() {
-    const state = reactive({ count: 0 });
-    return {
-      state,
-    };
-  },
-};
+const state = reactive({ count: 0 });
 </script>
diff --git a/boilerplates/vue/files/components/Logo.vue b/boilerplates/vue/files/components/Logo.vue
@@ -5,11 +5,19 @@
       <img src="../assets/logo.svg" height="64" width="64" />
     </a>
   </div>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <div :class="css({ p: '20px', mb: '10px' })">
+    <a href="/">
+      <img src="../assets/logo.svg" height="64" width="64" />
+    </a>
+  </div>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <div style="margin-top: 20px; margin-bottom: 10px">
     <a href="/">
       <img src="../assets/logo.svg" height="64" width="64" />
     </a>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>
diff --git a/boilerplates/vue/files/components/Sidebar.vue b/boilerplates/vue/files/components/Sidebar.vue
@@ -3,7 +3,23 @@
   <div id="sidebar" class="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200">
     <slot />
   </div>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <div
+    id="sidebar"
+    :class="
+      css({
+        p: '20px',
+        display: 'flex',
+        flexShrink: 0,
+        flexDir: 'column',
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee',
+      })
+    "
+  >
+    <slot />
+  </div>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <div
     id="sidebar"
     style="
@@ -18,4 +34,6 @@
     <slot />
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>
diff --git a/boilerplates/vue/files/layouts/LayoutDefault.vue b/boilerplates/vue/files/layouts/LayoutDefault.vue
@@ -13,6 +13,8 @@
 </template>
 
 <script lang="ts" setup>
+//# BATI.has("panda-css")
+import "./panda.css";
 import Content from "../components/Content.vue";
 import Link from "../components/Link.vue";
 import Logo from "../components/Logo.vue";

diff --git a/boilerplates/vue/files/pages/index/+Page.vue b/boilerplates/vue/files/pages/index/+Page.vue
@@ -1,7 +1,9 @@
 <template>
   <!-- BATI.has("tailwindcss") -->
   <h1 class="font-bold text-3xl pb-4">My Vike app</h1>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <h1 :class="css({ font: 'bold 2em sans-serif', marginBlock: '0.67em' })">My Vike app</h1>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <h1>My Vike app</h1>
   This page is:
   <ul>
@@ -10,9 +12,7 @@
   </ul>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Counter from "../../components/Counter.vue";
-
-const components = { Counter };
-export default { components };
+import { css } from "../../styled-system/css";
 </script>
diff --git a/boilerplates/vue/files/pages/todo/TodoList.vue b/boilerplates/vue/files/pages/todo/TodoList.vue
@@ -5,8 +5,8 @@
     </li>
     <li>
       <form @submit.prevent="submitNewTodo()">
-        <input v-model="newTodo" type="text" />{{ " " }}
-        <button type="submit">Add to-do</button>
+        <input v-model="newTodo" type="text" :class="[inputClass]" />
+        <button type="submit" :class="[buttonClass]">Add to-do</button>
       </form>
     </li>
   </ul>
@@ -17,6 +17,49 @@ import { onNewTodo } from "@batijs/telefunc/pages/todo/TodoList.telefunc";
 import { trpc } from "@batijs/trpc/trpc/client";
 import { client } from "@batijs/ts-rest/ts-rest/client";
 import { ref } from "vue";
+import { css } from "../../styled-system/css";
+
+const inputClass = ref(
+  BATI.has("tailwindcss")
+    ? "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto p-2 mr-1 mb-1"
+    : BATI.has("panda-css")
+      ? css({
+          p: 2,
+          bg: "gray.50",
+          borderWidth: 1,
+          borderColor: "gray.300",
+          color: "gray.900",
+          fontSize: "sm",
+          rounded: "md",
+          width: { base: "full", sm: "auto" },
+          _focus: { ringColor: "teal.500", borderColor: "teal.500" },
+          mr: 1,
+          mb: 1,
+        })
+      : "",
+);
+const buttonClass = ref(
+  BATI.has("tailwindcss")
+    ? "text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2"
+    : BATI.has("panda-css")
+      ? css({
+          color: "white",
+          bg: { base: "teal.700", _hover: "teal.800" },
+          _focus: {
+            ringWidth: 2,
+            ringColor: "teal.300",
+            outline: "1px solid transparent",
+            outlineOffset: "1px",
+          },
+          cursor: "pointer",
+          fontSize: "sm",
+          fontWeight: 500,
+          rounded: "md",
+          width: { base: "full", sm: "auto" },
+          p: 2,
+        })
+      : "",
+);
 
 const props = defineProps<{ initialTodoItems: { text: string }[] }>();
 const todoItems = ref(props.initialTodoItems);

diff --git a/boilerplates/vue/package.json b/boilerplates/vue/package.json
@@ -5,6 +5,7 @@
   "description": "",
   "type": "module",
   "scripts": {
+    "prepare": "panda codegen --silent",
     "check-types": "tsc --noEmit",
     "build": "bati-compile-boilerplate"
   },
@@ -13,6 +14,7 @@
   "license": "MIT",
   "devDependencies": {
     "@batijs/compile": "workspace:*",
+    "@pandacss/dev": "^0.47.1",
     "@types/node": "^18.19.64",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.12",

diff --git a/boilerplates/vue/panda.config.ts b/boilerplates/vue/panda.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: [
+    "./components/**/*.{js,jsx,ts,tsx,vue}",
+    "./layouts/**/*.{js,jsx,ts,tsx,vue}",
+    "./pages/**/*.{js,jsx,ts,tsx,vue}",
+    "./src/**/*.{js,jsx,ts,tsx,vue}",
+  ],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: "files/styled-system",
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml