adding full tailwind, adding google fonts;

some ui refactoring;
adding modal content WIP;

app.vue

@@ -1,10 +1,10 @@
 <template>
- <div class="min-h-screen bg-gray-800 text-slate-50">
+ <div class="min-h-screen bg-purple-950 bg-gray-800 text-slate-50">
  <header class="border-gray-200 px-4 lg:px-6 py-2.5">
  <div class="flex flex-wrap justify-between items-center mx-auto">
  <NuxtLink to="/boards">tarefas</NuxtLink>
  <div class="flex items-center justify-between">
- <button @click="toggleDark" class="p-2 mr-4">
+ <button v-if="false" @click="toggleDark" class="p-2 mr-4">
  <svg v-if="colorMode.preference === 'dark'" xmlns="http:https://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high-fill" viewBox="0 0 16 16">
  <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
  </svg>
@@ -29,11 +29,11 @@
 <script setup lang="ts">
 const client = useSupabaseClient()
 const user = useSupabaseUser()
-const colorMode = useColorMode()
+// const colorMode = useColorMode()
 
-const toggleDark = () => {
- colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-}
+// const toggleDark = () => {
+//  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+// }
 
 const logout = async () => {
  await client.auth.signOut()

assets/css/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/BadgeComponent.vue

@@ -0,0 +1,18 @@
+<template>
+ <div :class="`px-3 h-6 rounded-full text-xs font-semibold flex items-center bg-${badgeColor}-300 text-${badgeColor}-700`">
+ <span :class="`w-2 h-2 rounded-full mr-1 bg-${badgeColor}-400`"></span>
+ <span>
+ <slot></slot>
+ </span>
+ </div>
+</template>
+<script setup lang="ts">
+const column = defineProps<{
+ color: string;
+}>()
+
+// add a computed css classes
+const badgeColor = computed(() => {
+ return column.color
+})
+</script>

components/BoardColumnComponent.vue

@@ -1,20 +1,28 @@
 <template>
- <div class="bg-zinc-800 min-h-16 mr-4 w-full min-w-full md:min-w-0 md:w-1/4 lg:max-w-sm">
- <header class="flex items-center justify-between p-2 border-b border-gray-500 mb-4">
- <h3 class="font-medium">{{ name }} {{ id }}</h3>
-
- <button
- class="ml-3 text-red-200"
- @click="removeColumn(id)"
- >
- <svg xmlns="http:https://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
- <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
- <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
- </svg>
- </button>
+ <div class="rounded-lg bg-zinc-900 min-h-16 mr-4 w-full min-w-full md:min-w-0 md:w-1/4 lg:max-w-sm">
+ <header class="flex items-center justify-between px-4 py-3 pt-5 mb-0">
+ <!-- text-sm -->
+ <h3 class="text-gray-400 font-semibold font-sans tracking-wide">{{ name }}</h3>
+
+ <div class="actions">
+ <button @click="isShowNew = !isShowNew">
+ add task
+ </button>
+
+ <button
+ class="ml-3 text-red-200"
+ @click="removeColumn(id)"
+ >
+ <svg xmlns="http:https://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+ <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
+ <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
+ </svg>
+ </button>
+ </div>
+
  </header>
 
- <form class="flex px-2 gap-2 my-2" @submit.prevent="addTask">
+ <form v-if="isShowNew" class="flex px-2 gap-2 my-2" @submit.prevent="addTask">
  <input
  v-model="newTask"
  class="w-full bg-gray-700 px-3 py-2 outline-0"
@@ -28,11 +36,25 @@
 
  <!-- {{ drag }} -->
  <!-- v-if="todos.length > 0" -->
+ <badge-component color="red">
+ salve
+ </badge-component>
 
  <div body-class="px-6 py-2">
- <draggable style="min-height: 100vh" item-key="position" v-model="itemsDraggable" @start="drag=true" @end="drag=false" group="people">
+ <draggable :animation="200" ghost-class="ghost-card" style="height: 90vh; overflow-y: auto;" item-key="position" v-model="itemsDraggable" @start="drag=true" @end="drag=false" group="people">
  <template #item="{ element }">
- <div @click="toggleModal(element)" class="my-4 mx-2 p-2 bg-zinc-950">{{ element.task }}</div>
+ <div @click="toggleModal(element)" class="mt-3 mx-2 px-3 py-3 bg-zinc-800 rounded cursor-pointer shadow border border-black">
+ <p class="text-white break-words font-sans text-sm tracking-wide">{{ element.task }}</p>
+ <!-- font-semibold -->
+ <!-- text-sm -->
+
+ <div class="flex mt-4 justify-between items-center">
+ <span class="text-sm text-gray-600 truncate">{{ $dayjs(element.created_at).format('D MMM LT') }}</span>
+ </div>
+
+ <!-- numero de comentarios -->
+ <!-- numero de attachments -->
+ </div>
  </template>
  </draggable>
  <!-- <div class="flex items-center justify-between">
@@ -59,6 +81,7 @@
 <script setup lang="ts">
 import draggable from "vuedraggable";
 
+
 // set props
 const column = defineProps<{
  id: number,
@@ -77,6 +100,7 @@ import { Todo } from '~/types/todos'
 const client = useSupabaseClient()
 const user = useSupabaseUser()
 const loading = ref(false)
+const isShowNew = ref(false)
 const newTask = ref('')
 const route = useRoute()
 
@@ -216,4 +240,9 @@ async function removeColumn (boardColumnId: number) {
  background: #ccc;
  margin-bottom: 2rem;
 }
+.ghost-card {
+ opacity: 0.2;
+ /* background: #F7FAFC; */
+ border: 1px dashed #4299e1;
+}
 </style>

components/ModalComponent.vue

@@ -27,7 +27,7 @@
  leave-to-class="opacity-0 translate-y-10 translate-y-0 scale-95"
  >
  <div
- class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl p-8 w-1/2 outline-0"
+ class="relative bg-black text-white rounded-lg text-left overflow-hidden shadow-2xl shadow-gray-600 p-8 w-1/2 outline-0"
  role="dialog"
  ref="modal"
  aria-modal="true"

nuxt.config.ts

@@ -1,8 +1,28 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+ css: ['~/assets/css/main.css'],
  modules: [
  '@nuxtjs/supabase',
  '@nuxtjs/tailwindcss',
- '@nuxtjs/color-mode'
- ]
+ '@nuxtjs/google-fonts'
+ ],
+ googleFonts: {
+ families: {
+ Rubik: true,
+ Roboto: true,
+ Lato: true,
+ // 'Josefin+Sans': true,
+ // Lato: [100, 300],
+ // Raleway: {
+ // wght: [100, 400],
+ // ital: [100]
+ // },
+ }
+ },
+ postcss: {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+ }
 })

