chore(docs): roadmap for 1.6 and 1.7 (#3114)

packages/docs/locales/en.json

@@ -3839,6 +3839,14 @@
       "title": "In development",
       "description": "The following features are currently being in development:"
     },
+    "1-7": {
+      "title": "[v1.7](https://github.com/epicmaxco/vuestic-ui/milestone/27)",
+      "description": "We still plan things to do in 1.7, but here is what we decided to do for now:"
+    },
+    "1-6": {
+      "title": "[v1.6](https://github.com/epicmaxco/vuestic-ui/milestone/19)",
+      "description": "We focus on new services, components and integration with CSS frameworks."
+    },
     "1-5": {
       "title": "[v1.5](https://github.com/epicmaxco/vuestic-ui/milestone/11)",
       "description": "We focus on new services, components, testing and automation."

packages/docs/page-config/introduction/roadmap/components/roadmap.vue

@@ -7,7 +7,7 @@
         class="docs-roadmap__column-wrapper"
       >
         <div class="docs-roadmap__column text-center">
-          <h5 class="mb-[20px]">
+          <h5 v-if="col.items.length > 0" class="mb-[20px]">
             {{ col.title }}
           </h5>
 
@@ -43,7 +43,8 @@
 <script setup lang="ts">
 import { PropType, computed } from "vue";
 import { RoadmapItem } from "../types";
-import images from "../images";
+import * as images from "../images";
+
 
 const props = defineProps({
   roadmap: {
@@ -68,7 +69,7 @@ const items = computed(() => {
       title: typeof item === "string" ? item : item.title,
       type: typeof item === "string" ? "" : item.type,
       color: colors[index],
-      image: item.image ? (images[item.image] as any) : undefined,
+      image: item.image ? ((images as Record<string, any>)[item.image]) : undefined,
     };
   });
 });

packages/docs/page-config/introduction/roadmap/images/1.5/index.ts

@@ -0,0 +1,10 @@
+export { default as TreeView } from "./tree-view.vue";
+export { default as SplitPanel } from "./split-panel.vue";
+export { default as Skeleton } from "./skeleton.vue";
+export { default as DarkTheme } from "./dark-theme.vue";
+export { default as Presets } from "./presets.vue";
+export { default as CSSHelpers } from "./css-helpers.vue";
+export { default as Buttons } from "./buttons.vue";
+export { default as Breakpoints } from "./breakpoints.vue";
+export { default as Dropdown } from "./dropdown.vue";
+export { default as AttributesConfig } from "./attributes-config.vue";

packages/docs/page-config/introduction/roadmap/images/1.6/autoComplete.vue

@@ -0,0 +1,7 @@
+<template>
+  <img :src="Image"/>
+</template>
+
+<script setup lang="ts">
+  import Image from './autoComplete.png'
+</script>

packages/docs/page-config/introduction/roadmap/images/1.6/breakpoints.vue

@@ -0,0 +1,68 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="748"
+    height="433"
+    viewBox="0 0 374 216.5"
+  >
+    <g stroke-linecap="round">
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M10 10h244M10 10h244m0 0v168m0-168v168m0 0H10m244 0H10m0 0V10m0 168V10"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path
+        fill="#ecf0f1"
+        stroke-width="0"
+        d="M133.8 170h5.4l2.1.7.7 2v21.6l-.7 2-2 .7-7.6-.7-.7-2v-21.6l.7-2 2-.7"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M133.8 170h5.4m-5.4 0h5.4m0 0c1.9 0 2.8 1 2.8 2.8m-2.8-2.8c1.9 0 2.8 1 2.8 2.8m0 0v21.4m0-21.4v21.4m0 0c0 1.9-1 2.8-2.8 2.8m2.8-2.8c0 1.9-1 2.8-2.8 2.8m0 0h-5.4m5.4 0h-5.4m0 0c-1.9 0-2.8-1-2.8-2.8m2.8 2.8c-1.9 0-2.8-1-2.8-2.8m0 0v-21.4m0 21.4v-21.4m0 0c0-1.9 1-2.8 2.8-2.8m-2.8 2.8c0-1.9 1-2.8 2.8-2.8"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path
+        fill="#ecf0f1"
+        stroke-width="0"
+        d="M52.3 195.5h170.4l2.1.7.7 7.6-.7 2-2 .7H52.2l-2-.7-.7-2v-5.6l.7-2 2-.7"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M52.3 195.5h170.4m-170.4 0h170.4m0 0c1.9 0 2.8 1 2.8 2.8m-2.8-2.8c1.9 0 2.8 1 2.8 2.8m0 0v5.4m0-5.4v5.4m0 0c0 1.9-1 2.8-2.8 2.8m2.8-2.8c0 1.9-1 2.8-2.8 2.8m0 0H52.3m170.4 0H52.3m0 0c-1.9 0-2.8-1-2.8-2.8m2.8 2.8c-1.9 0-2.8-1-2.8-2.8m0 0v-5.4m0 5.4v-5.4m0 0c0-1.9 1-2.8 2.8-2.8m-2.8 2.8c0-1.9 1-2.8 2.8-2.8"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path
+        fill="#ecf0f1"
+        stroke-width="0"
+        d="m290.5 10 54.7.4 5 1.1 4.2 2L358 16l2.7 3.5 1.9 4.2 1.5 10.7-.4 117.7-3 9.2-2.7 3.5-3.5 2.7-4.2 1.9-10.7 1.5-54.7-.4-9.2-3-3.5-2.7-2.7-3.5-1.9-4.2-1.5-10.7.4-117.7 1.1-5 2-4.2L272 16l3.5-2.7 4.2-1.9 10.7-1.5"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M290.5 10h49m-49 0h49m0 0c16.3 0 24.5 8.2 24.5 24.5M339.5 10c16.3 0 24.5 8.2 24.5 24.5m0 0v112m0-112v112m0 0c0 16.3-8.2 24.5-24.5 24.5m24.5-24.5c0 16.3-8.2 24.5-24.5 24.5m0 0h-49m49 0h-49m0 0c-16.3 0-24.5-8.2-24.5-24.5m24.5 24.5c-16.3 0-24.5-8.2-24.5-24.5m0 0v-112m0 112v-112m0 0c0-16.3 8.2-24.5 24.5-24.5M266 34.5c0-16.3 8.2-24.5 24.5-24.5"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path fill="var(--va-background-border)" stroke-width="0" d="M23 22h220v143H23" />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M23 22h220M23 22h220m0 0v143m0-143v143m0 0H23m220 0H23m0 0V22m0 143V22"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path fill="var(--va-background-border)" stroke-width="0" d="M281 27h66v126h-66" />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M281 27h66m-66 0h66m0 0v126m0-126v126m0 0h-66m66 0h-66m0 0V27m0 126V27"
+      />
+    </g>
+  </svg>
+</template>

packages/docs/page-config/introduction/roadmap/images/1.6/createVuestic.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="680"
+    height="398"
+    viewBox="0 0 340 199"
+  >
+    <g stroke-linecap="round">
+      <path
+        fill="#222"
+        stroke-width="0"
+        d="M42 10h256l7.5.5L312 12l5.5 2.5L322 18l3.5 4.5L328 28l1.5 6.5.5 7.5v115l-.5 7.5-1.5 6.5-2.5 5.5-3.5 4.5-4.5 3.5-5.5 2.5-6.5 1.5-7.5.5H42l-7.5-.5L28 187l-5.5-2.5L18 181l-3.5-4.5L12 171l-1.5-6.5-.5-7.5.5-122.5L12 28l2.5-5.5L18 18l4.5-3.5L28 12l6.5-1.5L42 10"
+      />
+      <path
+        fill="none"
+        stroke="#000"
+        d="M42 10h256M42 10h256m0 0c21.3 0 32 10.7 32 32m-32-32c21.3 0 32 10.7 32 32m0 0v115m0-115v115m0 0c0 21.3-10.7 32-32 32m32-32c0 21.3-10.7 32-32 32m0 0H42m256 0H42m0 0c-21.3 0-32-10.7-32-32m32 32c-21.3 0-32-10.7-32-32m0 0V42m0 115V42m0 0c0-21.3 10.7-32 32-32M10 42c0-21.3 10.7-32 32-32"
+      />
+    </g>
+    <text
+      y="20"
+      fill="#fff"
+      font-family="Consolas"
+      font-size="20"
+      style="white-space: pre"
+      transform="translate(31 156)"
+    >
+      &gt; npx create vuestic
+    </text>
+  </svg>
+</template>

packages/docs/page-config/introduction/roadmap/images/1.6/index.ts

@@ -0,0 +1,5 @@
+export { default as createVuestic } from './createVuestic.vue';
+export { default as autoComplete } from './autoComplete.vue'
+export { default as breakpoints } from './breakpoints.vue'
+export { default as stepper } from './stepper.vue'
+export { default as tailwind } from './tailwind.vue'

packages/docs/page-config/introduction/roadmap/images/1.6/stepper.vue

@@ -0,0 +1,117 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="585"
+    height="326"
+    viewBox="0 0 292.5 163"
+  >
+    <g stroke-linecap="round">
+      <path
+        fill="var(--va-background-element)"
+        stroke-width="0"
+        d="M11.5 51h271v102h-271"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M11.5 51h271m-271 0h271m0 0v102m0-102v102m0 0h-271m271 0h-271m0 0V51m0 102V51"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path
+        fill="var(--va-background-element)"
+        stroke-width="0"
+        d="M18.5 11h17l3.7.5 2.7 1.6 1.6 2.7.5 3.7v17l-.5 3.7-1.6 2.7-2.7 1.6-3.7.5h-17l-3.7-.5-2.7-1.6-1.6-2.7-.5-3.7.5-20.7 1.6-2.7 2.7-1.6 3.7-.5"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M18.5 11h17m-17 0h17m0 0c5.7 0 8.5 2.8 8.5 8.5M35.5 11c5.7 0 8.5 2.8 8.5 8.5m0 0v17m0-17v17m0 0c0 5.7-2.8 8.5-8.5 8.5m8.5-8.5c0 5.7-2.8 8.5-8.5 8.5m0 0h-17m17 0h-17m0 0c-5.7 0-8.5-2.8-8.5-8.5m8.5 8.5c-5.7 0-8.5-2.8-8.5-8.5m0 0v-17m0 17v-17m0 0c0-5.7 2.8-8.5 8.5-8.5M10 19.5c0-5.7 2.8-8.5 8.5-8.5"
+      />
+    </g>
+    <text
+      x="7"
+      y="19"
+      fill="var(--va-primary)"
+      font-family="Cascadia, Segoe UI Emoji"
+      font-size="20"
+      style="white-space: pre"
+      text-anchor="middle"
+      transform="translate(20 16)"
+    >
+      1
+    </text>
+    <g stroke-linecap="round">
+      <path
+        fill="var(--va-background-element)"
+        stroke-width="0"
+        d="M140 10h17l3.7.5 2.7 1.6 1.6 2.7.5 3.7v17l-.5 3.7-1.6 2.7-2.7 1.6-3.7.5h-17l-3.7-.5-2.7-1.6-1.6-2.7-.5-3.7.5-20.7 1.6-2.7 2.7-1.6 3.7-.5"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M140 10h17m-17 0h17m0 0c5.7 0 8.5 2.8 8.5 8.5M157 10c5.7 0 8.5 2.8 8.5 8.5m0 0v17m0-17v17m0 0c0 5.7-2.8 8.5-8.5 8.5m8.5-8.5c0 5.7-2.8 8.5-8.5 8.5m0 0h-17m17 0h-17m0 0c-5.7 0-8.5-2.8-8.5-8.5M140 44c-5.7 0-8.5-2.8-8.5-8.5m0 0v-17m0 17v-17m0 0c0-5.7 2.8-8.5 8.5-8.5m-8.5 8.5c0-5.7 2.8-8.5 8.5-8.5"
+      />
+    </g>
+    <text
+      x="7"
+      y="19"
+      fill="var(--va-primary)"
+      font-family="Cascadia, Segoe UI Emoji"
+      font-size="20"
+      style="white-space: pre"
+      text-anchor="middle"
+      transform="translate(141.5 15)"
+    >
+      2
+    </text>
+    <g stroke-linecap="round">
+      <path
+        fill="var(--va-background-element)"
+        stroke-width="0"
+        d="M257 10h17l3.7.5 2.7 1.6 1.6 2.7.5 3.7v17l-.5 3.7-1.6 2.7-2.7 1.6-3.7.5h-17l-3.7-.5-2.7-1.6-1.6-2.7-.5-3.7.5-20.7 1.6-2.7 2.7-1.6 3.7-.5"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M257 10h17m-17 0h17m0 0c5.7 0 8.5 2.8 8.5 8.5M274 10c5.7 0 8.5 2.8 8.5 8.5m0 0v17m0-17v17m0 0c0 5.7-2.8 8.5-8.5 8.5m8.5-8.5c0 5.7-2.8 8.5-8.5 8.5m0 0h-17m17 0h-17m0 0c-5.7 0-8.5-2.8-8.5-8.5M257 44c-5.7 0-8.5-2.8-8.5-8.5m0 0v-17m0 17v-17m0 0c0-5.7 2.8-8.5 8.5-8.5m-8.5 8.5c0-5.7 2.8-8.5 8.5-8.5"
+      />
+    </g>
+    <text
+      x="7"
+      y="19"
+      fill="var(--va-primary)"
+      font-family="Cascadia, Segoe UI Emoji"
+      font-size="20"
+      style="white-space: pre"
+      text-anchor="middle"
+      transform="translate(258.5 15)"
+    >
+      3
+    </text>
+    <g stroke-linecap="round">
+      <path
+        fill="var(--va-background-element)"
+        stroke-width="0"
+        d="M55 27h61v5H55"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M55 27h61m-61 0h61m0 0v5m0-5v5m0 0H55m61 0H55m0 0v-5m0 5v-5"
+      />
+    </g>
+    <g stroke-linecap="round">
+      <path
+        fill="var(--va-background-element)"
+        stroke-width="0"
+        d="M177 25.5h61v5h-61"
+      />
+      <path
+        fill="none"
+        stroke="transparent"
+        d="M177 25.5h61m-61 0h61m0 0v5m0-5v5m0 0h-61m61 0h-61m0 0v-5m0 5v-5"
+      />
+    </g>
+  </svg>
+</template>

packages/docs/page-config/introduction/roadmap/images/1.6/tailwind.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+    <defs>
+      <linearGradient
+        id="A"
+        x1="0"
+        x2="64"
+        y1="-21.3"
+        y2="85.3"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0%" stop-color="#2383ae" />
+        <stop offset="100%" stop-color="#6dd7b9" />
+      </linearGradient>
+    </defs>
+    <path
+      fill="url(#A)"
+      fill-rule="evenodd"
+      d="M16 26c2-9 7-13 16-13 13 0 14 9 21 11 4 1 8-1 11-5-2 9-7 13-16 13-13 0-14-10-21-11-4-1-8 0-11 5zM0 45c2-9 7-13 16-13 13 0 14 10 21 11 4 1 8 0 11-5-2 9-7 13-16 13-13 0-14-9-21-11-4-1-8 1-11 5z"
+    />
+  </svg>
+</template>

packages/docs/page-config/introduction/roadmap/images/1.7/colorPicker.vue

@@ -0,0 +1,74 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="266"
+    height="249"
+    fill="none"
+    viewBox="0 0 266 249"
+  >
+    <path fill="#fff" d="M0 0h217v211H0zM1 219h264v30H1z" />
+    <path
+      fill="url(#paint0_linear_1_9)"
+      fill-opacity=".5"
+      d="M1 2h216v209H1z"
+    />
+    <path
+      fill="url(#paint1_linear_1_9)"
+      fill-opacity=".7"
+      d="M1 2h216v209H1z"
+    />
+    <path fill="url(#paint2_linear_1_9)" d="M224 2h42v207h-42z" />
+    <path fill="url(#paint3_linear_1_9)" d="M1 219h264v30H1z" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_1_9"
+        x1="217"
+        x2="1"
+        y1="105.9"
+        y2="105.9"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="red" />
+        <stop offset="1" stop-color="#fff" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_1_9"
+        x1="108.5"
+        x2="108.5"
+        y1="2"
+        y2="211"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-opacity="0" />
+        <stop offset="1" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_1_9"
+        x1="245"
+        x2="245"
+        y1="2"
+        y2="209"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="red" />
+        <stop offset=".2" stop-color="#F8E325" />
+        <stop offset=".3" stop-color="#60F248" />
+        <stop offset=".5" stop-color="#6FD5EC" />
+        <stop offset=".7" stop-color="#001AFF" />
+        <stop offset=".8" stop-color="#DB00FF" />
+        <stop offset="1" stop-color="red" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_1_9"
+        x1="265"
+        x2="1"
+        y1="234.4"
+        y2="234.4"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="1" stop-color="#D9D9D9" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

packages/docs/page-config/introduction/roadmap/images/1.7/index.ts

@@ -0,0 +1 @@
+export { default as colorPicker } from './colorPicker.vue'