├── .github
    └── FUNDING.yml
├── .browserslistrc
├── .babelrc.json
├── dashboard.png
├── dashboard2.png
├── public
    ├── fav.ico
    └── index.html
├── src
    ├── components
    │   ├── EmptyLayout.vue
    │   ├── charts
    │   │   ├── DonutChart.vue
    │   │   ├── AreaChart.vue
    │   │   ├── BarChart.vue
    │   │   └── LineChart.vue
    │   ├── AppFooter.vue
    │   ├── DashboardLayout.vue
    │   ├── AppSidebar.vue
    │   └── AppHeader.vue
    ├── assets
    │   └── tailwind.css
    ├── hooks
    │   ├── useSidebar.ts
    │   └── useTableData.ts
    ├── shims-vue.d.ts
    ├── views
    │   ├── BlankView.vue
    │   ├── ChartView.vue
    │   ├── NotFound.vue
    │   ├── AppModal.vue
    │   ├── CardView.vue
    │   ├── AppLogin.vue
    │   ├── AppForms.vue
    │   ├── UIElements.vue
    │   ├── AppDashboard.vue
    │   └── AppTables.vue
    ├── App.vue
    ├── main.ts
    ├── partials
    │   ├── AppBreadcrumb.vue
    │   └── AppBanner.vue
    └── router
    │   └── index.ts
├── postcss.config.js
├── vue.config.js
├── .editorconfig
├── .gitignore
├── README.md
├── .eslintrc.js
├── tsconfig.json
├── package.json
└── tailwind.config.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: tal7aouy
2 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/.babelrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@vue/cli-plugin-babel/preset"]
3 | }
4 | 


--------------------------------------------------------------------------------
/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhajman/vue-board/HEAD/dashboard.png


--------------------------------------------------------------------------------
/dashboard2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhajman/vue-board/HEAD/dashboard2.png


--------------------------------------------------------------------------------
/public/fav.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhajman/vue-board/HEAD/public/fav.ico


--------------------------------------------------------------------------------
/src/components/EmptyLayout.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {}
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/hooks/useSidebar.ts:
--------------------------------------------------------------------------------
 1 | import { ref } from "vue";
 2 | 
 3 | const isOpen = ref(false)
 4 | 
 5 | export function useSidebar() {
 6 |   return {
 7 |     isOpen
 8 |   };
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = false
9 | insert_final_newline = false


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/views/BlankView.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <!-- Breadcrumb -->
3 |   <Breadcrumb breadcrumb="Blank" />
4 | </template>
5 | <script lang="ts" setup>
6 | import Breadcrumb from '../partials/AppBreadcrumb.vue'
7 | </script>
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/components/charts/DonutChart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <apexchart
 4 |       width="380"
 5 |       type="donut"
 6 |       :options="options"
 7 |       :series="series"
 8 |     ></apexchart>
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 | import { ref } from "vue";
14 | const options = ref({});
15 | const series = ref([44, 55, 41, 17, 15]);
16 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueBoard
 2 | 
 3 | Dashboard starter template built Vue 3, Tailwind CSS and TypeScript.
 4 | 
 5 | ![Dashboard](./dashboard.png)
 6 | ![Dashboard](./dashboard2.png)
 7 | 
 8 | ## Usage
 9 | 
10 | ```bash
11 | # Install dependencies
12 | $ npm install
13 | 
14 | # Compiles and hot-reloads for development
15 | $ npm run serve
16 | 
17 | # Compiles and minifies for production
18 | $ npm run build
19 | ```
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component :is="layout">
 3 |     <router-view />
 4 |   </component>
 5 | </template>
 6 | <script lang="ts" setup>
 7 | import { computed } from 'vue'
 8 | import { useRouter } from 'vue-router'
 9 | 
10 | const defaultLayout = 'default'
11 | 
12 | const { currentRoute } = useRouter()
13 | 
14 | const layout = computed(
15 |   () => `${currentRoute.value.meta.layout || defaultLayout}-layout`
16 | )
17 | </script>
18 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/typescript/recommended",
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020,
13 |   },
14 |   rules: {
15 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
16 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
17 |   },
18 | };
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import VueApexCharts from "vue3-apexcharts";
 3 | import DashboardLayout from "./components/DashboardLayout.vue";
 4 | import EmptyLayout from "./components/EmptyLayout.vue";
 5 | import "./assets/tailwind.css";
 6 | 
 7 | import App from "./App.vue";
 8 | import router from "./router";
 9 | const app = createApp(App);
10 | app.component("default-layout", DashboardLayout);
11 | app.component("empty-layout", EmptyLayout);
12 | 
13 | app.use(router).use(VueApexCharts).mount("#app");
14 | 


--------------------------------------------------------------------------------
/src/components/charts/AreaChart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <apexchart
 4 |       width="500"
 5 |       type="area"
 6 |       :options="options"
 7 |       :series="series"
 8 |     ></apexchart>
 9 |   </div>
10 | </template>
11 | <script lang="ts" setup>
12 | import { ref } from "vue";
13 | const options = ref({
14 |   chart: {
15 |     id: "vuechart-example",
16 |   },
17 |   xaxis: {
18 |     categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
19 |   },
20 | });
21 | const series = ref([
22 |   {
23 |     name: "series-1",
24 |     data: [30, 40, 45, 50, 49, 60, 70, 91],
25 |   },
26 | ]);
27 | </script>


--------------------------------------------------------------------------------
/src/components/charts/BarChart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <apexchart
 4 |       width="500"
 5 |       type="bar"
 6 |       :options="options"
 7 |       :series="series"
 8 |     ></apexchart>
 9 |   </div>
10 | </template>
11 | <script lang="ts" setup>
12 | import { ref } from "vue";
13 | const options = ref({
14 |   chart: {
15 |     id: "vuechart-example",
16 |   },
17 |   xaxis: {
18 |     categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
19 |   },
20 | });
21 | const series = ref([
22 |   {
23 |     name: "series-1",
24 |     data: [30, 40, 45, 50, 49, 60, 70, 91],
25 |   },
26 | ]);
27 | </script>


--------------------------------------------------------------------------------
/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full border-t-2 px-8 py-3 lg:flex justify-between items-center">
 3 |     <p class="mb-2 lg:mb-0">© Copyright {{ currentYear }}</p>
 4 | 
 5 |     <div class="flex">
 6 |       <a href="#" class="mr-6 hover:text-gray-900">Terms of Service</a>
 7 |       <a href="#" class="mr-6 hover:text-gray-900">Privacy Policy</a>
 8 |       <a href="#" class="hover:text-gray-900">About Us</a>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts" setup>
14 | import { ref } from "vue";
15 | 
16 | const currentYear = ref<number>(new Date().getFullYear());
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/components/charts/LineChart.vue:
--------------------------------------------------------------------------------
 1 |  <template>
 2 |   <div>
 3 |     <apexchart
 4 |       width="500"
 5 |       type="line"
 6 |       :options="options"
 7 |       :series="series"
 8 |     ></apexchart>
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 | import { ref } from "vue";
14 | const options = ref({
15 |   chart: {
16 |     id: "vuechart-example",
17 |   },
18 |   xaxis: {
19 |     categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
20 |   },
21 | });
22 | const series = ref([
23 |   {
24 |     type: "line",
25 |     name: "chart-1",
26 |     data: [30, 40, 45, 50, 49, 60, 70, 91],
27 |   },
28 | ]);
29 | </script>


--------------------------------------------------------------------------------
/src/components/DashboardLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex h-screen bg-gray-200 font-roboto">
 3 |     <Sidebar />
 4 | 
 5 |     <div class="flex-1 flex flex-col overflow-hidden">
 6 |       <Header />
 7 | 
 8 |       <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
 9 |         <div class="container mx-auto px-6 py-8">
10 |           <slot />
11 |         </div>
12 |       </main>
13 |       <Footer />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script setup lang="ts">
19 | import Sidebar from './AppSidebar.vue'
20 | import Header from './AppHeader.vue'
21 | import Footer from './AppFooter.vue'
22 | </script>
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>fav.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "moduleResolution": "node",
 8 |     "experimentalDecorators": true,
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "useDefineForClassFields": true,
14 |     "sourceMap": true,
15 |     "baseUrl": ".",
16 |     "types": [
17 |       "webpack-env"
18 |     ],
19 |     "paths": {
20 |       "@/*": [
21 |         "src/*"
22 |       ]
23 |     },
24 |     "lib": [
25 |       "esnext",
26 |       "dom",
27 |       "dom.iterable",
28 |       "scripthost"
29 |     ]
30 |   },
31 |   "include": [
32 |     "src/**/*.ts",
33 |     "src/**/*.tsx",
34 |     "src/**/*.vue",
35 |     "tests/**/*.ts",
36 |     "tests/**/*.tsx"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/src/views/ChartView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- Breadcrumb -->
 4 |     <Breadcrumb breadcrumb="charts" />
 5 | 
 6 |     <div class="mt-4">
 7 |       <h4 class="text-gray-600">Charts</h4>
 8 | 
 9 |       <div class="mt-6">
10 |         <div
11 |           class="
12 |             my-6
13 |             overflow-hidden
14 |             bg-white
15 |             rounded-md
16 |             shadow
17 |             grid grid-cols-2
18 |             gap-3
19 |           "
20 |         >
21 |           <LineChart />
22 |           <DonutChart />
23 |           <BarChart />
24 |           <AreaChart />
25 |         </div>
26 |       </div>
27 |     </div>
28 |   </div>
29 | </template>
30 | 
31 | <script setup lang="ts">
32 | import Breadcrumb from "../partials/AppBreadcrumb.vue";
33 | import DonutChart from "@/components/charts/DonutChart.vue";
34 | import LineChart from "@/components/charts/LineChart.vue";
35 | import BarChart from "../components/charts/BarChart.vue";
36 | import AreaChart from "../components/charts/AreaChart.vue";
37 | </script>
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dashboard-vue",
 3 |   "version": "1.2.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "autoprefixer": "^10",
12 |     "core-js": "^3.8.3",
13 |     "postcss": "^8",
14 |     "tailwindcss": "^3",
15 |     "vue": "^3.2.13",
16 |     "vue-class-component": "^8.0.0-0",
17 |     "vue-router": "^4.0.3",
18 |     "vue3-apexcharts": "^1.4.1"
19 |   },
20 |   "devDependencies": {
21 |     "@typescript-eslint/eslint-plugin": "^5.4.0",
22 |     "@typescript-eslint/parser": "^5.4.0",
23 |     "@vue/cli-plugin-babel": "~5.0.0",
24 |     "@vue/cli-plugin-eslint": "~5.0.0",
25 |     "@vue/cli-plugin-router": "~5.0.0",
26 |     "@vue/cli-plugin-typescript": "~5.0.0",
27 |     "@vue/cli-service": "~5.0.0",
28 |     "@vue/eslint-config-typescript": "^9.1.0",
29 |     "eslint": "^7.32.0",
30 |     "eslint-plugin-vue": "^8.0.3",
31 |     "typescript": "~4.5.5",
32 |     "vue-cli-plugin-tailwind": "~3.0.0"
33 |   }
34 | }


--------------------------------------------------------------------------------
/src/partials/AppBreadcrumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
 3 |     <ol class="list-none p-0 inline-flex">
 4 |       <li class="flex items-center text-purple">
 5 |         <a href="/dashboard" class="text-gray-500">Dashboard</a>
 6 |         <svg
 7 |           class="fill-current w-3 h-3 mx-3 text-blue-600"
 8 |           xmlns="http://www.w3.org/2000/svg"
 9 |           viewBox="0 0 320 512"
10 |         >
11 |           <path
12 |             d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
13 |           />
14 |         </svg>
15 |       </li>
16 |       <li :key="index" class="flex items-center">
17 |         <a :href="'/' + breadcrumb" class="text-gray-600">{{
18 |           breadcrumbName
19 |         }}</a>
20 |       </li>
21 |     </ol>
22 |   </nav>
23 | </template>
24 | <script lang="ts" setup>
25 | import { defineProps, computed } from 'vue'
26 | const props = defineProps<{ breadcrumb: string }>()
27 | const breadcrumbName = computed(() => {
28 |   return props.breadcrumb.toUpperCase()
29 | })
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/partials/AppBanner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-show="open"
 4 |     class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60"
 5 |   >
 6 |     <div
 7 |       class="
 8 |         bg-gray-800
 9 |         text-gray-50 text-sm
10 |         p-3
11 |         md:rounded
12 |         shadow-lg
13 |         flex
14 |         justify-between
15 |       "
16 |     >
17 |       <div>
18 |         👉
19 |         <a
20 |           class="hover:underline"
21 |           href="https://github.com/tal7aouy/vue-board"
22 |           target="_blank"
23 |           rel="noreferrer"
24 |           >Star VueBoard on GitHub</a
25 |         >
26 |       </div>
27 |       <button
28 |         class="text-gray-500 hover:text-gray-400 ml-5"
29 |         @click="open = false"
30 |       >
31 |         <span class="sr-only">Close</span>
32 |         <svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
33 |           <path
34 |             d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z"
35 |           />
36 |         </svg>
37 |       </button>
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <script lang="ts" setup>
43 | import { ref } from "vue";
44 | const open = ref(true);
45 | </script>
46 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 2 | import Dashboard from "../views/AppDashboard.vue";
 3 | import Forms from "../views/AppForms.vue";
 4 | import Tables from "../views/AppTables.vue";
 5 | import UIElements from "../views/UIElements.vue";
 6 | import Login from "../views/AppLogin.vue";
 7 | import Modal from "../views/AppModal.vue";
 8 | import Chart from "../views/ChartView.vue";
 9 | import Card from "../views/CardView.vue";
10 | import Blank from "../views/BlankView.vue";
11 | import NotFound from "../views/NotFound.vue";
12 | 
13 | const routes: Array<RouteRecordRaw> = [
14 |   {
15 |     path: "/",
16 |     name: "Login",
17 |     component: Login,
18 |     meta: { layout: "empty" },
19 |   },
20 |   {
21 |     path: "/dashboard",
22 |     name: "Dashboard",
23 |     component: Dashboard,
24 |   },
25 |   {
26 |     path: "/forms",
27 |     name: "Forms",
28 |     component: Forms,
29 |   },
30 |   {
31 |     path: "/cards",
32 |     name: "Cards",
33 |     component: Card,
34 |   },
35 |   {
36 |     path: "/tables",
37 |     name: "Tables",
38 |     component: Tables,
39 |   },
40 |   {
41 |     path: "/ui-elements",
42 |     name: "UIElements",
43 |     component: UIElements,
44 |   },
45 |   {
46 |     path: "/modal",
47 |     name: "Modal",
48 |     component: Modal,
49 |   },
50 |   {
51 |     path: "/charts",
52 |     name: "Chart",
53 |     component: Chart,
54 |   },
55 |   {
56 |     path: "/blank",
57 |     name: "Blank",
58 |     component: Blank,
59 |   },
60 |   { path: "/:pathMatch(.*)*", component: NotFound },
61 | ];
62 | 
63 | const router = createRouter({
64 |   history: createWebHistory(process.env.BASE_URL),
65 |   routes,
66 | });
67 | 
68 | export default router;
69 | 


--------------------------------------------------------------------------------
/src/views/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="w-9/12 m-auto py-16 min-h-screen flex items-center justify-center"
 4 |   >
 5 |     <div class="bg-white shadow overflow-hidden sm:rounded-lg pb-8">
 6 |       <div class="border-t border-gray-200 text-center pt-8">
 7 |         <h1 class="text-9xl font-bold text-purple-400">404</h1>
 8 |         <h1 class="text-6xl font-medium py-8">oops! Page not found</h1>
 9 |         <p class="text-2xl pb-8 px-12 font-medium">