package.json

@@ -9,14 +9,17 @@
  "postinstall": "nuxt prepare"
  },
  "devDependencies": {
- "@nuxtjs/color-mode": "^3.2.0",
+ "@nuxtjs/google-fonts": "^3.0.0",
  "@nuxtjs/supabase": "^0.3.5",
  "@nuxtjs/tailwindcss": "^6.6.6",
  "@supabase/supabase-js": "^2.20.0",
- "nuxt": "^3.4.0"
+ "autoprefixer": "^10.4.14",
+ "nuxt": "^3.4.0",
+ "postcss": "^8.4.21"
  },
  "dependencies": {
  "@vueuse/components": "^9.13.0",
+ "dayjs": "^1.11.7",
  "vuedraggable": "^4.1.0"
  }
 }

pages/boards/[id].vue

@@ -1,18 +1,26 @@
 <template>
- <div class="w-full my-[50px]">
+ <div class="w-full my-4">
  <div class="flex items-center justify-between">
- <h1 class="mb-12 text-6xl font-bold u-text-white">
+ <h1 class="mb-4 text-6xl font-bold u-text-white">
  {{ board.name }}
  </h1>
- <button
- class="ml-3 text-red-600"
- @click="removeBoard(board)"
- >
- Delete Board
- </button>
+
+ <div>
+ <button
+ class="ml-3 text-red-600"
+ @click="removeBoard(board)"
+ >
+ Delete Board
+ </button>
+
+ <button @click="isShowNewColumn = !isShowNewColumn">
+ Add column
+ </button>
+ </div>
+
  </div>
 
