From a0cbe192e77a4db9fbb98d9cb06ce571548ada49 Mon Sep 17 00:00:00 2001 From: ct Date: Tue, 8 Jul 2025 04:32:04 +0800 Subject: [PATCH] Update --- package-lock.json | 10 -- package.json | 1 - resources/css/app.css | 153 +++++++++++++++++- resources/js/components/ui/sheet.tsx | 2 +- .../modules/editor/partials/text-sidebar.jsx | 12 +- 5 files changed, 159 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f95289..aefdb1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -74,7 +74,6 @@ "sonner": "^2.0.5", "tailwind-merge": "^3.0.1", "tailwindcss": "^4.0.0", - "tailwindcss-animate": "^1.0.7", "typescript": "^5.7.2", "vaul": "^1.1.2", "vite": "^6.0", @@ -8333,15 +8332,6 @@ "integrity": "sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==", "license": "MIT" }, - "node_modules/tailwindcss-animate": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", - "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", - "license": "MIT", - "peerDependencies": { - "tailwindcss": ">=3.0.0 || insiders" - } - }, "node_modules/tapable": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz", diff --git a/package.json b/package.json index b2edcac..722fecb 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,6 @@ "sonner": "^2.0.5", "tailwind-merge": "^3.0.1", "tailwindcss": "^4.0.0", - "tailwindcss-animate": "^1.0.7", "typescript": "^5.7.2", "vaul": "^1.1.2", "vite": "^6.0", diff --git a/resources/css/app.css b/resources/css/app.css index 87af0e9..dbde794 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,6 +1,6 @@ @import 'tailwindcss'; -@plugin 'tailwindcss-animate'; +/* @plugin 'tailwindcss-animate'; */ @source '../views'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @@ -96,6 +96,96 @@ @layer base { height: 0; } } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } + } + + @keyframes slideInFromRight { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } + } + + @keyframes slideOutToRight { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } + } + + @keyframes slideInFromLeft { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } + } + + @keyframes slideOutToLeft { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } + } + + @keyframes slideInFromTop { + from { + transform: translateY(-100%); + } + to { + transform: translateY(0); + } + } + + @keyframes slideOutToTop { + from { + transform: translateY(0); + } + to { + transform: translateY(-100%); + } + } + + @keyframes slideInFromBottom { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } + } + + @keyframes slideOutToBottom { + from { + transform: translateY(0); + } + to { + transform: translateY(100%); + } + } } @utility animate-accordion-down { @@ -106,6 +196,67 @@ @utility animate-accordion-up { animation: accordion-up 0.2s ease-out; } +/* Shadcn animation utilities */ +@utility animate-in { + animation-name: fadeIn, slideIn; + animation-duration: 0.2s; + animation-fill-mode: both; +} + +@utility animate-out { + animation-name: fadeOut, slideOut; + animation-duration: 0.2s; + animation-fill-mode: both; +} + +@utility fade-in-0 { + animation-name: fadeIn; +} + +@utility fade-out-0 { + animation-name: fadeOut; +} + +@utility slide-in-from-right { + animation-name: slideInFromRight; +} + +@utility slide-out-to-right { + animation-name: slideOutToRight; +} + +@utility slide-in-from-left { + animation-name: slideInFromLeft; +} + +@utility slide-out-to-left { + animation-name: slideOutToLeft; +} + +@utility slide-in-from-top { + animation-name: slideInFromTop; +} + +@utility slide-out-to-top { + animation-name: slideOutToTop; +} + +@utility slide-in-from-bottom { + animation-name: slideInFromBottom; +} + +@utility slide-out-to-bottom { + animation-name: slideOutToBottom; +} + +@utility duration-300 { + animation-duration: 300ms; +} + +@utility duration-500 { + animation-duration: 500ms; +} + :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); diff --git a/resources/js/components/ui/sheet.tsx b/resources/js/components/ui/sheet.tsx index afc6f5e..f432f4f 100644 --- a/resources/js/components/ui/sheet.tsx +++ b/resources/js/components/ui/sheet.tsx @@ -56,7 +56,7 @@ function SheetContent({ 0 - ? ` - -${strokeWidth * 0.6}px -${strokeWidth * 0.6}px 0 ${strokeColor}, - ${strokeWidth * 0.6}px -${strokeWidth * 0.6}px 0 ${strokeColor}, - -${strokeWidth * 0.6}px ${strokeWidth * 0.6}px 0 ${strokeColor}, - ${strokeWidth * 0.6}px ${strokeWidth * 0.6}px 0 ${strokeColor} - ` + ? Array.from({ length: 10 }, (_, i) => { + const angle = (i * Math.PI * 2) / 8; + const x = Math.cos(angle) * strokeWidth * 0.6; + const y = Math.sin(angle) * strokeWidth * 0.6; + return `${x.toFixed(1)}px ${y.toFixed(1)}px 0 ${strokeColor}`; + }).join(', ') : 'none', }} />