From 8fbc62d6fc6d1228785eacb5850d5bbff613ea3e Mon Sep 17 00:00:00 2001 From: LighthouseKeeperYN Date: Tue, 31 Jan 2023 11:29:17 +0100 Subject: [PATCH 01/10] feature: implement stepper component --- .../components/sidebar/navigationRoutes.ts | 7 + packages/docs/src/locales/en/en.json | 57 +++- packages/docs/src/locales/ru/ru.json | 21 ++ .../ui-elements/stepper/api-options.ts | 18 ++ .../ui-elements/stepper/examples/Custom.vue | 88 ++++++ .../ui-elements/stepper/examples/Default.vue | 45 +++ .../ui-elements/stepper/examples/Icons.vue | 45 +++ .../ui-elements/stepper/examples/Minimal.vue | 21 ++ .../ui-elements/stepper/examples/Vertical.vue | 46 +++ .../ui-elements/stepper/page-config.ts | 54 ++++ .../docs/src/pages/ui-elements/stepper.vue | 21 ++ packages/ui/src/components/index.ts | 1 + .../components/va-stepper/VaStepper.demo.vue | 115 +++++++ .../src/components/va-stepper/VaStepper.vue | 297 ++++++++++++++++++ .../src/components/va-stepper/_variables.scss | 12 + .../ui/src/components/va-stepper/index.ts | 4 + .../ui/src/services/vue-plugin/components.ts | 1 + 17 files changed, 846 insertions(+), 7 deletions(-) create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/api-options.ts create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/examples/Default.vue create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/examples/Icons.vue create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/examples/Minimal.vue create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/examples/Vertical.vue create mode 100644 packages/docs/src/page-configs/ui-elements/stepper/page-config.ts create mode 100644 packages/docs/src/pages/ui-elements/stepper.vue create mode 100644 packages/ui/src/components/va-stepper/VaStepper.demo.vue create mode 100644 packages/ui/src/components/va-stepper/VaStepper.vue create mode 100644 packages/ui/src/components/va-stepper/_variables.scss create mode 100644 packages/ui/src/components/va-stepper/index.ts diff --git a/packages/docs/src/components/sidebar/navigationRoutes.ts b/packages/docs/src/components/sidebar/navigationRoutes.ts index 46070159e7..6dd4d65808 100644 --- a/packages/docs/src/components/sidebar/navigationRoutes.ts +++ b/packages/docs/src/components/sidebar/navigationRoutes.ts @@ -184,6 +184,13 @@ export const navigationRoutes: NavigationRoute[] = [ name: 'modal', displayName: 'menu.modal', }, + { + name: 'stepper', + displayName: 'menu.stepper', + meta: { + badge: 'new', + }, + }, { name: 'table', displayName: 'menu.table', diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json index 185f6d1588..031a43616a 100644 --- a/packages/docs/src/locales/en/en.json +++ b/packages/docs/src/locales/en/en.json @@ -94,12 +94,7 @@ "contactUs": "Contact us", "newsBannerText": " \uD83D\uDD25\uD83D\uDD25\uD83D\uDD25 Hi there, we're celebrating our launch on Product Hunt this week! \uD83D\uDE80 We'd love to get your feedback and support! \uD83D\uDE4F", "newsBannerLink": "Visit the launch page", - "bannerText": [ - "expert", - "s", - "available in", - "to build and launch your product" - ] + "bannerText": ["expert", "s", "available in", "to build and launch your product"] } }, "api": { @@ -1459,6 +1454,27 @@ "updateChecked": "The array of checked tree nodes.", "updateExpanded": "The array of expanded tree nodes." } + }, + "VaStepper": { + "props": { + "modelValue": "Value of current step starting from `0`.", + "steps": "Array of step configs. `Label` is text displayed under each step in timeline, `Icon` if set, replaces step icon with specified icon, `disabled` makes step inaccessible without removing it from the timeline.", + "navigationDisabled": "Disables navigation via pressing on steps.", + "nextDisabled": "Disables navigation to steps further than `model-value`.", + "noControls": "Removes 'Back' and 'Next' buttons.", + "vertical": "Changes stepper orientation to vertical." + }, + "slots": { + "step": "Replaces the step in timeline with provided template. Step slots are enumerable and should be used with step number postfix (i.e. step-0, step-1, etc). Slot scope properties and methods available: `{ setStep, nextStep, prevStep, step, isActive, isCompleted }`.", + "content": "Replaces step content with provided template. Content slots are enumerable and should be used with step number postfix (i.e. content-0, content-1, etc). Slot scope properties and methods available: `{ setStep, nextStep, prevStep }`.", + "controls": "Inserts provided template after default controls. If you want to replace default controls set `no-controls` prop to `true`. Slot scope properties and methods available: `{ setStep, nextStep, prevStep }`.", + "divider": "Replaces step divider in the timeline with provided template." + }, + "methods": { + "setStep": "Activates step at specified index.", + "nextStep": "By default activates next step. If target step is disabled activates the step after it.", + "prevStep": "By default activates previous step. If target step is disabled activates the step before it." + } } }, "menu": { @@ -1570,6 +1586,7 @@ "colors": "Colors", "timePicker": "Time Picker", "timeInput": "Time Input", + "stepper": "Stepper", "carousel": "Carousel", "treeShaking": "Tree Shaking", "counter": "Counter", @@ -4487,6 +4504,32 @@ } } }, + "stepper": { + "title": "Stepper", + "description": "Stepper allows users to separate content into several steps and navigate through it using buttons or timeline.", + "examples": { + "default": { + "title": "Basic usage", + "text": "" + }, + "vertical": { + "title": "Vertical", + "text": "" + }, + "icons": { + "title": "Custom icons", + "text": "Each step config could have icon name specified, check `va-icon` for more details." + }, + "custom": { + "title": "Customized vith slots", + "text": "" + }, + "minimal": { + "title": "Navigation only", + "text": "You can hide controls and use stepper navigation independently" + } + } + }, "colors": { "title": "Colors", "description": "Vuestic UI defines `CSS variables` of the colors that are used in your application. This allows you to easily build your selectors using the colors you specified in the [Colors Config](https://vuestic.dev/en/services/colors-config).", @@ -4781,7 +4824,7 @@ "changeDefault": { "title": "Change default messages", "description": "Default messages can be set in `GlobalConfig`. Config is fully typed, so you can use autocomplete to find messages you want to change." - } + } }, "runtimeUpdate": { "title": "Changing language in runtime", diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json index 4942abdc78..1b3bd237ae 100644 --- a/packages/docs/src/locales/ru/ru.json +++ b/packages/docs/src/locales/ru/ru.json @@ -1375,6 +1375,27 @@ } } }, + "VaStepper": { + "props": { + "modelValue": "Значение текущего шага, начиная с `0`", + "steps": "Массив конфигураций шагов. `Label` - текст, отображаемый под каждым шагом на временной шкале, `Icon`, если установлен, заменяет иконку шага на указанную иконку, `disabled` делает шаг недоступным, не удаляя его с временной шкалы", + "navigationDisabled": "Отключает навигацию по нажатию на шаги", + "nextDisabled": "Отключает навигацию для шагов больших чем `model-value`", + "noControls": "Удаляет кнопки 'Назад' и 'Далее'", + "vertical": "Изменяет ориентацию на вертикальную" + }, + "slots": { + "step": "Заменяет шаг на временной шкале на предоставленный шаблон. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. step-0, step-1 и т.д.). Доступные свойства и методы диапазона слотов: `{ setStep, nextStep, prevStep, step, isActive, isCompleted }`", + "content": "Заменяет содержимое шага предоставленным шаблоном. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. content-0, content-1 и т.д.). Доступные свойства и методы области действия слота: `{ setStep, nextStep, prevStep }`", + "controls": "Вставляет предоставленный шаблон после встроенных элементов управления. Если вы хотите заменить элементы управления по умолчанию, установите параметр `no-controls` в значение `true`. Доступны свойства и методы области действия слота: `{ setStep, nextStep, prevStep }`", + "divider": "Заменяет разделитель шагов на временной шкале на предоставленный шаблон." + }, + "methods": { + "setStep": "Активирует шаг по указанному индексу", + "nextStep": "По умолчанию активирует следующий шаг. Если целевой шаг отключен, активируется следующий за ним шаг", + "prevStep": "По умолчанию активирует предыдущий шаг. Если целевой шаг отключен, активируется шаг перед ним" + } + }, "menu": { "badges": { "wip": { diff --git a/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts b/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts new file mode 100644 index 0000000000..c622d2928e --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts @@ -0,0 +1,18 @@ +import { defineManualApi } from '../../../components/DocsApi/ManualApiOptions' + +export default defineManualApi({ + props: { + steps: { types: '{ label: string, icon?: string, disabled?: boolean }' }, + }, + slots: { + step: { }, + content: { }, + controls: { }, + divider: { }, + }, + methods: { + setStep: { types: '`(stepNumber: number) => void`' }, + nextStep: { types: '`(stepsToSkip: number) => void`' }, + prevStep: { types: '`(stepsToSkip: number) => void`' }, + }, +}) diff --git a/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue b/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue new file mode 100644 index 0000000000..8c8b8e1117 --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/packages/docs/src/page-configs/ui-elements/stepper/examples/Default.vue b/packages/docs/src/page-configs/ui-elements/stepper/examples/Default.vue new file mode 100644 index 0000000000..c264f69cf9 --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/examples/Default.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/page-configs/ui-elements/stepper/examples/Icons.vue b/packages/docs/src/page-configs/ui-elements/stepper/examples/Icons.vue new file mode 100644 index 0000000000..4ff46782b5 --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/examples/Icons.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/page-configs/ui-elements/stepper/examples/Minimal.vue b/packages/docs/src/page-configs/ui-elements/stepper/examples/Minimal.vue new file mode 100644 index 0000000000..220a2d1e1a --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/examples/Minimal.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/docs/src/page-configs/ui-elements/stepper/examples/Vertical.vue b/packages/docs/src/page-configs/ui-elements/stepper/examples/Vertical.vue new file mode 100644 index 0000000000..cc0b9d4381 --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/examples/Vertical.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/docs/src/page-configs/ui-elements/stepper/page-config.ts b/packages/docs/src/page-configs/ui-elements/stepper/page-config.ts new file mode 100644 index 0000000000..ceb85a5420 --- /dev/null +++ b/packages/docs/src/page-configs/ui-elements/stepper/page-config.ts @@ -0,0 +1,54 @@ +import { ApiDocsBlock } from '@/types/configTypes' +import { PageGenerationHelper } from '@/helpers/DocsHelper' +import VaStepper from 'vuestic-ui/src/components/va-stepper/VaStepper.vue' +import apiOptions from './api-options' + +// @ts-ignore +// eslint-disable-next-line import/no-webpack-loader-syntax +const cssVariables = import('!raw-loader!vuestic-ui/src/components/va-stepper/_variables.scss') + +const block = new PageGenerationHelper(__dirname) + +const config: ApiDocsBlock[] = [ + block.title('stepper.title'), + block.paragraph('stepper.description'), + + block.subtitle('all.examples'), + ...block.exampleBlock( + 'stepper.examples.default.title', + 'stepper.examples.default.text', + 'Default', + ), + + ...block.exampleBlock( + 'stepper.examples.vertical.title', + 'stepper.examples.vertical.text', + 'Vertical', + ), + + ...block.exampleBlock( + 'stepper.examples.icons.title', + 'stepper.examples.icons.text', + 'Icons', + ), + + ...block.exampleBlock( + 'stepper.examples.custom.title', + 'stepper.examples.custom.text', + 'Custom', + ), + + ...block.exampleBlock( + 'stepper.examples.minimal.title', + 'stepper.examples.minimal.text', + 'Minimal', + ), + + block.subtitle('all.api'), + block.api(VaStepper, apiOptions), + + block.subtitle('all.cssVariables'), + block.file(cssVariables), +] + +export default config diff --git a/packages/docs/src/pages/ui-elements/stepper.vue b/packages/docs/src/pages/ui-elements/stepper.vue new file mode 100644 index 0000000000..6192ad282e --- /dev/null +++ b/packages/docs/src/pages/ui-elements/stepper.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 34e9c9198a..3240c6cf68 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -63,6 +63,7 @@ export * from './va-sidebar' export * from './va-slider' export * from './va-spacer' export * from './va-split' +export * from './va-stepper' export * from './va-switch' export * from './va-toast' export * from './va-tabs' diff --git a/packages/ui/src/components/va-stepper/VaStepper.demo.vue b/packages/ui/src/components/va-stepper/VaStepper.demo.vue new file mode 100644 index 0000000000..724e4931ff --- /dev/null +++ b/packages/ui/src/components/va-stepper/VaStepper.demo.vue @@ -0,0 +1,115 @@ + + + diff --git a/packages/ui/src/components/va-stepper/VaStepper.vue b/packages/ui/src/components/va-stepper/VaStepper.vue new file mode 100644 index 0000000000..3d83358e84 --- /dev/null +++ b/packages/ui/src/components/va-stepper/VaStepper.vue @@ -0,0 +1,297 @@ + + + + diff --git a/packages/ui/src/components/va-stepper/_variables.scss b/packages/ui/src/components/va-stepper/_variables.scss new file mode 100644 index 0000000000..0755e68028 --- /dev/null +++ b/packages/ui/src/components/va-stepper/_variables.scss @@ -0,0 +1,12 @@ +:root { + --va-stepper-inactive-step-color: var(--va-secondary); + --va-stepper-divider-color: var(--va-secondary); + --va-stepper-step-hover-highlight-opacity: 0.1; + --va-stepper-step-disabled-opacity: 0.5; + --va-stepper-step-padding: 1rem; + --va-stepper-icon-size: 2rem; + --va-stepper-step-number-size: 1.2rem; + --va-stepper-divider-size: 100%; + --va-stepper-divider-min-size: 2rem; + --va-stepper-vertical-divider-margin-left: 2rem; +} diff --git a/packages/ui/src/components/va-stepper/index.ts b/packages/ui/src/components/va-stepper/index.ts new file mode 100644 index 0000000000..2beba36a43 --- /dev/null +++ b/packages/ui/src/components/va-stepper/index.ts @@ -0,0 +1,4 @@ +import withConfigTransport from '../../services/config-transport/withConfigTransport' +import _VaStepper from './VaStepper.vue' + +export const VaStepper = withConfigTransport(_VaStepper) diff --git a/packages/ui/src/services/vue-plugin/components.ts b/packages/ui/src/services/vue-plugin/components.ts index 85375b347d..c6ace57fea 100644 --- a/packages/ui/src/services/vue-plugin/components.ts +++ b/packages/ui/src/services/vue-plugin/components.ts @@ -70,6 +70,7 @@ export { VaSplit, VaSwitch, VaTabs, VaTab, + VaStepper, VaTimeInput, VaTimeline, VaTimelineItem, VaTimePicker, From 25d8940f6fd83f2f1805715d3275b70ac96def45 Mon Sep 17 00:00:00 2001 From: LighthouseKeeperYN Date: Tue, 31 Jan 2023 11:38:21 +0100 Subject: [PATCH 02/10] refactor: rename variables --- packages/ui/src/components/va-stepper/VaStepper.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/va-stepper/VaStepper.vue b/packages/ui/src/components/va-stepper/VaStepper.vue index 3d83358e84..83bd92386a 100644 --- a/packages/ui/src/components/va-stepper/VaStepper.vue +++ b/packages/ui/src/components/va-stepper/VaStepper.vue @@ -147,23 +147,23 @@ export default defineComponent({ emit('update:modelValue', index) } - const nextStep = (increment = 0) => { - const targetIndex = props.modelValue + 1 + increment + const nextStep = (stepsToSkip = 0) => { + const targetIndex = props.modelValue + 1 + stepsToSkip if (!props.steps[targetIndex]) { return } if (props.steps[targetIndex].disabled) { - nextStep(increment + 1) + nextStep(stepsToSkip + 1) } setStep(targetIndex) } - const prevStep = (decrement = 0) => { - const targetIndex = props.modelValue - 1 - decrement + const prevStep = (stepsToSkip = 0) => { + const targetIndex = props.modelValue - 1 - stepsToSkip if (!props.steps[targetIndex]) { return } if (props.steps[targetIndex].disabled) { - prevStep(decrement + 1) + prevStep(stepsToSkip + 1) } setStep(targetIndex) From 6e9923d66be5720c69e17fe98ada88b54d7af4d3 Mon Sep 17 00:00:00 2001 From: LighthouseKeeperYN Date: Tue, 14 Feb 2023 16:08:15 +0100 Subject: [PATCH 03/10] feat: improve docs, fix: various bugs, refactor: split into several components --- packages/docs/src/locales/en/en.json | 19 +- packages/docs/src/locales/ru/ru.json | 84 +++++--- .../ui-elements/stepper/api-options.ts | 4 +- .../ui-elements/stepper/examples/Custom.vue | 66 ++++-- .../ui-elements/stepper/examples/Default.vue | 8 +- .../ui-elements/stepper/examples/Icons.vue | 8 +- .../ui-elements/stepper/examples/Minimal.vue | 3 +- .../ui-elements/stepper/examples/Vertical.vue | 8 +- .../ui-elements/stepper/page-config.ts | 2 + .../components/va-stepper/VaStepper.demo.vue | 12 +- .../src/components/va-stepper/VaStepper.vue | 195 +++++------------- .../va-stepper/VaStepperControls.vue | 59 ++++++ .../va-stepper/VaStepperStepButton.vue | 122 +++++++++++ .../src/components/va-stepper/_variables.scss | 25 ++- .../ui/src/components/va-stepper/types.ts | 11 + 15 files changed, 391 insertions(+), 235 deletions(-) create mode 100644 packages/ui/src/components/va-stepper/VaStepperControls.vue create mode 100644 packages/ui/src/components/va-stepper/VaStepperStepButton.vue create mode 100644 packages/ui/src/components/va-stepper/types.ts diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json index 031a43616a..faac4abcaa 100644 --- a/packages/docs/src/locales/en/en.json +++ b/packages/docs/src/locales/en/en.json @@ -199,9 +199,9 @@ }, "slots": { "default": "Default slot for button's content.", - "append": "Slot to input before button's content. Slot scope properties available: `{ icon, iconAttributes }`.", - "prepend": "Slot to input after button's content. Slot scope properties available: `{ icon, iconAttributes }`.", - "loading": "Slot for loading state. Slot scope properties available: `{ icon, iconAttributes }`." + "append": "Slot to input before button's content. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.", + "prepend": "Slot to input after button's content. Slot scope properties available: `{ '{ icon, iconAttributes }' }`.", + "loading": "Slot for loading state. Slot scope properties available: `{ '{ icon, iconAttributes }' }`." }, "events": { "click": "Emitted when user clicks on button" @@ -1461,13 +1461,13 @@ "steps": "Array of step configs. `Label` is text displayed under each step in timeline, `Icon` if set, replaces step icon with specified icon, `disabled` makes step inaccessible without removing it from the timeline.", "navigationDisabled": "Disables navigation via pressing on steps.", "nextDisabled": "Disables navigation to steps further than `model-value`.", - "noControls": "Removes 'Back' and 'Next' buttons.", + "controlsHidden": "Removes 'Back' and 'Next' buttons.", "vertical": "Changes stepper orientation to vertical." }, "slots": { - "step": "Replaces the step in timeline with provided template. Step slots are enumerable and should be used with step number postfix (i.e. step-0, step-1, etc). Slot scope properties and methods available: `{ setStep, nextStep, prevStep, step, isActive, isCompleted }`.", - "content": "Replaces step content with provided template. Content slots are enumerable and should be used with step number postfix (i.e. content-0, content-1, etc). Slot scope properties and methods available: `{ setStep, nextStep, prevStep }`.", - "controls": "Inserts provided template after default controls. If you want to replace default controls set `no-controls` prop to `true`. Slot scope properties and methods available: `{ setStep, nextStep, prevStep }`.", + "stepButton": "Replaces the step in timeline with provided template. Step slots are enumerable and should be used with step number postfix (i.e. step-button-0, step-button-1, etc). Slot scope properties and methods available: `{'{ setStep, nextStep, prevStep, step, isActive, isCompleted }'}`.", + "stepContent": "Replaces step content with provided template. Content slots are enumerable and should be used with step number postfix (i.e. step-content-0, step-content-1, etc). Slot scope properties and methods available: `{'{ setStep, nextStep, prevStep }'}`.", + "controls": "Inserts provided template after default controls. If you want to replace default controls set `controls-hidden` prop to `true`. Slot scope properties and methods available: `{'{ setStep, nextStep, prevStep }'}`.", "divider": "Replaces step divider in the timeline with provided template." }, "methods": { @@ -4521,13 +4521,16 @@ "text": "Each step config could have icon name specified, check `va-icon` for more details." }, "custom": { - "title": "Customized vith slots", + "title": "Customized with slots", "text": "" }, "minimal": { "title": "Navigation only", "text": "You can hide controls and use stepper navigation independently" } + }, + "alerts": { + "slots": "You can iterate through slots using template literals in slot name. \n Example: ``{'#[`step-button-${i}`]=\"{ setStep, isActive, isCompleted }\"'}``" } }, "colors": { diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json index 1b3bd237ae..d21b3d90a6 100644 --- a/packages/docs/src/locales/ru/ru.json +++ b/packages/docs/src/locales/ru/ru.json @@ -51,11 +51,7 @@ "customize": { "title": "Полная настройка", "text": "Обеспечьте соответствие компонентов Vuestic UI вашему дизайну с помощью мощных динамических конфигураций.", - "tabs": [ - "Элементы формы", - "Таблицы", - "Разное" - ], + "tabs": ["Элементы формы", "Таблицы", "Разное"], "copy": "Скопировано", "configuration": "Посмотрите наше руководство по конфигурации" }, @@ -92,12 +88,7 @@ "spinners": "Epic Spinners" }, "contactUs": "Contact us", - "bannerText": [ - "expert", - "s", - "available in", - "to build and launch your product" - ] + "bannerText": ["expert", "s", "available in", "to build and launch your product"] } }, "api": { @@ -1329,6 +1320,27 @@ "updateExpanded": "Массив раскрытых элементов дерева" } }, + "VaStepper": { + "props": { + "modelValue": "Значение текущего шага, начиная с `0`", + "steps": "Массив конфигураций шагов. `Label` - текст, отображаемый под каждым шагом на временной шкале, `Icon`, если установлен, заменяет иконку шага на указанную иконку, `disabled` делает шаг недоступным, не удаляя его с временной шкалы", + "navigationDisabled": "Отключает навигацию по нажатию на шаги", + "nextDisabled": "Отключает навигацию для шагов больших чем `model-value`", + "controlsHidden": "Удаляет кнопки 'Назад' и 'Далее'", + "vertical": "Изменяет ориентацию на вертикальную" + }, + "slots": { + "stepButton": "Заменяет шаг на временной шкале на предоставленный шаблон. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. step-button-0, step-button-1 и т.д.). Доступные свойства и методы диапазона слотов: `{'{ setStep, nextStep, prevStep, step, isActive, isCompleted }'}`", + "stepContent": "Заменяет содержимое шага предоставленным шаблоном. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. step-content-0, step-content-1 и т.д.). Доступные свойства и методы области действия слота: `{'{ setStep, nextStep, prevStep }'}`", + "controls": "Вставляет предоставленный шаблон после встроенных элементов управления. Если вы хотите заменить элементы управления по умолчанию, установите параметр `no-controls` в значение `true`. Доступны свойства и методы области действия слота: `{'{ setStep, nextStep, prevStep }'}`", + "divider": "Заменяет разделитель шагов на временной шкале на предоставленный шаблон." + }, + "methods": { + "setStep": "Активирует шаг по указанному индексу", + "nextStep": "По умолчанию активирует следующий шаг. Если целевой шаг отключен, активируется следующий за ним шаг", + "prevStep": "По умолчанию активирует предыдущий шаг. Если целевой шаг отключен, активируется шаг перед ним" + } + }, "VaScrollContainer": { "props": { "horizontal": "Разрешает горизонтальную прокрутку у блока.", @@ -1375,27 +1387,6 @@ } } }, - "VaStepper": { - "props": { - "modelValue": "Значение текущего шага, начиная с `0`", - "steps": "Массив конфигураций шагов. `Label` - текст, отображаемый под каждым шагом на временной шкале, `Icon`, если установлен, заменяет иконку шага на указанную иконку, `disabled` делает шаг недоступным, не удаляя его с временной шкалы", - "navigationDisabled": "Отключает навигацию по нажатию на шаги", - "nextDisabled": "Отключает навигацию для шагов больших чем `model-value`", - "noControls": "Удаляет кнопки 'Назад' и 'Далее'", - "vertical": "Изменяет ориентацию на вертикальную" - }, - "slots": { - "step": "Заменяет шаг на временной шкале на предоставленный шаблон. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. step-0, step-1 и т.д.). Доступные свойства и методы диапазона слотов: `{ setStep, nextStep, prevStep, step, isActive, isCompleted }`", - "content": "Заменяет содержимое шага предоставленным шаблоном. Слоты шага пронумерованы и должны использоваться с постфиксом номера шага (т.е. content-0, content-1 и т.д.). Доступные свойства и методы области действия слота: `{ setStep, nextStep, prevStep }`", - "controls": "Вставляет предоставленный шаблон после встроенных элементов управления. Если вы хотите заменить элементы управления по умолчанию, установите параметр `no-controls` в значение `true`. Доступны свойства и методы области действия слота: `{ setStep, nextStep, prevStep }`", - "divider": "Заменяет разделитель шагов на временной шкале на предоставленный шаблон." - }, - "methods": { - "setStep": "Активирует шаг по указанному индексу", - "nextStep": "По умолчанию активирует следующий шаг. Если целевой шаг отключен, активируется следующий за ним шаг", - "prevStep": "По умолчанию активирует предыдущий шаг. Если целевой шаг отключен, активируется шаг перед ним" - } - }, "menu": { "badges": { "wip": { @@ -4310,6 +4301,35 @@ } } }, + "stepper": { + "title": "Stepper", + "description": "Stepper позволяет пользователям разделять контент на несколько шагов и перемещаться по нему с помощью кнопок или навигации.", + "examples": { + "default": { + "title": "Основное использование", + "text": "" + }, + "vertical": { + "title": "Вертикальный", + "text": "" + }, + "icons": { + "title": "Пользовательские значки", + "text": "В конфигурации каждого шага может быть указано имя значка, см. va-icon для получения дополнительной информации." + }, + "custom": { + "title": "Кастомизация с помощью слотов", + "text": "" + }, + "minimal": { + "title": "Только навигация", + "text": "Вы можете скрыть элементы управления и использовать навигацию степпера независимо" + } + }, + "alerts": { + "slots": "Вы можете итерироваться через слоты, используя шаблонные строки в имени слота. \n Пример: {'#[`step-button-${i}`]=\"{ setStep, isActive, isCompleted }\"'}" + } + }, "colors": { "title": "Цвета", "description": "Vuestic UI определяет `Переменные CSS` цветов, которые используются в вашем приложении. Это позволит вам легко определять свои селекторы с использованием цветов определенных в [Colors Config](https://vuestic.dev/en/services/colors-config).", diff --git a/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts b/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts index c622d2928e..915ece6466 100644 --- a/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts +++ b/packages/docs/src/page-configs/ui-elements/stepper/api-options.ts @@ -5,8 +5,8 @@ export default defineManualApi({ steps: { types: '{ label: string, icon?: string, disabled?: boolean }' }, }, slots: { - step: { }, - content: { }, + stepButton: { }, + stepContent: { }, controls: { }, divider: { }, }, diff --git a/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue b/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue index 8c8b8e1117..c9f4a5cbd9 100644 --- a/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue +++ b/packages/docs/src/page-configs/ui-elements/stepper/examples/Custom.vue @@ -3,46 +3,50 @@ v-model="step" :steps="steps" color="danger" - noControls + controlsHidden > -