10 |           Oops! The page you are looking for does not exist. It might have been
11 |           moved or deleted.
12 |         </p>
13 |         <router-link
14 |           to="/dashboard"
15 |           class="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 text-white font-semibold px-6 py-2 rounded-md mr-6"
16 |         >
17 |           HOME
18 |         </router-link>
19 |         <router-link
20 |           to="/"
21 |           class="bg-gradient-to-r from-red-400 to-red-500 hover:from-red-500 hover:to-red-500 text-white font-semibold px-6 py-2 rounded-md"
22 |         >
23 |           Contact Us
24 |         </router-link>
25 |       </div>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script lang="ts" setup></script>
31 | 
32 | <style>
33 | .text-9xl {
34 |   font-size: 14rem;
35 | }
36 | @media (max-width: 645px) {
37 |   .text-9xl {
38 |     font-size: 5.75rem;
39 |   }
40 |   .text-6xl {
41 |     font-size: 1.75rem;
42 |   }
43 |   .text-2xl {
44 |     font-size: 1rem;
45 |     line-height: 1.2rem;
46 |   }
47 |   .py-8 {
48 |     padding-top: 1rem;
49 |     padding-bottom: 1rem;
50 |   }
51 |   .px-6 {
52 |     padding-left: 1.2rem;
53 |     padding-right: 1.2rem;
54 |   }
55 |   .mr-6 {
56 |     margin-right: 0.5rem;
57 |   }
58 |   .px-12 {
59 |     padding-left: 1rem;
60 |     padding-right: 1rem;
61 |   }
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/hooks/useTableData.ts:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue';
 2 | 
 3 | export interface ISimpleTableData {
 4 |   city: string;
 5 |   totalOrders: string;
 6 | }
 7 | 
 8 | export interface IPaginatedTableData {
 9 |   picture: string;
10 |   name: string;
11 |   role: string;
12 |   created: string;
13 |   status: string;
14 |   statusColor: string;
15 | }
16 | 
17 | export interface IWideTableData {
18 |   name: string;
19 |   email: string;
20 |   title: string;
21 |   title2: string;
22 |   status: string;
23 |   role: string;
24 | }
25 | 
26 | export function useTableData() {
27 |   const simpleTableData = ref<ISimpleTableData[]>([
28 |     { city: 'New York', totalOrders: '200,120' },
29 |     { city: 'Manchester', totalOrders: '632,310' },
30 |     { city: 'London', totalOrders: '451,110' },
31 |     { city: 'Madrid', totalOrders: '132,524' },
32 |   ]);
33 | 
34 |   const paginatedTableData = ref<IPaginatedTableData[]>([
35 |     {
36 |       picture:
37 |         'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80',
38 |       name: 'Vera Carpenter',
39 |       role: 'Admin',
40 |       created: 'Jan 21, 2020',
41 |       status: 'Active',
42 |       statusColor: 'green',
43 |     },
44 |     {
45 |       picture:
46 |         'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80',
47 |       name: 'Blake Bowman',
48 |       role: 'Editor',
49 |       created: 'Jan 01, 2020',
50 |       status: 'Active',
51 |       statusColor: 'green',
52 |     },
53 |     {
54 |       picture:
55 |         'https://images.unsplash.com/photo-1540845511934-7721dd7adec3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80',
56 |       name: 'Dana Moore',
57 |       role: 'Editor',
58 |       created: 'Jan 10, 2020',
59 |       status: 'Suspended',
60 |       statusColor: 'orange',
61 |     },
62 |     {
63 |       picture:
64 |         'https://images.unsplash.com/photo-1522609925277-66fea332c575?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&h=160&w=160&q=80',
65 |       name: 'Alonzo Cox',
66 |       role: 'Admin',
67 |       created: 'Jan 18, 2020',
68 |       status: 'Inactive',
69 |       statusColor: 'red',
70 |     },
71 |   ]);
72 | 
73 |   const wideTableData = ref<IWideTableData[]>(
74 |     [...Array(10).keys()].map(() => ({
75 |       name: 'John Doe',
76 |       email: 'john@example.com',
77 |       title: 'Software Engineer',
78 |       title2: 'Web dev',
79 |       status: 'Active',
80 |       role: 'Owner',
81 |     }))
82 |   );
83 | 
84 |   return {
85 |     simpleTableData,
86 |     paginatedTableData,
87 |     wideTableData,
88 |   };
89 | }
90 | 


--------------------------------------------------------------------------------
/src/views/AppModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- Breadcrumb -->
  4 |     <Breadcrumb breadcrumb="Modal" />
  5 |     <button
  6 |       @click="open = true"
  7 |       class="px-6 py-2 mt-3 font-medium tracking-wide text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none"
  8 |     >
  9 |       Open Modal
 10 |     </button>
 11 | 
 12 |     <div
 13 |       :class="`modal ${
 14 |         !open && 'opacity-0 pointer-events-none'
 15 |       } z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center`"
 16 |     >
 17 |       <div
 18 |         @click="open = false"
 19 |         class="absolute w-full h-full bg-gray-900 opacity-50 modal-overlay"
 20 |       ></div>
 21 | 
 22 |       <div
 23 |         class="z-50 w-11/12 mx-auto overflow-y-auto bg-white rounded shadow-lg modal-container md:max-w-md"
 24 |       >
 25 |         <div
 26 |           class="absolute top-0 right-0 z-50 flex flex-col items-center mt-4 mr-4 text-sm text-white cursor-pointer modal-close"
 27 |         >
 28 |           <svg
 29 |             class="text-white fill-current"
 30 |             xmlns="http://www.w3.org/2000/svg"
 31 |             width="18"
 32 |             height="18"
 33 |             viewBox="0 0 18 18"
 34 |           >
 35 |             <path
 36 |               d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
 37 |             />
 38 |           </svg>
 39 |           <span class="text-sm">(Esc)</span>
 40 |         </div>
 41 | 
 42 |         <!-- Add margin if you want to see some of the overlay behind the modal-->
 43 |         <div class="px-6 py-4 text-left modal-content">
 44 |           <!--Title-->
 45 |           <div class="flex items-center justify-between pb-3">
 46 |             <p class="text-2xl font-bold">Modal Title</p>
 47 |             <div class="z-50 cursor-pointer modal-close" @click="open = false">
 48 |               <svg
 49 |                 class="text-black fill-current"
 50 |                 xmlns="http://www.w3.org/2000/svg"
 51 |                 width="18"
 52 |                 height="18"
 53 |                 viewBox="0 0 18 18"
 54 |               >
 55 |                 <path
 56 |                   d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
 57 |                 />
 58 |               </svg>
 59 |             </div>
 60 |           </div>
 61 | 
 62 |           <!--Body-->
 63 |           <p>
 64 |             Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
 65 |             asperiores sint necessitatibus aspernatur laborum quod ad quibusdam
 66 |             voluptate aliquid molestiae! Cumque voluptatem sint eum, quibusdam
 67 |             cupiditate vero quis. Praesentium, et!
 68 |           </p>
 69 | 
 70 |           <!--Footer-->
 71 |           <div class="flex justify-end pt-2">
 72 |             <button
 73 |               @click="open = false"
 74 |               class="p-3 px-6 py-3 mr-2 text-indigo-500 bg-transparent rounded-lg hover:bg-gray-100 hover:text-indigo-400 focus:outline-none"
 75 |             >
 76 |               Close
 77 |             </button>
 78 |             <button
 79 |               @click="open = false"
 80 |               class="px-6 py-3 font-medium tracking-wide text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none"
 81 |             >
 82 |               Action
 83 |             </button>
 84 |           </div>
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 |   </div>
 89 | </template>
 90 | 
 91 | <script setup lang="ts">
 92 | import { ref } from 'vue'
 93 | import Breadcrumb from '../partials/AppBreadcrumb.vue'
 94 | 
 95 | const open = ref(false)
 96 | </script>
 97 | 
 98 | <style>
 99 | .modal {
100 |   transition: opacity 0.25s ease;
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/views/CardView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- Breadcrumb -->
 4 |     <Breadcrumb breadcrumb="Cards" />
 5 |     <div class="mt-4 mb-3">
 6 |       <h4 class="text-gray-700">Stacked</h4>
 7 | 
 8 |       <div class="max-w-sm mt-6 overflow-hidden bg-white rounded shadow-lg">
 9 |         <img
10 |           class="w-full"
11 |           src="https://picsum.photos/id/1016/384/234"
12 |           alt="Sunset in the mountains"
13 |         />
14 |         <div class="px-6 py-4">
15 |           <div class="mb-2 text-xl font-bold text-gray-900">
16 |             The Coldest Sunset
17 |           </div>
18 |           <p class="text-base text-gray-700">
19 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
20 |             Voluptatibus quia, nulla! Maiores et perferendis eaque,
21 |             exercitationem praesentium nihil.
22 |           </p>
23 |         </div>
24 |         <div class="px-6 pt-4 pb-2">
25 |           <span
26 |             class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
27 |             >#photography</span
28 |           >
29 |           <span
30 |             class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
31 |             >#travel</span
32 |           >
33 |           <span
34 |             class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
35 |             >#winter</span
36 |           >
37 |         </div>
38 |       </div>
39 |     </div>
40 |     <hr />
41 |     <div class="mt-5">
42 |       <h4 class="text-gray-700">Horizontal</h4>
43 |       <div class="w-full max-w-sm mt-6 lg:max-w-full lg:flex">
44 |         <div
45 |           class="flex-none h-48 overflow-hidden text-center bg-cover rounded-t lg:h-auto lg:w-48 lg:rounded-t-none lg:rounded-l"
46 |           style="background-image: url('https://picsum.photos/id/0/192/213')"
47 |           title="Woman holding a mug"
48 |         ></div>
49 |         <div
50 |           class="flex flex-col justify-between p-4 leading-normal bg-white border-b border-l border-r border-gray-200 rounded-b lg:border-l-0 lg:border-t lg:border-gray-200 lg:rounded-b-none lg:rounded-r"
51 |         >
52 |           <div class="mb-8">
53 |             <p class="flex items-center text-sm text-gray-600">
54 |               <svg
55 |                 class="w-3 h-3 mr-2 text-gray-500 fill-current"
56 |                 xmlns="http://www.w3.org/2000/svg"
57 |                 viewBox="0 0 20 20"
58 |               >
59 |                 <path
60 |                   d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"
61 |                 />
62 |               </svg>
63 |               Members only
64 |             </p>
65 |             <div class="mb-2 text-xl font-bold text-gray-900">
66 |               Can coffee make you a better developer?
67 |             </div>
68 |             <p class="text-base text-gray-700">
69 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
70 |               Voluptatibus quia, nulla! Maiores et perferendis eaque,
71 |               exercitationem praesentium nihil.
72 |             </p>
73 |           </div>
74 |           <div class="flex items-center">
75 |             <img
76 |               class="w-10 h-10 mr-4 rounded-full"
77 |               src="https://via.placeholder.com/50"
78 |               alt="Avatar of Jonathan Reinink"
79 |             />
80 |             <div class="text-sm">
81 |               <p class="leading-none text-gray-900">Jonathan Reinink</p>
82 |               <p class="text-gray-600">Aug 18</p>
83 |             </div>
84 |           </div>
85 |         </div>
86 |       </div>
87 |     </div>
88 |   </div>
89 | </template>
90 | <script lang="ts" setup>
91 | import Breadcrumb from '../partials/AppBreadcrumb.vue'
92 | </script>
93 | 


--------------------------------------------------------------------------------
/src/views/AppLogin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex items-center justify-center h-screen px-6 bg-gray-200">
  3 |     <div class="w-full max-w-sm p-6 bg-white rounded-md shadow-md">
  4 |       <div class="flex items-center justify-center">
  5 |         <svg
  6 |           class="w-8 h-8 ml-2 text-blue-500"
  7 |           fill="none"
  8 |           stroke="currentColor"
  9 |           viewBox="0 0 24 24"
 10 |           xmlns="http://www.w3.org/2000/svg"
 11 |         >
 12 |           <path
 13 |             stroke-linecap="round"
 14 |             stroke-linejoin="round"
 15 |             stroke-width="2"
 16 |             d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
 17 |           ></path>
 18 |         </svg>
 19 |         <span class="text-2xl font-semibold text-gray-700">VueBoard</span>
 20 |       </div>
 21 | 
 22 |       <form class="mt-4" @submit.prevent="login">
 23 |         <label class="block">
 24 |           <span class="text-sm text-gray-700">Email</span>
 25 |           <input
 26 |             type="email"
 27 |             class="
 28 |               block
 29 |               w-full
 30 |               mt-1
 31 |               border-gray-200
 32 |               rounded-md
 33 |               focus:border-indigo-600
 34 |               focus:ring
 35 |               focus:ring-opacity-40
 36 |               focus:ring-indigo-500
 37 |             "
 38 |             v-model="email"
 39 |           />
 40 |         </label>
 41 | 
 42 |         <label class="block mt-3">
 43 |           <span class="text-sm text-gray-700">Password</span>
 44 |           <input
 45 |             type="password"
 46 |             class="
 47 |               block
 48 |               w-full
 49 |               mt-1
 50 |               border-gray-200
 51 |               rounded-md
 52 |               focus:border-indigo-600
 53 |               focus:ring
 54 |               focus:ring-opacity-40
 55 |               focus:ring-indigo-500
 56 |             "
 57 |             v-model="password"
 58 |           />
 59 |         </label>
 60 | 
 61 |         <div class="flex items-center justify-between mt-4">
 62 |           <div>
 63 |             <label class="inline-flex items-center">
 64 |               <input
 65 |                 type="checkbox"
 66 |                 class="
 67 |                   text-indigo-600
 68 |                   border-gray-200
 69 |                   rounded-md
 70 |                   focus:border-indigo-600
 71 |                   focus:ring
 72 |                   focus:ring-opacity-40
 73 |                   focus:ring-indigo-500
 74 |                 "
 75 |               />
 76 |               <span class="mx-2 text-sm text-gray-600">Remember me</span>
 77 |             </label>
 78 |           </div>
 79 | 
 80 |           <div>
 81 |             <a
 82 |               class="block text-sm text-indigo-700 fontme hover:underline"
 83 |               href="#"
 84 |               >Forgot your password?</a
 85 |             >
 86 |           </div>
 87 |         </div>
 88 | 
 89 |         <div class="mt-6">
 90 |           <button
 91 |             type="submit"
 92 |             class="
 93 |               w-full
 94 |               px-4
 95 |               py-2
 96 |               text-sm text-center text-white
 97 |               bg-indigo-600
 98 |               rounded-md
 99 |               focus:outline-none
100 |               hover:bg-indigo-500
101 |             "
102 |           >
103 |             Sign in
104 |           </button>
105 |         </div>
106 |       </form>
107 |     </div>
108 |   </div>
109 | </template>
110 | 
111 | <script setup lang="ts">
112 | import { ref } from "vue";
113 | import { useRouter } from "vue-router";
114 | 
115 | const router = useRouter();
116 | const email = ref("johndoe@mail.com");
117 | const password = ref("@#!@#asdf1231!_!@#");
118 | 
119 | function login() {
120 |   router.push("/dashboard");
121 | }
122 | </script>
123 | 


--------------------------------------------------------------------------------
/src/views/AppForms.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- Breadcrumb -->
  4 |     <Breadcrumb breadcrumb="Forms" />
  5 | 
  6 |     <div class="mt-4">
  7 |       <h4 class="text-gray-600">Model Form</h4>
  8 | 
  9 |       <div class="mt-4">
 10 |         <div
 11 |           class="w-full max-w-sm overflow-hidden bg-white border rounded-md shadow-md"
 12 |         >
 13 |           <form>
 14 |             <div
 15 |               class="flex items-center justify-between px-5 py-3 text-gray-700 border-b"
 16 |             >
 17 |               <h3 class="text-sm">Add Category</h3>
 18 |               <button>
 19 |                 <svg
 20 |                   class="w-4 h-4"
 21 |                   fill="none"
 22 |                   viewBox="0 0 24 24"
 23 |                   stroke="currentColor"
 24 |                 >
 25 |                   <path
 26 |                     stroke-linecap="round"
 27 |                     stroke-linejoin="round"
 28 |                     stroke-width="2"
 29 |                     d="M6 18L18 6M6 6l12 12"
 30 |                   />
 31 |                 </svg>
 32 |               </button>
 33 |             </div>
 34 | 
 35 |             <div class="px-5 py-6 text-gray-700 bg-gray-200 border-b">
 36 |               <label class="text-xs">Name</label>
 37 | 
 38 |               <div class="relative mt-2 rounded-md shadow-sm">
 39 |                 <span
 40 |                   class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600"
 41 |                 >
 42 |                   <svg
 43 |                     class="w-6 h-6"
 44 |                     fill="none"
 45 |                     viewBox="0 0 24 24"
 46 |                     stroke="currentColor"
 47 |                   >
 48 |                     <path
 49 |                       stroke-linecap="round"
 50 |                       stroke-linejoin="round"
 51 |                       stroke-width="2"
 52 |                       d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
 53 |                     />
 54 |                   </svg>
 55 |                 </span>
 56 | 
 57 |                 <input
 58 |                   type="text"
 59 |                   class="w-full px-12 py-2 border-transparent rounded-md appearance-none focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
 60 |                 />
 61 |               </div>
 62 |             </div>
 63 | 
 64 |             <div class="flex items-center justify-between px-5 py-3">
 65 |               <button
 66 |                 class="px-3 py-1 text-sm text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none"
 67 |               >
 68 |                 Cancel
 69 |               </button>
 70 |               <button
 71 |                 class="px-3 py-1 text-sm text-white bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none"
 72 |               >
 73 |                 Save
 74 |               </button>
 75 |             </div>
 76 |           </form>
 77 |         </div>
 78 |       </div>
 79 |     </div>
 80 | 
 81 |     <div class="mt-8">
 82 |       <h4 class="text-gray-600">Forms</h4>
 83 | 
 84 |       <div class="mt-4">
 85 |         <div class="p-6 bg-white rounded-md shadow-md">
 86 |           <h2 class="text-lg font-semibold text-gray-700 capitalize">
 87 |             Account settings
 88 |           </h2>
 89 | 
 90 |           <form @submit.prevent="register">
 91 |             <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
 92 |               <div>
 93 |                 <label class="text-gray-700" for="username">Username</label>
 94 |                 <input
 95 |                   class="w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
 96 |                   type="text"
 97 |                   v-model="user.username"
 98 |                 />
 99 |               </div>
100 | 
101 |               <div>
102 |                 <label class="text-gray-700" for="emailAddress"
103 |                   >Email Address</label
104 |                 >
105 |                 <input
106 |                   class="w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
107 |                   type="email"
108 |                   v-model="user.email"
109 |                 />
110 |               </div>
111 | 
112 |               <div>
113 |                 <label class="text-gray-700" for="password">Password</label>
114 |                 <input
115 |                   class="w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
116 |                   type="password"
117 |                   v-model="user.password"
118 |                 />
119 |               </div>
120 | 
121 |               <div>
122 |                 <label class="text-gray-700" for="passwordConfirmation"
123 |                   >Password Confirmation</label
124 |                 >
125 |                 <input
126 |                   class="w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
127 |                   type="password"
128 |                   v-model="user.confirm"
129 |                 />
130 |               </div>
131 |             </div>
132 | 
133 |             <div class="flex justify-end mt-4">
134 |               <button
135 |                 class="px-4 py-2 text-gray-200 bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700"
136 |               >
137 |                 Save
138 |               </button>
139 |             </div>
140 |           </form>
141 |         </div>
142 |       </div>
143 |     </div>
144 |   </div>
145 | </template>
146 | 
147 | <script setup lang="ts">
148 | import { ref } from 'vue'
149 | import Breadcrumb from '../partials/AppBreadcrumb.vue'
150 | 
151 | interface User {
152 |   username: string
153 |   email: string
154 |   password: string
155 |   confirm: string
156 | }
157 | 
158 | const user = ref<User>({
159 |   username: '',
160 |   email: '',
161 |   password: '',
162 |   confirm: '',
163 | })
164 | 
165 | const register = () => {
166 |   const data = JSON.parse(JSON.stringify(user.value))
167 |   console.log('Registered: ', data)
168 | }
169 | </script>
170 | 


--------------------------------------------------------------------------------
/src/components/AppSidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flex">
  3 |     <!-- Backdrop -->
  4 |     <div
  5 |       :class="isOpen ? 'block' : 'hidden'"
  6 |       @click="isOpen = false"
  7 |       class="
  8 |         fixed
  9 |         inset-0
 10 |         z-20
 11 |         transition-opacity
 12 |         bg-black
 13 |         opacity-50
 14 |         lg:hidden
 15 |       "
 16 |     ></div>
 17 |     <!-- End Backdrop -->
 18 | 
 19 |     <div
 20 |       :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
 21 |       class="
 22 |         fixed
 23 |         inset-y-0
 24 |         left-0
 25 |         z-30
 26 |         w-64
 27 |         overflow-y-auto
 28 |         transition
 29 |         duration-300
 30 |         transform
 31 |         bg-gray-900
 32 |         lg:translate-x-0 lg:static lg:inset-0
 33 |       "
 34 |     >
 35 |       <div class="flex items-center justify-center mt-8">
 36 |         <div class="flex items-center">
 37 |           <svg
 38 |             class="w-8 h-8 ml-2 text-blue-500"
 39 |             fill="none"
 40 |             stroke="currentColor"
 41 |             viewBox="0 0 24 24"
 42 |             xmlns="http://www.w3.org/2000/svg"
 43 |           >
 44 |             <path
 45 |               stroke-linecap="round"
 46 |               stroke-linejoin="round"
 47 |               stroke-width="2"
 48 |               d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
 49 |             ></path>
 50 |           </svg>
 51 | 
 52 |           <span class="mx-2 text-2xl font-semibold text-white">VueBoard</span>
 53 |         </div>
 54 |       </div>
 55 | 
 56 |       <nav class="mt-10">
 57 |         <p class="pl-4 text-xs font-semibold mb-4 text-gray-400">GENERAL</p>
 58 |         <router-link
 59 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
 60 |           :class="[$route.name === 'Dashboard' ? activeClass : inactiveClass]"
 61 |           to="/dashboard"
 62 |         >
 63 |           <svg
 64 |             class="w-5 h-5"
 65 |             fill="none"
 66 |             stroke="currentColor"
 67 |             viewBox="0 0 24 24"
 68 |             xmlns="http://www.w3.org/2000/svg"
 69 |           >
 70 |             <path
 71 |               stroke-linecap="round"
 72 |               stroke-linejoin="round"
 73 |               stroke-width="2"
 74 |               d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
 75 |             ></path>
 76 |           </svg>
 77 | 
 78 |           <span class="mx-4">Dashboard</span>
 79 |         </router-link>
 80 |         <p class="pl-4 my-2 text-xs font-semibold mb-4 text-gray-400">
 81 |           Examples
 82 |         </p>
 83 | 
 84 |         <router-link
 85 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
 86 |           :class="[$route.name === 'UIElements' ? activeClass : inactiveClass]"
 87 |           to="/ui-elements"
 88 |         >
 89 |           <svg
 90 |             class="w-5 h-5"
 91 |             viewBox="0 0 20 20"
 92 |             fill="none"
 93 |             xmlns="http://www.w3.org/2000/svg"
 94 |           >
 95 |             <path
 96 |               d="M5 3C3.89543 3 3 3.89543 3 5V7C3 8.10457 3.89543 9 5 9H7C8.10457 9 9 8.10457 9 7V5C9 3.89543 8.10457 3 7 3H5Z"
 97 |               fill="currentColor"
 98 |             />
 99 |             <path
100 |               d="M5 11C3.89543 11 3 11.8954 3 13V15C3 16.1046 3.89543 17 5 17H7C8.10457 17 9 16.1046 9 15V13C9 11.8954 8.10457 11 7 11H5Z"
101 |               fill="currentColor"
102 |             />
103 |             <path
104 |               d="M11 5C11 3.89543 11.8954 3 13 3H15C16.1046 3 17 3.89543 17 5V7C17 8.10457 16.1046 9 15 9H13C11.8954 9 11 8.10457 11 7V5Z"
105 |               fill="currentColor"
106 |             />
107 |             <path
108 |               d="M11 13C11 11.8954 11.8954 11 13 11H15C16.1046 11 17 11.8954 17 13V15C17 16.1046 16.1046 17 15 17H13C11.8954 17 11 16.1046 11 15V13Z"
109 |               fill="currentColor"
110 |             />
111 |           </svg>
112 | 
113 |           <span class="mx-4">UI Elements</span>
114 |         </router-link>
115 | 
116 |         <router-link
117 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
118 |           :class="[$route.name === 'Tables' ? activeClass : inactiveClass]"
119 |           to="/tables"
120 |         >
121 |           <svg
122 |             class="w-5 h-5"
123 |             viewBox="0 0 20 20"
124 |             fill="none"
125 |             xmlns="http://www.w3.org/2000/svg"
126 |           >
127 |             <path
128 |               d="M7 3C6.44772 3 6 3.44772 6 4C6 4.55228 6.44772 5 7 5H13C13.5523 5 14 4.55228 14 4C14 3.44772 13.5523 3 13 3H7Z"
129 |               fill="currentColor"
130 |             />
131 |             <path
132 |               d="M4 7C4 6.44772 4.44772 6 5 6H15C15.5523 6 16 6.44772 16 7C16 7.55228 15.5523 8 15 8H5C4.44772 8 4 7.55228 4 7Z"
133 |               fill="currentColor"
134 |             />
135 |             <path
136 |               d="M2 11C2 9.89543 2.89543 9 4 9H16C17.1046 9 18 9.89543 18 11V15C18 16.1046 17.1046 17 16 17H4C2.89543 17 2 16.1046 2 15V11Z"
137 |               fill="currentColor"
138 |             />
139 |           </svg>
140 | 
141 |           <span class="mx-4">Tables</span>
142 |         </router-link>
143 | 
144 |         <router-link
145 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
146 |           :class="[$route.name === 'Forms' ? activeClass : inactiveClass]"
147 |           to="/forms"
148 |         >
149 |           <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
150 |             <path
151 |               d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
152 |             />
153 |             <path
154 |               fill-rule="evenodd"
155 |               d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
156 |               clip-rule="evenodd"
157 |             />
158 |           </svg>
159 | 
160 |           <span class="mx-4">Forms</span>
161 |         </router-link>
162 | 
163 |         <router-link
164 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
165 |           :class="[$route.name === 'Cards' ? activeClass : inactiveClass]"
166 |           to="/cards"
167 |         >
168 |           <svg
169 |             xmlns="http://www.w3.org/2000/svg"
170 |             class="w-5 h-5"
171 |             viewBox="0 0 20 20"
172 |             fill="currentColor"
173 |           >
174 |             <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
175 |             <path
176 |               fill-rule="evenodd"
177 |               d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
178 |               clip-rule="evenodd"
179 |             />
180 |           </svg>
181 | 
182 |           <span class="mx-4">Cards</span>
183 |         </router-link>
184 | 
185 |         <router-link
186 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
187 |           :class="[$route.name === 'Modal' ? activeClass : inactiveClass]"
188 |           to="/modal"
189 |         >
190 |           <svg
191 |             xmlns="http://www.w3.org/2000/svg"
192 |             class="w-5 h-5"
193 |             viewBox="0 0 20 20"
194 |             fill="currentColor"
195 |           >
196 |             <path
197 |               d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"
198 |             />
199 |             <path
200 |               d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"
201 |             />
202 |             <path
203 |               d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"
204 |             />
205 |           </svg>
206 | 
207 |           <span class="mx-4">Modal</span>
208 |         </router-link>
209 |         <router-link
210 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
211 |           :class="[$route.name === 'Chart' ? activeClass : inactiveClass]"
212 |           to="/charts"
213 |         >
214 |           <svg
215 |             xmlns="http://www.w3.org/2000/svg"
216 |             class="h-5 w-5"
217 |             viewBox="0 0 20 20"
218 |             fill="currentColor"
219 |           >
220 |             <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
221 |             <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
222 |           </svg>
223 | 
224 |           <span class="mx-4">Charts</span>
225 |         </router-link>
226 |         <router-link
227 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
228 |           :class="[$route.name === 'Blank' ? activeClass : inactiveClass]"
229 |           to="/blank"
230 |         >
231 |           <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
232 |             <path
233 |               d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
234 |             />
235 |           </svg>
236 | 
237 |           <span class="mx-4">Blank</span>
238 |         </router-link>
239 |         <p class="pl-4 text-xs my-2 font-semibold mb-4 text-gray-400">About</p>
240 |         <a
241 |           target="_blank"
242 |           class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
243 |           :class="[$route.name === 'Blank' ? activeClass : inactiveClass]"
244 |           href="https://github.com/tal7aouy"
245 |         >
246 |           <svg
247 |             class="w-5 h-5 fill-current"
248 |             viewBox="0 0 24 24"
249 |             fill="none"
250 |             xmlns="http://www.w3.org/2000/svg"
251 |           >
252 |             <path
253 |               d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z"
254 |             ></path>
255 |           </svg>
256 | 
257 |           <span class="mx-4">Github</span>
258 |         </a>
259 |       </nav>
260 |     </div>
261 |   </div>
262 | </template>
263 | 
264 | <script setup lang="ts">
265 | import { ref } from "vue";
266 | import { useSidebar } from "../hooks/useSidebar";
267 | 
268 | const { isOpen } = useSidebar();
269 | const activeClass = ref(
270 |   "bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100"
271 | );
272 | const inactiveClass = ref(
273 |   "border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100"
274 | );
275 | </script>
276 | 


--------------------------------------------------------------------------------
/src/views/UIElements.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- Breadcrumb -->
  4 |     <Breadcrumb breadcrumb="ui-elements" />
  5 | 
  6 |     <!-- Alerts -->
  7 |     <div class="mt-4">
  8 |       <h4 class="text-gray-600">Alerts</h4>
  9 | 
 10 |       <div class="mt-4">
 11 |         <div
 12 |           class="px-4 py-4 overflow-x-auto bg-white rounded-md whitespace-nowrap"
 13 |         >
 14 |           <div
 15 |             class="inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md"
 16 |           >
 17 |             <div class="flex items-center justify-center w-12 bg-green-500">
 18 |               <svg
 19 |                 class="w-6 h-6 text-white fill-current"
 20 |                 viewBox="0 0 40 40"
 21 |                 xmlns="http://www.w3.org/2000/svg"
 22 |               >
 23 |                 <path
 24 |                   d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"
 25 |                 />
 26 |               </svg>
 27 |             </div>
 28 | 
 29 |             <div class="px-4 py-2 -mx-3">
 30 |               <div class="mx-3">
 31 |                 <span class="font-semibold text-green-500">Success</span>
 32 |                 <p class="text-sm text-gray-600">
 33 |                   Your account was registered!
 34 |                 </p>
 35 |               </div>
 36 |             </div>
 37 |           </div>
 38 | 
 39 |           <div
 40 |             class="inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md"
 41 |           >
 42 |             <div class="flex items-center justify-center w-12 bg-blue-500">
 43 |               <svg
 44 |                 class="w-6 h-6 text-white fill-current"
 45 |                 viewBox="0 0 40 40"
 46 |                 xmlns="http://www.w3.org/2000/svg"
 47 |               >
 48 |                 <path
 49 |                   d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
 50 |                 />
 51 |               </svg>
 52 |             </div>
 53 | 
 54 |             <div class="px-4 py-2 -mx-3">
 55 |               <div class="mx-3">
 56 |                 <span class="font-semibold text-blue-500">Info</span>
 57 |                 <p class="text-sm text-gray-600">
 58 |                   Channel archived by the owner.
 59 |                 </p>
 60 |               </div>
 61 |             </div>
 62 |           </div>
 63 | 
 64 |           <div
 65 |             class="inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md"
 66 |           >
 67 |             <div class="flex items-center justify-center w-12 bg-yellow-500">
 68 |               <svg
 69 |                 class="w-6 h-6 text-white fill-current"
 70 |                 viewBox="0 0 40 40"
 71 |                 xmlns="http://www.w3.org/2000/svg"
 72 |               >
 73 |                 <path
 74 |                   d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
 75 |                 />
 76 |               </svg>
 77 |             </div>
 78 | 
 79 |             <div class="px-4 py-2 -mx-3">
 80 |               <div class="mx-3">
 81 |                 <span class="font-semibold text-yellow-500">Warning</span>
 82 |                 <p class="text-sm text-gray-600">Image size is too large.</p>
 83 |               </div>
 84 |             </div>
 85 |           </div>
 86 | 
 87 |           <div
 88 |             class="inline-flex w-full max-w-sm ml-3 overflow-hidden bg-white rounded-lg shadow-md"
 89 |           >
 90 |             <div class="flex items-center justify-center w-12 bg-red-500">
 91 |               <svg
 92 |                 class="w-6 h-6 text-white fill-current"
 93 |                 viewBox="0 0 40 40"
 94 |                 xmlns="http://www.w3.org/2000/svg"
 95 |               >
 96 |                 <path
 97 |                   d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"
 98 |                 />
 99 |               </svg>
100 |             </div>
101 | 
102 |             <div class="px-4 py-2 -mx-3">
103 |               <div class="mx-3">
104 |                 <span class="font-semibold text-red-500">Error</span>
105 |                 <p class="text-sm text-gray-600">Your email is already used!</p>
106 |               </div>
107 |             </div>
108 |           </div>
109 |         </div>
110 |       </div>
111 |     </div>
112 | 
113 |     <!-- Inputs -->
114 |     <div class="mt-8">
115 |       <h4 class="text-gray-600">Inputs</h4>
116 | 
117 |       <div class="mt-4">
118 |         <div
119 |           class="flex items-center px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md"
120 |         >
121 |           <label>
122 |             <input
123 |               type="radio"
124 |               class="w-5 h-5 text-indigo-600 focus:ring-indigo-500"
125 |               name="radio"
126 |             /><span class="ml-2 text-gray-700">Radio</span>
127 |           </label>
128 | 
129 |           <label>
130 |             <input
131 |               type="checkbox"
132 |               class="w-5 h-5 text-indigo-600 rounded-md focus:ring-indigo-500"
133 |               name="radio"
134 |             /><span class="ml-2 text-gray-700">Checkbox</span>
135 |           </label>
136 | 
137 |           <label class="block">
138 |             <input
139 |               type="email"
140 |               placeholder="Email"
141 |               class="block w-full mt-1 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
142 |             />
143 |           </label>
144 | 
145 |           <div class="relative mx-4 lg:mx-0">
146 |             <span class="absolute inset-y-0 left-0 flex items-center pl-3">
147 |               <svg
148 |                 class="w-5 h-5 text-gray-500"
149 |                 viewBox="0 0 24 24"
150 |                 fill="none"
151 |               >
152 |                 <path
153 |                   d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
154 |                   stroke="currentColor"
155 |                   stroke-width="2"
156 |                   stroke-linecap="round"
157 |                   stroke-linejoin="round"
158 |                 />
159 |               </svg>
160 |             </span>
161 | 
162 |             <input
163 |               class="w-32 pl-10 pr-4 text-indigo-600 border-gray-200 rounded-md sm:w-64 focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
164 |               type="text"
165 |               placeholder="Search"
166 |             />
167 |           </div>
168 |         </div>
169 |       </div>
170 |     </div>
171 | 
172 |     <!-- Buttons -->
173 |     <div class="mt-8">
174 |       <h4 class="text-gray-600">Buttons</h4>
175 | 
176 |       <div class="mt-4">
177 |         <div
178 |           class="flex px-4 py-4 space-x-4 overflow-x-auto bg-white rounded-md"
179 |         >
180 |           <button
181 |             class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500"
182 |           >
183 |             Primary
184 |           </button>
185 | 
186 |           <button
187 |             class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500"
188 |           >
189 |             <svg
190 |               class="w-5 h-5 mx-1"
191 |               xmlns="http://www.w3.org/2000/svg"
192 |               viewBox="0 0 20 20"
193 |               fill="currentColor"
194 |             >
195 |               <path
196 |                 fill-rule="evenodd"
197 |                 d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
198 |                 clip-rule="evenodd"
199 |               />
200 |             </svg>
201 |             <span class="mx-1">Refresh</span>
202 |           </button>
203 | 
204 |           <div class="flex items-center">
205 |             <button
206 |               class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500"
207 |             >
208 |               Download
209 |             </button>
210 | 
211 |             <span class="border border-transparent"></span>
212 | 
213 |             <div class="relative">
214 |               <!-- Menu toggle button -->
215 |               <button
216 |                 class="relative z-10 block p-2 transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500"
217 |               >
218 |                 <svg
219 |                   class="w-6 h-6 text-white"
220 |                   xmlns="http://www.w3.org/2000/svg"
221 |                   fill="none"
222 |                   viewBox="0 0 24 24"
223 |                   stroke="currentColor"
224 |                 >
225 |                   <path
226 |                     stroke-linecap="round"
227 |                     stroke-linejoin="round"
228 |                     stroke-width="2"
229 |                     d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
230 |                   />
231 |                 </svg>
232 |               </button>
233 | 
234 |               <!-- Menu list -->
235 |               <div
236 |                 class="absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700"
237 |               ></div>
238 |             </div>
239 |           </div>
240 |         </div>
241 |       </div>
242 |     </div>
243 | 
244 |     <!-- Paginations -->
245 |     <div class="mt-8">
246 |       <h4 class="text-gray-600">Paginations</h4>
247 | 
248 |       <div class="mt-4">
249 |         <div class="flex px-4 py-4 overflow-x-auto bg-white rounded-md">
250 |           <div class="flex mr-4 rounded">
251 |             <a
252 |               href="#"
253 |               class="px-3 py-2 ml-0 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 rounded-l hover:bg-indigo-500 hover:text-white"
254 |               ><span>Previous</span></a
255 |             >
256 |             <a
257 |               href="#"
258 |               class="px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white"
259 |               ><span>1</span></a
260 |             >
261 |             <a
262 |               href="#"
263 |               class="px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white"
264 |               ><span>2</span></a
265 |             >
266 |             <a
267 |               href="#"
268 |               class="px-3 py-2 leading-tight text-indigo-700 bg-white border border-r-0 border-gray-200 hover:bg-indigo-500 hover:text-white"
269 |               ><span>3</span></a
270 |             >
271 |             <a
272 |               href="#"
273 |               class="px-3 py-2 leading-tight text-indigo-700 bg-white border border-gray-200 rounded-r hover:bg-indigo-500 hover:text-white"
274 |               ><span>Next</span></a
275 |             >
276 |           </div>
277 |         </div>
278 |       </div>
279 |     </div>
280 |   </div>
281 | </template>
282 | <script lang="ts" setup>
283 | import Breadcrumb from '../partials/AppBreadcrumb.vue'
284 | </script>
285 | 


--------------------------------------------------------------------------------
/src/components/AppHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header
  3 |     class="
  4 |       flex
  5 |       items-center
  6 |       justify-between
  7 |       px-6
  8 |       py-2
  9 |       bg-white
 10 |       border-b-4 border-indigo-600
 11 |     "
 12 |   >
 13 |     <div class="flex items-center">
 14 |       <button
 15 |         @click="isOpen = true"
 16 |         class="text-gray-500 focus:outline-none lg:hidden"
 17 |       >
 18 |         <svg
 19 |           class="w-6 h-6"
 20 |           viewBox="0 0 24 24"
 21 |           fill="none"
 22 |           xmlns="http://www.w3.org/2000/svg"
 23 |         >
 24 |           <path
 25 |             d="M4 6H20M4 12H20M4 18H11"
 26 |             stroke="currentColor"
 27 |             stroke-width="2"
 28 |             stroke-linecap="round"
 29 |             stroke-linejoin="round"
 30 |           />
 31 |         </svg>
 32 |       </button>
 33 | 
 34 |       <div class="relative mx-4 lg:mx-0">
 35 |         <span class="absolute inset-y-0 left-0 flex items-center pl-3">
 36 |           <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none">
 37 |             <path
 38 |               d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
 39 |               stroke="currentColor"
 40 |               stroke-width="2"
 41 |               stroke-linecap="round"
 42 |               stroke-linejoin="round"
 43 |             />
 44 |           </svg>
 45 |         </span>
 46 | 
 47 |         <input
 48 |           class="
 49 |             w-32
 50 |             pl-10
 51 |             pr-4
 52 |             py-2
 53 |             text-indigo-600
 54 |             border-gray-200
 55 |             rounded-md
 56 |             sm:w-64
 57 |             focus:border-indigo-600
 58 |             focus:ring
 59 |             focus:ring-opacity-40
 60 |             focus:ring-indigo-500
 61 |           "
 62 |           type="text"
 63 |           placeholder="Search"
 64 |         />
 65 |       </div>
 66 |     </div>
 67 | 
 68 |     <div class="flex items-center">
 69 |       <div class="flex items-center">
 70 |         <div class="relative">
 71 |           <button
 72 |             @click="notificationOpen = !notificationOpen"
 73 |             class="flex mx-4 text-gray-600 focus:outline-none"
 74 |           >
 75 |             <svg
 76 |               class="h-6 w-6"
 77 |               viewBox="0 0 24 24"
 78 |               fill="none"
 79 |               xmlns="http://www.w3.org/2000/svg"
 80 |             >
 81 |               <path
 82 |                 d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
 83 |                 stroke="currentColor"
 84 |                 stroke-width="2"
 85 |                 stroke-linecap="round"
 86 |                 stroke-linejoin="round"
 87 |               />
 88 |             </svg>
 89 |           </button>
 90 | 
 91 |           <div
 92 |             v-show="notificationOpen"
 93 |             @click="notificationOpen = false"
 94 |             class="fixed inset-0 h-full w-full z-10"
 95 |           ></div>
 96 | 
 97 |           <div
 98 |             v-show="notificationOpen"
 99 |             class="
100 |               absolute
101 |               right-0
102 |               mt-2
103 |               w-80
104 |               bg-white
105 |               rounded-lg
106 |               shadow-xl
107 |               overflow-hidden
108 |               z-10
109 |             "
110 |             style="width: 20rem"
111 |           >
112 |             <a
113 |               href="#"
114 |               class="
115 |                 flex
116 |                 items-center
117 |                 px-4
118 |                 py-3
119 |                 text-gray-600
120 |                 hover:text-white hover:bg-indigo-600
121 |                 -mx-2
122 |               "
123 |             >
124 |               <img
125 |                 class="h-8 w-8 rounded-full object-cover mx-1"
126 |                 src="https://images.unsplash.com/photo-1552774021-9ebbb764f03e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
127 |                 alt="avatar"
128 |               />
129 |               <p class="text-sm mx-2">
130 |                 <span class="font-bold" href="#">Evan Josh</span> replied on the
131 |                 <span class="font-bold text-indigo-400" href="#"
132 |                   >Upload Image</span
133 |                 >
134 |                 artical . 2m
135 |               </p>
136 |             </a>
137 |             <a
138 |               href="#"
139 |               class="
140 |                 flex
141 |                 items-center
142 |                 px-4
143 |                 py-3
144 |                 text-gray-600
145 |                 hover:text-white hover:bg-indigo-600
146 |                 -mx-2
147 |               "
148 |             >
149 |               <img
150 |                 class="h-8 w-8 rounded-full object-cover mx-1"
151 |                 src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
152 |                 alt="avatar"
153 |               />
154 |               <p class="text-sm mx-2">
155 |                 <span class="font-bold" href="#">Slick Net</span> start
156 |                 following you . 45m
157 |               </p>
158 |             </a>
159 |             <a
160 |               href="#"
161 |               class="
162 |                 flex
163 |                 items-center
164 |                 px-4
165 |                 py-3
166 |                 text-gray-600
167 |                 hover:text-white hover:bg-indigo-600
168 |                 -mx-2
169 |               "
170 |             >
171 |               <img
172 |                 class="h-8 w-8 rounded-full object-cover mx-1"
173 |                 src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
174 |                 alt="avatar"
175 |               />
176 |               <p class="text-sm mx-2">
177 |                 <span class="font-bold" href="#">Jane Doe</span> Like Your reply
178 |                 on
179 |                 <span class="font-bold text-indigo-400" href="#"
180 |                   >Test with TDD</span
181 |                 >
182 |                 artical . 1h
183 |               </p>
184 |             </a>
185 |             <a
186 |               href="#"
187 |               class="
188 |                 flex
189 |                 items-center
190 |                 px-4
191 |                 py-3
192 |                 text-gray-600
193 |                 hover:text-white hover:bg-indigo-600
194 |                 -mx-2
195 |               "
196 |             >
197 |               <img
198 |                 class="h-8 w-8 rounded-full object-cover mx-1"
199 |                 src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80"
200 |                 alt="avatar"
201 |               />
202 |               <p class="text-sm mx-2">
203 |                 <span class="font-bold" href="#">Abigail Bennett</span>
204 |                 start following you . 3h
205 |               </p>
206 |             </a>
207 |           </div>
208 |         </div>
209 |       </div>
210 |       <div class="relative">
211 |         <button
212 |           @click="dropdownOpen = !dropdownOpen"
213 |           class="
214 |             relative
215 |             z-10
216 |             block
217 |             w-8
218 |             h-8
219 |             overflow-hidden
220 |             rounded-full
221 |             shadow
222 |             focus:outline-none
223 |           "
224 |         >
225 |           <img
226 |             class="object-cover w-full h-full"
227 |             src="https://images.unsplash.com/photo-1528892952291-009c663ce843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=296&q=80"
228 |             alt="Your avatar"
229 |           />
230 |         </button>
231 | 
232 |         <div
233 |           v-show="dropdownOpen"
234 |           @click="dropdownOpen = false"
235 |           class="fixed inset-0 z-10 w-full h-full"
236 |         ></div>
237 | 
238 |         <transition
239 |           enter-active-class="transition duration-150 ease-out transform"
240 |           enter-from-class="scale-95 opacity-0"
241 |           enter-to-class="scale-100 opacity-100"
242 |           leave-active-class="transition duration-150 ease-in transform"
243 |           leave-from-class="scale-100 opacity-100"
244 |           leave-to-class="scale-95 opacity-0"
245 |         >
246 |           <div
247 |             v-show="dropdownOpen"
248 |             class="
249 |               absolute
250 |               right-0
251 |               z-20
252 |               w-48
253 |               py-1
254 |               mt-2
255 |               bg-white
256 |               rounded-lg
257 |               shadow-xl
258 |             "
259 |           >
260 |             <a
261 |               href="#"
262 |               class="
263 |                 px-4
264 |                 py-2
265 |                 flex
266 |                 rounded-md
267 |                 text-sm text-gray-700
268 |                 hover:bg-indigo-600 hover:text-white
269 |               "
270 |             >
271 |               <svg
272 |                 xmlns="http://www.w3.org/2000/svg"
273 |                 class="h-5 w-5 mr-1"
274 |                 fill="none"
275 |                 viewBox="0 0 24 24"
276 |                 stroke="currentColor"
277 |                 stroke-width="2"
278 |               >
279 |                 <path
280 |                   stroke-linecap="round"
281 |                   stroke-linejoin="round"
282 |                   d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
283 |                 />
284 |               </svg>
285 |               Profile</a
286 |             >
287 |             <a
288 |               href="#"
289 |               class="
290 |                 flex
291 |                 rounded-md
292 |                 px-4
293 |                 py-2
294 |                 text-sm text-gray-700
295 |                 hover:bg-indigo-600 hover:text-white
296 |               "
297 |             >
298 |               <svg
299 |                 xmlns="http://www.w3.org/2000/svg"
300 |                 class="h-5 w-5 mr-1"
301 |                 fill="none"
302 |                 viewBox="0 0 24 24"
303 |                 stroke="currentColor"
304 |                 stroke-width="2"
305 |               >
306 |                 <path
307 |                   stroke-linecap="round"
308 |                   stroke-linejoin="round"
309 |                   d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
310 |                 />
311 |                 <path
312 |                   stroke-linecap="round"
313 |                   stroke-linejoin="round"
314 |                   d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
315 |                 />
316 |               </svg>
317 |               Settings</a
318 |             >
319 |             <router-link
320 |               to="/"
321 |               class="
322 |                 flex
323 |                 px-4
324 |                 py-2
325 |                 rounded-md
326 |                 text-sm text-gray-700
327 |                 hover:bg-indigo-600 hover:text-white
328 |               "
329 |             >
330 |               <svg
331 |                 xmlns="http://www.w3.org/2000/svg"
332 |                 class="h-5 w-5 mr-1"
333 |                 fill="none"
334 |                 viewBox="0 0 24 24"
335 |                 stroke="currentColor"
336 |                 stroke-width="2"
337 |               >
338 |                 <path
339 |                   stroke-linecap="round"
340 |                   stroke-linejoin="round"
341 |                   d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
342 |                 />
343 |               </svg>
344 |               Log out</router-link
345 |             >
346 |           </div>
347 |         </transition>
348 |       </div>
349 |     </div>
350 |   </header>
351 | </template>
352 | 
353 | <script setup lang="ts">
354 | import { ref } from "vue";
355 | import { useSidebar } from "../hooks/useSidebar";
356 | 
357 | const dropdownOpen = ref(false);
358 | const { isOpen } = useSidebar();
359 | const notificationOpen = ref(false);
360 | </script>
361 | 


--------------------------------------------------------------------------------
/src/views/AppDashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Breadcrumb breadcrumb="" />
  4 |     <!--Banner get you to github repo-->
  5 |     <Banner />
  6 |     <div class="mt-4">
  7 |       <div class="flex flex-wrap -mx-6">
  8 |         <div class="w-full px-6 sm:w-1/2 xl:w-1/3">
  9 |           <div
 10 |             class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm"
 11 |           >
 12 |             <div class="p-3 bg-indigo-600 bg-opacity-75 rounded-full">
 13 |               <svg
 14 |                 class="w-8 h-8 text-white"
 15 |                 viewBox="0 0 28 30"
 16 |                 fill="none"
 17 |                 xmlns="http://www.w3.org/2000/svg"
 18 |               >
 19 |                 <path
 20 |                   d="M18.2 9.08889C18.2 11.5373 16.3196 13.5222 14 13.5222C11.6804 13.5222 9.79999 11.5373 9.79999 9.08889C9.79999 6.64043 11.6804 4.65556 14 4.65556C16.3196 4.65556 18.2 6.64043 18.2 9.08889Z"
 21 |                   fill="currentColor"
 22 |                 />
 23 |                 <path
 24 |                   d="M25.2 12.0444C25.2 13.6768 23.9464 15 22.4 15C20.8536 15 19.6 13.6768 19.6 12.0444C19.6 10.4121 20.8536 9.08889 22.4 9.08889C23.9464 9.08889 25.2 10.4121 25.2 12.0444Z"
 25 |                   fill="currentColor"
 26 |                 />
 27 |                 <path
 28 |                   d="M19.6 22.3889C19.6 19.1243 17.0927 16.4778 14 16.4778C10.9072 16.4778 8.39999 19.1243 8.39999 22.3889V26.8222H19.6V22.3889Z"
 29 |                   fill="currentColor"
 30 |                 />
 31 |                 <path
 32 |                   d="M8.39999 12.0444C8.39999 13.6768 7.14639 15 5.59999 15C4.05359 15 2.79999 13.6768 2.79999 12.0444C2.79999 10.4121 4.05359 9.08889 5.59999 9.08889C7.14639 9.08889 8.39999 10.4121 8.39999 12.0444Z"
 33 |                   fill="currentColor"
 34 |                 />
 35 |                 <path
 36 |                   d="M22.4 26.8222V22.3889C22.4 20.8312 22.0195 19.3671 21.351 18.0949C21.6863 18.0039 22.0378 17.9556 22.4 17.9556C24.7197 17.9556 26.6 19.9404 26.6 22.3889V26.8222H22.4Z"
 37 |                   fill="currentColor"
 38 |                 />
 39 |                 <path
 40 |                   d="M6.64896 18.0949C5.98058 19.3671 5.59999 20.8312 5.59999 22.3889V26.8222H1.39999V22.3889C1.39999 19.9404 3.2804 17.9556 5.59999 17.9556C5.96219 17.9556 6.31367 18.0039 6.64896 18.0949Z"
 41 |                   fill="currentColor"
 42 |                 />
 43 |               </svg>
 44 |             </div>
 45 | 
 46 |             <div class="mx-5">
 47 |               <h4 class="text-2xl font-semibold text-gray-700">8,282</h4>
 48 |               <div class="text-gray-500">New Users</div>
 49 |             </div>
 50 |           </div>
 51 |         </div>
 52 | 
 53 |         <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0">
 54 |           <div
 55 |             class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm"
 56 |           >
 57 |             <div class="p-3 bg-blue-600 bg-opacity-75 rounded-full">
 58 |               <svg
 59 |                 class="w-8 h-8 text-white"
 60 |                 viewBox="0 0 28 28"
 61 |                 fill="none"
 62 |                 xmlns="http://www.w3.org/2000/svg"
 63 |               >
 64 |                 <path
 65 |                   d="M4.19999 1.4C3.4268 1.4 2.79999 2.02681 2.79999 2.8C2.79999 3.57319 3.4268 4.2 4.19999 4.2H5.9069L6.33468 5.91114C6.33917 5.93092 6.34409 5.95055 6.34941 5.97001L8.24953 13.5705L6.99992 14.8201C5.23602 16.584 6.48528 19.6 8.97981 19.6H21C21.7731 19.6 22.4 18.9732 22.4 18.2C22.4 17.4268 21.7731 16.8 21 16.8H8.97983L10.3798 15.4H19.6C20.1303 15.4 20.615 15.1004 20.8521 14.6261L25.0521 6.22609C25.2691 5.79212 25.246 5.27673 24.991 4.86398C24.7357 4.45123 24.2852 4.2 23.8 4.2H8.79308L8.35818 2.46044C8.20238 1.83722 7.64241 1.4 6.99999 1.4H4.19999Z"
 66 |                   fill="currentColor"
 67 |                 />
 68 |                 <path
 69 |                   d="M22.4 23.1C22.4 24.2598 21.4598 25.2 20.3 25.2C19.1403 25.2 18.2 24.2598 18.2 23.1C18.2 21.9402 19.1403 21 20.3 21C21.4598 21 22.4 21.9402 22.4 23.1Z"
 70 |                   fill="currentColor"
 71 |                 />
 72 |                 <path
 73 |                   d="M9.1 25.2C10.2598 25.2 11.2 24.2598 11.2 23.1C11.2 21.9402 10.2598 21 9.1 21C7.9402 21 7 21.9402 7 23.1C7 24.2598 7.9402 25.2 9.1 25.2Z"
 74 |                   fill="currentColor"
 75 |                 />
 76 |               </svg>
 77 |             </div>
 78 | 
 79 |             <div class="mx-5">
 80 |               <h4 class="text-2xl font-semibold text-gray-700">200,521</h4>
 81 |               <div class="text-gray-500">Total Orders</div>
 82 |             </div>
 83 |           </div>
 84 |         </div>
 85 | 
 86 |         <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0">
 87 |           <div
 88 |             class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm"
 89 |           >
 90 |             <div class="p-3 bg-pink-600 bg-opacity-75 rounded-full">
 91 |               <svg
 92 |                 class="w-8 h-8 text-white"
 93 |                 viewBox="0 0 28 28"
 94 |                 fill="none"
 95 |                 xmlns="http://www.w3.org/2000/svg"
 96 |               >
 97 |                 <path
 98 |                   d="M6.99998 11.2H21L22.4 23.8H5.59998L6.99998 11.2Z"
 99 |                   fill="currentColor"
100 |                   stroke="currentColor"
101 |                   stroke-width="2"
102 |                   stroke-linejoin="round"
103 |                 />
104 |                 <path
105 |                   d="M9.79999 8.4C9.79999 6.08041 11.6804 4.2 14 4.2C16.3196 4.2 18.2 6.08041 18.2 8.4V12.6C18.2 14.9197 16.3196 16.8 14 16.8C11.6804 16.8 9.79999 14.9197 9.79999 12.6V8.4Z"
106 |                   stroke="currentColor"
107 |                   stroke-width="2"
108 |                 />
109 |               </svg>
110 |             </div>
111 | 
112 |             <div class="mx-5">
113 |               <h4 class="text-2xl font-semibold text-gray-700">215,542</h4>
114 |               <div class="text-gray-500">Available Products</div>
115 |             </div>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </div>
120 | 
121 |     <div class="mt-8"></div>
122 | 
123 |     <div class="flex flex-col mt-8">
124 |       <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
125 |         <div
126 |           class="
127 |             inline-block
128 |             min-w-full
129 |             overflow-hidden
130 |             align-middle
131 |             border-b border-gray-200
132 |             shadow
133 |             sm:rounded-lg
134 |           "
135 |         >
136 |           <table class="min-w-full">
137 |             <thead>
138 |               <tr>
139 |                 <th
140 |                   class="
141 |                     px-6
142 |                     py-3
143 |                     text-xs
144 |                     font-medium
145 |                     leading-4
146 |                     tracking-wider
147 |                     text-left text-gray-500
148 |                     uppercase
149 |                     border-b border-gray-200
150 |                     bg-gray-50
151 |                   "
152 |                 >
153 |                   Name
154 |                 </th>
155 |                 <th
156 |                   class="
157 |                     px-6
158 |                     py-3
159 |                     text-xs
160 |                     font-medium
161 |                     leading-4
162 |                     tracking-wider
163 |                     text-left text-gray-500
164 |                     uppercase
165 |                     border-b border-gray-200
166 |                     bg-gray-50
167 |                   "
168 |                 >
169 |                   Title
170 |                 </th>
171 |                 <th
172 |                   class="
173 |                     px-6
174 |                     py-3
175 |                     text-xs
176 |                     font-medium
177 |                     leading-4
178 |                     tracking-wider
179 |                     text-left text-gray-500
180 |                     uppercase
181 |                     border-b border-gray-200
182 |                     bg-gray-50
183 |                   "
184 |                 >
185 |                   Status
186 |                 </th>
187 |                 <th
188 |                   class="
189 |                     px-6
190 |                     py-3
191 |                     text-xs
192 |                     font-medium
193 |                     leading-4
194 |                     tracking-wider
195 |                     text-left text-gray-500
196 |                     uppercase
197 |                     border-b border-gray-200
198 |                     bg-gray-50
199 |                   "
200 |                 >
201 |                   Role
202 |                 </th>
203 |                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
204 |               </tr>
205 |             </thead>
206 | 
207 |             <tbody class="bg-white">
208 |               <tr v-for="(u, index) in users" :key="index">
209 |                 <td
210 |                   class="px-6 py-4 border-b border-gray-200 whitespace-nowrap"
211 |                 >
212 |                   <div class="flex items-center">
213 |                     <div class="flex-shrink-0 w-10 h-10">
214 |                       <img
215 |                         class="w-10 h-10 rounded-full"
216 |                         src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
217 |                         alt=""
218 |                       />
219 |                     </div>
220 | 
221 |                     <div class="ml-4">
222 |                       <div class="text-sm font-medium leading-5 text-gray-900">
223 |                         {{ u.name }}
224 |                       </div>
225 |                       <div class="text-sm leading-5 text-gray-500">
226 |                         {{ u.email }}
227 |                       </div>
228 |                     </div>
229 |                   </div>
230 |                 </td>
231 | 
232 |                 <td
233 |                   class="px-6 py-4 border-b border-gray-200 whitespace-nowrap"
234 |                 >
235 |                   <div class="text-sm leading-5 text-gray-900">
236 |                     {{ u.title }}
237 |                   </div>
238 |                   <div class="text-sm leading-5 text-gray-500">
239 |                     {{ u.title2 }}
240 |                   </div>
241 |                 </td>
242 | 
243 |                 <td
244 |                   class="px-6 py-4 border-b border-gray-200 whitespace-nowrap"
245 |                 >
246 |                   <span
247 |                     class="
248 |                       inline-flex
249 |                       px-2
250 |                       text-xs
251 |                       font-semibold
252 |                       leading-5
253 |                       text-green-800
254 |                       bg-green-100
255 |                       rounded-full
256 |                     "
257 |                     >{{ u.status }}</span
258 |                   >
259 |                 </td>
260 | 
261 |                 <td
262 |                   class="
263 |                     px-6
264 |                     py-4
265 |                     text-sm
266 |                     leading-5
267 |                     text-gray-500
268 |                     border-b border-gray-200
269 |                     whitespace-nowrap
270 |                   "
271 |                 >
272 |                   {{ u.role }}
273 |                 </td>
274 | 
275 |                 <td
276 |                   class="
277 |                     px-6
278 |                     py-4
279 |                     text-sm
280 |                     font-medium
281 |                     leading-5
282 |                     text-right
283 |                     border-b border-gray-200
284 |                     whitespace-nowrap
285 |                   "
286 |                 >
287 |                   <div class="flex justify-around">
288 |                     <span class="text-yellow-500 flex justify-center">
289 |                       <a href="#" class="mx-2 px-2 rounded-md"
290 |                         ><svg
291 |                           xmlns="http://www.w3.org/2000/svg"
292 |                           class="h-5 w-5 text-green-700"
293 |                           viewBox="0 0 20 20"
294 |                           fill="currentColor"
295 |                         >
296 |                           <path
297 |                             d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
298 |                           />
299 |                           <path
300 |                             fill-rule="evenodd"
301 |                             d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
302 |                             clip-rule="evenodd"
303 |                           />
304 |                         </svg>
305 |                       </a>
306 |                       <form method="POST">
307 |                         <button class="mx-2 px-2 rounded-md">
308 |                           <svg
309 |                             xmlns="http://www.w3.org/2000/svg"
310 |                             class="h-5 w-5 text-red-700"
311 |                             viewBox="0 0 20 20"
312 |                             fill="currentColor"
313 |                           >
314 |                             <path
315 |                               fill-rule="evenodd"
316 |                               d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
317 |                               clip-rule="evenodd"
318 |                             />
319 |                           </svg>
320 |                         </button>
321 |                       </form>
322 |                     </span>
323 |                   </div>
324 |                 </td>
325 |               </tr>
326 |             </tbody>
327 |           </table>
328 |         </div>
329 |       </div>
330 |     </div>
331 |   </div>
332 | </template>
333 | 
334 | <script setup lang="ts">
335 | import { ref } from "vue";
336 | import Banner from "../partials/AppBanner.vue";
337 | import Breadcrumb from "../partials/AppBreadcrumb.vue";
338 | interface User {
339 |   name: string;
340 |   email: string;
341 |   title: string;
342 |   title2: string;
343 |   status: string;
344 |   role: string;
345 | }
346 | 
347 | const testUser: User = {
348 |   name: "John Doe",
349 |   email: "john@example.com",
350 |   title: "Software Engineer",
351 |   title2: "Web dev",
352 |   status: "Active",
353 |   role: "Owner",
354 | };
355 | 
356 | const users = ref<User[]>([...Array(10).keys()].map(() => testUser));
357 | </script>
358 | 


--------------------------------------------------------------------------------
/src/views/AppTables.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- Breadcrumb -->
  4 |     <Breadcrumb breadcrumb="Tables" />
  5 | 
  6 |     <div class="mt-4">
  7 |       <h4 class="text-gray-600">Simple Table</h4>
  8 | 
  9 |       <div class="mt-6">
 10 |         <div class="my-6 overflow-hidden bg-white rounded-md shadow">
 11 |           <table class="w-full text-left border-collapse">
 12 |             <thead class="border-b">
 13 |               <tr>
 14 |                 <th
 15 |                   class="px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800"
 16 |                 >
 17 |                   City
 18 |                 </th>
 19 |                 <th
 20 |                   class="px-5 py-3 text-sm font-medium text-gray-100 uppercase bg-indigo-800"
 21 |                 >
 22 |                   Total orders
 23 |                 </th>
 24 |               </tr>
 25 |             </thead>
 26 |             <tbody>
 27 |               <tr
 28 |                 v-for="(i, index) in simpleTableData"
 29 |                 :key="index"
 30 |                 class="hover:bg-gray-200"
 31 |               >
 32 |                 <td class="px-6 py-4 text-lg text-gray-700 border-b">
 33 |                   {{ i.city }}
 34 |                 </td>
 35 |                 <td class="px-6 py-4 text-gray-500 border-b">
 36 |                   {{ i.totalOrders }}
 37 |                 </td>
 38 |               </tr>
 39 |             </tbody>
 40 |           </table>
 41 |         </div>
 42 |       </div>
 43 |     </div>
 44 | 
 45 |     <div class="mt-8">
 46 |       <h4 class="text-gray-600">Table with pagination</h4>
 47 | 
 48 |       <div class="mt-6">
 49 |         <h2 class="text-xl font-semibold leading-tight text-gray-700">Users</h2>
 50 | 
 51 |         <div class="flex flex-col mt-3 sm:flex-row">
 52 |           <div class="flex">
 53 |             <div class="relative">
 54 |               <select
 55 |                 class="block w-full h-full px-4 py-2 pr-8 leading-tight text-gray-700 bg-white border border-gray-400 rounded-l appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
 56 |               >
 57 |                 <option>5</option>
 58 |                 <option>10</option>
 59 |                 <option>20</option>
 60 |               </select>
 61 | 
 62 |               <div
 63 |                 class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
 64 |               >
 65 |                 <svg
 66 |                   class="w-4 h-4 fill-current"
 67 |                   xmlns="http://www.w3.org/2000/svg"
 68 |                   viewBox="0 0 20 20"
 69 |                 >
 70 |                   <path
 71 |                     d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
 72 |                   />
 73 |                 </svg>
 74 |               </div>
 75 |             </div>
 76 | 
 77 |             <div class="relative">
 78 |               <select
 79 |                 class="block w-full h-full px-4 py-2 pr-8 leading-tight text-gray-700 bg-white border-t border-b border-r border-gray-400 rounded-r appearance-none sm:rounded-r-none sm:border-r-0 focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500"
 80 |               >
 81 |                 <option>All</option>
 82 |                 <option>Active</option>
 83 |                 <option>Inactive</option>
 84 |               </select>
 85 | 
 86 |               <div
 87 |                 class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none"
 88 |               >
 89 |                 <svg
 90 |                   class="w-4 h-4 fill-current"
 91 |                   xmlns="http://www.w3.org/2000/svg"
 92 |                   viewBox="0 0 20 20"
 93 |                 >
 94 |                   <path
 95 |                     d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
 96 |                   />
 97 |                 </svg>
 98 |               </div>
 99 |             </div>
100 |           </div>
101 | 
102 |           <div class="relative block mt-2 sm:mt-0">
103 |             <span class="absolute inset-y-0 left-0 flex items-center pl-2">
104 |               <svg
105 |                 viewBox="0 0 24 24"
106 |                 class="w-4 h-4 text-gray-500 fill-current"
107 |               >
108 |                 <path
109 |                   d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"
110 |                 />
111 |               </svg>
112 |             </span>
113 | 
114 |             <input
115 |               placeholder="Search"
116 |               class="block w-full py-2 pl-8 pr-6 text-sm text-gray-700 placeholder-gray-400 bg-white border border-b border-gray-400 rounded-l rounded-r appearance-none sm:rounded-l-none focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none"
117 |             />
118 |           </div>
119 |         </div>
120 | 
121 |         <div class="px-4 py-4 -mx-4 overflow-x-auto sm:-mx-8 sm:px-8">
122 |           <div
123 |             class="inline-block min-w-full overflow-hidden rounded-lg shadow"
124 |           >
125 |             <table class="min-w-full leading-normal">
126 |               <thead>
127 |                 <tr>
128 |                   <th
129 |                     class="px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200"
130 |                   >
131 |                     User
132 |                   </th>
133 |                   <th
134 |                     class="px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200"
135 |                   >
136 |                     Role
137 |                   </th>
138 |                   <th
139 |                     class="px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200"
140 |                   >
141 |                     Created at
142 |                   </th>
143 |                   <th
144 |                     class="px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200"
145 |                   >
146 |                     Status
147 |                   </th>
148 |                   <th
149 |                     class="px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200"
150 |                   >
151 |                     Settings
152 |                   </th>
153 |                 </tr>
154 |               </thead>
155 |               <tbody>
156 |                 <tr v-for="(u, index) in paginatedTableData" :key="index">
157 |                   <td
158 |                     class="px-5 py-5 text-sm bg-white border-b border-gray-200"
159 |                   >
160 |                     <div class="flex items-center">
161 |                       <div class="flex-shrink-0 w-10 h-10">
162 |                         <img
163 |                           class="w-full h-full rounded-full"
164 |                           :src="u.picture"
165 |                           alt="profile pic"
166 |                         />
167 |                       </div>
168 | 
169 |                       <div class="ml-3">
170 |                         <p class="text-gray-900 whitespace-nowrap">
171 |                           {{ u.name }}
172 |                         </p>
173 |                       </div>
174 |                     </div>
175 |                   </td>
176 |                   <td
177 |                     class="px-5 py-5 text-sm bg-white border-b border-gray-200"
178 |                   >
179 |                     <p class="text-gray-900 whitespace-nowrap">{{ u.role }}</p>
180 |                   </td>
181 |                   <td
182 |                     class="px-5 py-5 text-sm bg-white border-b border-gray-200"
183 |                   >
184 |                     <p class="text-gray-900 whitespace-nowrap">
185 |                       {{ u.created }}
186 |                     </p>
187 |                   </td>
188 |                   <td
189 |                     class="px-5 py-5 text-sm bg-white border-b border-gray-200"
190 |                   >
191 |                     <span
192 |                       :class="`relative inline-block px-3 py-1 font-semibold text-${u.statusColor}-900 leading-tight`"
193 |                     >
194 |                       <span
195 |                         aria-hidden
196 |                         :class="`absolute inset-0 bg-${u.statusColor}-200 opacity-50 rounded-full`"
197 |                       ></span>
198 |                       <span class="relative">{{ u.status }}</span>
199 |                     </span>
200 |                   </td>
201 |                   <td
202 |                     class="px-5 py-5 text-sm bg-white border-b border-gray-200"
203 |                   >
204 |                     <div class="flex justify-around">
205 |                       <span class="text-yellow-500 flex justify-center">
206 |                         <a href="#" class="mx-2 px-2 rounded-md"
207 |                           ><svg
208 |                             xmlns="http://www.w3.org/2000/svg"
209 |                             class="h-5 w-5 text-green-700"
210 |                             viewBox="0 0 20 20"
211 |                             fill="currentColor"
212 |                           >
213 |                             <path
214 |                               d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
215 |                             />
216 |                             <path
217 |                               fill-rule="evenodd"
218 |                               d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
219 |                               clip-rule="evenodd"
220 |                             />
221 |                           </svg>
222 |                         </a>
223 |                         <form method="POST">
224 |                           <button class="mx-2 px-2 rounded-md">
225 |                             <svg
226 |                               xmlns="http://www.w3.org/2000/svg"
227 |                               class="h-5 w-5 text-red-700"
228 |                               viewBox="0 0 20 20"
229 |                               fill="currentColor"
230 |                             >
231 |                               <path
232 |                                 fill-rule="evenodd"
233 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
234 |                                 clip-rule="evenodd"
235 |                               />
236 |                             </svg>
237 |                           </button>
238 |                         </form>
239 |                       </span>
240 |                     </div>
241 |                   </td>
242 |                 </tr>
243 |               </tbody>
244 |             </table>
245 |             <div
246 |               class="flex flex-col items-center px-5 py-5 bg-white border-t xs:flex-row xs:justify-between"
247 |             >
248 |               <span class="text-xs text-gray-900 xs:text-sm"
249 |                 >Showing 1 to 4 of 50 Entries</span
250 |               >
251 | 
252 |               <div class="inline-flex mt-2 xs:mt-0">
253 |                 <button
254 |                   class="px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-l hover:bg-gray-400"
255 |                 >
256 |                   Prev
257 |                 </button>
258 |                 <button
259 |                   class="px-4 py-2 text-sm font-semibold text-gray-800 bg-gray-300 rounded-r hover:bg-gray-400"
260 |                 >
261 |                   Next
262 |                 </button>
263 |               </div>
264 |             </div>
265 |           </div>
266 |         </div>
267 |       </div>
268 |     </div>
269 | 
270 |     <div class="mt-8">
271 |       <h4 class="text-gray-600">Wide Table</h4>
272 | 
273 |       <div class="flex flex-col mt-6">
274 |         <div
275 |           class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"
276 |         >
277 |           <div
278 |             class="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg"
279 |           >
280 |             <table class="min-w-full">
281 |               <thead>
282 |                 <tr>
283 |                   <th
284 |                     class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200"
285 |                   >
286 |                     Name
287 |                   </th>
288 |                   <th
289 |                     class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200"
290 |                   >
291 |                     Title
292 |                   </th>
293 |                   <th
294 |                     class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200"
295 |                   >
296 |                     Status
297 |                   </th>
298 |                   <th
299 |                     class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase bg-gray-100 border-b border-gray-200"
300 |                   >
301 |                     Role
302 |                   </th>
303 |                   <th
304 |                     class="px-6 py-3 bg-gray-100 border-b border-gray-200"
305 |                   ></th>
306 |                 </tr>
307 |               </thead>
308 | 
309 |               <tbody class="bg-white">
310 |                 <tr v-for="(u, index) in wideTableData" :key="index">
311 |                   <td
312 |                     class="px-6 py-4 border-b border-gray-200 whitespace-nowrap"
313 |                   >
314 |                     <div class="flex items-center">
315 |                       <div class="flex-shrink-0 w-10 h-10">
316 |                         <img
317 |                           class="w-10 h-10 rounded-full"
318 |                           src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
319 |                           alt="profile pic"
320 |                         />
321 |                       </div>
322 | 
323 |                       <div class="ml-4">
324 |                         <div
325 |                           class="text-sm font-medium leading-5 text-gray-900"
326 |                         >
327 |                           {{ u.name }}
328 |                         </div>
329 |                         <div class="text-sm leading-5 text-gray-500">
330 |                           {{ u.email }}
331 |                         </div>
332 |                       </div>
333 |                     </div>
334 |                   </td>
335 | 
336 |                   <td
337 |                     class="px-6 py-4 border-b border-gray-200 whitespace-nowrap"
338 |                   >
339 |                     <div class="text-sm leading-5 text-gray-900">
340 |                       {{ u.title }}
341 |                     </div>
342 |                     <div class="text-sm leading-5 text-gray-500">
343 |                       {{ u.title2 }}
344 |                     </div>
345 |                   </td>
346 | 
347 |                   <td
348 |                     class="px-6 py-4 border-b border-gray-200 whitespace-nowrap"
349 |                   >
350 |                     <span
351 |                       class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full"
352 |                       >{{ u.status }}</span
353 |                     >
354 |                   </td>
355 | 
356 |                   <td
357 |                     class="px-6 py-4 text-sm leading-5 text-gray-500 border-b border-gray-200 whitespace-nowrap"
358 |                   >
359 |                     {{ u.role }}
360 |                   </td>
361 | 
362 |                   <td
363 |                     class="px-6 py-4 text-sm font-medium leading-5 text-right border-b border-gray-200 whitespace-nowrap"
364 |                   >
365 |                     <div class="flex justify-around">
366 |                       <span class="text-yellow-500 flex justify-center">
367 |                         <a href="#" class="mx-2 px-2 rounded-md"
368 |                           ><svg
369 |                             xmlns="http://www.w3.org/2000/svg"
370 |                             class="h-5 w-5 text-green-700"
371 |                             viewBox="0 0 20 20"
372 |                             fill="currentColor"
373 |                           >
374 |                             <path
375 |                               d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
376 |                             />
377 |                             <path
378 |                               fill-rule="evenodd"
379 |                               d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
380 |                               clip-rule="evenodd"
381 |                             />
382 |                           </svg>
383 |                         </a>
384 |                         <form method="POST">
385 |                           <button class="mx-2 px-2 rounded-md">
386 |                             <svg
387 |                               xmlns="http://www.w3.org/2000/svg"
388 |                               class="h-5 w-5 text-red-700"
389 |                               viewBox="0 0 20 20"
390 |                               fill="currentColor"
391 |                             >
392 |                               <path
393 |                                 fill-rule="evenodd"
394 |                                 d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
395 |                                 clip-rule="evenodd"
396 |                               />
397 |                             </svg>
398 |                           </button>
399 |                         </form>
400 |                       </span>
401 |                     </div>
402 |                   </td>
403 |                 </tr>
404 |               </tbody>
405 |             </table>
406 |           </div>
407 |         </div>
408 |       </div>
409 |     </div>
410 |   </div>
411 | </template>
412 | 
413 | <script setup lang="ts">
414 | import { useTableData } from '../hooks/useTableData'
415 | const { simpleTableData, paginatedTableData, wideTableData } = useTableData()
416 | import Breadcrumb from '../partials/AppBreadcrumb.vue'
417 | </script>
418 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  3 |   presets: [],
  4 |   darkMode: 'media', // or 'class'
  5 |   theme: {
  6 |     screens: {
  7 |       sm: '640px',
  8 |       md: '768px',
  9 |       lg: '1024px',
 10 |       xl: '1280px',
 11 |       '2xl': '1536px',
 12 |     },
 13 |     colors: ({ colors }) => ({
 14 |       inherit: colors.inherit,
 15 |       current: colors.current,
 16 |       transparent: colors.transparent,
 17 |       black: colors.black,
 18 |       white: colors.white,
 19 |       slate: colors.slate,
 20 |       gray: colors.gray,
 21 |       zinc: colors.zinc,
 22 |       neutral: colors.neutral,
 23 |       stone: colors.stone,
 24 |       red: colors.red,
 25 |       orange: colors.orange,
 26 |       amber: colors.amber,
 27 |       yellow: colors.yellow,
 28 |       lime: colors.lime,
 29 |       green: colors.green,
 30 |       emerald: colors.emerald,
 31 |       teal: colors.teal,
 32 |       cyan: colors.cyan,
 33 |       sky: colors.sky,
 34 |       blue: colors.blue,
 35 |       indigo: colors.indigo,
 36 |       violet: colors.violet,
 37 |       purple: colors.purple,
 38 |       fuchsia: colors.fuchsia,
 39 |       pink: colors.pink,
 40 |       rose: colors.rose,
 41 |     }),
 42 |     columns: {
 43 |       auto: 'auto',
 44 |       1: '1',
 45 |       2: '2',
 46 |       3: '3',
 47 |       4: '4',
 48 |       5: '5',
 49 |       6: '6',
 50 |       7: '7',
 51 |       8: '8',
 52 |       9: '9',
 53 |       10: '10',
 54 |       11: '11',
 55 |       12: '12',
 56 |       '3xs': '16rem',
 57 |       '2xs': '18rem',
 58 |       xs: '20rem',
 59 |       sm: '24rem',
 60 |       md: '28rem',
 61 |       lg: '32rem',
 62 |       xl: '36rem',
 63 |       '2xl': '42rem',
 64 |       '3xl': '48rem',
 65 |       '4xl': '56rem',
 66 |       '5xl': '64rem',
 67 |       '6xl': '72rem',
 68 |       '7xl': '80rem',
 69 |     },
 70 |     spacing: {
 71 |       px: '1px',
 72 |       0: '0px',
 73 |       0.5: '0.125rem',
 74 |       1: '0.25rem',
 75 |       1.5: '0.375rem',
 76 |       2: '0.5rem',
 77 |       2.5: '0.625rem',
 78 |       3: '0.75rem',
 79 |       3.5: '0.875rem',
 80 |       4: '1rem',
 81 |       5: '1.25rem',
 82 |       6: '1.5rem',
 83 |       7: '1.75rem',
 84 |       8: '2rem',
 85 |       9: '2.25rem',
 86 |       10: '2.5rem',
 87 |       11: '2.75rem',
 88 |       12: '3rem',
 89 |       14: '3.5rem',
 90 |       16: '4rem',
 91 |       20: '5rem',
 92 |       24: '6rem',
 93 |       28: '7rem',
 94 |       32: '8rem',
 95 |       36: '9rem',
 96 |       40: '10rem',
 97 |       44: '11rem',
 98 |       48: '12rem',
 99 |       52: '13rem',
100 |       56: '14rem',
101 |       60: '15rem',
102 |       64: '16rem',
103 |       72: '18rem',
104 |       80: '20rem',
105 |       96: '24rem',
106 |     },
107 |     animation: {
108 |       none: 'none',
109 |       spin: 'spin 1s linear infinite',
110 |       ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
111 |       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
112 |       bounce: 'bounce 1s infinite',
113 |     },
114 |     aspectRatio: {
115 |       auto: 'auto',
116 |       square: '1 / 1',
117 |       video: '16 / 9',
118 |     },
119 |     backdropBlur: ({ theme }) => theme('blur'),
120 |     backdropBrightness: ({ theme }) => theme('brightness'),
121 |     backdropContrast: ({ theme }) => theme('contrast'),
122 |     backdropGrayscale: ({ theme }) => theme('grayscale'),
123 |     backdropHueRotate: ({ theme }) => theme('hueRotate'),
124 |     backdropInvert: ({ theme }) => theme('invert'),
125 |     backdropOpacity: ({ theme }) => theme('opacity'),
126 |     backdropSaturate: ({ theme }) => theme('saturate'),
127 |     backdropSepia: ({ theme }) => theme('sepia'),
128 |     backgroundColor: ({ theme }) => theme('colors'),
129 |     backgroundImage: {
130 |       none: 'none',
131 |       'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
132 |       'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
133 |       'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
134 |       'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
135 |       'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
136 |       'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
137 |       'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
138 |       'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
139 |     },
140 |     backgroundOpacity: ({ theme }) => theme('opacity'),
141 |     backgroundPosition: {
142 |       bottom: 'bottom',
143 |       center: 'center',
144 |       left: 'left',
145 |       'left-bottom': 'left bottom',
146 |       'left-top': 'left top',
147 |       right: 'right',
148 |       'right-bottom': 'right bottom',
149 |       'right-top': 'right top',
150 |       top: 'top',
151 |     },
152 |     backgroundSize: {
153 |       auto: 'auto',
154 |       cover: 'cover',
155 |       contain: 'contain',
156 |     },
157 |     blur: {
158 |       0: '0',
159 |       none: '0',
160 |       sm: '4px',
161 |       DEFAULT: '8px',
162 |       md: '12px',
163 |       lg: '16px',
164 |       xl: '24px',
165 |       '2xl': '40px',
166 |       '3xl': '64px',
167 |     },
168 |     brightness: {
169 |       0: '0',
170 |       50: '.5',
171 |       75: '.75',
172 |       90: '.9',
173 |       95: '.95',
174 |       100: '1',
175 |       105: '1.05',
176 |       110: '1.1',
177 |       125: '1.25',
178 |       150: '1.5',
179 |       200: '2',
180 |     },
181 |     borderColor: ({ theme }) => ({
182 |       ...theme('colors'),
183 |       DEFAULT: theme('colors.gray.200', 'currentColor'),
184 |     }),
185 |     borderOpacity: ({ theme }) => theme('opacity'),
186 |     borderRadius: {
187 |       none: '0px',
188 |       sm: '0.125rem',
189 |       DEFAULT: '0.25rem',
190 |       md: '0.375rem',
191 |       lg: '0.5rem',
192 |       xl: '0.75rem',
193 |       '2xl': '1rem',
194 |       '3xl': '1.5rem',
195 |       full: '9999px',
196 |     },
197 |     borderWidth: {
198 |       DEFAULT: '1px',
199 |       0: '0px',
200 |       2: '2px',
201 |       4: '4px',
202 |       8: '8px',
203 |     },
204 |     boxShadow: {
205 |       sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
206 |       DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
207 |       md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
208 |       lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
209 |       xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
210 |       '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
211 |       inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
212 |       none: 'none',
213 |     },
214 |     boxShadowColor: ({ theme }) => theme('colors'),
215 |     caretColor: ({ theme }) => theme('colors'),
216 |     accentColor: ({ theme }) => ({
217 |       ...theme('colors'),
218 |       auto: 'auto',
219 |     }),
220 |     contrast: {
221 |       0: '0',
222 |       50: '.5',
223 |       75: '.75',
224 |       100: '1',
225 |       125: '1.25',
226 |       150: '1.5',
227 |       200: '2',
228 |     },
229 |     container: {},
230 |     content: {
231 |       none: 'none',
232 |     },
233 |     cursor: {
234 |       auto: 'auto',
235 |       default: 'default',
236 |       pointer: 'pointer',
237 |       wait: 'wait',
238 |       text: 'text',
239 |       move: 'move',
240 |       help: 'help',
241 |       'not-allowed': 'not-allowed',
242 |       none: 'none',
243 |       'context-menu': 'context-menu',
244 |       progress: 'progress',
245 |       cell: 'cell',
246 |       crosshair: 'crosshair',
247 |       'vertical-text': 'vertical-text',
248 |       alias: 'alias',
249 |       copy: 'copy',
250 |       'no-drop': 'no-drop',
251 |       grab: 'grab',
252 |       grabbing: 'grabbing',
253 |       'all-scroll': 'all-scroll',
254 |       'col-resize': 'col-resize',
255 |       'row-resize': 'row-resize',
256 |       'n-resize': 'n-resize',
257 |       'e-resize': 'e-resize',
258 |       's-resize': 's-resize',
259 |       'w-resize': 'w-resize',
260 |       'ne-resize': 'ne-resize',
261 |       'nw-resize': 'nw-resize',
262 |       'se-resize': 'se-resize',
263 |       'sw-resize': 'sw-resize',
264 |       'ew-resize': 'ew-resize',
265 |       'ns-resize': 'ns-resize',
266 |       'nesw-resize': 'nesw-resize',
267 |       'nwse-resize': 'nwse-resize',
268 |       'zoom-in': 'zoom-in',
269 |       'zoom-out': 'zoom-out',
270 |     },
271 |     divideColor: ({ theme }) => theme('borderColor'),
272 |     divideOpacity: ({ theme }) => theme('borderOpacity'),
273 |     divideWidth: ({ theme }) => theme('borderWidth'),
274 |     dropShadow: {
275 |       sm: '0 1px 1px rgb(0 0 0 / 0.05)',
276 |       DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
277 |       md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
278 |       lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
279 |       xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
280 |       '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
281 |       none: '0 0 #0000',
282 |     },
283 |     fill: ({ theme }) => theme('colors'),
284 |     grayscale: {
285 |       0: '0',
286 |       DEFAULT: '100%',
287 |     },
288 |     hueRotate: {
289 |       0: '0deg',
290 |       15: '15deg',
291 |       30: '30deg',
292 |       60: '60deg',
293 |       90: '90deg',
294 |       180: '180deg',
295 |     },
296 |     invert: {
297 |       0: '0',
298 |       DEFAULT: '100%',
299 |     },
300 |     flex: {
301 |       1: '1 1 0%',
302 |       auto: '1 1 auto',
303 |       initial: '0 1 auto',
304 |       none: 'none',
305 |     },
306 |     flexBasis: ({ theme }) => ({
307 |       auto: 'auto',
308 |       ...theme('spacing'),
309 |       '1/2': '50%',
310 |       '1/3': '33.333333%',
311 |       '2/3': '66.666667%',
312 |       '1/4': '25%',
313 |       '2/4': '50%',
314 |       '3/4': '75%',
315 |       '1/5': '20%',
316 |       '2/5': '40%',
317 |       '3/5': '60%',
318 |       '4/5': '80%',
319 |       '1/6': '16.666667%',
320 |       '2/6': '33.333333%',
321 |       '3/6': '50%',
322 |       '4/6': '66.666667%',
323 |       '5/6': '83.333333%',
324 |       '1/12': '8.333333%',
325 |       '2/12': '16.666667%',
326 |       '3/12': '25%',
327 |       '4/12': '33.333333%',
328 |       '5/12': '41.666667%',
329 |       '6/12': '50%',
330 |       '7/12': '58.333333%',
331 |       '8/12': '66.666667%',
332 |       '9/12': '75%',
333 |       '10/12': '83.333333%',
334 |       '11/12': '91.666667%',
335 |       full: '100%',
336 |     }),
337 |     flexGrow: {
338 |       0: '0',
339 |       DEFAULT: '1',
340 |     },
341 |     flexShrink: {
342 |       0: '0',
343 |       DEFAULT: '1',
344 |     },
345 |     fontFamily: {
346 |       sans: [
347 |         'ui-sans-serif',
348 |         'system-ui',
349 |         '-apple-system',
350 |         'BlinkMacSystemFont',
351 |         '"Segoe UI"',
352 |         'Roboto',
353 |         '"Helvetica Neue"',
354 |         'Arial',
355 |         '"Noto Sans"',
356 |         'sans-serif',
357 |         '"Apple Color Emoji"',
358 |         '"Segoe UI Emoji"',
359 |         '"Segoe UI Symbol"',
360 |         '"Noto Color Emoji"',
361 |       ],
362 |       serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
363 |       mono: [
364 |         'ui-monospace',
365 |         'SFMono-Regular',
366 |         'Menlo',
367 |         'Monaco',
368 |         'Consolas',
369 |         '"Liberation Mono"',
370 |         '"Courier New"',
371 |         'monospace',
372 |       ],
373 |     },
374 |     fontSize: {
375 |       xs: ['0.75rem', { lineHeight: '1rem' }],
376 |       sm: ['0.875rem', { lineHeight: '1.25rem' }],
377 |       base: ['1rem', { lineHeight: '1.5rem' }],
378 |       lg: ['1.125rem', { lineHeight: '1.75rem' }],
379 |       xl: ['1.25rem', { lineHeight: '1.75rem' }],
380 |       '2xl': ['1.5rem', { lineHeight: '2rem' }],
381 |       '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
382 |       '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
383 |       '5xl': ['3rem', { lineHeight: '1' }],
384 |       '6xl': ['3.75rem', { lineHeight: '1' }],
385 |       '7xl': ['4.5rem', { lineHeight: '1' }],
386 |       '8xl': ['6rem', { lineHeight: '1' }],
387 |       '9xl': ['8rem', { lineHeight: '1' }],
388 |     },
389 |     fontWeight: {
390 |       thin: '100',
391 |       extralight: '200',
392 |       light: '300',
393 |       normal: '400',
394 |       medium: '500',
395 |       semibold: '600',
396 |       bold: '700',
397 |       extrabold: '800',
398 |       black: '900',
399 |     },
400 |     gap: ({ theme }) => theme('spacing'),
401 |     gradientColorStops: ({ theme }) => theme('colors'),
402 |     gridAutoColumns: {
403 |       auto: 'auto',
404 |       min: 'min-content',
405 |       max: 'max-content',
406 |       fr: 'minmax(0, 1fr)',
407 |     },
408 |     gridAutoRows: {
409 |       auto: 'auto',
410 |       min: 'min-content',
411 |       max: 'max-content',
412 |       fr: 'minmax(0, 1fr)',
413 |     },
414 |     gridColumn: {
415 |       auto: 'auto',
416 |       'span-1': 'span 1 / span 1',
417 |       'span-2': 'span 2 / span 2',
418 |       'span-3': 'span 3 / span 3',
419 |       'span-4': 'span 4 / span 4',
420 |       'span-5': 'span 5 / span 5',
421 |       'span-6': 'span 6 / span 6',
422 |       'span-7': 'span 7 / span 7',
423 |       'span-8': 'span 8 / span 8',
424 |       'span-9': 'span 9 / span 9',
425 |       'span-10': 'span 10 / span 10',
426 |       'span-11': 'span 11 / span 11',
427 |       'span-12': 'span 12 / span 12',
428 |       'span-full': '1 / -1',
429 |     },
430 |     gridColumnEnd: {
431 |       auto: 'auto',
432 |       1: '1',
433 |       2: '2',
434 |       3: '3',
435 |       4: '4',
436 |       5: '5',
437 |       6: '6',
438 |       7: '7',
439 |       8: '8',
440 |       9: '9',
441 |       10: '10',
442 |       11: '11',
443 |       12: '12',
444 |       13: '13',
445 |     },
446 |     gridColumnStart: {
447 |       auto: 'auto',
448 |       1: '1',
449 |       2: '2',
450 |       3: '3',
451 |       4: '4',
452 |       5: '5',
453 |       6: '6',
454 |       7: '7',
455 |       8: '8',
456 |       9: '9',
457 |       10: '10',
458 |       11: '11',
459 |       12: '12',
460 |       13: '13',
461 |     },
462 |     gridRow: {
463 |       auto: 'auto',
464 |       'span-1': 'span 1 / span 1',
465 |       'span-2': 'span 2 / span 2',
466 |       'span-3': 'span 3 / span 3',
467 |       'span-4': 'span 4 / span 4',
468 |       'span-5': 'span 5 / span 5',
469 |       'span-6': 'span 6 / span 6',
470 |       'span-full': '1 / -1',
471 |     },
472 |     gridRowStart: {
473 |       auto: 'auto',
474 |       1: '1',
475 |       2: '2',
476 |       3: '3',
477 |       4: '4',
478 |       5: '5',
479 |       6: '6',
480 |       7: '7',
481 |     },
482 |     gridRowEnd: {
483 |       auto: 'auto',
484 |       1: '1',
485 |       2: '2',
486 |       3: '3',
487 |       4: '4',
488 |       5: '5',
489 |       6: '6',
490 |       7: '7',
491 |     },
492 |     gridTemplateColumns: {
493 |       none: 'none',
494 |       1: 'repeat(1, minmax(0, 1fr))',
495 |       2: 'repeat(2, minmax(0, 1fr))',
496 |       3: 'repeat(3, minmax(0, 1fr))',
497 |       4: 'repeat(4, minmax(0, 1fr))',
498 |       5: 'repeat(5, minmax(0, 1fr))',
499 |       6: 'repeat(6, minmax(0, 1fr))',
500 |       7: 'repeat(7, minmax(0, 1fr))',
501 |       8: 'repeat(8, minmax(0, 1fr))',
502 |       9: 'repeat(9, minmax(0, 1fr))',
503 |       10: 'repeat(10, minmax(0, 1fr))',
504 |       11: 'repeat(11, minmax(0, 1fr))',
505 |       12: 'repeat(12, minmax(0, 1fr))',
506 |     },
507 |     gridTemplateRows: {
508 |       none: 'none',
509 |       1: 'repeat(1, minmax(0, 1fr))',
510 |       2: 'repeat(2, minmax(0, 1fr))',
511 |       3: 'repeat(3, minmax(0, 1fr))',
512 |       4: 'repeat(4, minmax(0, 1fr))',
513 |       5: 'repeat(5, minmax(0, 1fr))',
514 |       6: 'repeat(6, minmax(0, 1fr))',
515 |     },
516 |     height: ({ theme }) => ({
517 |       auto: 'auto',
518 |       ...theme('spacing'),
519 |       '1/2': '50%',
520 |       '1/3': '33.333333%',
521 |       '2/3': '66.666667%',
522 |       '1/4': '25%',
523 |       '2/4': '50%',
524 |       '3/4': '75%',
525 |       '1/5': '20%',
526 |       '2/5': '40%',
527 |       '3/5': '60%',
528 |       '4/5': '80%',
529 |       '1/6': '16.666667%',
530 |       '2/6': '33.333333%',
531 |       '3/6': '50%',
532 |       '4/6': '66.666667%',
533 |       '5/6': '83.333333%',
534 |       full: '100%',
535 |       screen: '100vh',
536 |       min: 'min-content',
537 |       max: 'max-content',
538 |       fit: 'fit-content',
539 |     }),
540 |     inset: ({ theme }) => ({
541 |       auto: 'auto',
542 |       ...theme('spacing'),
543 |       '1/2': '50%',
544 |       '1/3': '33.333333%',
545 |       '2/3': '66.666667%',
546 |       '1/4': '25%',
547 |       '2/4': '50%',
548 |       '3/4': '75%',
549 |       full: '100%',
550 |     }),
551 |     keyframes: {
552 |       spin: {
553 |         to: {
554 |           transform: 'rotate(360deg)',
555 |         },
556 |       },
557 |       ping: {
558 |         '75%, 100%': {
559 |           transform: 'scale(2)',
560 |           opacity: '0',
561 |         },
562 |       },
563 |       pulse: {
564 |         '50%': {
565 |           opacity: '.5',
566 |         },
567 |       },
568 |       bounce: {
569 |         '0%, 100%': {
570 |           transform: 'translateY(-25%)',
571 |           animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
572 |         },
573 |         '50%': {
574 |           transform: 'none',
575 |           animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
576 |         },
577 |       },
578 |     },
579 |     letterSpacing: {
580 |       tighter: '-0.05em',
581 |       tight: '-0.025em',
582 |       normal: '0em',
583 |       wide: '0.025em',
584 |       wider: '0.05em',
585 |       widest: '0.1em',
586 |     },
587 |     lineHeight: {
588 |       none: '1',
589 |       tight: '1.25',
590 |       snug: '1.375',
591 |       normal: '1.5',
592 |       relaxed: '1.625',
593 |       loose: '2',
594 |       3: '.75rem',
595 |       4: '1rem',
596 |       5: '1.25rem',
597 |       6: '1.5rem',
598 |       7: '1.75rem',
599 |       8: '2rem',
600 |       9: '2.25rem',
601 |       10: '2.5rem',
602 |     },
603 |     listStyleType: {
604 |       none: 'none',
605 |       disc: 'disc',
606 |       decimal: 'decimal',
607 |     },
608 |     margin: ({ theme }) => ({
609 |       auto: 'auto',
610 |       ...theme('spacing'),
611 |     }),
612 |     maxHeight: ({ theme }) => ({
613 |       ...theme('spacing'),
614 |       full: '100%',
615 |       screen: '100vh',
616 |       min: 'min-content',
617 |       max: 'max-content',
618 |       fit: 'fit-content',
619 |     }),
620 |     maxWidth: ({ theme, breakpoints }) => ({
621 |       none: 'none',
622 |       0: '0rem',
623 |       xs: '20rem',
624 |       sm: '24rem',
625 |       md: '28rem',
626 |       lg: '32rem',
627 |       xl: '36rem',
628 |       '2xl': '42rem',
629 |       '3xl': '48rem',
630 |       '4xl': '56rem',
631 |       '5xl': '64rem',
632 |       '6xl': '72rem',
633 |       '7xl': '80rem',
634 |       full: '100%',
635 |       min: 'min-content',
636 |       max: 'max-content',
637 |       fit: 'fit-content',
638 |       prose: '65ch',
639 |       ...breakpoints(theme('screens')),
640 |     }),
641 |     minHeight: {
642 |       0: '0px',
643 |       full: '100%',
644 |       screen: '100vh',
645 |       min: 'min-content',
646 |       max: 'max-content',
647 |       fit: 'fit-content',
648 |     },
649 |     minWidth: {
650 |       0: '0px',
651 |       full: '100%',
652 |       min: 'min-content',
653 |       max: 'max-content',
654 |       fit: 'fit-content',
655 |     },
656 |     objectPosition: {
657 |       bottom: 'bottom',
658 |       center: 'center',
659 |       left: 'left',
660 |       'left-bottom': 'left bottom',
661 |       'left-top': 'left top',
662 |       right: 'right',
663 |       'right-bottom': 'right bottom',
664 |       'right-top': 'right top',
665 |       top: 'top',
666 |     },
667 |     opacity: {
668 |       0: '0',
669 |       5: '0.05',
670 |       10: '0.1',
671 |       20: '0.2',
672 |       25: '0.25',
673 |       30: '0.3',
674 |       40: '0.4',
675 |       50: '0.5',
676 |       60: '0.6',
677 |       70: '0.7',
678 |       75: '0.75',
679 |       80: '0.8',
680 |       90: '0.9',
681 |       95: '0.95',
682 |       100: '1',
683 |     },
684 |     order: {
685 |       first: '-9999',
686 |       last: '9999',
687 |       none: '0',
688 |       1: '1',
689 |       2: '2',
690 |       3: '3',
691 |       4: '4',
692 |       5: '5',
693 |       6: '6',
694 |       7: '7',
695 |       8: '8',
696 |       9: '9',
697 |       10: '10',
698 |       11: '11',
699 |       12: '12',
700 |     },
701 |     padding: ({ theme }) => theme('spacing'),
702 |     placeholderColor: ({ theme }) => theme('colors'),
703 |     placeholderOpacity: ({ theme }) => theme('opacity'),
704 |     outlineColor: ({ theme }) => theme('colors'),
705 |     outlineOffset: {
706 |       0: '0px',
707 |       1: '1px',
708 |       2: '2px',
709 |       4: '4px',
710 |       8: '8px',
711 |     },
712 |     outlineWidth: {
713 |       0: '0px',
714 |       1: '1px',
715 |       2: '2px',
716 |       4: '4px',
717 |       8: '8px',
718 |     },
719 |     ringColor: ({ theme }) => ({
720 |       DEFAULT: theme('colors.blue.500', '#3b82f6'),
721 |       ...theme('colors'),
722 |     }),
723 |     ringOffsetColor: ({ theme }) => theme('colors'),
724 |     ringOffsetWidth: {
725 |       0: '0px',
726 |       1: '1px',
727 |       2: '2px',
728 |       4: '4px',
729 |       8: '8px',
730 |     },
731 |     ringOpacity: ({ theme }) => ({
732 |       DEFAULT: '0.5',
733 |       ...theme('opacity'),
734 |     }),
735 |     ringWidth: {
736 |       DEFAULT: '3px',
737 |       0: '0px',
738 |       1: '1px',
739 |       2: '2px',
740 |       4: '4px',
741 |       8: '8px',
742 |     },
743 |     rotate: {
744 |       0: '0deg',
745 |       1: '1deg',
746 |       2: '2deg',
747 |       3: '3deg',
748 |       6: '6deg',
749 |       12: '12deg',
750 |       45: '45deg',
751 |       90: '90deg',
752 |       180: '180deg',
753 |     },
754 |     saturate: {
755 |       0: '0',
756 |       50: '.5',
757 |       100: '1',
758 |       150: '1.5',
759 |       200: '2',
760 |     },
761 |     scale: {
762 |       0: '0',
763 |       50: '.5',
764 |       75: '.75',
765 |       90: '.9',
766 |       95: '.95',
767 |       100: '1',
768 |       105: '1.05',
769 |       110: '1.1',
770 |       125: '1.25',
771 |       150: '1.5',
772 |     },
773 |     scrollMargin: ({ theme }) => ({
774 |       ...theme('spacing'),
775 |     }),
776 |     scrollPadding: ({ theme }) => theme('spacing'),
777 |     sepia: {
778 |       0: '0',
779 |       DEFAULT: '100%',
780 |     },
781 |     skew: {
782 |       0: '0deg',
783 |       1: '1deg',
784 |       2: '2deg',
785 |       3: '3deg',
786 |       6: '6deg',
787 |       12: '12deg',
788 |     },
789 |     space: ({ theme }) => ({
790 |       ...theme('spacing'),
791 |     }),
792 |     stroke: ({ theme }) => theme('colors'),
793 |     strokeWidth: {
794 |       0: '0',
795 |       1: '1',
796 |       2: '2',
797 |     },
798 |     textColor: ({ theme }) => theme('colors'),
799 |     textDecorationColor: ({ theme }) => theme('colors'),
800 |     textDecorationThickness: {
801 |       auto: 'auto',
802 |       'from-font': 'from-font',
803 |       0: '0px',
804 |       1: '1px',
805 |       2: '2px',
806 |       4: '4px',
807 |       8: '8px',
808 |     },
809 |     textUnderlineOffset: {
810 |       auto: 'auto',
811 |       0: '0px',
812 |       1: '1px',
813 |       2: '2px',
814 |       4: '4px',
815 |       8: '8px',
816 |     },
817 |     textIndent: ({ theme }) => ({
818 |       ...theme('spacing'),
819 |     }),
820 |     textOpacity: ({ theme }) => theme('opacity'),
821 |     transformOrigin: {
822 |       center: 'center',
823 |       top: 'top',
824 |       'top-right': 'top right',
825 |       right: 'right',
826 |       'bottom-right': 'bottom right',
827 |       bottom: 'bottom',
828 |       'bottom-left': 'bottom left',
829 |       left: 'left',
830 |       'top-left': 'top left',
831 |     },
832 |     transitionDelay: {
833 |       75: '75ms',
834 |       100: '100ms',
835 |       150: '150ms',
836 |       200: '200ms',
837 |       300: '300ms',
838 |       500: '500ms',
839 |       700: '700ms',
840 |       1000: '1000ms',
841 |     },
842 |     transitionDuration: {
843 |       DEFAULT: '150ms',
844 |       75: '75ms',
845 |       100: '100ms',
846 |       150: '150ms',
847 |       200: '200ms',
848 |       300: '300ms',
849 |       500: '500ms',
850 |       700: '700ms',
851 |       1000: '1000ms',
852 |     },
853 |     transitionProperty: {
854 |       none: 'none',
855 |       all: 'all',
856 |       DEFAULT:
857 |         'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
858 |       colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
859 |       opacity: 'opacity',
860 |       shadow: 'box-shadow',
861 |       transform: 'transform',
862 |     },
863 |     transitionTimingFunction: {
864 |       DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
865 |       linear: 'linear',
866 |       in: 'cubic-bezier(0.4, 0, 1, 1)',
867 |       out: 'cubic-bezier(0, 0, 0.2, 1)',
868 |       'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
869 |     },
870 |     translate: ({ theme }) => ({
871 |       ...theme('spacing'),
872 |       '1/2': '50%',
873 |       '1/3': '33.333333%',
874 |       '2/3': '66.666667%',
875 |       '1/4': '25%',
876 |       '2/4': '50%',
877 |       '3/4': '75%',
878 |       full: '100%',
879 |     }),
880 |     width: ({ theme }) => ({
881 |       auto: 'auto',
882 |       ...theme('spacing'),
883 |       '1/2': '50%',
884 |       '1/3': '33.333333%',
885 |       '2/3': '66.666667%',
886 |       '1/4': '25%',
887 |       '2/4': '50%',
888 |       '3/4': '75%',
889 |       '1/5': '20%',
890 |       '2/5': '40%',
891 |       '3/5': '60%',
892 |       '4/5': '80%',
893 |       '1/6': '16.666667%',
894 |       '2/6': '33.333333%',
895 |       '3/6': '50%',
896 |       '4/6': '66.666667%',
897 |       '5/6': '83.333333%',
898 |       '1/12': '8.333333%',
899 |       '2/12': '16.666667%',
900 |       '3/12': '25%',
901 |       '4/12': '33.333333%',
902 |       '5/12': '41.666667%',
903 |       '6/12': '50%',
904 |       '7/12': '58.333333%',
905 |       '8/12': '66.666667%',
906 |       '9/12': '75%',
907 |       '10/12': '83.333333%',
908 |       '11/12': '91.666667%',
909 |       full: '100%',
910 |       screen: '100vw',
911 |       min: 'min-content',
912 |       max: 'max-content',
913 |       fit: 'fit-content',
914 |     }),
915 |     willChange: {
916 |       auto: 'auto',
917 |       scroll: 'scroll-position',
918 |       contents: 'contents',
919 |       transform: 'transform',
920 |     },
921 |     zIndex: {
922 |       auto: 'auto',
923 |       0: '0',
924 |       10: '10',
925 |       20: '20',
926 |       30: '30',
927 |       40: '40',
928 |       50: '50',
929 |     },
930 |   },
931 |   variantOrder: [
932 |     'first',
933 |     'last',
934 |     'odd',
935 |     'even',
936 |     'visited',
937 |     'checked',
938 |     'empty',
939 |     'read-only',
940 |     'group-hover',
941 |     'group-focus',
942 |     'focus-within',
943 |     'hover',
944 |     'focus',
945 |     'focus-visible',
946 |     'active',
947 |     'disabled',
948 |   ],
949 |   plugins: [],
950 | }
951 | 


--------------------------------------------------------------------------------