TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Frontend: migrating from react to vue (login form)

Browse Source
pull/3/head
TZGyn 2 years ago
parent 7788505a75
commit c5bdae445b
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
37 changed files with 829 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1
vue-frontend/.env
Unescape Escape View File

@ -0,0 +1 @@
BASE_URL=https//5173.tzgyn.com

28
vue-frontend/.gitignore vendored
Unescape Escape View File

@ -0,0 +1,28 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

16
vue-frontend/.prettierrc.yaml
Unescape Escape View File

@ -0,0 +1,16 @@
---
printWidth: 80
tabWidth: 4
useTabs: true
semi: false
singleQuote: true
quoteProps: consistent
jsxSingleQuote: true
trailingComma: es5
bracketSpacing: true
bracketSameLine: true
arrowParens: always
htmlWhitespaceSensitivity: strict
vueIndentScriptAndStyle: false
singleAttributePerLine: true
plugins: [prettier-plugin-tailwindcss]

3
vue-frontend/.vscode/extensions.json vendored
Unescape Escape View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

40
vue-frontend/README.md
Unescape Escape View File

@ -0,0 +1,40 @@
# vue-frontend
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```

BIN
vue-frontend/bun.lockb
View File

Binary file not shown.

15
vue-frontend/components.json
Unescape Escape View File

@ -0,0 +1,15 @@
{
"style": "default",
"typescript": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/assets/index.css",
"baseColor": "slate",
"cssVariables": true
},
"framework": "vite",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}

1
vue-frontend/env.d.ts vendored
Unescape Escape View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

13
vue-frontend/index.html
Unescape Escape View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

38
vue-frontend/package.json
Unescape Escape View File

@ -0,0 +1,38 @@
{
"name": "vue-frontend",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},
"dependencies": {
"@vueuse/core": "^10.5.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"lucide-vue-next": "^0.288.0",
"radix-vue": "^0.4.1",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"vue": "^3.3.4",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@vitejs/plugin-vue": "^4.4.0",
"@vue/tsconfig": "^0.4.0",
"autoprefixer": "^10.4.16",
"npm-run-all2": "^6.1.1",
"postcss": "^8.4.31",
"prettier": "^3.0.3",
"prettier-plugin-tailwindcss": "^0.5.6",
"tailwindcss": "^3.3.3",
"typescript": "~5.2.0",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
}
}

6
vue-frontend/postcss.config.js
Unescape Escape View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
vue-frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

11
vue-frontend/src/App.vue
Unescape Escape View File

@ -0,0 +1,11 @@
<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import Navbar from './components/Navbar.vue'
const route = useRoute()
</script>
<template>
<Navbar v-if="route.name !== 'login' && route.name !== 'signup'" />
<RouterView />
</template>

80
vue-frontend/src/assets/index.css
Unescape Escape View File

@ -0,0 +1,80 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
#app {
@apply h-screen w-screen;
}

1
vue-frontend/src/assets/logo.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

14
vue-frontend/src/components/Navbar.vue
Unescape Escape View File

@ -0,0 +1,14 @@
<script setup lang="ts">
import ToggleThemeButton from './ToggleThemeButton.vue'
</script>
<template>
<div className="flex justify-center border-b border-b-border px-2">
<div
className="flex w-full max-w-6xl items-center justify-between py-2">
<div className="cursor-pointer font-bold"> Shortener </div>
<div className="flex items-center gap-2">
<ToggleThemeButton />
</div>
</div>
</div>
</template>

21
vue-frontend/src/components/ToggleThemeButton.vue
Unescape Escape View File

@ -0,0 +1,21 @@
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Sun, Moon } from 'lucide-vue-next'
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
// const isDark = useDark({
// selector: 'body',
// attribute: 'color-scheme',
// valueDark: 'dark',
// valueLight: 'light',
// })
const toggleDark = useToggle(isDark)
</script>
<template>
<Button @click="() => toggleDark()">
<Moon v-if="isDark" />
<Sun v-else />
</Button>
</template>

76
vue-frontend/src/components/UserLoginForm.vue
Unescape Escape View File

@ -0,0 +1,76 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Loader2, GithubIcon } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
const isLoading = ref(false)
async function onSubmit(event: Event) {
event.preventDefault()
isLoading.value = true
setTimeout(() => {
isLoading.value = false
}, 3000)
}
</script>
<template>
<div :class="cn('grid gap-6', $attrs.class ?? '')">
<form @submit="onSubmit">
<div class="grid gap-6">
<div class="grid gap-1">
<Label for="email"> Email </Label>
<Input
id="email"
placeholder="name@example.com"
type="email"
auto-capitalize="none"
auto-complete="email"
auto-correct="off"
:disabled="isLoading" />
</div>
<div class="grid gap-1">
<Label for="password"> Password </Label>
<Input
id="password"
placeholder="••••••••"
type="password"
:disabled="isLoading" />
</div>
<Button :disabled="isLoading">
<Loader2
v-if="isLoading"
class="mr-2 h-4 w-4 animate-spin" />
Sign In
</Button>
</div>
</form>
<!-- <div class="relative"> -->
<!-- <div class="absolute inset-0 flex items-center"> -->
<!-- <span class="w-full border-t" /> -->
<!-- </div> -->
<!-- <div class="relative flex justify-center text-xs uppercase"> -->
<!-- <span class="bg-background px-2 text-muted-foreground"> -->
<!-- Or continue with -->
<!-- </span> -->
<!-- </div> -->
<!-- </div> -->
<!-- <Button -->
<!-- variant="outline" -->
<!-- type="button" -->
<!-- :disabled="isLoading"> -->
<!-- <Loader2 -->
<!-- v-if="isLoading" -->
<!-- class="mr-2 h-4 w-4 animate-spin" /> -->
<!-- <GithubIcon -->
<!-- v-else -->
<!-- class="mr-2 h-4 w-4" /> -->
<!-- GitHub -->
<!-- </Button> -->
</div>
</template>

84
vue-frontend/src/components/UserSignUpForm.vue
Unescape Escape View File

@ -0,0 +1,84 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Loader2, GithubIcon } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
const isLoading = ref(false)
async function onSubmit(event: Event) {
event.preventDefault()
isLoading.value = true
setTimeout(() => {
isLoading.value = false
}, 3000)
}
</script>
<template>
<div :class="cn('grid gap-6', $attrs.class ?? '')">
<form @submit="onSubmit">
<div class="grid gap-6">
<div class="grid gap-2">
<Label for="username"> Username </Label>
<Input
id="username"
placeholder="example user"
type="text"
:disabled="isLoading" />
</div>
<div class="grid gap-2">
<Label for="email"> Email </Label>
<Input
id="email"
placeholder="name@example.com"
type="email"
auto-capitalize="none"
auto-complete="email"
auto-correct="off"
:disabled="isLoading" />
</div>
<div class="grid gap-2">
<Label for="password"> Password </Label>
<Input
id="password"
placeholder="••••••••"
type="password"
:disabled="isLoading" />
</div>
<Button :disabled="isLoading">
<Loader2
v-if="isLoading"
class="mr-2 h-4 w-4 animate-spin" />
Sign Up
</Button>
</div>
</form>
<!-- <div class="relative"> -->
<!-- <div class="absolute inset-0 flex items-center"> -->
<!-- <span class="w-full border-t" /> -->
<!-- </div> -->
<!-- <div class="relative flex justify-center text-xs uppercase"> -->
<!-- <span class="bg-background px-2 text-muted-foreground"> -->
<!-- Or continue with -->
<!-- </span> -->
<!-- </div> -->
<!-- </div> -->
<!-- <Button -->
<!-- variant="outline" -->
<!-- type="button" -->
<!-- :disabled="isLoading"> -->
<!-- <Loader2 -->
<!-- v-if="isLoading" -->
<!-- class="mr-2 h-4 w-4 animate-spin" /> -->
<!-- <GithubIcon -->
<!-- v-else -->
<!-- class="mr-2 h-4 w-4" /> -->
<!-- GitHub -->
<!-- </Button> -->
</div>
</template>

23
vue-frontend/src/components/ui/button/Button.vue
Unescape Escape View File

@ -0,0 +1,23 @@
<script setup lang="ts">
import { buttonVariants } from '.'
import { cn } from '@/lib/utils'
interface Props {
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
as?: string
}
withDefaults(defineProps<Props>(), {
as: 'button',
})
</script>
<template>
<component
:is="as"
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
>
<slot />
</component>
</template>

33
vue-frontend/src/components/ui/button/index.ts
Unescape Escape View File

@ -0,0 +1,33 @@
import { cva } from 'class-variance-authority'
export { default as Button } from './Button.vue'
export const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default:
'bg-primary-foreground text-primary hover:bg-primary-foreground/90',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
}
)

22
vue-frontend/src/components/ui/input/Input.vue
Unescape Escape View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'
const props = defineProps<{
defaultValue?: string | number
modelValue?: string | number
}>()
const emits = defineEmits<{
(e: 'update:modelValue', payload: string | number): void
}>()
const modelValue = useVModel(props, 'modelValue', emits, {
passive: true,
defaultValue: props.defaultValue,
})
</script>
<template>
<input v-model="modelValue" type="text" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
</template>

1
vue-frontend/src/components/ui/input/index.ts
Unescape Escape View File

@ -0,0 +1 @@
export { default as Input } from './Input.vue'

20
vue-frontend/src/components/ui/label/Label.vue
Unescape Escape View File

@ -0,0 +1,20 @@
<script setup lang="ts">
import { Label, type LabelProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<LabelProps & { class?: string }>()
</script>
<template>
<Label
v-bind="props"
:class="
cn(
'block text-sm tracking-tight font-medium text-foreground text-left',
props.class,
)
"
>
<slot />
</Label>
</template>

1
vue-frontend/src/components/ui/label/index.ts
Unescape Escape View File

@ -0,0 +1 @@
export { default as Label } from './Label.vue'

3
vue-frontend/src/lib/auth.ts
Unescape Escape View File

@ -0,0 +1,3 @@
export const isAuthenticated = async () => {
return false
}

7
vue-frontend/src/lib/utils.ts
Unescape Escape View File

@ -0,0 +1,7 @@
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

11
vue-frontend/src/main.ts
Unescape Escape View File

@ -0,0 +1,11 @@
import "./assets/index.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount("#app");

37
vue-frontend/src/router/index.ts
Unescape Escape View File

@ -0,0 +1,37 @@
import { createRouter, createWebHistory } from 'vue-router'
import { isAuthenticated } from '@/lib/auth'
import HomeView from '@/views/HomeView.vue'
import LoginPage from '@/views/LoginPage.vue'
import SignUpPage from '@/views/SignUpPage.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: HomeView,
},
{
path: '/login',
name: 'login',
component: LoginPage,
},
{
path: '/signup',
name: 'signup',
component: SignUpPage,
},
],
})
router.beforeEach(async (to) => {
const isLoggedIn = await isAuthenticated()
if (isLoggedIn && (to.name === 'login' || to.name === 'signup')) {
return { name: 'home' }
}
if (!isLoggedIn && to.name !== 'login' && to.name !== 'signup') {
return { name: 'login' }
}
})
export default router

3
vue-frontend/src/views/HomeView.vue
Unescape Escape View File

@ -0,0 +1,3 @@
<template>
<div> Test </div>
</template>

43
vue-frontend/src/views/LoginPage.vue
Unescape Escape View File

@ -0,0 +1,43 @@
<script setup lang="ts">
import { Link } from 'lucide-vue-next'
import UserLoginForm from '@/components/UserLoginForm.vue'
</script>
<template>
<div
class="container relative grid h-full flex-col items-center justify-center xl:max-w-none xl:grid-cols-7 xl:px-0">
<div
class="absolute left-10 top-10 z-20 flex items-center text-lg font-medium">
<Link class="mr-2 h-6 w-6" />
Shortener
</div>
<div
class="relative col-span-4 hidden h-full flex-col bg-muted p-10 text-white dark:border-r xl:flex">
<div class="absolute inset-0 bg-zinc-900" />
</div>
<div class="col-span-3 lg:p-8">
<div
class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<div class="flex flex-col gap-10 text-center">
<div class="flex flex-col gap-2 pb-8">
<h1 class="text-2xl font-semibold tracking-tight">
Welcome Back
</h1>
<p class="text-sm text-muted-foreground">
Sign in to your account
</p>
</div>
<UserLoginForm />
<p class="px-8 text-center text-sm text-muted-foreground">
Don't have an account?
<RouterLink
to="signup"
class="underline underline-offset-4 hover:text-primary">
Sign Up Now
</RouterLink>
</p>
</div>
</div>
</div>
</div>
</template>

43
vue-frontend/src/views/SignUpPage.vue
Unescape Escape View File

@ -0,0 +1,43 @@
<script setup lang="ts">
import { Link } from 'lucide-vue-next'
import UserSignUpForm from '@/components/UserSignUpForm.vue'
</script>
<template>
<div
class="container relative grid h-full flex-col items-center justify-center xl:max-w-none xl:grid-cols-7 xl:px-0">
<div
class="absolute left-10 top-10 z-20 flex items-center text-lg font-medium">
<Link class="mr-2 h-6 w-6" />
Shortener
</div>
<div
class="relative col-span-4 hidden h-full flex-col bg-muted p-10 text-white dark:border-r xl:flex">
<div class="absolute inset-0 bg-zinc-900" />
</div>
<div class="col-span-3 lg:p-8">
<div
class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<div class="flex flex-col gap-10 text-center">
<div class="flex flex-col gap-2 pb-8">
<h1 class="text-2xl font-semibold tracking-tight">
Get Started
</h1>
<p class="text-sm text-muted-foreground">
Create a new account
</p>
</div>
<UserSignUpForm />
<p class="px-8 text-center text-sm text-muted-foreground">
Have an account?
<RouterLink
to="login"
class="underline underline-offset-4 hover:text-primary">
Sign In Now
</RouterLink>
</p>
</div>
</div>
</div>
</div>
</template>

79
vue-frontend/tailwind.config.js
Unescape Escape View File

@ -0,0 +1,79 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: [
'./pages/**/*.{ts,tsx,vue}',
'./components/**/*.{ts,tsx,vue}',
'./app/**/*.{ts,tsx,vue}',
'./src/**/*.{ts,tsx,vue}',
'./index.html',
],
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
},
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
keyframes: {
'accordion-down': {
from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
},
},
},
plugins: [require('tailwindcss-animate')],
}

12
vue-frontend/tsconfig.app.json
Unescape Escape View File

@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

11
vue-frontend/tsconfig.json
Unescape Escape View File

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

16
vue-frontend/tsconfig.node.json
Unescape Escape View File

@ -0,0 +1,16 @@
{
"extends": "@tsconfig/node18/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

16
vue-frontend/vite.config.ts
Unescape Escape View File

@ -0,0 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Write Preview
Loading…
Cancel
Save