chore: add taliwind

posva · Feb 3, 2024 · 30ac68a · 30ac68a
1 parent 049f18e
commit 30ac68a
Show file tree

Hide file tree

Showing 10 changed files with 954 additions and 238 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -5,10 +5,6 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>🍹 Pinia Colada Playground</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
-    />
   </head>
   <body>
     <div id="app"></div>

diff --git a/playground/package.json b/playground/package.json
@@ -19,15 +19,19 @@
     "mande": "^2.0.8",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "water.css": "^2.1.1"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^20.11.10",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/tsconfig": "^0.5.0",
-    "json-server": "1.0.0-alpha.23",
+    "autoprefixer": "^10.4.17",
+    "json-server": "^0.17.4",
     "npm-run-all2": "^6.1.1",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
     "typescript": "~5.3.0",
     "unplugin-vue-router": "^0.7.0",
     "vite": "^5.0.12",

diff --git a/playground/postcss.config.js b/playground/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/playground/src/components/ContactCard.vue b/playground/src/components/ContactCard.vue
@@ -36,23 +36,23 @@ function randomizeAvatar() {
 
 <template>
   <div class="space-y-6">
-    <div v-if="isEditing && copy" class="mx-auto flex flex-col items-center">
+    <div v-if="isEditing && copy" class="avatar-container mx-auto flex flex-col items-center">
       <img
         :key="copy.photoURL"
-        class="w-40 h-40 mx-auto rounded-full"
+        class="avatar"
         :src="copy.photoURL"
       />
-      <button @click="randomizeAvatar">Randomize photo</button>
+      <button @click="randomizeAvatar" style="margin-top: 1rem;">Randomize photo</button>
     </div>
     <img
       v-else
-      class="w-40 h-40 mx-auto rounded-full"
+      class="avatar"
       :src="contact.photoURL"
     />
 
     <div class="space-y-2">
       <div class="space-y-1 font-medium leading-6 text-center">
-        <div v-if="copy" class="flex flex-col max-w-md mx-auto">
+        <form v-if="copy" class="flex flex-col max-w-md mx-auto" @submit.prevent="saveEdits()">
           <label for="contact-edit-first-name"> First Name </label>
           <input
             id="contact-edit-first-name"
@@ -72,7 +72,12 @@ function randomizeAvatar() {
             cols="30"
             rows="5"
           ></textarea>
-        </div>
+
+          <hr>
+
+          <button>Save</button>
+          <button type="button" @click="cancelEdit()">Cancel</button>
+        </form>
 
         <template v-else>
           <h3 class="leading-snug text-md">{{ fullName }}</h3>
@@ -82,16 +87,27 @@ function randomizeAvatar() {
       </div>
     </div>
 
-    <hr />
+    <template v-if="!isEditing">
+      <hr />
 
-    <div class="mx-auto flex space-x-2 px-6 justify-end">
-      <template v-if="isEditing">
-        <button @click="saveEdits()">Save</button>
-        <button type="button" @click="cancelEdit()">Cancel</button>
-      </template>
-      <template v-else>
+      <div class="mx-auto flex space-x-2 px-6 justify-end">
         <button @click="startEdit()">Edit</button>
-      </template>
-    </div>
+      </div>
+    </template>
   </div>
 </template>
+
+<style scoped>
+.avatar {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+  border-radius: 9999px;
+}
+
+.avatar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import { createPinia } from 'pinia'
+import './style.css'
+import 'water.css'
 
 import App from './App.vue'
 

diff --git a/playground/src/pages/contacts.vue b/playground/src/pages/contacts.vue
@@ -1,22 +1,16 @@
 <script lang="ts" setup>
-import { getAllContacts } from '@/api/contacts'
+import { getAllContacts, searchContacts } from '@/api/contacts'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { useRouteQuery } from '@vueuse/router'
 import { useQuery } from '@pinia/colada'
 
 const searchText = useRouteQuery('search', '', { mode: 'push' })
 
-const { data: contactList } = useQuery({
+const { data: searchResult } = useQuery({
   key: () => ['contacts', { searchText: searchText.value }],
-  fetcher: () => getAllContacts(),
+  fetcher: () => searchContacts(searchText.value),
 })
 
-const { results } = useFuse(searchText, () => contactList.value || [], {
-  fuseOptions: {
-    keys: ['firstName', 'lastName', 'bio'],
-  },
-  matchAllWhenSearchEmpty: true,
-})
 
 // TODO: tip in tests if they are reading data, error or other as they are computed properties, on the server they won't
 // update so they will keep their initial undefined value
@@ -32,8 +26,8 @@ const { results } = useFuse(searchText, () => contactList.value || [], {
           <input v-model="searchText" type="search" />
         </form>
 
-        <ul>
-          <li v-for="{ item: contact } in results" :key="contact.id">
+        <ol>
+          <li v-for="contact in searchResult?.results" :key="contact.id">
             <RouterLink
               :to="{
                 name: '/contacts/[id]',
@@ -45,15 +39,29 @@ const { results } = useFuse(searchText, () => contactList.value || [], {
               <img
                 v-if="contact.photoURL"
                 :src="contact.photoURL"
-                class="rounded-full inline-block w-8"
+                class="search-avatar"
               />
               {{ contact.firstName }} {{ contact.lastName }}
             </RouterLink>
           </li>
-        </ul>
+        </ol>
       </div>
 
       <RouterView />
     </div>
   </main>
 </template>
+
+<style scoped>
+.search-avatar {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+}
+
+.contacts-search {
+  display: flex;
+  gap: 2rem;
+}
+</style>
diff --git a/playground/src/pages/contacts/[id].vue b/playground/src/pages/contacts/[id].vue
@@ -5,8 +5,9 @@ import { useRoute } from 'vue-router/auto'
 import { useQuery, useMutation } from '@pinia/colada'
 
 const route = useRoute('/contacts/[id]')
+
 const { data: contact } = useQuery({
-  key: () => 'contact/' + route.params.id,
+  key: () => ['contacts', route.params.id],
   fetcher: () => getContactById(route.params.id),
 })
 

diff --git a/playground/src/style.css b/playground/src/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/playground/tailwind.config.js b/playground/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}