first commit
This commit is contained in:
BIN
.cache/v3.0.3.7.zip
Normal file
BIN
.cache/v3.0.3.7.zip
Normal file
Binary file not shown.
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
src/*
|
||||||
|
spa/node_modules
|
||||||
36
Makefile
Normal file
36
Makefile
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
.PHONY: build
|
||||||
|
|
||||||
|
fresh:
|
||||||
|
$(MAKE) stop && \
|
||||||
|
rm -rf ./src && \
|
||||||
|
./scripts/download_oc_store.sh && \
|
||||||
|
./scripts/install_ocstore.sh && \
|
||||||
|
$(MAKE) start
|
||||||
|
|
||||||
|
setup:
|
||||||
|
$(MAKE) stop && \
|
||||||
|
rm -rf ./src && \
|
||||||
|
./scripts/download_oc_store.sh && \
|
||||||
|
./scripts/install_ocstore.sh && \
|
||||||
|
$(MAKE) start && \
|
||||||
|
$(MAKE) link
|
||||||
|
|
||||||
|
stop:
|
||||||
|
docker compose down
|
||||||
|
|
||||||
|
start:
|
||||||
|
docker compose up -d
|
||||||
|
|
||||||
|
ssh:
|
||||||
|
docker compose exec web bash
|
||||||
|
|
||||||
|
link:
|
||||||
|
docker compose exec web bash -c "php ./scripts/link.php"
|
||||||
|
|
||||||
|
dev:
|
||||||
|
$(MAKE) link && \
|
||||||
|
cd frontend && npm run dev
|
||||||
|
|
||||||
|
build:
|
||||||
|
docker build -t oc_layout_pro_build_prod -f docker/build.dockerfile . && \
|
||||||
|
docker run --rm -v "./build":/build oc_layout_pro_build_prod
|
||||||
2
build/.gitignore
vendored
Normal file
2
build/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
*
|
||||||
|
!.gitignore
|
||||||
46
docker-compose.yaml
Normal file
46
docker-compose.yaml
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
services:
|
||||||
|
web:
|
||||||
|
image: webdevops/php-apache-dev:${PHP_VERSION}
|
||||||
|
platform: linux/amd64
|
||||||
|
volumes:
|
||||||
|
- "./src:/web"
|
||||||
|
- "./scripts:/scripts"
|
||||||
|
- "./module:/module"
|
||||||
|
- ./docker/apache2/cors.conf:/opt/docker/etc/httpd/vhost.common.d/cors.conf
|
||||||
|
ports:
|
||||||
|
- "8000:80"
|
||||||
|
restart: always
|
||||||
|
deploy:
|
||||||
|
resources:
|
||||||
|
limits:
|
||||||
|
memory: 256M
|
||||||
|
environment:
|
||||||
|
- WEB_DOCUMENT_ROOT=/web/upload
|
||||||
|
- PHP_DISPLAY_ERRORS=1
|
||||||
|
- XDEBUG_IDE_KEY=PHPSTORM
|
||||||
|
- XDEBUG_START_WITH_REQUEST=yes
|
||||||
|
- XDEBUG_CLIENT_HOST=host.docker.internal
|
||||||
|
- XDEBUG_CLIENT_PORT=9003
|
||||||
|
- XDEBUG_DISCOVER_CLIENT_HOST=false
|
||||||
|
- PHP_IDE_CONFIG=serverName=orbstack
|
||||||
|
|
||||||
|
mysql:
|
||||||
|
image: mariadb:10.2.7
|
||||||
|
platform: linux/amd64
|
||||||
|
restart: always
|
||||||
|
environment:
|
||||||
|
- MYSQL_ROOT_PASSWORD=secret
|
||||||
|
- MYSQL_DATABASE=ocstore3
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "mysqladmin" ,"ping", "-h", "localhost"]
|
||||||
|
timeout: 20s
|
||||||
|
retries: 10
|
||||||
|
ports:
|
||||||
|
- "3306:3306"
|
||||||
|
volumes:
|
||||||
|
- mysql_data:/var/lib/mysql
|
||||||
|
- ./sql_dumps:/sql_dumps
|
||||||
|
- ./docker/mysql/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
mysql_data:
|
||||||
6
docker/apache2/cors.conf
Normal file
6
docker/apache2/cors.conf
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<IfModule mod_headers.c>
|
||||||
|
Header set Access-Control-Allow-Origin "http://localhost:5173"
|
||||||
|
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
|
||||||
|
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
|
||||||
|
Header set Access-Control-Allow-Credentials "true"
|
||||||
|
</IfModule>
|
||||||
11
docker/build.dockerfile
Normal file
11
docker/build.dockerfile
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
FROM node:latest
|
||||||
|
|
||||||
|
RUN apt update && apt install -y zip
|
||||||
|
RUN mkdir -p /app
|
||||||
|
COPY ./frontend /app/frontend
|
||||||
|
COPY ./module /app/module
|
||||||
|
COPY ./scripts/build.sh /app/scripts/build.sh
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
CMD ["./scripts/build.sh"]
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
mysql_note "Creating database for tests: ${MYSQL_DATABASE}"
|
||||||
|
docker_process_sql --database=mysql <<<"CREATE DATABASE IF NOT EXISTS \`${MYSQL_DATABASE}_tests\` ;"
|
||||||
46
scripts/build.sh
Executable file
46
scripts/build.sh
Executable file
@@ -0,0 +1,46 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
VERSION="1.0.0"
|
||||||
|
MODULE_NAME="oc_telegram_shop"
|
||||||
|
CURRENT_DIR="$(dirname "$0")"
|
||||||
|
|
||||||
|
echo "Current dir: ${CURRENT_DIR}"
|
||||||
|
node -v
|
||||||
|
npm -v
|
||||||
|
|
||||||
|
RED='\033[0;31m'
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
BLUE='\033[0;34m'
|
||||||
|
NC='\033[0m' # No Color
|
||||||
|
|
||||||
|
echo -e "${BLUE}🔨 Starting build process...${NC}"
|
||||||
|
|
||||||
|
echo -e "${BLUE}Build frontend...${NC}"
|
||||||
|
rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript
|
||||||
|
rm -rf /app/module/oc_telegram_shop/upload/admin/view/integration.js
|
||||||
|
cd /app/frontend
|
||||||
|
npm install
|
||||||
|
NODE_ENV=production npm run build
|
||||||
|
rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript/oc_telegram_shop/.vite
|
||||||
|
rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript/oc_telegram_shop/oc_telegram_shop.js.map
|
||||||
|
rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript/oc_telegram_shop/favicon.ico
|
||||||
|
|
||||||
|
echo -e "${BLUE}📦 Packaging into .ocmod.zip...${NC}"
|
||||||
|
cd /app/module/oc_telegram_shop
|
||||||
|
zip -rqq "${MODULE_NAME}.ocmod.zip" .
|
||||||
|
mv "${MODULE_NAME}.ocmod.zip" /build
|
||||||
|
|
||||||
|
FINAL_FILE="/build/${MODULE_NAME}.ocmod.zip"
|
||||||
|
|
||||||
|
if [ -f "$FINAL_FILE" ]; then
|
||||||
|
FILE_SIZE=$(du -h "$FINAL_FILE" | cut -f1)
|
||||||
|
echo -e "${GREEN}✅ Build completed successfully!${NC}"
|
||||||
|
echo -e "${GREEN}🎉 Created: $FINAL_FILE ($FILE_SIZE)${NC}"
|
||||||
|
else
|
||||||
|
echo "❌ Error: Final build file not found: $FINAL_FILE"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo -e "${BLUE}🎯 Build artifact ready for installation!${NC}"
|
||||||
35
scripts/download_oc_store.sh
Executable file
35
scripts/download_oc_store.sh
Executable file
@@ -0,0 +1,35 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# The script downloads and unzip ocStore.
|
||||||
|
# Should be executed from the project root folder.
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
OCSTORE_VERSION=v3.0.3.7
|
||||||
|
CACHE_DIR=.cache
|
||||||
|
|
||||||
|
echo "👽 Downloading ocStore ${OCSTORE_VERSION}..."
|
||||||
|
|
||||||
|
DOWNLOAD_URL="https://github.com/ocStore/ocStore/archive/refs/tags/$OCSTORE_VERSION.zip"
|
||||||
|
|
||||||
|
FILE_PATH="$CACHE_DIR/$OCSTORE_VERSION.zip"
|
||||||
|
|
||||||
|
if [ ! -f "$FILE_PATH" ]; then
|
||||||
|
mkdir -p "$CACHE_DIR"
|
||||||
|
wget -P "$CACHE_DIR" "$DOWNLOAD_URL"
|
||||||
|
else
|
||||||
|
echo "😎 Get file from cache: $FILE_PATH"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "🗃 Unzipping..."
|
||||||
|
rm -rf src/*
|
||||||
|
|
||||||
|
unzip -q "$FILE_PATH" -d ./src
|
||||||
|
SOURCE_DIR=src/ocStore-${OCSTORE_VERSION//v/}
|
||||||
|
|
||||||
|
rsync -a $SOURCE_DIR/* ./src
|
||||||
|
rm -rf $SOURCE_DIR
|
||||||
|
|
||||||
|
chmod -R 775 src
|
||||||
|
|
||||||
|
echo "✅ Completed."
|
||||||
42
scripts/install_ocstore.sh
Executable file
42
scripts/install_ocstore.sh
Executable file
@@ -0,0 +1,42 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# The script install ocStore.
|
||||||
|
# Should be executed from the project root folder.
|
||||||
|
|
||||||
|
echo "Setup ocStore..."
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
docker compose down -v && docker compose up -d web mysql --remove-orphans
|
||||||
|
|
||||||
|
bash ./scripts/wait_for_containers.sh
|
||||||
|
bash ./scripts/wait_for_mysql.sh
|
||||||
|
|
||||||
|
echo "Install composer dependencies..."
|
||||||
|
docker compose exec web bash -c "cd /web; composer update"
|
||||||
|
|
||||||
|
docker compose exec web bash -c '\
|
||||||
|
cd /web/upload/install; \
|
||||||
|
php cli_install.php install \
|
||||||
|
--db_hostname mysql \
|
||||||
|
--db_username root \
|
||||||
|
--db_password secret \
|
||||||
|
--db_database ocstore3 \
|
||||||
|
--db_driver mysqli \
|
||||||
|
--db_port 3306 \
|
||||||
|
--username admin \
|
||||||
|
--password admin \
|
||||||
|
--email youremail@example.com \
|
||||||
|
--http_server http://localhost:8000/; exit $?'
|
||||||
|
|
||||||
|
docker compose exec web bash -c "cd /web; composer update"
|
||||||
|
echo "Moving storage folder outside the system."
|
||||||
|
mv src/upload/system/storage src/
|
||||||
|
|
||||||
|
docker compose exec web bash -c "\
|
||||||
|
sed -i \"s/DIR_SYSTEM \. 'storage\/'/'\/web\/storage\/'/g\" /web/upload/config.php
|
||||||
|
sed -i \"s/DIR_SYSTEM \. 'storage\/'/'\/web\/storage\/'/g\" /web/upload/admin/config.php"
|
||||||
|
|
||||||
|
rm -rf src/upload/install
|
||||||
|
|
||||||
|
echo "OcStore successfully installed."
|
||||||
40
scripts/link.php
Normal file
40
scripts/link.php
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$module = 'oc_layout_pro';
|
||||||
|
|
||||||
|
$basePath = dirname(__DIR__) . '/';
|
||||||
|
|
||||||
|
if ($basePath === '//') {
|
||||||
|
$basePath = '/';
|
||||||
|
}
|
||||||
|
|
||||||
|
$modulesPath = $basePath . 'module/';
|
||||||
|
$modulePath = $modulesPath . $module . '/upload/';
|
||||||
|
|
||||||
|
$files = [];
|
||||||
|
|
||||||
|
$iterator = new RecursiveDirectoryIterator($modulePath);
|
||||||
|
$recursiveIterator = new RecursiveIteratorIterator($iterator);
|
||||||
|
|
||||||
|
/** @var SplFileInfo $file */
|
||||||
|
foreach ($recursiveIterator as $file) {
|
||||||
|
if ($file->isFile() && fnmatch($pattern = '*', $file->getFilename())) {
|
||||||
|
$files[] = $file->getRealPath();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach ($files as $file) {
|
||||||
|
$link = $basePath . 'web/upload/' . str_replace($modulePath, '', $file);
|
||||||
|
|
||||||
|
if (! is_dir(dirname($link))) {
|
||||||
|
if (!mkdir($concurrentDirectory = dirname($link), 0775, true) && !is_dir($concurrentDirectory)) {
|
||||||
|
throw new \RuntimeException(sprintf('Directory "%s" was not created', $concurrentDirectory));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
echo sprintf('%s => %s', $file, $link) . PHP_EOL;
|
||||||
|
|
||||||
|
@unlink($link);
|
||||||
|
symlink($file, $link);
|
||||||
|
chmod($link, 0777);
|
||||||
|
}
|
||||||
28
scripts/wait_for_containers.sh
Executable file
28
scripts/wait_for_containers.sh
Executable file
@@ -0,0 +1,28 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
SERVICES=("web" "mysql")
|
||||||
|
|
||||||
|
function check_containers {
|
||||||
|
for service in "${SERVICES[@]}"; do
|
||||||
|
if ! docker compose ps $service | grep "Up" > /dev/null; then
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "Waiting for docker containers..."
|
||||||
|
|
||||||
|
MAX_WAIT_TIME=60
|
||||||
|
WAIT_TIME=0
|
||||||
|
|
||||||
|
while ! check_containers; do
|
||||||
|
if [ $WAIT_TIME -ge $MAX_WAIT_TIME ]; then
|
||||||
|
echo "Containers have not started within $MAX_WAIT_TIME seconds. Exit."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
sleep 1
|
||||||
|
WAIT_TIME=$((WAIT_TIME + 1))
|
||||||
|
done
|
||||||
|
|
||||||
|
echo "All docker containers executed."
|
||||||
24
scripts/wait_for_mysql.sh
Normal file
24
scripts/wait_for_mysql.sh
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
MYSQL_SERVICE="mysql"
|
||||||
|
|
||||||
|
function check_mysql {
|
||||||
|
docker compose exec $MYSQL_SERVICE mysqladmin ping --silent
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "Waiting for MySQL..."
|
||||||
|
|
||||||
|
MAX_WAIT_TIME=60
|
||||||
|
WAIT_TIME=0
|
||||||
|
|
||||||
|
while ! check_mysql; do
|
||||||
|
if [ $WAIT_TIME -ge $MAX_WAIT_TIME ]; then
|
||||||
|
echo "MySQL has not been available for $MAX_WAIT_TIME secods. Exit."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
sleep 1
|
||||||
|
WAIT_TIME=$((WAIT_TIME + 1))
|
||||||
|
done
|
||||||
|
|
||||||
|
sleep 5
|
||||||
|
echo "MySQL ready."
|
||||||
5
spa/README.md
Normal file
5
spa/README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
13
spa/index.html
Normal file
13
spa/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2072
spa/package-lock.json
generated
Normal file
2072
spa/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
spa/package.json
Normal file
24
spa/package.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "tg-mini-app-shop",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@heroicons/vue": "^2.2.0",
|
||||||
|
"@tailwindcss/vite": "^4.1.11",
|
||||||
|
"vue": "^3.5.17"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.0",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"daisyui": "^5.0.46",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^4.1.11",
|
||||||
|
"vite": "^7.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
spa/public/vite.svg
Normal file
1
spa/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
63
spa/src/App.vue
Normal file
63
spa/src/App.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div class="relative flex justify-center items-center p-3">
|
||||||
|
<h1 class="text-gray-950 text-lg font-bold truncate">Демо Телеграм-магазин</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
<button
|
||||||
|
class="btn"
|
||||||
|
@click="drawerVisible = true"
|
||||||
|
>
|
||||||
|
Категории
|
||||||
|
<ChevronDownIcon class="w-5"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-4 p-3 sm:grid-cols-2 md:grid-cols-3">
|
||||||
|
<ProductCard/>
|
||||||
|
<ProductCard/>
|
||||||
|
<ProductCard/>
|
||||||
|
<ProductCard/>
|
||||||
|
<ProductCard/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BottomDrawer v-model="drawerVisible">
|
||||||
|
<ul class="list bg-base-100 rounded-box shadow-md">
|
||||||
|
|
||||||
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Категории</li>
|
||||||
|
|
||||||
|
<li class="list-row">
|
||||||
|
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
|
||||||
|
<div class="flex items-center">Dio Lupa</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="list-row">
|
||||||
|
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
|
||||||
|
<div class="flex items-center">Dio Lupa</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-row">
|
||||||
|
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
|
||||||
|
<div class="flex items-center">Dio Lupa</div>
|
||||||
|
</li>
|
||||||
|
<li class="list-row">
|
||||||
|
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
|
||||||
|
<div class="flex items-center">Dio Lupa</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</BottomDrawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import ProductCard from "./components/ProductCard.vue";
|
||||||
|
import { ChevronDownIcon } from '@heroicons/vue/24/outline';
|
||||||
|
import BottomDrawer from "./components/BottomDrawer.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
const drawerVisible = ref(false);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
57
spa/src/components/BottomDrawer.vue
Normal file
57
spa/src/components/BottomDrawer.vue
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="fade">
|
||||||
|
<div
|
||||||
|
v-if="visible"
|
||||||
|
class="fixed inset-0 bg-black/50 z-40"
|
||||||
|
@click.self="close"
|
||||||
|
>
|
||||||
|
<transition name="slide-up">
|
||||||
|
<div
|
||||||
|
class="fixed bottom-0 left-0 w-full h-[80vh] bg-white rounded-t-2xl shadow-xl z-50 p-4"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {computed} from "vue";
|
||||||
|
import { XMarkIcon } from '@heroicons/vue/24/outline';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: Boolean,
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
|
const visible = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val),
|
||||||
|
})
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
visible.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-up-enter-active,
|
||||||
|
.slide-up-leave-active {
|
||||||
|
transition: transform 0.25s ease;
|
||||||
|
}
|
||||||
|
.slide-up-enter-from,
|
||||||
|
.slide-up-leave-to {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
15
spa/src/components/ProductCard.vue
Normal file
15
spa/src/components/ProductCard.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bg-white rounded-lg shadow p-3">
|
||||||
|
<img src="https://placehold.co/300x300" alt="Футболка" class="w-full h-auto rounded-md mb-2" />
|
||||||
|
<h2 class="font-semibold text-base">Базовая футболка</h2>
|
||||||
|
<p class="text-sm text-gray-500">RUB 6,000</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
5
spa/src/main.js
Normal file
5
spa/src/main.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
2
spa/src/style.css
Normal file
2
spa/src/style.css
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
10
spa/tailwind.config.js
Normal file
10
spa/tailwind.config.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [require("daisyui")], // убери строку, если DaisyUI не нужен
|
||||||
|
};
|
||||||
7
spa/vite.config.js
Normal file
7
spa/vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [tailwindcss(), vue()],
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user