Add new roadmap for 2024
Cagatay Civici
parent
69f692e1d3
commit
4b4da8340d
|
|
@ -8,7 +8,7 @@
|
|||
<div class="doc-intro">
|
||||
<h1>Roadmap</h1>
|
||||
<p>
|
||||
At <a href="https://www.primetek.com.tr/" class="font-medium hover:underline text-primary">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2023 with the community. These are planned to be
|
||||
At <a href="https://www.primetek.com.tr/" class="font-medium hover:underline text-primary">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2024 with the community. These are planned to be
|
||||
implemented in parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -27,63 +27,70 @@
|
|||
<div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Accessibility</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">WCAG Level AA compliance for all components with screen reader and keyboard support based on community feedback and audit tools.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Move theming into core to replace sass repo.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
<div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Pass Through Props</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Initate the implementation of Pass Through Props to provide advanced control over component internals.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Introduce new unstyled mode to fully support styling with CSS libraries like Tailwind.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Theme</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">A built-in TailwindCSS theme using the new Unstyled mode.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Design Tokens</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Introduce new design tokens for styled mode.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Implement design tokens as CSS variables instead of SCSS.</p>
|
||||
<p class="mt-0 mb-3 line-height-3">Implement figma design tokens as CSS variables instead of SCSS.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Provide presets for the entire UI suite.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 50%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Move theming into core to replace external sass repo.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Add filled and invalid props to form components.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Begin RTL support.</p>
|
||||
<p class="mt-0 mb-3 line-height-3">RTL support for the UI components.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Drag and Drop utilities.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Sheet, Event Calendar.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Gantt Chart, Flow Chart.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
|
|
@ -92,57 +99,34 @@
|
|||
</div>
|
||||
<div class="flex gap-3 border-bottom-1 surface-border pb-3">
|
||||
<div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Initiated support for Figma Tokens.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Update tokens to sync with the new styled mode.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-indigo-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
<div class="bg-indigo-500 border-round" style="width: 25%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Initial release of Figma Tokens.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-indigo-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Sync new design tokens.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Build the infrastructure to generate themes from Figma.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-indigo-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
</div>
|
||||
<div class="flex gap-3 border-bottom-1 surface-border pb-3">
|
||||
<div class="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Nuxt</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Migrate showcase application to Nuxt for SSR.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Demos</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p>
|
||||
<p class="mt-0 mb-3 line-height-3">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
<div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,41 +136,48 @@
|
|||
</div>
|
||||
<div class="flex gap-3 border-bottom-1 surface-border pb-3">
|
||||
<div class="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PrimeBlocks</div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">New UI Blocks.</p>
|
||||
<p class="mt-0 mb-3 line-height-3">Add 80+ New Blocks.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-orange-500 border-round" style="width: 20%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Port the entire Blocks to Tailwind.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 border-bottom-1 surface-border pb-3">
|
||||
<div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Designer</div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Open Source Designer</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Open source the sass based theming api and the visual designer.</p>
|
||||
<div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Implement a SaaS app to access the blocks instead of an offline download.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-pink-500 border-round" style="width: 100%; height: 4px"></div>
|
||||
<div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
</div>
|
||||
<div class="flex gap-3 border-bottom-1 surface-border pb-3">
|
||||
<div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Designer</div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column">
|
||||
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
|
||||
<p class="mt-0 mb-3 line-height-3">Advanced Theme Editor with full control over the Theming API.</p>
|
||||
<p class="mt-0 mb-3 line-height-3">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
|
||||
<div class="surface-200 border-round">
|
||||
<div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
<div class="flex-1 flex gap-3 flex-column"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue