primevue-mirror/pages/roadmap/index.vue

228 lines
16 KiB
Vue
Raw Normal View History

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>
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">
2024-05-29 23:48:15 +00:00
<div class="shrink-0 w-56"></div>
2024-05-20 12:04:10 +00:00
<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">
2024-05-29 23:48:15 +00:00
<div class="shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</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">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>
2024-06-06 19:02:53 +00:00
<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 Support</h2>
<p class="mt-0 mb-4 leading-normal">Right-to-left layout option for components.</p>
<div class="bg-surface-200 rounded">
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</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-06-06 19:02:53 +00:00
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Suite ... 2025</h2>
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, Calendar, Timeline, Editor.</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">
2024-05-29 23:48:15 +00:00
<div class="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">
2024-05-29 23:48:15 +00:00
<div class="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-06-06 19:02:53 +00:00
<p class="mt-0 mb-4 leading-normal">Interactive component viewer to explore tokens and pt sections.</p>
<div class="bg-surface-200 rounded">
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
</div>
<div class="flex-1 flex gap-4 flex-col"></div>
</div>
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="shrink-0 p-4 bg-violet-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">TEMPLATES</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">
2024-06-06 19:04:55 +00:00
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
2024-06-06 19:02:53 +00:00
<h2 class="text-lg font-bold mt-0 mb-2">V4 Update</h2>
<p class="mt-0 mb-4 leading-normal">Update all templates to PrimeVue v4, replace PrimeFlex demos with Tailwind.</p>
<div class="bg-surface-200 rounded">
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
</div>
</div>
2024-06-06 19:04:55 +00:00
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
2024-06-06 19:02:53 +00:00
<h2 class="text-lg font-bold mt-0 mb-2">Genesis</h2>
<p class="mt-0 mb-4 leading-normal">Brand new template application.</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">
2024-05-29 23:48:15 +00:00
<div class="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">
2024-05-29 23:48:15 +00:00
<div class="shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</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-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>