- <form class="flex gap-2 my-2" @submit.prevent="addColumn">
+ <form v-if="isShowNewColumn" class="flex gap-2 my-2" @submit.prevent="addColumn">
  <input
  v-model="newColumn"
  class="w-full bg-gray-700 px-3 py-2 outline-0"
@@ -27,14 +35,25 @@
  </button>
  </form>
 
- <div v-if="board.board_columns.length > 0" class="mt-16 border-1 border-gray-50 flex overflow-x-auto">
+ <div v-if="board.board_columns.length > 0" class="mt-4 border-1 border-gray-50 flex overflow-x-scroll">
  <BoardColumnComponent @onTaskClicked="onTaskClicked" @refreshBoard="onRefreshBoard" v-for="column in board.board_columns" :key="column.id" v-bind="column" />
  </div>
 
  <ModalComponent :show="isShowModal" @onCloseModal="onCloseModal">
- <p class="mb-4">
+
+ <div class="flex mt-4 justify-between">
+ <h1>{{ modalTask.task }}</h1>
+ <p class="w-[100px]">#{{ modalTask.id }}</p>
+ </div>
+ <span class="text-sm text-gray-600 truncate">{{ $dayjs(modalTask.created_at).format('D MMM LT') }}</span>
+
+ <!-- <p>{{ modalTask.is_complete ? 'done' : '' }}</p> -->
+ <!-- <p>#{{ modalTask.position }}</p> -->
+ <!-- <p>#{{ modalTask.board_id }}</p> -->
+ <!-- <p>#{{ modalTask.board_column_id }}</p> -->
+ <!-- <p class="mb-4">
  {{ modalTask }}
- </p>
+ </p> -->
  </ModalComponent>
  </div>
 </template>
@@ -48,7 +67,17 @@ definePageMeta({
 })
 
 const isShowModal = ref(false)
-const modalTask = ref()
+const isShowNewColumn = ref(false)
+const modalTask = ref({
+ id: 0,
+ task: '',
+ is_complete: false,
+ position: 0,
+ board_id: 0,
+ board_column_id: 0,
+ created_at: '',
+ updated_at: ''
+})
 
 async function onCloseModal () {
  isShowModal.value = false

plugins/dayjs.ts

@@ -0,0 +1,22 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime.js'
+import LocalizedFormat from 'dayjs/plugin/localizedFormat.js'
+import ptbr from 'dayjs/locale/pt-br.js'
+
+
+export default defineNuxtPlugin((nuxtApp) => {
+ dayjs.extend(LocalizedFormat)
+ dayjs.extend(relativeTime)
+ dayjs.locale(ptbr)
+ nuxtApp.provide('dayjs', dayjs)
+})
+// declare module '#app' {
+// interface NuxtApp {
+// $dayjs: dayjs.Dayjs
+// }
+// }
+// declare module '@vue/runtime-core' {
+// interface ComponentCustomProperties {
+// $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
+// }
+// }

tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./components/**/*.{js,vue,ts}",
+ "./layouts/**/*.vue",
+ "./pages/**/*.vue",
+ "./plugins/**/*.{js,ts}",
+ "./nuxt.config.{js,ts}",
+ "./app.vue",
+ ],
+ theme: {
+ extend: {
+ fontFamily: {
+ 'sans': ['Rubik', 'ui-sans-serif', 'system-ui'],
+ 'serif': ['Rubik', 'ui-sans-serif', 'system-ui'],
+ 'body': ['Rubik', 'ui-sans-serif', 'system-ui'],
+ // 'serif': ['ui-serif', 'Georgia', ...],
+ // 'mono': ['ui-monospace', 'SFMono-Regular', ...],
+ // 'display': ['Oswald', ...],
+ // 'body': ['"Open Sans"', ...],
+ }
+ },
+ },
+ plugins: [],
+}