[#2989] [#2990] Tailwind & VaAspectRatio docs pages, related bugfix

packages/docs/locales/en.json

@@ -277,7 +277,8 @@
     "VaAspectRatio": {
       "props": {
         "contentWidth": "Wrapper width, it's used with `content-height` to replace the `ratio` property.",
-        "contentHeight": "Wrapper height, it's used with `content-width` to replace the `ratio` property."
+        "contentHeight": "Wrapper height, it's used with `content-width` to replace the `ratio` property.",
+        "maxWidth": "Maximal component's width."
       }
     },
     "VaAffix": {
@@ -1572,6 +1573,7 @@
     "list": "List",
     "select": "Select",
     "parallax": "Parallax",
+    "tailwind": "Tailwind Integration",
     "popover": "Popover",
     "backtop": "Backtop",
     "colorPicker": "Color Picker",
@@ -3151,7 +3153,7 @@
   },
   "grid": {
     "title": "Grid System",
-    "deprecated": "CSS helpers and the CSS reset file will remain in the Vuestic UI bundle until version 1.7.0, after which they will be permanently removed.",
+    "deprecated": "CSS helpers and the CSS reset file will remain in the Vuestic UI bundle until version 1.7.0, after which they will be permanently removed. We suggest to use Tailwind CSS instead.",
     "summaryText": "Vuestic UI provides you with some flexbox helper classes. Of course, you can opt out using CSS Grid instead (or any other layout-scheme you'd like), but if you prefer using flexbox, we've got you covered. Still, the final decision is totally up to you.",
     "examples": {
       "default": {
@@ -3233,6 +3235,35 @@
       }
     }
   },
+  "tailwind": {
+    "title": "Tailwind CSS Support",
+    "summaryText": "We recommend our users to use [Tailwind CSS](https://tailwindcss.com/)[[target=_blank]] as the most convenient and modern solution to the CSS helpers issue.",
+    "deprecated": "CSS helpers and the CSS reset file will remain in the Vuestic UI bundle until version 1.7.0, after which they will be permanently removed.",
+    "preparation": {
+      "title": "Preparations",
+      "text": "Before we start with integration - please ensure you have both Tailwind CSS and Vuestic UI installed. If that's not the case - here are installation guide [for Vuestic UI](/getting-started/installation) and for [Tailwind CSS](https://tailwindcss.com/docs/installation/using-postcss)[[target=_blank]]."
+    },
+    "features": {
+      "integration": {
+        "title": "Syncing configs",
+        "text": "To create a tight bind between Vuestic with Tailwind we have a {'`@vuestic/tailwind`'} package: it syncs [breakpoint](/services/breakpoints)[[target=_blank]] and [color](/services/colors)[[target=_blank]] settings. You can sync from Vuestic UI to Tailwind or backwards!",
+        "instructionIntro": "Here's what you have to do to make it work:",
+        "extendAlert": "We're not overriding Tailwind CSS settings, but extending them.",
+        "instruction": [
+          "1. Install this package:",
+          "2. After installation, three commands become available to you:",
+          "`npx sync-tailwind-with-vuestic` - formats and transfers the color and breakpoints settings from the `tailwind.config.*` file (and in its absence, it uses the default Tailwind CSS configuration) to the root file `vuestic.config.js` (also added by this command);",
+          "`npx watch-tailwind` - watches `tailwind.config.*` in background and synchronizes the Vuestic UI configuration on the fly;",
+          "`npx sync-vuestic-with-tailwind` - transfers color and breakpoint settings from default Vuestic UI config to the Tailwind's configuration file (`tailwind.config.cjs`).",
+          "3A. `[Tailwind CSS -> Vuestic UI]` import the `config` configuration in your `main.*` and specify it when initializing the application:",
+          "Also, you may want to synchronize the configuration partially (in the example - only Tailwind CSS colors will be taken):",
+          "3B. `[Vuestic UI -> Tailwind CSS]` Nothing more is needed.",
+          "4A. `[Tailwind CSS -> Vuestic UI]` As a result you will be able to use Tailwind colors and breakpoints setting in Vuestic. For example, the result of synchronization default Tailwind settings will be a Vuestic settings file:",
+          "4B. `[Vuestic UI -> Tailwind CSS]` Vuestic UI setting will be available in the Tailwind CSS scope. Output format follows the requirements, located [here](https://tailwindcss.com/docs/screens#adding-larger-breakpoints)[[target=_blank]] and [here](https://tailwindcss.com/docs/screens#adding-larger-breakpoints)[[target=_blank]]."
+        ]
+      }
+    }
+  },
   "list": {
     "title": "List",
     "summaryText": "The `va-list` component is used to display structured information.",

packages/docs/locales/ru.json

@@ -276,7 +276,8 @@
     "VaAspectRatio": {
       "props": {
         "contentWidth": "Ширина обертки компонента. Используется совместно с `content-height` вместо свойства `ratio`.",
-        "contentHeight": "Высота обертки компонента. Используется совместно с `content-width` вместо свойства `ratio`."
+        "contentHeight": "Высота обертки компонента. Используется совместно с `content-width` вместо свойства `ratio`.",
+        "maxWidth": "Максимальная ширина компонента."
       }
     },
     "VaAffix": {
@@ -1485,6 +1486,7 @@
     "list": "List",
     "select": "Select",
     "parallax": "Parallax",
+    "tailwind": "Интеграция Tailwind",
     "popover": "Popover",
     "backtop": "Backtop",
     "colorPicker": "Color Picker",
@@ -3157,6 +3159,35 @@
       }
     }
   },
