initial
This commit is contained in:
commit
80616ccf51
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
13
.typegen.js
Normal file
13
.typegen.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import path from 'node:path'
|
||||||
|
import { generateApi } from 'swagger-typescript-api'
|
||||||
|
import 'dotenv/config';
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
await generateApi({
|
||||||
|
name: 'swagger-types.ts',
|
||||||
|
output: path.resolve(process.cwd(), 'api'),
|
||||||
|
typePrefix: 'I',
|
||||||
|
url: 'https://wp.koptilnya.xyz/rest-api/schema',
|
||||||
|
extractEnums: true,
|
||||||
|
})
|
||||||
|
})()
|
||||||
75
README.md
Normal file
75
README.md
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
# Nuxt Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm preview
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
12505
api/Api.ts
Normal file
12505
api/Api.ts
Normal file
File diff suppressed because it is too large
Load Diff
4
api/endpoints/getProductList.ts
Normal file
4
api/endpoints/getProductList.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import api from '~/api/instance'
|
||||||
|
|
||||||
|
export const getProductList = () =>
|
||||||
|
api.wp.v2ProductList()
|
||||||
1
api/endpoints/index.ts
Normal file
1
api/endpoints/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './getProductList'
|
||||||
14
api/instance.ts
Normal file
14
api/instance.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Api } from '~/api/Api'
|
||||||
|
|
||||||
|
const api = new Api({
|
||||||
|
baseUrl: String('https://wp.koptilnya.xyz/wp-json'),
|
||||||
|
})
|
||||||
|
|
||||||
|
const nativeRequest = api.request
|
||||||
|
|
||||||
|
api.request = async function (...args) {
|
||||||
|
const response = await nativeRequest.call(api, ...args)
|
||||||
|
return await response.json()
|
||||||
|
}
|
||||||
|
|
||||||
|
export default api
|
||||||
1
api/queries/index.ts
Normal file
1
api/queries/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './useGetProductList'
|
||||||
9
api/queries/useGetProductList.ts
Normal file
9
api/queries/useGetProductList.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { useQuery } from '@tanstack/vue-query'
|
||||||
|
import { getProductList } from '~/api/endpoints'
|
||||||
|
|
||||||
|
export const useGetProductList = () => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['get-product-list'],
|
||||||
|
queryFn: () => getProductList(),
|
||||||
|
})
|
||||||
|
}
|
||||||
14
api/useGetProduct.ts
Normal file
14
api/useGetProduct.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { useAsyncData } from '#app'
|
||||||
|
|
||||||
|
export function useGetProducts() {
|
||||||
|
return useAsyncData(
|
||||||
|
'products',
|
||||||
|
async () => {
|
||||||
|
const response = await $fetch('https://wp.koptilnya.xyz/wp-json/wp/v2/product')
|
||||||
|
return response
|
||||||
|
},
|
||||||
|
{
|
||||||
|
server: false,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
11
app.vue
Normal file
11
app.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NuxtLayout>
|
||||||
|
<NuxtPage />
|
||||||
|
</NuxtLayout>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '@/assets/scss/main' as *;
|
||||||
|
</style>
|
||||||
6
assets/scss/_breakpoints.scss
Normal file
6
assets/scss/_breakpoints.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
// Breakpoints
|
||||||
|
$breakpoint-sm: 576px;
|
||||||
|
$breakpoint-md: 768px;
|
||||||
|
$breakpoint-lg: 992px;
|
||||||
|
$breakpoint-xl: 1200px;
|
||||||
|
$breakpoint-xxl: 1400px;
|
||||||
70
assets/scss/_reset.scss
Normal file
70
assets/scss/_reset.scss
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
/* Modern CSS Reset */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove default margin and padding */
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
figure,
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
dd {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set core body defaults */
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
text-rendering: optimizeSpeed;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove list styles on ul, ol elements */
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* A elements that don't have a class get default styles */
|
||||||
|
a:not([class]) {
|
||||||
|
text-decoration-skip-ink: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make images easier to work with */
|
||||||
|
img,
|
||||||
|
picture {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inherit fonts for inputs and buttons */
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove all animations and transitions for people that prefer not to see them */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
88
assets/scss/colors.scss
Normal file
88
assets/scss/colors.scss
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
// Brand Colors
|
||||||
|
$brand-primary: #4f46e5; // Основной цвет бренда
|
||||||
|
$brand-secondary: #10b981; // Вторичный цвет бренда
|
||||||
|
|
||||||
|
// Neutral Colors
|
||||||
|
$neutral-50: #f9fafb; // Самый светлый оттенок
|
||||||
|
$neutral-100: #f3f4f6; // Светлый фон
|
||||||
|
$neutral-200: #e5e7eb; // Светлая граница
|
||||||
|
$neutral-300: #d1d5db; // Светлый текст
|
||||||
|
$neutral-400: #9ca3af; // Неактивный текст
|
||||||
|
$neutral-500: #6b7280; // Средний текст
|
||||||
|
$neutral-600: #4b5563; // Основной текст
|
||||||
|
$neutral-700: #374151; // Темный текст
|
||||||
|
$neutral-800: #1f2937; // Очень темный текст
|
||||||
|
$neutral-900: #111827; // Самый темный оттенок
|
||||||
|
|
||||||
|
// Semantic Colors
|
||||||
|
$text-primary: $neutral-900; // Основной текст
|
||||||
|
$text-secondary: $neutral-600; // Вторичный текст
|
||||||
|
$text-muted: $neutral-400; // Неактивный текст
|
||||||
|
$background-primary: $neutral-50; // Основной фон
|
||||||
|
$background-secondary: $neutral-100; // Вторичный фон
|
||||||
|
$border-color: $neutral-200; // Цвет границ
|
||||||
|
|
||||||
|
// Status Colors
|
||||||
|
$success: #10b981; // Успех
|
||||||
|
$warning: #f59e0b; // Предупреждение
|
||||||
|
$error: #ef4444; // Ошибка
|
||||||
|
$info: #3b82f6; // Информация
|
||||||
|
|
||||||
|
// Basic Colors
|
||||||
|
$black: #000000;
|
||||||
|
$dark-background: #13141c;
|
||||||
|
$dark-grey: #171821;
|
||||||
|
$grey-selector: #1b1b24;
|
||||||
|
$grey-blocks: #1e1f2b;
|
||||||
|
$grey-text-highlight: #23242c;
|
||||||
|
$grey-blocks-hover: #262736;
|
||||||
|
$grey-menu: #292a32;
|
||||||
|
$grey-stroke: #323442;
|
||||||
|
$grey-paginator: #323442;
|
||||||
|
$grey-icons: #5b5e6d;
|
||||||
|
$grey-text: #7f808b;
|
||||||
|
$grey-text2: #9A9BAB;
|
||||||
|
$white: #ffffff;
|
||||||
|
$greeen: #9fff00;
|
||||||
|
$greeen-dark: #43611b;
|
||||||
|
$red: #ff4141;
|
||||||
|
$red-dark: #3e232c;
|
||||||
|
$green: #20b26c;
|
||||||
|
$green-dark: #133324;
|
||||||
|
$gold: #ffc35c;
|
||||||
|
|
||||||
|
// Form Elements
|
||||||
|
$grey-form: #1c1d26;
|
||||||
|
$grey-form-stroke: #323442;
|
||||||
|
$grey-button: #21222d;
|
||||||
|
$grey-button-2: #32323c;
|
||||||
|
$grey-button-stroke: #5b5e6d;
|
||||||
|
|
||||||
|
// Export colors for JavaScript
|
||||||
|
:export {
|
||||||
|
black: $black;
|
||||||
|
darkBackground: $dark-background;
|
||||||
|
darkGrey: $dark-grey;
|
||||||
|
greySelector: $grey-selector;
|
||||||
|
greyBlocks: $grey-blocks;
|
||||||
|
greyTextHighlight: $grey-text-highlight;
|
||||||
|
greyBlocksHover: $grey-blocks-hover;
|
||||||
|
greyMenu: $grey-menu;
|
||||||
|
greyStroke: $grey-stroke;
|
||||||
|
greyPaginator: $grey-paginator;
|
||||||
|
greyIcons: $grey-icons;
|
||||||
|
greyText: $grey-text;
|
||||||
|
white: $white;
|
||||||
|
greeen: $greeen;
|
||||||
|
greeenDark: $greeen-dark;
|
||||||
|
red: $red;
|
||||||
|
redDark: $red-dark;
|
||||||
|
green: $green;
|
||||||
|
greenDark: $green-dark;
|
||||||
|
greyForm: $grey-form;
|
||||||
|
greyFormStroke: $grey-form-stroke;
|
||||||
|
greyButton: $grey-button;
|
||||||
|
greyButton2: $grey-button-2;
|
||||||
|
greyButtonStroke: $grey-button-stroke;
|
||||||
|
gold: $gold;
|
||||||
|
}
|
||||||
12
assets/scss/global.scss
Normal file
12
assets/scss/global.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
@use 'main' as *;
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: $text-color;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
@include container;
|
||||||
|
}
|
||||||
78
assets/scss/main.scss
Normal file
78
assets/scss/main.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
@use 'reset';
|
||||||
|
@use 'colors' as *;
|
||||||
|
@use 'typography' as *;
|
||||||
|
@use 'utils' as *;
|
||||||
|
|
||||||
|
// Base styles
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $font-family-base;
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: $font-weight-semibold;
|
||||||
|
line-height: 100%;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@include h1('h1');
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include h2('h2');
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@include h3('h3');
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: $brand-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
121
assets/scss/typography.scss
Normal file
121
assets/scss/typography.scss
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
@use 'utils' as *;
|
||||||
|
|
||||||
|
// Font Face Declarations
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
src:
|
||||||
|
url('/fonts/Inter-Regular.woff2') format('woff2'),
|
||||||
|
url('/fonts/Inter-Regular.woff') format('woff');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
src:
|
||||||
|
url('/fonts/Inter-Medium.woff2') format('woff2'),
|
||||||
|
url('/fonts/Inter-Medium.woff') format('woff');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
src:
|
||||||
|
url('/fonts/Inter-SemiBold.woff2') format('woff2'),
|
||||||
|
url('/fonts/Inter-SemiBold.woff') format('woff');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Font Variables
|
||||||
|
$font-family-base:
|
||||||
|
'Inter',
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
sans-serif;
|
||||||
|
|
||||||
|
// Font Weights
|
||||||
|
$font-weight-regular: 400;
|
||||||
|
$font-weight-medium: 500;
|
||||||
|
$font-weight-semibold: 600;
|
||||||
|
|
||||||
|
// Custom type
|
||||||
|
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
|
||||||
|
@if ($namespace) {
|
||||||
|
@if ($onlyVars) {
|
||||||
|
--#{$namespace}-font-size: #{$size};
|
||||||
|
--#{$namespace}-font-weight: #{$weight};
|
||||||
|
--#{$namespace}-line-height: #{$lineHeight};
|
||||||
|
} @else {
|
||||||
|
font-size: var(--#{$namespace}-font-size, $size);
|
||||||
|
font-weight: var(--#{$namespace}-font-weight, $weight);
|
||||||
|
line-height: var(--#{$namespace}-line-height, $lineHeight);
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
font-size: $size;
|
||||||
|
font-weight: $weight;
|
||||||
|
line-height: $lineHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headline */
|
||||||
|
@mixin h1($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||||
|
@include mobile {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin h2($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||||
|
@include mobile {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin h3($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text */
|
||||||
|
// 16 medium-(medium/bold)
|
||||||
|
@mixin txt-m($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
@mixin txt-m-m($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
@mixin txt-m-b($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 14 regular-(medium/bold)
|
||||||
|
@mixin txt-r($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
@mixin txt-r-m($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
@mixin txt-r-b($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 12 text small-(medium/bold)
|
||||||
|
@mixin txt-s($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
@mixin txt-s-m($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
@mixin txt-s-b($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 10 text-tiny
|
||||||
|
@mixin txt-t($namespace: null, $onlyVars: false) {
|
||||||
|
@include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars);
|
||||||
|
}
|
||||||
153
assets/scss/utils.scss
Normal file
153
assets/scss/utils.scss
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
@use 'sass:color';
|
||||||
|
@use 'sass:math';
|
||||||
|
@use 'breakpoints' as *;
|
||||||
|
|
||||||
|
// Mixins
|
||||||
|
@mixin responsive($breakpoint) {
|
||||||
|
@media (min-width: $breakpoint) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin mobile {
|
||||||
|
@media (max-width: $breakpoint-md) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
|
||||||
|
|
||||||
|
@each $i in $indents {
|
||||||
|
.m#{$i} {
|
||||||
|
margin: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx#{$i} {
|
||||||
|
margin-left: #{$i}px;
|
||||||
|
margin-right: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my#{$i} {
|
||||||
|
margin-top: #{$i}px;
|
||||||
|
margin-bottom: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt#{$i} {
|
||||||
|
margin-top: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb#{$i} {
|
||||||
|
margin-bottom: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml#{$i} {
|
||||||
|
margin-left: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr#{$i} {
|
||||||
|
margin-right: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p#{$i} {
|
||||||
|
padding: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px#{$i} {
|
||||||
|
padding-left: #{$i}px;
|
||||||
|
padding-right: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py#{$i} {
|
||||||
|
padding-top: #{$i}px;
|
||||||
|
padding-bottom: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt#{$i} {
|
||||||
|
padding-top: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb#{$i} {
|
||||||
|
padding-bottom: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl#{$i} {
|
||||||
|
padding-left: #{$i}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr#{$i} {
|
||||||
|
padding-right: #{$i}px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mla {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mra {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $align in ('left', 'right', 'center') {
|
||||||
|
.text-align-#{$align} {
|
||||||
|
text-align: #{$align};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-25 { width: 25% !important; }
|
||||||
|
.w-50 { width: 50% !important; }
|
||||||
|
.w-75 { width: 75% !important; }
|
||||||
|
.w-100 { width: 100% !important; }
|
||||||
|
|
||||||
|
.d-none { display: none !important; }
|
||||||
|
.d-inline { display: inline !important; }
|
||||||
|
.d-inline-block { display: inline-block !important; }
|
||||||
|
.d-block { display: block !important; }
|
||||||
|
.d-table { display: table !important; }
|
||||||
|
.d-table-row { display: table-row !important; }
|
||||||
|
.d-table-cell { display: table-cell !important; }
|
||||||
|
.d-flex { display: flex !important; }
|
||||||
|
.d-inline-flex { display: inline-flex !important; }
|
||||||
|
|
||||||
|
.flex-row { flex-direction: row !important; }
|
||||||
|
.flex-column { flex-direction: column !important; }
|
||||||
|
.flex-row-reverse { flex-direction: row-reverse !important; }
|
||||||
|
.flex-column-reverse { flex-direction: column-reverse !important; }
|
||||||
|
|
||||||
|
.flex-wrap { flex-wrap: wrap !important; }
|
||||||
|
.flex-nowrap { flex-wrap: nowrap !important; }
|
||||||
|
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||||
|
|
||||||
|
.justify-content-start { justify-content: flex-start !important; }
|
||||||
|
.justify-content-end { justify-content: flex-end !important; }
|
||||||
|
.justify-content-center { justify-content: center !important; }
|
||||||
|
.justify-content-between { justify-content: space-between !important; }
|
||||||
|
.justify-content-around { justify-content: space-around !important; }
|
||||||
|
|
||||||
|
.align-items-start { align-items: flex-start !important; }
|
||||||
|
.align-items-end { align-items: flex-end !important; }
|
||||||
|
.align-items-center { align-items: center !important; }
|
||||||
|
.align-items-baseline { align-items: baseline !important; }
|
||||||
|
.align-items-stretch { align-items: stretch !important; }
|
||||||
|
|
||||||
|
.align-content-start { align-content: flex-start !important; }
|
||||||
|
.align-content-end { align-content: flex-end !important; }
|
||||||
|
.align-content-center { align-content: center !important; }
|
||||||
|
.align-content-between { align-content: space-between !important; }
|
||||||
|
.align-content-around { align-content: space-around !important; }
|
||||||
|
.align-content-stretch { align-content: stretch !important; }
|
||||||
|
|
||||||
|
.align-self-auto { align-self: auto !important; }
|
||||||
|
.align-self-start { align-self: flex-start !important; }
|
||||||
|
.align-self-end { align-self: flex-end !important; }
|
||||||
|
.align-self-center { align-self: center !important; }
|
||||||
|
.align-self-baseline { align-self: baseline !important; }
|
||||||
|
.align-self-stretch { align-self: stretch !important; }
|
||||||
|
|
||||||
|
.text-align-center { text-align: center !important; }
|
||||||
|
.text-align-left { text-align: left !important; }
|
||||||
|
.text-align-right { text-align: right !important; }
|
||||||
17
eslint.config.js
Normal file
17
eslint.config.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import antfu from '@antfu/eslint-config'
|
||||||
|
|
||||||
|
export default antfu({
|
||||||
|
rules: {
|
||||||
|
'antfu/top-level-function': 'off',
|
||||||
|
},
|
||||||
|
formatters: {
|
||||||
|
css: true,
|
||||||
|
},
|
||||||
|
overrides: {
|
||||||
|
vue: {
|
||||||
|
'vue/block-order': ['error', {
|
||||||
|
order: ['template', 'script', 'style'],
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
58
layouts/default.vue
Normal file
58
layouts/default.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<header class="header">
|
||||||
|
Header
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<div class="container">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
Footer
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@use '@/assets/scss/colors.scss' as colors;
|
||||||
|
@use '@/assets/scss/main.scss' as main;
|
||||||
|
@use '@/assets/scss/utils.scss' as utils;
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: colors.$dark-grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 48px auto 100px;
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
margin: 24px auto 52px;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
nuxt.config.ts
Normal file
6
nuxt.config.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
compatibilityDate: '2025-05-15',
|
||||||
|
devtools: { enabled: true },
|
||||||
|
modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts'],
|
||||||
|
})
|
||||||
39
package.json
Normal file
39
package.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"name": "nuxt-app",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"lint:fix": "eslint . --fix",
|
||||||
|
"typegen": "node .typegen"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@nuxt/fonts": "0.11.4",
|
||||||
|
"@nuxt/icon": "1.15.0",
|
||||||
|
"@nuxt/image": "1.10.0",
|
||||||
|
"@nuxt/ui": "3.2.0",
|
||||||
|
"@tanstack/vue-query": "^5.75.5",
|
||||||
|
"@vueuse/core": "^13.1.0",
|
||||||
|
"axios": "^1.10.0",
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
|
"decimal.js": "^10.5.0",
|
||||||
|
"nuxt": "^3.17.6",
|
||||||
|
"typescript": "^5.6.3",
|
||||||
|
"vue": "^3.5.17",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@antfu/eslint-config": "^4.13.2",
|
||||||
|
"@nuxt/devtools": "latest",
|
||||||
|
"eslint": "^9.27.0",
|
||||||
|
"eslint-plugin-format": "^1.0.1",
|
||||||
|
"sass": "^1.71.0",
|
||||||
|
"swagger-typescript-api": "^13.0.3"
|
||||||
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
|
}
|
||||||
14
pages/index.vue
Normal file
14
pages/index.vue
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
productsData
|
||||||
|
<pre>
|
||||||
|
{{ productsData }}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useGetProductList } from '~/api/queries'
|
||||||
|
|
||||||
|
const { data: productsData } = useGetProductList()
|
||||||
|
</script>
|
||||||
11
pages/test.vue
Normal file
11
pages/test.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
boroda
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
45
plugins/vue-query.ts
Normal file
45
plugins/vue-query.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import type {
|
||||||
|
DehydratedState,
|
||||||
|
VueQueryPluginOptions,
|
||||||
|
} from '@tanstack/vue-query'
|
||||||
|
// Nuxt 3 app aliases
|
||||||
|
import { defineNuxtPlugin, useState } from '#imports'
|
||||||
|
import {
|
||||||
|
dehydrate,
|
||||||
|
hydrate,
|
||||||
|
QueryClient,
|
||||||
|
VueQueryPlugin,
|
||||||
|
} from '@tanstack/vue-query'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxt) => {
|
||||||
|
const vueQueryState = useState<DehydratedState | null>('vue-query')
|
||||||
|
|
||||||
|
// Modify your Vue Query global settings here
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
retry: false,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
refetchOnMount: false,
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
retry: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const options: VueQueryPluginOptions = { queryClient }
|
||||||
|
|
||||||
|
nuxt.vueApp.use(VueQueryPlugin, options)
|
||||||
|
|
||||||
|
if (import.meta.server) {
|
||||||
|
nuxt.hooks.hook('app:rendered', () => {
|
||||||
|
vueQueryState.value = dehydrate(queryClient)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (import.meta.client) {
|
||||||
|
nuxt.hooks.hook('app:created', () => {
|
||||||
|
hydrate(queryClient, vueQueryState.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2
public/robots.txt
Normal file
2
public/robots.txt
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
User-Agent: *
|
||||||
|
Disallow:
|
||||||
3
server/tsconfig.json
Normal file
3
server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "../.nuxt/tsconfig.server.json"
|
||||||
|
}
|
||||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user