From 4407b18d55bcd9071c6299e3604b1cecf06d73b4 Mon Sep 17 00:00:00 2001 From: aluarius Date: Thu, 16 Feb 2023 16:31:10 +0600 Subject: [PATCH 1/3] [#2989] [#2990] Tailwind & Aspect ratio docs pages, related bugfix --- packages/docs/locales/en.json | 33 ++++++++++++++- packages/docs/locales/ru.json | 33 ++++++++++++++- packages/docs/page-config/navigationRoutes.ts | 15 +++++++ .../styles/tailwind/code/configExample.ts | 26 ++++++++++++ .../styles/tailwind/code/configuringFull.ts | 8 ++++ .../tailwind/code/configuringPartial.ts | 17 ++++++++ .../docs/page-config/styles/tailwind/index.ts | 42 +++++++++++++++++++ .../ui-elements/aspect-ratio/api-options.ts | 1 + .../aspect-ratio/examples/Default.vue | 33 +++++++++++++++ .../examples/WithOtherComponents.vue | 12 ++++++ .../ui-elements/aspect-ratio/index.ts | 23 ++++++++++ packages/nuxt/src/config/components.ts | 1 + .../VaSelectContent/VaSelectContent.vue | 4 +- 13 files changed, 244 insertions(+), 4 deletions(-) create mode 100644 packages/docs/page-config/styles/tailwind/code/configExample.ts create mode 100644 packages/docs/page-config/styles/tailwind/code/configuringFull.ts create mode 100644 packages/docs/page-config/styles/tailwind/code/configuringPartial.ts create mode 100644 packages/docs/page-config/styles/tailwind/index.ts create mode 100644 packages/docs/page-config/ui-elements/aspect-ratio/api-options.ts create mode 100644 packages/docs/page-config/ui-elements/aspect-ratio/examples/Default.vue create mode 100644 packages/docs/page-config/ui-elements/aspect-ratio/examples/WithOtherComponents.vue create mode 100644 packages/docs/page-config/ui-elements/aspect-ratio/index.ts diff --git a/packages/docs/locales/en.json b/packages/docs/locales/en.json index f8b9138e99..c3639ba4f8 100644 --- a/packages/docs/locales/en.json +++ b/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 Support", "popover": "Popover", "backtop": "Backtop", "colorPicker": "Color Picker", @@ -3217,6 +3219,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.", diff --git a/packages/docs/locales/ru.json b/packages/docs/locales/ru.json index 8c8a93a534..7266fb713d 100644 --- a/packages/docs/locales/ru.json +++ b/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", @@ -3141,6 +3143,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` используется для отображения информации в виде списка.", diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index 3fe2ebde72..f47cd414c9 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -96,6 +96,13 @@ export const navigationRoutes: NavigationRoute[] = [ }, disabled: true, children: [ + { + name: 'tailwind', + displayName: 'menu.tailwind', + meta: { + badge: 'new', + }, + }, { name: "reset", displayName: "menu.reset", @@ -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", diff --git a/packages/docs/page-config/styles/tailwind/code/configExample.ts b/packages/docs/page-config/styles/tailwind/code/configExample.ts new file mode 100644 index 0000000000..42776a48cd --- /dev/null +++ b/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', + }, + }, +} diff --git a/packages/docs/page-config/styles/tailwind/code/configuringFull.ts b/packages/docs/page-config/styles/tailwind/code/configuringFull.ts new file mode 100644 index 0000000000..8d3e9a6215 --- /dev/null +++ b/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') diff --git a/packages/docs/page-config/styles/tailwind/code/configuringPartial.ts b/packages/docs/page-config/styles/tailwind/code/configuringPartial.ts new file mode 100644 index 0000000000..4cdae669e4 --- /dev/null +++ b/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') diff --git a/packages/docs/page-config/styles/tailwind/index.ts b/packages/docs/page-config/styles/tailwind/index.ts new file mode 100644 index 0000000000..117e4a4a79 --- /dev/null +++ b/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]") + ] +}); diff --git a/packages/docs/page-config/ui-elements/aspect-ratio/api-options.ts b/packages/docs/page-config/ui-elements/aspect-ratio/api-options.ts new file mode 100644 index 0000000000..dfea3b158e --- /dev/null +++ b/packages/docs/page-config/ui-elements/aspect-ratio/api-options.ts @@ -0,0 +1 @@ +export default defineManualApi({}); diff --git a/packages/docs/page-config/ui-elements/aspect-ratio/examples/Default.vue b/packages/docs/page-config/ui-elements/aspect-ratio/examples/Default.vue new file mode 100644 index 0000000000..8b72597942 --- /dev/null +++ b/packages/docs/page-config/ui-elements/aspect-ratio/examples/Default.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/page-config/ui-elements/aspect-ratio/examples/WithOtherComponents.vue b/packages/docs/page-config/ui-elements/aspect-ratio/examples/WithOtherComponents.vue new file mode 100644 index 0000000000..b7a878a90f --- /dev/null +++ b/packages/docs/page-config/ui-elements/aspect-ratio/examples/WithOtherComponents.vue @@ -0,0 +1,12 @@ + diff --git a/packages/docs/page-config/ui-elements/aspect-ratio/index.ts b/packages/docs/page-config/ui-elements/aspect-ratio/index.ts new file mode 100644 index 0000000000..d138da42ad --- /dev/null +++ b/packages/docs/page-config/ui-elements/aspect-ratio/index.ts @@ -0,0 +1,23 @@ +import apiOptions from "./api-options"; + +export default definePageConfig({ + blocks: [ + block.title("aspectRatio.title"), + block.paragraph("aspectRatio.summaryText"), + + block.subtitle("all.examples"), + + block.headline("aspectRatio.examples.default.title"), + block.example("Default", { hideTitle: true }), + + block.headline("aspectRatio.examples.withOtherComponents.title"), + block.paragraph("aspectRatio.examples.withOtherComponents.text"), + block.example("WithOtherComponents", { hideTitle: true }), + + block.subtitle("all.api"), + block.api("VaAspectRatio", apiOptions), + + block.subtitle("all.cssVariables"), + block.file("vuestic-ui/src/components/va-aspect-ratio/_variables.scss") + ] +}); diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts index a1785f2d66..abd5ba325c 100644 --- a/packages/nuxt/src/config/components.ts +++ b/packages/nuxt/src/config/components.ts @@ -3,6 +3,7 @@ export default [ 'VaAffix', 'VaAlert', 'VaAppBar', + 'VaAspectRatio', 'VaAvatar', 'VaAvatarGroup', 'VaBacktop', diff --git a/packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue b/packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue index 9c3638d8e7..4ea3037a2b 100644 --- a/packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue +++ b/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 }, + value: { type: Array as PropType, default: [] as SelectOption[] }, 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') } } From a8db792cfbb789d4d0786cc1cc55ef9123737564 Mon Sep 17 00:00:00 2001 From: aluarius Date: Fri, 17 Feb 2023 13:40:21 +0600 Subject: [PATCH 2/3] refactor: review suggestions --- packages/docs/locales/en.json | 2 +- packages/docs/locales/ru.json | 2 +- packages/docs/page-config/navigationRoutes.ts | 34 +++++++++---------- .../ui-elements/aspect-ratio/index.ts | 7 ++-- .../VaSelectContent/VaSelectContent.vue | 2 +- 5 files changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/docs/locales/en.json b/packages/docs/locales/en.json index c3639ba4f8..af9b83e35f 100644 --- a/packages/docs/locales/en.json +++ b/packages/docs/locales/en.json @@ -1573,7 +1573,7 @@ "list": "List", "select": "Select", "parallax": "Parallax", - "tailwind": "Tailwind Support", + "tailwind": "Tailwind Integration", "popover": "Popover", "backtop": "Backtop", "colorPicker": "Color Picker", diff --git a/packages/docs/locales/ru.json b/packages/docs/locales/ru.json index 7266fb713d..09036613c4 100644 --- a/packages/docs/locales/ru.json +++ b/packages/docs/locales/ru.json @@ -1486,7 +1486,7 @@ "list": "List", "select": "Select", "parallax": "Parallax", - "tailwind": "Поддержка Tailwind", + "tailwind": "Интеграция Tailwind", "popover": "Popover", "backtop": "Backtop", "colorPicker": "Color Picker", diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index f47cd414c9..a71dbe3b62 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -97,41 +97,41 @@ export const navigationRoutes: NavigationRoute[] = [ disabled: true, children: [ { - name: 'tailwind', - displayName: 'menu.tailwind', + name: "colors", + displayName: "menu.colors", meta: { - badge: 'new', + badge: "updated", }, }, { - name: "reset", - displayName: "menu.reset", + 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 ], diff --git a/packages/docs/page-config/ui-elements/aspect-ratio/index.ts b/packages/docs/page-config/ui-elements/aspect-ratio/index.ts index d138da42ad..6a4d8ec3be 100644 --- a/packages/docs/page-config/ui-elements/aspect-ratio/index.ts +++ b/packages/docs/page-config/ui-elements/aspect-ratio/index.ts @@ -7,12 +7,9 @@ export default definePageConfig({ block.subtitle("all.examples"), - block.headline("aspectRatio.examples.default.title"), - block.example("Default", { hideTitle: true }), + block.example("Default"), - block.headline("aspectRatio.examples.withOtherComponents.title"), - block.paragraph("aspectRatio.examples.withOtherComponents.text"), - block.example("WithOtherComponents", { hideTitle: true }), + block.example("WithOtherComponents"), block.subtitle("all.api"), block.api("VaAspectRatio", apiOptions), diff --git a/packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue b/packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue index 4ea3037a2b..6c8fa19199 100644 --- a/packages/ui/src/components/va-select/components/VaSelectContent/VaSelectContent.vue +++ b/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, default: [] as SelectOption[] }, + value: { type: Array as PropType, required: true }, valueString: { type: String }, placeholder: { type: String, default: '' }, tabindex: { type: Number, default: 0 }, From 010c76cbf650f3bffc82d09c0697796a5b138467 Mon Sep 17 00:00:00 2001 From: aluarius Date: Fri, 17 Feb 2023 13:45:09 +0600 Subject: [PATCH 3/3] refactor: review suggestions --- packages/docs/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/locales/en.json b/packages/docs/locales/en.json index 11b6f64296..593e595e02 100644 --- a/packages/docs/locales/en.json +++ b/packages/docs/locales/en.json @@ -3153,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": {