2022-12-08 12:26:57 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
2023-03-08 11:32:38 +00:00
|
|
|
<Title>PrimeVue Roadmap</Title>
|
|
|
|
|
<Meta name="description" content="PrimeVue Roadmap" />
|
2022-12-19 11:57:07 +00:00
|
|
|
</Head>
|
|
|
|
|
|
2023-03-08 11:32:38 +00:00
|
|
|
<div class="doc-intro">
|
|
|
|
|
<h1>Roadmap</h1>
|
|
|
|
|
<p>
|
2023-12-31 08:35:02 +00:00
|
|
|
At <a href="https://www.primetek.com.tr/">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.
|
2023-03-08 11:32:38 +00:00
|
|
|
</p>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
|
|
|
|
|
2023-03-08 11:32:38 +00:00
|
|
|
<div class="overflow-auto">
|
|
|
|
|
<div style="min-width: 1200px">
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex gap-4 mb-4">
|
|
|
|
|
<div class="flex-shrink-0 w-56"></div>
|
|
|
|
|
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
|
|
|
|
|
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
|
|
|
|
|
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
|
|
|
|
|
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q4</div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex flex-col gap-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-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">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2024-05-28 11:29:09 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
|
|
|
|
|
<p class="mt-0 mb-4 leading-normal">POC work for new theming.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2023-12-25 08:23:48 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
|
2024-05-20 12:04:10 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
|
|
|
|
|
<div class="bg-surface-200 rounded">
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
2023-06-14 20:14:04 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2023-12-25 08:23:48 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
|
2024-05-28 11:29:09 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Meter, Drawer, Content for Stepper.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2023-12-25 08:23:48 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
|
2024-05-20 12:04:10 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
|
|
|
|
|
<div class="bg-surface-200 rounded">
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2024-05-28 11:29:09 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">V4</h2>
|
|
|
|
|
<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>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2024-05-28 11:29:09 +00:00
|
|
|
<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>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2024-05-28 11:29:09 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
|
|
|
|
|
<p class="mt-0 mb-4 leading-normal">Drag and Drop utilities.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-06-14 20:14:04 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
2024-05-28 11:29:09 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Experimental Components</h2>
|
|
|
|
|
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, Calendar.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-12-25 08:23:48 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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>
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
|
2024-05-28 11:29:09 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 1</h2>
|
2024-05-20 12:04:10 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
|
|
|
|
|
<div class="bg-surface-200 rounded">
|
2024-05-28 11:29:09 +00:00
|
|
|
<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>
|
2023-09-05 08:09:05 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
|
2023-12-25 08:23:48 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
|
2024-05-28 11:29:09 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Build a Figma plugin to generate themes from UI Kit.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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>
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
|
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
|
2023-03-08 11:32:38 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
|
2024-05-28 11:29:09 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Interative component viewer to explore tokens and pt sections.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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>
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
|
2023-12-25 08:23:48 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
|
2024-05-28 11:29:09 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Migrate Blocks to Tailwind CSS.</p>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="bg-surface-200 rounded">
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="bg-orange-500 rounded" style="width: 50%; height: 4px"></div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
|
2023-12-25 08:23:48 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
|
2024-05-20 12:04:10 +00:00
|
|
|
<p class="mt-0 mb-4 leading-normal">Implement a SaaS app to access the blocks instead of an offline download.</p>
|
|
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2023-12-25 08:23:48 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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-1 flex gap-4 flex-col">
|
2024-05-21 10:02:17 +00:00
|
|
|
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
|
2023-12-26 08:13:55 +00:00
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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">
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="bg-pink-500 rounded" style="width: 100%; height: 4px"></div>
|
2023-12-26 08:13:55 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-28 11:29:09 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col">
|
2024-05-28 11:29:09 +00:00
|
|
|
<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">
|
|
|
|
|
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
|
|
|
|
|
<p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
|
|
|
|
|
<div class="bg-surface-200 rounded">
|
|
|
|
|
<div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
|
|
|
|
|
</div>
|
2023-03-08 11:32:38 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex-1 flex gap-4 flex-col"></div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
