Feat/compiler components #4525
Feat/compiler components #4525
Conversation
❌ Deploy Preview for vuestic-docs failed. Why did it fail? →
|
❌ Deploy Preview for vuestic-storybook failed. Why did it fail? →
|
There was a problem hiding this comment.
Pull Request Overview
This PR overhauls the playground by removing legacy TestButton and Vuestic UI integration, introducing Tailwind, and adding a suite of basic Vue components.
- Removed old TestButton page and Vuestic imports/configuration.
- Added Tailwind setup, a new
useColorcomposable, and severalVc*components. - Updated main app (
App.vue,Test.vue) to render new components and adjusted workspace/package configs.
Reviewed Changes
Copilot reviewed 20 out of 93 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/compiler/playground/src/pages/TestButton.vue | Removed legacy TestButton.vue |
| packages/compiler/playground/src/main.ts | Switched off Vuestic UI, added Tailwind import |
| packages/compiler/playground/src/composables/useColor.ts | Added placeholder color composable |
| packages/compiler/playground/src/components/VcProgress.vue | New loading spinner component |
| packages/compiler/playground/src/components/VcOrderCard.vue | New order card component |
| packages/compiler/playground/src/components/VcList.vue | New simple list component |
| packages/compiler/playground/src/components/VcInput.vue | New input component |
| packages/compiler/playground/src/components/VcIcon.vue | New icon wrapper component |
| packages/compiler/playground/src/components/VcCardTitle.vue | New card title wrapper component |
| packages/compiler/playground/src/components/VcCardContent.vue | New card content wrapper component |
| packages/compiler/playground/src/components/VcCard.vue | New card container component |
| packages/compiler/playground/src/components/VcButton.vue | New button component with icon/loading states |
| packages/compiler/playground/src/assets/tailwind.css | Added Tailwind import |
| packages/compiler/playground/src/Test.vue | New test page using VcButton |
| packages/compiler/playground/src/App.vue | Refactored main app to use new components |
| packages/compiler/playground/index.html | Updated head links for icons/Tailwind |
| packages/compiler/playground/package.json | Added Tailwind plugins and playground workspace |
| packages/compiler/package.json | Added TypeScript, test script and devDependencies |
| package.json | Included playground in root workspaces |
| import App from './App.vue' | ||
| import { createVuestic } from 'vuestic-ui' | ||
| import 'vuestic-ui/css' | ||
| // import { createVuestic } from 'vuestic-ui' |
There was a problem hiding this comment.
Remove the commented-out Vuestic UI imports since the playground no longer uses Vuestic, keeping the codebase clean.
| @@ -0,0 +1,5 @@ | |||
| import { ref } from "vue" | |||
|
|
|||
| export const useColor = (props: Record<string, any>) => { | |||
There was a problem hiding this comment.
The props parameter is declared but never used in useColor. Consider removing it or implementing logic that uses these props.
| export const useColor = (props: Record<string, any>) => { | |
| export const useColor = () => { |
| case 'secondary': | ||
| return 'bg-[#767C88]' | ||
| default: | ||
| return 'gray' |
There was a problem hiding this comment.
The default background class 'gray' is not a valid Tailwind background utility. Consider returning a valid class like 'bg-gray-200'.
| return 'gray' | |
| return 'bg-gray-500' |
| } | ||
| if (loading) { | ||
| console.log('icon', icon) |
There was a problem hiding this comment.
Remove this debug console.log statement to avoid unnecessary logging in production code.
| console.log('icon', icon) | |
| // No-op: Removed unnecessary console.log statement |
| // import { useColor } from '../composables/useColor' | ||
There was a problem hiding this comment.
Remove the commented import for useColor if it's not intended to be used, avoiding dead code.
| // import { useColor } from '../composables/useColor' |
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| const color = ref('primary'); |
There was a problem hiding this comment.
The color ref is defined but never used in this template—consider removing it.
| const color = ref('primary'); |
| import Test from './Test.vue' | ||
| import { ref } from 'vue' | ||
| const ordersCount = 1000; |
There was a problem hiding this comment.
ordersCount and the subsequent orders array are declared but not used in the template. Remove them or wire them up to avoid dead code.
| <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" | ||
| rel="stylesheet"> --> |
There was a problem hiding this comment.
The Material Icons stylesheet is commented out, which will prevent icons from displaying correctly. Uncomment or include the proper link.
| <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" | |
| rel="stylesheet"> --> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" | |
| rel="stylesheet"> |
1 participant
No description provided.