+  "tailwind": {
+    "title": "Поддержка Tailwind CSS",
+    "summaryText": "Мы рекомендуем нашим пользователям использовать [Tailwind CSS](https://tailwindcss.com/)[[target=_blank]] как наиболее удобное и современное решение вопроса CSS хелперов.",
+    "deprecated": "CSS-хелперы и файл сброса CSS (CSS reset) останутся в бандле Vuestic UI вплоть до версии 1.7.0, после чего будут окончательно убраны.",
+    "preparation": {
+      "title": "Подготовка",
+      "text": "Прежде всего, необходимо убедиться, что к вашему проекту подключен как Tailwind CSS, так и Vuestic UI. Для Vuestic UI следуйте нашей [инструкции](/getting-started/installation). Порядок подключения Tailwind CSS вы можете найти [здесь](https://tailwindcss.com/docs/installation/using-postcss)[[target=_blank]]."
+    },
+    "features": {
+      "integration": {
+        "title": "Синхронизация конфигураций",
+        "text": "Чтобы повысить комфорт от использования Vuestic совместно с Tailwind, мы сформировали отдельный пакет {'`@vuestic/tailwind`'}, который позволит синхронизировать конфигурации и использовать настройки брейкпоинтов (например, в [Breakpoint Service](/services/breakpoints)[[target=_blank]]) и цветов Tailwind в компонентах Vuestic. Также, наоборот, пакет позволяет импортировать настройки цветов и экранов из Tailwind во Vuestic.",
+        "instructionIntro": "Для начала использования необходимо:",
+        "extendAlert": "Мы не заменяем цветовые схемы или настройки экранов Tailwind, а расширяем их.",
+        "instruction": [
+          "1. Установите пакет, используя команды ниже:",
+          "2. После установки вам становятся доступны три команды::",
+          "`npx sync-tailwind-with-vuestic` - осуществляет форматирование и перенос настроек цветов и брейкпоинтов из файла `tailwind.config.*` (а при его отсутствии — из конфигурации Tailwind CSS по умолчанию) в корневой файл `vuestic.config.js` (также добавляемый этой командой);",
+          "`npx watch-tailwind` - запускает процесс слежения за файлом `tailwind.config.*` для синхронизации конфигурации Vuestic UI на лету;",
+          "`npx sync-vuestic-with-tailwind` - похожа на первую команду, с той лишь разницей, что перенос цветов и настроек экранов осуществляется из Vuestic UI в Tailwind CSS.",
+          "3A. `[Tailwind CSS -> Vuestic UI]` Импортируйте конфигурацию `config` в вашем `main.*` и укажите ее при инициализации приложения:",
+          "Также, возможно, вы захотите синхронизировать конфигурацию частично (в примере ниже из Tailwind CSS были взяты только цвета):",
+          "3B. `[Vuestic UI -> Tailwind CSS]` Никаких дополнительных действий не требуется.",
+          "4A. `[Tailwind CSS -> Vuestic UI]` Итогом станет возможность применения цветов и текущих значений порогов экрана Tailwind в Vuestic. Например, итогом синхронизации дефолтных настроек Tailwind станет файл настроек Vuestic подобного содержания:",
+          "4B. `[Vuestic UI -> Tailwind CSS]` Цвета и экраны Vuestic UI смогут использоваться в Tailwind CSS. Конечный формат представлен требованиями, изложенными [тут](https://tailwindcss.com/docs/screens#adding-larger-breakpoints)[[target=_blank]] and [тут](https://tailwindcss.com/docs/screens#adding-larger-breakpoints)[[target=_blank]]."
+        ]
+      }
+    }
+  },
   "list": {
     "title": "List",
     "summaryText": "Компонент `va-list` используется для отображения информации в виде списка.",

packages/docs/page-config/navigationRoutes.ts

@@ -97,34 +97,41 @@ export const navigationRoutes: NavigationRoute[] = [
     disabled: true,
     children: [
       {
-        name: "reset",
-        displayName: "menu.reset",
+        name: "colors",
+        displayName: "menu.colors",
+        meta: {
+          badge: "updated",
+        },
+      },
+      {
+        name: "css-variables",
+        displayName: "menu.cssVariables",
+      },
+      {
+        name: "typography",
+        displayName: "menu.typography",
       },
       {
         name: "grid",
         displayName: "menu.grid",
       },
       {
-        name: "smart-helpers",
-        displayName: "menu.smartHelpers",
+        name: 'tailwind',
+        displayName: 'menu.tailwind',
         meta: {
-          badge: "new",
+          badge: 'new',
         },
       },
       {
-        name: "colors",
-        displayName: "menu.colors",
+        name: "smart-helpers",
+        displayName: "menu.smartHelpers",
         meta: {
-          badge: "updated",
+          badge: "new",
         },
       },
       {
-        name: "css-variables",
-        displayName: "menu.cssVariables",
-      },
-      {
-        name: "typography",
-        displayName: "menu.typography",
+        name: "reset",
+        displayName: "menu.reset",
       },
       // GENERATOR_ADD - styles
     ],
@@ -267,6 +274,14 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "card",
         displayName: "menu.card",
       },
+      {
+        category: 'menu.categories.layout',
+        name: 'aspect-ratio',
+        displayName: 'menu.aspectRatio',
+        meta: {
+          badge: 'new',
+        },
+      },
       {
         name: "divider",
         displayName: "menu.divider",

packages/docs/page-config/styles/tailwind/code/configExample.ts

@@ -0,0 +1,26 @@
+// vuestic.config.js
+
+{
+  breakpoint: {
+    thresholds: {
+      sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        '2xl': 1536,
+    },
+  },
+  colors: {
+    variables: {
+      black: '#000',
+        white: '#fff',
+        'gray-50': '#f9fafb',
+        'gray-100': '#f3f4f6',
+        'gray-200': '#e5e7eb',
+    ...
+      'rose-700': '#be123c',
+        'rose-800': '#9f1239',
+        'rose-900': '#881337',
+    },
+  },
+}

packages/docs/page-config/styles/tailwind/code/configuringFull.ts

@@ -0,0 +1,8 @@
+// main.*
+
+import { createVuestic } from 'vuestic-ui'
+import config from '../vuestic.config.js'
+
+createApp(App)
+  .use(createVuestic({ config }))
+  .mount('#app')

packages/docs/page-config/styles/tailwind/code/configuringPartial.ts

@@ -0,0 +1,17 @@
+// main.*
+
+import { createVuestic } from 'vuestic-ui'
+import config from '../vuestic.config.js'
+
+createApp(App)
+  .use(createVuestic({
+    config: {
+      icons: [...],
+      components: {
+        all: { ... },
+        presets: { ... },
+      },
+      colors: config.colors,
+    },
+  }))
+  .mount('#app')

packages/docs/page-config/styles/tailwind/index.ts

@@ -0,0 +1,42 @@
+export default definePageConfig({
+  blocks: [
+    block.title("tailwind.title"),
+    block.paragraph("tailwind.summaryText"),
+
+    block.alert("tailwind.deprecated", "warning"),
+
+    block.headline("tailwind.preparation.title"),
+    block.paragraph("tailwind.preparation.text"),
+
+    block.headline("tailwind.features.integration.title"),
+    block.paragraph("tailwind.features.integration.text"),
+
+    block.paragraph("tailwind.features.integration.instructionIntro"),
+
+    block.paragraph("tailwind.features.integration.instruction[0]"),
+    block.code({
+      npm: "npm install @vuestic/tailwind",
+      yarn: "yarn add @vuestic/tailwind"
+    }, "bash"),
+
+    block.paragraph("tailwind.features.integration.instruction[1]"),
+    block.paragraph("tailwind.features.integration.instruction[2]"),
+    block.paragraph("tailwind.features.integration.instruction[3]"),
+    block.paragraph("tailwind.features.integration.instruction[4]"),
+
+    block.alert("tailwind.features.integration.extendAlert", "primary"),
+
+    block.paragraph("tailwind.features.integration.instruction[5]"),
+    block.code("configuringFull"),
+
+    block.paragraph("tailwind.features.integration.instruction[6]"),
+    block.code("configuringPartial"),
+
+    block.paragraph("tailwind.features.integration.instruction[7]"),
+
+    block.paragraph("tailwind.features.integration.instruction[8]"),
+    block.code("configExample"),
+
+    block.paragraph("tailwind.features.integration.instruction[9]")
+  ]
+});

packages/docs/page-config/ui-elements/aspect-ratio/api-options.ts

@@ -0,0 +1 @@
+export default defineManualApi({});

packages/docs/page-config/ui-elements/aspect-ratio/examples/Default.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-aspect-ratio
+      class="col-span-1 p-2 border border-solid border-gray-300 rounded"
+      :ratio="16/9"
+    >
+      <div class="flex flex-col">
+        <h3>16/9</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </va-aspect-ratio>
+
+    <va-aspect-ratio
+      class="col-span-1 p-2 border border-solid border-gray-300 rounded"
+      :ratio="4/3"
+    >
+      <div class="flex flex-col">
+        <h3>4/3</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </va-aspect-ratio>
+
+    <va-aspect-ratio
+      class="col-span-1 p-2 border border-solid border-gray-300 rounded"
+      :ratio="1"
+    >
+      <div class="flex flex-col">
+        <h3>1/1</h3>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+    </va-aspect-ratio>
+  </div>
+</template>

packages/docs/page-config/ui-elements/aspect-ratio/examples/WithOtherComponents.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+    <va-image class="col-span-1" :ratio="16/9" src="https://picsum.photos/1500" />
+
+    <va-aspect-ratio class="col-span-1" :ratio="4/3">
+      <va-card class="w-full">
+        <va-card-title>4/3</va-card-title>
+        <va-card-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</va-card-content>
+      </va-card>
+    </va-aspect-ratio>
+  </div>
+</template>

packages/docs/page-config/ui-elements/aspect-ratio/index.ts

@@ -0,0 +1,20 @@
+import apiOptions from "./api-options";
+
+export default definePageConfig({
+  blocks: [
+    block.title("aspectRatio.title"),
+    block.paragraph("aspectRatio.summaryText"),
+
+    block.subtitle("all.examples"),
+
+    block.example("Default"),
+
+    block.example("WithOtherComponents"),
+
+    block.subtitle("all.api"),
+    block.api("VaAspectRatio", apiOptions),
+
+    block.subtitle("all.cssVariables"),
+    block.file("vuestic-ui/src/components/va-aspect-ratio/_variables.scss")
+  ]
+});

packages/nuxt/src/config/components.ts

@@ -3,6 +3,7 @@ export default [
   'VaAffix',
   'VaAlert',
   'VaAppBar',
+  'VaAspectRatio',
   'VaAvatar',
   'VaAvatarGroup',
   'VaBacktop',

packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue

@@ -108,7 +108,7 @@ export default defineComponent({
   components: { VaBadge, VaIcon },
 
   props: {
-    value: { type: Array as PropType<SelectOption[]>, default: [] as SelectOption[] },
+    value: { type: Array as PropType<SelectOption[]>, required: true },
     valueString: { type: String },
     placeholder: { type: String, default: '' },
     tabindex: { type: Number, default: 0 },
@@ -150,7 +150,7 @@ export default defineComponent({
     })
 
     const handleBackspace = (e: KeyboardEvent) => {
-      if (props.multiple && value.value?.length && e.key === 'Backspace' && !autocompleteInputValueComputed.value) {
+      if (props.multiple && value.value.length && e.key === 'Backspace' && !autocompleteInputValueComputed.value) {
         emit('delete-last-selected')
       }
     }