vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update roadmap

pull/5806/head
Cagatay Civici 2024-05-28 14:29:09 +03:00
parent 162ce3f04e
commit a80b9a2aac
1 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
pages/roadmap/index.vue
View File

@ -28,45 +28,54 @@
<div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div> <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2> <h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
<p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p> <p class="mt-0 mb-4 leading-normal">POC work for new theming.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
<p class="mt-0 mb-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2> <h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
<p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p> <p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2> <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
<p class="mt-0 mb-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p> <p class="mt-0 mb-4 leading-normal">Meter, Drawer, Content for Stepper.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Form States</h2> <h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
<p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p> <p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2> <h2 class="text-lg font-bold mt-0 mb-2">V4</h2>
<p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p> <p class="mt-0 mb-4 leading-normal">Next-Gen version with the new design token based theming.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
<p class="mt-0 mb-4 leading-normal">Layout, Typography, Tab orientations, Navigation Drawer.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Form Library</h2>
<p class="mt-0 mb-4 leading-normal">Built-in form library with validations.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
@ -81,17 +90,8 @@
</div> </div>
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2> <h2 class="text-lg font-bold mt-0 mb-2">Experimental Components</h2>
<p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p> <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, Calendar.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
@ -100,56 +100,58 @@
</div> </div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div> <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2> <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 1</h2>
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p> <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div> <div class="bg-indigo-500 rounded" style="width: 50%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 2</h2>
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
<div class="bg-surface-200 rounded">
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2> <h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
<p class="mt-0 mb-4 leading-normal">Build the infrastructure to generate themes from Figma.</p> <p class="mt-0 mb-4 leading-normal">Build a Figma plugin to generate themes from UI Kit.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-4 flex-col"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div> <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2> <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
<p class="mt-0 mb-4 leading-normal">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p> <p class="mt-0 mb-4 leading-normal">Interative component viewer to explore tokens and pt sections.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-4 flex-col"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div> <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
<p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
<div class="bg-surface-200 rounded">
<div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
</div>
</div>
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2> <h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
<p class="mt-0 mb-4 leading-normal">Port the entire Blocks to Tailwind.</p> <p class="mt-0 mb-4 leading-normal">Migrate Blocks to Tailwind CSS.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-orange-500 rounded" style="width: 50%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
@ -163,7 +165,6 @@
</div> </div>
</div> </div>
<div class="flex-1 flex gap-4 flex-col"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div> <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
@ -172,10 +173,12 @@
<h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2> <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
<p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p> <p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
<div class="bg-surface-200 rounded"> <div class="bg-surface-200 rounded">
<div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div> <div class="bg-pink-500 rounded" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-4 flex-col">
<div class="flex-1 flex gap-4 flex-col"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2> <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
@ -185,7 +188,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-4 flex-col"></div> </div>
<div class="flex-1 flex gap-4 flex-col"></div> <div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
</div> </div>