@dxtmisha/wiki 0.24.2 → 0.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -7
- package/src/classes/WikiStorybookItem.ts +24 -0
- package/src/library.ts +7 -7
- package/src/media/descriptions/wikiDescriptions.ts +28 -0
- package/src/media/descriptions/wikiDescriptionsAccordion.ts +158 -0
- package/src/media/descriptions/wikiDescriptionsActionSheet.ts +211 -0
- package/src/media/descriptions/wikiDescriptionsActions.ts +161 -0
- package/src/media/descriptions/wikiDescriptionsAnchor.ts +42 -0
- package/src/media/descriptions/wikiDescriptionsArrow.ts +181 -0
- package/src/media/descriptions/wikiDescriptionsBars.ts +1 -3
- package/src/media/descriptions/wikiDescriptionsBlock.ts +97 -0
- package/src/media/descriptions/wikiDescriptionsButton.ts +0 -1
- package/src/media/descriptions/wikiDescriptionsCell.ts +3 -3
- package/src/media/descriptions/wikiDescriptionsChip.ts +0 -1
- package/src/media/descriptions/wikiDescriptionsChipGroup.ts +168 -0
- package/src/media/descriptions/wikiDescriptionsDialog.ts +182 -0
- package/src/media/descriptions/wikiDescriptionsField.ts +3 -4
- package/src/media/descriptions/wikiDescriptionsFieldCounter.ts +6 -6
- package/src/media/descriptions/wikiDescriptionsFieldMessage.ts +1 -2
- package/src/media/descriptions/wikiDescriptionsImage.ts +43 -8
- package/src/media/descriptions/wikiDescriptionsInput.ts +257 -0
- package/src/media/descriptions/wikiDescriptionsList.ts +1 -5
- package/src/media/descriptions/wikiDescriptionsListGroup.ts +2 -3
- package/src/media/descriptions/wikiDescriptionsListItem.ts +1 -3
- package/src/media/descriptions/wikiDescriptionsListMenu.ts +2 -9
- package/src/media/descriptions/wikiDescriptionsMask.ts +12 -0
- package/src/media/descriptions/wikiDescriptionsMenu.ts +126 -14
- package/src/media/descriptions/wikiDescriptionsModal.ts +145 -0
- package/src/media/descriptions/wikiDescriptionsMotionTransform.ts +4 -10
- package/src/media/descriptions/wikiDescriptionsScrollbar.ts +1 -7
- package/src/media/descriptions/wikiDescriptionsSelect.ts +209 -0
- package/src/media/descriptions/wikiDescriptionsSelectValue.ts +78 -0
- package/src/media/descriptions/wikiDescriptionsSkeleton.ts +1 -0
- package/src/media/descriptions/wikiDescriptionsTextareaAutosize.ts +50 -0
- package/src/media/descriptions/wikiDescriptionsTooltip.ts +89 -0
- package/src/media/descriptions/wikiDescriptionsWindow.ts +5 -22
- package/src/media/functional/en/broadcastMessage.mdx +307 -0
- package/src/media/functional/en/conversions.mdx +67 -0
- package/src/media/functional/en/dataUtils.mdx +25 -0
- package/src/media/functional/en/datetimeRef.mdx +1 -1
- package/src/media/functional/en/eventRef.mdx +1 -1
- package/src/media/functional/en/executionUtils.mdx +58 -0
- package/src/media/functional/en/geoFlagRef.mdx +1 -1
- package/src/media/functional/en/geoIntlRef.mdx +1 -1
- package/src/media/functional/en/geoRef.mdx +2 -2
- package/src/media/functional/en/meta.mdx +1206 -0
- package/src/media/functional/en/metaManager.mdx +376 -0
- package/src/media/functional/en/metaOg.mdx +694 -0
- package/src/media/functional/en/metaTwitter.mdx +853 -0
- package/src/media/functional/en/reactive.mdx +40 -0
- package/src/media/functional/en/refTypes.mdx +1 -1
- package/src/media/functional/en/useApiRef.mdx +5 -5
- package/src/media/functional/en/useMeta.mdx +431 -0
- package/src/media/functional/en/validationUtils.mdx +11 -0
- package/src/media/functional/ru/broadcastMessage.mdx +305 -0
- package/src/media/functional/ru/conversions.mdx +67 -0
- package/src/media/functional/ru/dataUtils.mdx +25 -0
- package/src/media/functional/ru/datetimeRef.mdx +2 -2
- package/src/media/functional/ru/eventRef.mdx +1 -1
- package/src/media/functional/ru/executionUtils.mdx +58 -0
- package/src/media/functional/ru/geoFlagRef.mdx +1 -1
- package/src/media/functional/ru/geoIntl.mdx +2 -2
- package/src/media/functional/ru/geoIntlRef.mdx +1 -1
- package/src/media/functional/ru/geoRef.mdx +2 -2
- package/src/media/functional/ru/listTypes.mdx +1 -1
- package/src/media/functional/ru/meta.mdx +1330 -0
- package/src/media/functional/ru/metaManager.mdx +376 -0
- package/src/media/functional/ru/metaOg.mdx +694 -0
- package/src/media/functional/ru/metaTwitter.mdx +853 -0
- package/src/media/functional/ru/reactive.mdx +40 -0
- package/src/media/functional/ru/refTypes.mdx +2 -2
- package/src/media/functional/ru/useApiRef.mdx +5 -5
- package/src/media/functional/ru/useMeta.mdx +431 -0
- package/src/media/functional/ru/validationUtils.mdx +11 -0
- package/src/media/mdx/Accordion/accordion.en.mdx +59 -0
- package/src/media/mdx/Accordion/accordion.ru.mdx +59 -0
- package/src/media/mdx/Accordion/slots.en.mdx +6 -0
- package/src/media/mdx/Accordion/slots.ru.mdx +6 -0
- package/src/media/mdx/Accordion/wikiMdxAccordion.ts +25 -0
- package/src/media/mdx/ActionSheet/actionSheet.en.mdx +61 -0
- package/src/media/mdx/ActionSheet/actionSheet.ru.mdx +61 -0
- package/src/media/mdx/ActionSheet/touchClose.en.mdx +21 -0
- package/src/media/mdx/ActionSheet/touchClose.ru.mdx +21 -0
- package/src/media/mdx/ActionSheet/wikiMdxActionSheet.ts +25 -0
- package/src/media/mdx/Actions/actions.en.mdx +48 -0
- package/src/media/mdx/Actions/actions.ru.mdx +48 -0
- package/src/media/mdx/Actions/flexible.en.mdx +19 -0
- package/src/media/mdx/Actions/flexible.ru.mdx +19 -0
- package/src/media/mdx/Actions/list.en.mdx +50 -0
- package/src/media/mdx/Actions/list.ru.mdx +50 -0
- package/src/media/mdx/Actions/wikiMdxActions.ts +31 -0
- package/src/media/mdx/Anchor/anchor.en.mdx +34 -0
- package/src/media/mdx/Anchor/anchor.ru.mdx +34 -0
- package/src/media/mdx/Anchor/expose.go.en.mdx +6 -0
- package/src/media/mdx/Anchor/expose.go.ru.mdx +6 -0
- package/src/media/mdx/Anchor/hide.en.mdx +28 -0
- package/src/media/mdx/Anchor/hide.ru.mdx +28 -0
- package/src/media/mdx/Anchor/isCopy.en.mdx +23 -0
- package/src/media/mdx/Anchor/isCopy.ru.mdx +23 -0
- package/src/media/mdx/Anchor/scroll.en.mdx +34 -0
- package/src/media/mdx/Anchor/scroll.ru.mdx +35 -0
- package/src/media/mdx/Anchor/wikiMdxAnchor.ts +43 -0
- package/src/media/mdx/Arrow/arrow.en.mdx +33 -0
- package/src/media/mdx/Arrow/arrow.ru.mdx +33 -0
- package/src/media/mdx/Arrow/wikiMdxArrow.ts +19 -0
- package/src/media/mdx/Badge/badge.en.mdx +85 -7
- package/src/media/mdx/Badge/badge.ru.mdx +85 -7
- package/src/media/mdx/Badge/dot.en.mdx +16 -12
- package/src/media/mdx/Badge/dot.ru.mdx +16 -12
- package/src/media/mdx/Badge/outline.en.mdx +12 -13
- package/src/media/mdx/Badge/outline.ru.mdx +12 -13
- package/src/media/mdx/Badge/primary.en.mdx +12 -12
- package/src/media/mdx/Badge/primary.ru.mdx +12 -12
- package/src/media/mdx/Badge/secondary.en.mdx +12 -13
- package/src/media/mdx/Badge/secondary.ru.mdx +12 -13
- package/src/media/mdx/Bars/action.en.mdx +72 -28
- package/src/media/mdx/Bars/action.ru.mdx +73 -29
- package/src/media/mdx/Bars/bars.en.mdx +90 -15
- package/src/media/mdx/Bars/bars.ru.mdx +91 -15
- package/src/media/mdx/Bars/slots.en.mdx +33 -0
- package/src/media/mdx/Bars/slots.ru.mdx +33 -0
- package/src/media/mdx/Bars/v-model.en.mdx +23 -14
- package/src/media/mdx/Bars/v-model.ru.mdx +23 -14
- package/src/media/mdx/Bars/wikiMdxBars.ts +5 -11
- package/src/media/mdx/Block/block.en.mdx +42 -0
- package/src/media/mdx/Block/block.ru.mdx +42 -0
- package/src/media/mdx/Block/wikiMdxBlock.ts +19 -0
- package/src/media/mdx/Button/button.en.mdx +89 -1
- package/src/media/mdx/Button/button.ru.mdx +89 -1
- package/src/media/mdx/Button/outline.en.mdx +12 -14
- package/src/media/mdx/Button/outline.ru.mdx +12 -14
- package/src/media/mdx/Button/primary.en.mdx +12 -19
- package/src/media/mdx/Button/primary.ru.mdx +12 -19
- package/src/media/mdx/Button/secondary.en.mdx +12 -17
- package/src/media/mdx/Button/secondary.ru.mdx +12 -17
- package/src/media/mdx/Button/text.en.mdx +12 -11
- package/src/media/mdx/Button/text.ru.mdx +12 -11
- package/src/media/mdx/Cell/cell.en.mdx +50 -9
- package/src/media/mdx/Cell/cell.ru.mdx +50 -9
- package/src/media/mdx/Cell/slots.en.mdx +82 -0
- package/src/media/mdx/Cell/slots.ru.mdx +83 -0
- package/src/media/mdx/Cell/wikiMdxCell.ts +6 -12
- package/src/media/mdx/Chip/assistive.en.mdx +12 -14
- package/src/media/mdx/Chip/assistive.ru.mdx +12 -14
- package/src/media/mdx/Chip/chip.en.mdx +69 -9
- package/src/media/mdx/Chip/chip.ru.mdx +69 -9
- package/src/media/mdx/Chip/input.en.mdx +12 -19
- package/src/media/mdx/Chip/input.ru.mdx +12 -19
- package/src/media/mdx/ChipGroup/chipGroup.en.mdx +51 -0
- package/src/media/mdx/ChipGroup/chipGroup.ru.mdx +51 -0
- package/src/media/mdx/ChipGroup/selected.en.mdx +50 -0
- package/src/media/mdx/ChipGroup/selected.ru.mdx +50 -0
- package/src/media/mdx/ChipGroup/wikiMdxChipGroup.ts +25 -0
- package/src/media/mdx/Dialog/buttons.en.mdx +45 -0
- package/src/media/mdx/Dialog/buttons.ru.mdx +45 -0
- package/src/media/mdx/Dialog/dialog.en.mdx +66 -0
- package/src/media/mdx/Dialog/dialog.ru.mdx +65 -0
- package/src/media/mdx/Dialog/events.en.mdx +63 -0
- package/src/media/mdx/Dialog/events.ru.mdx +63 -0
- package/src/media/mdx/Dialog/states.en.mdx +58 -0
- package/src/media/mdx/Dialog/states.ru.mdx +57 -0
- package/src/media/mdx/Dialog/wikiMdxDialog.ts +37 -0
- package/src/media/mdx/Field/arrows.en.mdx +83 -17
- package/src/media/mdx/Field/arrows.ru.mdx +83 -17
- package/src/media/mdx/Field/cancel.en.mdx +47 -10
- package/src/media/mdx/Field/cancel.ru.mdx +47 -10
- package/src/media/mdx/Field/field.en.mdx +45 -15
- package/src/media/mdx/Field/field.ru.mdx +45 -15
- package/src/media/mdx/Field/slots.en.mdx +138 -0
- package/src/media/mdx/Field/slots.ru.mdx +138 -0
- package/src/media/mdx/Field/value.en.mdx +49 -28
- package/src/media/mdx/Field/value.ru.mdx +49 -28
- package/src/media/mdx/Field/width.en.mdx +21 -19
- package/src/media/mdx/Field/width.ru.mdx +21 -19
- package/src/media/mdx/Field/wikiMdxField.ts +14 -26
- package/src/media/mdx/FieldCounter/fieldCounter.en.mdx +52 -14
- package/src/media/mdx/FieldCounter/fieldCounter.ru.mdx +55 -14
- package/src/media/mdx/FieldCounter/templates.en.mdx +26 -6
- package/src/media/mdx/FieldCounter/templates.ru.mdx +25 -5
- package/src/media/mdx/FieldLabel/fieldLabel.en.mdx +56 -14
- package/src/media/mdx/FieldLabel/fieldLabel.ru.mdx +56 -14
- package/src/media/mdx/FieldMessage/fieldMessage.en.mdx +58 -14
- package/src/media/mdx/FieldMessage/fieldMessage.ru.mdx +58 -14
- package/src/media/mdx/FieldMessage/slots.en.mdx +45 -0
- package/src/media/mdx/FieldMessage/slots.ru.mdx +45 -0
- package/src/media/mdx/FieldMessage/wikiMdxFieldMessage.ts +6 -12
- package/src/media/mdx/Icon/expose.isActive.en.mdx +2 -10
- package/src/media/mdx/Icon/expose.isActive.ru.mdx +2 -10
- package/src/media/mdx/Icon/icon.en.mdx +43 -9
- package/src/media/mdx/Icon/icon.ru.mdx +27 -28
- package/src/media/mdx/Image/adaptive.en.mdx +63 -20
- package/src/media/mdx/Image/adaptive.ru.mdx +62 -25
- package/src/media/mdx/Image/event.load.en.mdx +37 -2
- package/src/media/mdx/Image/event.load.ru.mdx +34 -7
- package/src/media/mdx/Image/{expose.type.ru.mdx → expose.en.mdx} +11 -1
- package/src/media/mdx/Image/expose.ru.mdx +31 -0
- package/src/media/mdx/Image/image.en.mdx +46 -0
- package/src/media/mdx/Image/image.ru.mdx +47 -0
- package/src/media/mdx/Image/img-tag.en.mdx +105 -0
- package/src/media/mdx/Image/img-tag.ru.mdx +105 -0
- package/src/media/mdx/Image/size.en.mdx +19 -19
- package/src/media/mdx/Image/size.ru.mdx +19 -23
- package/src/media/mdx/Image/value.en.mdx +10 -27
- package/src/media/mdx/Image/value.ru.mdx +10 -29
- package/src/media/mdx/Image/wikiMdxImage.ts +17 -11
- package/src/media/mdx/Input/currency.en.mdx +38 -0
- package/src/media/mdx/Input/currency.ru.mdx +38 -0
- package/src/media/mdx/Input/date.en.mdx +53 -0
- package/src/media/mdx/Input/date.ru.mdx +53 -0
- package/src/media/mdx/Input/input.en.mdx +143 -0
- package/src/media/mdx/Input/input.ru.mdx +71 -0
- package/src/media/mdx/Input/mask.en.mdx +30 -0
- package/src/media/mdx/Input/mask.ru.mdx +30 -0
- package/src/media/mdx/Input/number.en.mdx +41 -0
- package/src/media/mdx/Input/number.ru.mdx +41 -0
- package/src/media/mdx/Input/type.en.mdx +26 -0
- package/src/media/mdx/Input/type.ru.mdx +26 -0
- package/src/media/mdx/Input/wikiMdxInput.ts +49 -0
- package/src/media/mdx/List/event.close.en.mdx +5 -8
- package/src/media/mdx/List/event.close.ru.mdx +5 -8
- package/src/media/mdx/List/list.en.mdx +56 -14
- package/src/media/mdx/List/list.ru.mdx +56 -14
- package/src/media/mdx/List/lite.en.mdx +17 -12
- package/src/media/mdx/List/lite.ru.mdx +17 -12
- package/src/media/mdx/List/slot.html.en.mdx +72 -21
- package/src/media/mdx/List/slot.html.ru.mdx +72 -21
- package/src/media/mdx/ListGroup/listGroup.en.mdx +55 -1
- package/src/media/mdx/ListGroup/listGroup.ru.mdx +55 -1
- package/src/media/mdx/ListGroup/slots.en.mdx +10 -0
- package/src/media/mdx/ListGroup/slots.ru.mdx +10 -0
- package/src/media/mdx/ListGroup/wikiMdxListGroup.ts +6 -12
- package/src/media/mdx/ListItem/basic.en.mdx +47 -10
- package/src/media/mdx/ListItem/basic.ru.mdx +46 -9
- package/src/media/mdx/ListItem/fill.en.mdx +22 -8
- package/src/media/mdx/ListItem/fill.ru.mdx +22 -8
- package/src/media/mdx/ListItem/slots.en.mdx +7 -0
- package/src/media/mdx/ListItem/slots.ru.mdx +7 -0
- package/src/media/mdx/ListItem/wikiMdxListItem.ts +7 -13
- package/src/media/mdx/ListMenu/listMenu.en.mdx +62 -1
- package/src/media/mdx/ListMenu/listMenu.ru.mdx +62 -1
- package/src/media/mdx/Mask/basic.en.mdx +68 -16
- package/src/media/mdx/Mask/basic.ru.mdx +70 -11
- package/src/media/mdx/Mask/dateTypes.en.mdx +82 -68
- package/src/media/mdx/Mask/dateTypes.ru.mdx +82 -68
- package/src/media/mdx/Mask/expose.en.mdx +20 -0
- package/src/media/mdx/Mask/expose.ru.mdx +20 -0
- package/src/media/mdx/Mask/groupSave.en.mdx +13 -46
- package/src/media/mdx/Mask/groupSave.ru.mdx +13 -46
- package/src/media/mdx/Mask/mask.en.mdx +12 -66
- package/src/media/mdx/Mask/mask.ru.mdx +12 -66
- package/src/media/mdx/Mask/match.en.mdx +16 -24
- package/src/media/mdx/Mask/match.ru.mdx +16 -24
- package/src/media/mdx/Mask/numberTypes.en.mdx +64 -52
- package/src/media/mdx/Mask/numberTypes.ru.mdx +64 -52
- package/src/media/mdx/Mask/pattern.en.mdx +63 -75
- package/src/media/mdx/Mask/pattern.ru.mdx +63 -75
- package/src/media/mdx/Mask/special.en.mdx +174 -97
- package/src/media/mdx/Mask/special.ru.mdx +174 -97
- package/src/media/mdx/Mask/type.en.mdx +12 -36
- package/src/media/mdx/Mask/type.ru.mdx +11 -35
- package/src/media/mdx/Mask/visible.en.mdx +33 -41
- package/src/media/mdx/Mask/visible.ru.mdx +32 -40
- package/src/media/mdx/Mask/wikiMdxMask.ts +6 -0
- package/src/media/mdx/Menu/ajax.en.mdx +44 -51
- package/src/media/mdx/Menu/ajax.ru.mdx +44 -52
- package/src/media/mdx/Menu/event.updateValue.en.mdx +29 -0
- package/src/media/mdx/Menu/event.updateValue.ru.mdx +30 -0
- package/src/media/mdx/Menu/expose.navigation.en.mdx +12 -0
- package/src/media/mdx/Menu/expose.navigation.ru.mdx +12 -0
- package/src/media/mdx/Menu/menu.en.mdx +63 -1
- package/src/media/mdx/Menu/menu.ru.mdx +64 -1
- package/src/media/mdx/Menu/navigation.en.mdx +56 -0
- package/src/media/mdx/Menu/navigation.ru.mdx +56 -0
- package/src/media/mdx/Menu/slots.control.en.mdx +65 -0
- package/src/media/mdx/Menu/slots.control.ru.mdx +65 -0
- package/src/media/mdx/Menu/slots.en.mdx +100 -0
- package/src/media/mdx/Menu/slots.ru.mdx +100 -0
- package/src/media/mdx/Menu/wikiMdxMenu.ts +27 -28
- package/src/media/mdx/Modal/differences.en.mdx +130 -0
- package/src/media/mdx/Modal/differences.ru.mdx +65 -0
- package/src/media/mdx/Modal/modal.en.mdx +63 -0
- package/src/media/mdx/Modal/modal.ru.mdx +63 -0
- package/src/media/mdx/Modal/wikiMdxModal.ts +25 -0
- package/src/media/mdx/MotionTransform/animationHeadPosition.en.mdx +10 -22
- package/src/media/mdx/MotionTransform/animationHeadPosition.ru.mdx +10 -22
- package/src/media/mdx/MotionTransform/classes.en.mdx +18 -25
- package/src/media/mdx/MotionTransform/classes.ru.mdx +18 -25
- package/src/media/mdx/MotionTransform/events.en.mdx +31 -43
- package/src/media/mdx/MotionTransform/events.ru.mdx +31 -43
- package/src/media/mdx/MotionTransform/expose.isShow.en.mdx +2 -4
- package/src/media/mdx/MotionTransform/expose.isShow.ru.mdx +2 -4
- package/src/media/mdx/MotionTransform/expose.motionTransformElement.en.mdx +13 -0
- package/src/media/mdx/MotionTransform/expose.motionTransformElement.ru.mdx +14 -0
- package/src/media/mdx/MotionTransform/ignore.en.mdx +22 -24
- package/src/media/mdx/MotionTransform/ignore.ru.mdx +22 -24
- package/src/media/mdx/MotionTransform/motionTransform.en.mdx +44 -15
- package/src/media/mdx/MotionTransform/motionTransform.ru.mdx +44 -15
- package/src/media/mdx/MotionTransform/slots.en.mdx +92 -0
- package/src/media/mdx/MotionTransform/slots.ru.mdx +92 -0
- package/src/media/mdx/MotionTransform/v-model.en.mdx +23 -14
- package/src/media/mdx/MotionTransform/v-model.ru.mdx +23 -14
- package/src/media/mdx/MotionTransform/wikiMdxMotionTransform.ts +11 -17
- package/src/media/mdx/Progress/circular.en.mdx +7 -20
- package/src/media/mdx/Progress/circular.ru.mdx +7 -20
- package/src/media/mdx/Progress/delays.en.mdx +6 -13
- package/src/media/mdx/Progress/delays.ru.mdx +6 -13
- package/src/media/mdx/Progress/linear.en.mdx +9 -23
- package/src/media/mdx/Progress/linear.ru.mdx +9 -23
- package/src/media/mdx/Progress/progress.en.mdx +67 -5
- package/src/media/mdx/Progress/progress.ru.mdx +67 -5
- package/src/media/mdx/Progress/values.en.mdx +6 -28
- package/src/media/mdx/Progress/values.ru.mdx +6 -29
- package/src/media/mdx/Ripple/ripple.en.mdx +34 -40
- package/src/media/mdx/Ripple/ripple.ru.mdx +34 -40
- package/src/media/mdx/Scrollbar/emits-include.en.mdx +38 -0
- package/src/media/mdx/Scrollbar/emits-include.ru.mdx +38 -0
- package/src/media/mdx/Scrollbar/emits.en.mdx +38 -0
- package/src/media/mdx/Scrollbar/emits.ru.mdx +38 -0
- package/src/media/mdx/Scrollbar/scrollbar.en.mdx +38 -2
- package/src/media/mdx/Scrollbar/scrollbar.ru.mdx +38 -2
- package/src/media/mdx/Scrollbar/wikiMdxScrollbar.ts +12 -43
- package/src/media/mdx/Select/select.en.mdx +69 -0
- package/src/media/mdx/Select/select.ru.mdx +69 -0
- package/src/media/mdx/Select/wikiMdxSelect.ts +19 -0
- package/src/media/mdx/SelectValue/selectValue.en.mdx +64 -0
- package/src/media/mdx/SelectValue/selectValue.ru.mdx +64 -0
- package/src/media/mdx/SelectValue/wikiMdxSelectValue.ts +19 -0
- package/src/media/mdx/Skeleton/classes.en.mdx +13 -0
- package/src/media/mdx/Skeleton/classes.ru.mdx +13 -0
- package/src/media/mdx/Skeleton/expose.isActive.en.mdx +7 -28
- package/src/media/mdx/Skeleton/expose.isActive.ru.mdx +7 -28
- package/src/media/mdx/Skeleton/skeleton.en.mdx +37 -36
- package/src/media/mdx/Skeleton/skeleton.ru.mdx +37 -36
- package/src/media/mdx/Skeleton/wikiMdxSkeleton.ts +7 -0
- package/src/media/mdx/TextareaAutosize/textarea-autosize.en.mdx +65 -0
- package/src/media/mdx/TextareaAutosize/textarea-autosize.ru.mdx +65 -0
- package/src/media/mdx/TextareaAutosize/wikiMdxTextareaAutosize.ts +19 -0
- package/src/media/mdx/Tooltip/event.tooltip.en.mdx +7 -0
- package/src/media/mdx/Tooltip/event.tooltip.ru.mdx +8 -0
- package/src/media/mdx/Tooltip/slot.control.en.mdx +14 -0
- package/src/media/mdx/Tooltip/slot.control.ru.mdx +14 -0
- package/src/media/mdx/Tooltip/tooltip.en.mdx +34 -0
- package/src/media/mdx/Tooltip/tooltip.ru.mdx +34 -0
- package/src/media/mdx/Tooltip/wikiMdxTooltip.ts +31 -0
- package/src/media/mdx/Window/axis.en.mdx +11 -19
- package/src/media/mdx/Window/axis.ru.mdx +11 -19
- package/src/media/mdx/Window/classes.en.mdx +9 -26
- package/src/media/mdx/Window/classes.ru.mdx +9 -26
- package/src/media/mdx/Window/event.window.en.mdx +26 -8
- package/src/media/mdx/Window/event.window.ru.mdx +26 -8
- package/src/media/mdx/Window/expose.en.mdx +44 -0
- package/src/media/mdx/Window/expose.ru.mdx +44 -0
- package/src/media/mdx/Window/hooks.en.mdx +29 -50
- package/src/media/mdx/Window/hooks.ru.mdx +31 -52
- package/src/media/mdx/Window/slots.en.mdx +168 -0
- package/src/media/mdx/Window/slots.ru.mdx +168 -0
- package/src/media/mdx/Window/v-model.en.mdx +20 -11
- package/src/media/mdx/Window/v-model.ru.mdx +19 -11
- package/src/media/mdx/Window/wikiMdxWindow.ts +11 -41
- package/src/media/mdx/Window/window.en.mdx +55 -1
- package/src/media/mdx/Window/window.ru.mdx +55 -1
- package/src/media/mdx/event/events.actions.en.mdx +44 -0
- package/src/media/mdx/event/events.actions.ru.mdx +44 -0
- package/src/media/mdx/event/events.bars.en.mdx +50 -0
- package/src/media/mdx/event/events.bars.ru.mdx +50 -0
- package/src/media/mdx/event/events.beforeinput.en.mdx +13 -0
- package/src/media/mdx/event/events.beforeinput.ru.mdx +13 -0
- package/src/media/mdx/event/events.click.en.mdx +36 -0
- package/src/media/mdx/event/events.click.ru.mdx +36 -0
- package/src/media/mdx/event/events.focus.en.mdx +13 -0
- package/src/media/mdx/event/events.focus.ru.mdx +13 -0
- package/src/media/mdx/event/events.input.en.mdx +89 -0
- package/src/media/mdx/event/events.input.ru.mdx +90 -0
- package/src/media/mdx/event/events.inputStandard.en.mdx +6 -0
- package/src/media/mdx/event/events.inputStandard.ru.mdx +6 -0
- package/src/media/mdx/event/events.keyboard.en.mdx +13 -0
- package/src/media/mdx/event/events.keyboard.ru.mdx +13 -0
- package/src/media/mdx/event/events.paste.en.mdx +6 -0
- package/src/media/mdx/event/events.paste.ru.mdx +6 -0
- package/src/media/mdx/event/events.reset.en.mdx +6 -0
- package/src/media/mdx/event/events.reset.ru.mdx +6 -0
- package/src/media/mdx/event/wikiMdxEvent.ts +50 -73
- package/src/media/mdx/expose/expose.clear.en.mdx +3 -0
- package/src/media/mdx/expose/expose.clear.ru.mdx +3 -0
- package/src/media/mdx/expose/expose.descriptionId.en.mdx +6 -0
- package/src/media/mdx/expose/expose.descriptionId.ru.mdx +6 -0
- package/src/media/mdx/expose/expose.detail.en.mdx +5 -0
- package/src/media/mdx/expose/{detail.ru.mdx → expose.detail.ru.mdx} +1 -3
- package/src/media/mdx/expose/expose.id.en.mdx +6 -0
- package/src/media/mdx/expose/expose.id.ru.mdx +6 -0
- package/src/media/mdx/expose/expose.labelId.en.mdx +6 -0
- package/src/media/mdx/expose/expose.labelId.ru.mdx +6 -0
- package/src/media/mdx/expose/expose.open.en.mdx +5 -0
- package/src/media/mdx/expose/expose.open.ru.mdx +5 -0
- package/src/media/mdx/expose/expose.selected.en.mdx +23 -0
- package/src/media/mdx/expose/expose.selected.ru.mdx +23 -0
- package/src/media/mdx/expose/{value.en.mdx → expose.value.en.mdx} +1 -3
- package/src/media/mdx/expose/{value.ru.mdx → expose.value.ru.mdx} +1 -3
- package/src/media/mdx/expose/wikiMdxExpose.ts +41 -29
- package/src/media/mdx/slot/body.en.mdx +6 -0
- package/src/media/mdx/slot/body.ru.mdx +6 -0
- package/src/media/mdx/slot/caption.en.mdx +2 -7
- package/src/media/mdx/slot/caption.ru.mdx +2 -7
- package/src/media/mdx/slot/control.en.mdx +4 -5
- package/src/media/mdx/slot/control.ru.mdx +4 -5
- package/src/media/mdx/slot/default.en.mdx +2 -7
- package/src/media/mdx/slot/default.ru.mdx +2 -7
- package/src/media/mdx/slot/description.en.mdx +2 -7
- package/src/media/mdx/slot/description.ru.mdx +2 -7
- package/src/media/mdx/slot/footer.en.mdx +4 -5
- package/src/media/mdx/slot/footer.ru.mdx +4 -5
- package/src/media/mdx/slot/headline.en.mdx +7 -0
- package/src/media/mdx/slot/headline.ru.mdx +6 -0
- package/src/media/mdx/slot/label.en.mdx +2 -8
- package/src/media/mdx/slot/label.ru.mdx +2 -8
- package/src/media/mdx/slot/leading.en.mdx +7 -0
- package/src/media/mdx/slot/leading.ru.mdx +7 -0
- package/src/media/mdx/slot/prefix.en.mdx +1 -4
- package/src/media/mdx/slot/prefix.ru.mdx +1 -4
- package/src/media/mdx/slot/secondary.en.mdx +5 -0
- package/src/media/mdx/slot/secondary.ru.mdx +5 -0
- package/src/media/mdx/slot/suffix.en.mdx +1 -4
- package/src/media/mdx/slot/suffix.ru.mdx +1 -4
- package/src/media/mdx/slot/trailing.en.mdx +7 -0
- package/src/media/mdx/slot/trailing.ru.mdx +7 -0
- package/src/media/mdx/slot/wikiMdxSlot.ts +29 -5
- package/src/media/mdx/style/adaptive.en.mdx +6 -16
- package/src/media/mdx/style/adaptive.ru.mdx +6 -16
- package/src/media/mdx/style/asPalette.en.mdx +13 -5
- package/src/media/mdx/style/asPalette.ru.mdx +13 -5
- package/src/media/mdx/style/dir.en.mdx +14 -7
- package/src/media/mdx/style/dir.ru.mdx +14 -7
- package/src/media/mdx/style/isSkeleton.en.mdx +20 -6
- package/src/media/mdx/style/isSkeleton.ru.mdx +19 -5
- package/src/media/mdx/value/highlight.en.mdx +19 -12
- package/src/media/mdx/value/highlight.ru.mdx +19 -12
- package/src/media/mdx/value/labelNumber.en.mdx +39 -20
- package/src/media/mdx/value/labelNumber.ru.mdx +39 -20
- package/src/media/mdx/value/v-model-selected.en.mdx +28 -0
- package/src/media/mdx/value/v-model-selected.ru.mdx +28 -0
- package/src/media/mdx/value/v-model.en.mdx +26 -0
- package/src/media/mdx/value/v-model.ru.mdx +26 -0
- package/src/media/mdx/value/value.en.mdx +6 -12
- package/src/media/mdx/value/value.ru.mdx +6 -12
- package/src/media/mdx/value/wikiMdxValue.ts +24 -3
- package/src/media/mdx/wikiMdx.ts +29 -1
- package/src/media/props/wiki.ts +42 -0
- package/src/media/props/wikiActions.ts +43 -0
- package/src/media/props/wikiActionsInclude.ts +62 -0
- package/src/media/props/wikiAnchor.ts +84 -0
- package/src/media/props/wikiAria.ts +102 -0
- package/src/media/props/wikiArrow.ts +24 -0
- package/src/media/props/wikiArrowInclude.ts +45 -0
- package/src/media/props/wikiBarsInclude.ts +80 -0
- package/src/media/props/wikiChipGroup.ts +39 -0
- package/src/media/props/wikiDialog.ts +34 -0
- package/src/media/props/wikiField.ts +0 -21
- package/src/media/props/wikiFieldCounterInclude.ts +78 -0
- package/src/media/props/wikiForm.ts +248 -0
- package/src/media/props/wikiHook.ts +20 -0
- package/src/media/props/wikiIcon.ts +3 -3
- package/src/media/props/wikiIconInclude.ts +319 -0
- package/src/media/props/wikiImage.ts +71 -19
- package/src/media/props/wikiInformation.ts +160 -0
- package/src/media/props/wikiInput.ts +34 -0
- package/src/media/props/wikiListItem.ts +20 -0
- package/src/media/props/wikiMask.ts +0 -10
- package/src/media/props/wikiMaskInclude.ts +54 -0
- package/src/media/props/wikiMenu.ts +0 -10
- package/src/media/props/wikiMotionTransform.ts +0 -10
- package/src/media/props/wikiOption.ts +113 -0
- package/src/media/props/wikiSelect.ts +68 -0
- package/src/media/props/wikiSelectValue.ts +30 -0
- package/src/media/props/wikiStatus.ts +29 -41
- package/src/media/props/wikiStyle.ts +154 -243
- package/src/media/props/wikiTechnical.ts +65 -0
- package/src/media/props/wikiText.ts +57 -0
- package/src/media/props/wikiTooltip.ts +53 -0
- package/src/media/props/wikiValue.ts +14 -203
- package/src/media/props/wikiWindow.ts +0 -31
- package/src/media/styles/color.md +1 -0
- package/src/media/styles/en/about.mdx +79 -0
- package/src/media/styles/en/color.mdx +711 -0
- package/src/media/styles/en/content.mdx +29 -0
- package/src/media/styles/en/dimension.mdx +233 -0
- package/src/media/styles/en/dir.mdx +193 -0
- package/src/media/styles/en/flex.mdx +249 -0
- package/src/media/styles/en/font.mdx +171 -0
- package/src/media/styles/en/margin.mdx +115 -0
- package/src/media/styles/en/media.mdx +133 -0
- package/src/media/styles/en/padding.mdx +115 -0
- package/src/media/styles/en/position.mdx +183 -0
- package/src/media/styles/en/rules.mdx +117 -0
- package/src/media/styles/en/scrollbar.mdx +27 -0
- package/src/media/styles/en/selector.mdx +153 -0
- package/src/media/styles/en/transform.mdx +114 -0
- package/src/media/styles/ru/about.mdx +78 -0
- package/src/media/styles/ru/color.mdx +711 -0
- package/src/media/styles/ru/content.mdx +30 -0
- package/src/media/styles/ru/dimension.mdx +233 -0
- package/src/media/styles/ru/dir.mdx +193 -0
- package/src/media/styles/ru/flex.mdx +249 -0
- package/src/media/styles/ru/font.mdx +171 -0
- package/src/media/styles/ru/margin.mdx +115 -0
- package/src/media/styles/ru/media.mdx +133 -0
- package/src/media/styles/ru/padding.mdx +115 -0
- package/src/media/styles/ru/position.mdx +183 -0
- package/src/media/styles/ru/rules.mdx +117 -0
- package/src/media/styles/ru/scrollbar.mdx +27 -0
- package/src/media/styles/ru/selector.mdx +153 -0
- package/src/media/styles/ru/transform.mdx +114 -0
- package/src/styles/storybookStyle.scss +4 -1
- package/src/types/storybookTypes.ts +26 -4
- package/src/media/mdx/Bars/slot.actionBars.en.mdx +0 -12
- package/src/media/mdx/Bars/slot.actionBars.ru.mdx +0 -11
- package/src/media/mdx/Bars/slot.bars.en.mdx +0 -12
- package/src/media/mdx/Bars/slot.bars.ru.mdx +0 -11
- package/src/media/mdx/Cell/slot.body.en.mdx +0 -7
- package/src/media/mdx/Cell/slot.body.ru.mdx +0 -7
- package/src/media/mdx/Cell/slot.trailing.en.mdx +0 -7
- package/src/media/mdx/Cell/slot.trailing.ru.mdx +0 -7
- package/src/media/mdx/Field/slot.default.en.mdx +0 -9
- package/src/media/mdx/Field/slot.default.ru.mdx +0 -9
- package/src/media/mdx/Field/slot.leading.en.mdx +0 -10
- package/src/media/mdx/Field/slot.leading.ru.mdx +0 -10
- package/src/media/mdx/Field/slot.trailing.en.mdx +0 -10
- package/src/media/mdx/Field/slot.trailing.ru.mdx +0 -10
- package/src/media/mdx/FieldMessage/slot.helper.en.mdx +0 -12
- package/src/media/mdx/FieldMessage/slot.helper.ru.mdx +0 -12
- package/src/media/mdx/FieldMessage/slot.validation.en.mdx +0 -12
- package/src/media/mdx/FieldMessage/slot.validation.ru.mdx +0 -12
- package/src/media/mdx/Image/expose.data.en.mdx +0 -13
- package/src/media/mdx/Image/expose.data.ru.mdx +0 -13
- package/src/media/mdx/Image/expose.type.en.mdx +0 -21
- package/src/media/mdx/ListGroup/slot.head.en.mdx +0 -8
- package/src/media/mdx/ListGroup/slot.head.ru.mdx +0 -8
- package/src/media/mdx/ListGroup/slot.list.en.mdx +0 -8
- package/src/media/mdx/ListGroup/slot.list.ru.mdx +0 -8
- package/src/media/mdx/ListItem/slot.body.en.mdx +0 -7
- package/src/media/mdx/ListItem/slot.body.ru.mdx +0 -7
- package/src/media/mdx/ListItem/slot.trailing.en.mdx +0 -7
- package/src/media/mdx/ListItem/slot.trailing.ru.mdx +0 -7
- package/src/media/mdx/Menu/slot.contextBottom.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.contextBottom.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.contextTop.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.contextTop.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.control.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.control.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.footer.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.footer.ru.mdx +0 -9
- package/src/media/mdx/Menu/slot.title.en.mdx +0 -9
- package/src/media/mdx/Menu/slot.title.ru.mdx +0 -9
- package/src/media/mdx/MotionTransform/slot.body.en.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.body.ru.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.head.en.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.head.ru.mdx +0 -11
- package/src/media/mdx/MotionTransform/slot.params.en.mdx +0 -61
- package/src/media/mdx/MotionTransform/slot.params.ru.mdx +0 -61
- package/src/media/mdx/Scrollbar/event.bottom.en.mdx +0 -12
- package/src/media/mdx/Scrollbar/event.bottom.ru.mdx +0 -12
- package/src/media/mdx/Scrollbar/event.edge.en.mdx +0 -14
- package/src/media/mdx/Scrollbar/event.edge.ru.mdx +0 -14
- package/src/media/mdx/Scrollbar/event.leaveBottom.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.leaveBottom.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.leaveTop.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.leaveTop.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachBottom.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachBottom.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachTop.en.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.reachTop.ru.mdx +0 -11
- package/src/media/mdx/Scrollbar/event.top.en.mdx +0 -12
- package/src/media/mdx/Scrollbar/event.top.ru.mdx +0 -12
- package/src/media/mdx/Window/expose.control.en.mdx +0 -15
- package/src/media/mdx/Window/expose.control.ru.mdx +0 -15
- package/src/media/mdx/Window/expose.id.en.mdx +0 -7
- package/src/media/mdx/Window/expose.id.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.open.en.mdx +0 -7
- package/src/media/mdx/Window/expose.open.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.setOpen.en.mdx +0 -7
- package/src/media/mdx/Window/expose.setOpen.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.toClose.en.mdx +0 -7
- package/src/media/mdx/Window/expose.toClose.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.toOpen.en.mdx +0 -7
- package/src/media/mdx/Window/expose.toOpen.ru.mdx +0 -7
- package/src/media/mdx/Window/expose.toggle.en.mdx +0 -7
- package/src/media/mdx/Window/expose.toggle.ru.mdx +0 -7
- package/src/media/mdx/event/bars.en.mdx +0 -17
- package/src/media/mdx/event/bars.ru.mdx +0 -14
- package/src/media/mdx/event/barsBack.en.mdx +0 -14
- package/src/media/mdx/event/barsBack.ru.mdx +0 -16
- package/src/media/mdx/event/barsLite.en.mdx +0 -14
- package/src/media/mdx/event/barsLite.ru.mdx +0 -14
- package/src/media/mdx/event/click.en.mdx +0 -18
- package/src/media/mdx/event/click.ru.mdx +0 -18
- package/src/media/mdx/event/clickLite.en.mdx +0 -18
- package/src/media/mdx/event/clickLite.ru.mdx +0 -18
- package/src/media/mdx/event/scrollbarBottom.en.mdx +0 -13
- package/src/media/mdx/event/scrollbarBottom.ru.mdx +0 -13
- package/src/media/mdx/event/scrollbarEdge.en.mdx +0 -15
- package/src/media/mdx/event/scrollbarEdge.ru.mdx +0 -15
- package/src/media/mdx/event/scrollbarLeaveBottom.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarLeaveBottom.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarLeaveTop.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarLeaveTop.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachBottom.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachBottom.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachTop.en.mdx +0 -12
- package/src/media/mdx/event/scrollbarReachTop.ru.mdx +0 -12
- package/src/media/mdx/event/scrollbarTop.en.mdx +0 -13
- package/src/media/mdx/event/scrollbarTop.ru.mdx +0 -13
- package/src/media/mdx/event/window.en.mdx +0 -20
- package/src/media/mdx/event/window.ru.mdx +0 -20
- package/src/media/mdx/expose/detail.en.mdx +0 -7
- package/src/media/mdx/expose/isSelected.en.mdx +0 -8
- package/src/media/mdx/expose/isSelected.ru.mdx +0 -8
- package/src/media/mdx/expose/selectedList.en.mdx +0 -7
- package/src/media/mdx/expose/selectedList.ru.mdx +0 -7
- package/src/media/mdx/expose/selectedNames.en.mdx +0 -7
- package/src/media/mdx/expose/selectedNames.ru.mdx +0 -7
- package/src/media/mdx/expose/selectedValues.en.mdx +0 -8
- package/src/media/mdx/expose/selectedValues.ru.mdx +0 -8
- package/src/media/mdx/slot/title.en.mdx +0 -9
- package/src/media/mdx/slot/title.ru.mdx +0 -9
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
## Date and Time Formatting
|
|
2
|
+
|
|
3
|
+
Properties `type`, `language`, and `mask` are designed to manage date and time input and formatting with automatic localization and masking.
|
|
4
|
+
|
|
5
|
+
**Properties:**
|
|
6
|
+
|
|
7
|
+
- `type` — input type (set to one of: `date`, `datetime`, `year-month`, `time`, `hour-minute`)
|
|
8
|
+
- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
|
|
9
|
+
- `mask` — custom input mask (optional)
|
|
10
|
+
- `min` — minimum allowed date/time value
|
|
11
|
+
- `max` — maximum allowed date/time value
|
|
12
|
+
|
|
13
|
+
Properties work together: `type="date"` automatically activates date input mode with localized formatting. `language` determines the order of date components (day/month/year or month/day/year) and separators. `type="datetime"` adds time input to the date. Types `year-month`, `time`, and `hour-minute` allow input of specific components only. Properties `min` and `max` restrict the range of allowed values. You can override the automatic mask via the `mask` property for custom formatting.
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script setup>
|
|
17
|
+
import { ref } from 'vue'
|
|
18
|
+
const dateValue = ref('2024-03-15')
|
|
19
|
+
const datetimeValue = ref('2024-03-15T14:30:00')
|
|
20
|
+
const timeValue = ref('14:30')
|
|
21
|
+
const yearMonthValue = ref('2024-03')
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<!-- Standard date input -->
|
|
26
|
+
<Input v-model="dateValue" type="date" language="en-US" label="Date" />
|
|
27
|
+
|
|
28
|
+
<!-- Date with Russian locale -->
|
|
29
|
+
<Input v-model="dateValue" type="date" language="ru-RU" label="Дата" />
|
|
30
|
+
|
|
31
|
+
<!-- Date and time -->
|
|
32
|
+
<Input v-model="datetimeValue" type="datetime" language="en-US" label="Date and Time" />
|
|
33
|
+
|
|
34
|
+
<!-- Time only -->
|
|
35
|
+
<Input v-model="timeValue" type="time" language="en-US" label="Time" />
|
|
36
|
+
|
|
37
|
+
<!-- Hours and minutes -->
|
|
38
|
+
<Input v-model="timeValue" type="hour-minute" language="en-US" label="Hours:Minutes" />
|
|
39
|
+
|
|
40
|
+
<!-- Year and month -->
|
|
41
|
+
<Input v-model="yearMonthValue" type="year-month" language="en-US" label="Period" />
|
|
42
|
+
|
|
43
|
+
<!-- Date with constraints -->
|
|
44
|
+
<Input
|
|
45
|
+
v-model="dateValue"
|
|
46
|
+
type="date"
|
|
47
|
+
language="en-US"
|
|
48
|
+
min="2024-01-01"
|
|
49
|
+
max="2024-12-31"
|
|
50
|
+
label="Date in 2024"
|
|
51
|
+
/>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
## Работа с датой и временем
|
|
2
|
+
|
|
3
|
+
Свойства `type`, `language` и `mask` предназначены для управления вводом и форматированием значений даты и времени с автоматической локализацией и маскированием.
|
|
4
|
+
|
|
5
|
+
**Свойства:**
|
|
6
|
+
|
|
7
|
+
- `type` — тип инпута (устанавливается одно из значений: `date`, `datetime`, `year-month`, `time`, `hour-minute`)
|
|
8
|
+
- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
|
|
9
|
+
- `mask` — пользовательская маска для ввода (опционально)
|
|
10
|
+
- `min` — минимальное допустимое значение даты/времени
|
|
11
|
+
- `max` — максимальное допустимое значение даты/времени
|
|
12
|
+
|
|
13
|
+
Свойства работают совместно: `type="date"` автоматически активирует режим ввода даты с локализованным форматированием. `language` определяет порядок компонентов даты (день/месяц/год или месяц/день/год) и разделители. `type="datetime"` добавляет к дате ввод времени. Типы `year-month`, `time` и `hour-minute` позволяют вводить только определённые компоненты. Свойства `min` и `max` ограничивают диапазон допустимых значений. Можно переопределить автоматическую маску через свойство `mask` для кастомного форматирования.
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script setup>
|
|
17
|
+
import { ref } from 'vue'
|
|
18
|
+
const dateValue = ref('2024-03-15')
|
|
19
|
+
const datetimeValue = ref('2024-03-15T14:30:00')
|
|
20
|
+
const timeValue = ref('14:30')
|
|
21
|
+
const yearMonthValue = ref('2024-03')
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<!-- Стандартный ввод даты -->
|
|
26
|
+
<Input v-model="dateValue" type="date" language="ru-RU" label="Дата" />
|
|
27
|
+
|
|
28
|
+
<!-- Дата с английской локалью -->
|
|
29
|
+
<Input v-model="dateValue" type="date" language="en-US" label="Date" />
|
|
30
|
+
|
|
31
|
+
<!-- Дата и время -->
|
|
32
|
+
<Input v-model="datetimeValue" type="datetime" language="ru-RU" label="Дата и время" />
|
|
33
|
+
|
|
34
|
+
<!-- Только время -->
|
|
35
|
+
<Input v-model="timeValue" type="time" language="ru-RU" label="Время" />
|
|
36
|
+
|
|
37
|
+
<!-- Часы и минуты -->
|
|
38
|
+
<Input v-model="timeValue" type="hour-minute" language="ru-RU" label="Часы:Минуты" />
|
|
39
|
+
|
|
40
|
+
<!-- Год и месяц -->
|
|
41
|
+
<Input v-model="yearMonthValue" type="year-month" language="ru-RU" label="Период" />
|
|
42
|
+
|
|
43
|
+
<!-- Дата с ограничениями -->
|
|
44
|
+
<Input
|
|
45
|
+
v-model="dateValue"
|
|
46
|
+
type="date"
|
|
47
|
+
language="ru-RU"
|
|
48
|
+
min="2024-01-01"
|
|
49
|
+
max="2024-12-31"
|
|
50
|
+
label="Дата в 2024 году"
|
|
51
|
+
/>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
Text input field component with validation, masking and formatting support.
|
|
2
|
+
|
|
3
|
+
Input provides a flexible interface for entering various types of data: text, numbers, email, passwords, phones, URLs, dates and time. The component automatically applies appropriate validation, formatting and keyboard based on the specified type. Supports masking for structured input (phones, dates, custom patterns), currency and number formatting, password visibility control and integration with the Field component for consistent styling.
|
|
4
|
+
|
|
5
|
+
**Key features:**
|
|
6
|
+
|
|
7
|
+
- Multiple input types (text, number, email, password, tel, url, date, time and more)
|
|
8
|
+
- Built-in validation with custom messages
|
|
9
|
+
- Masking for formatted input
|
|
10
|
+
- Currency and number formatting with localization
|
|
11
|
+
- Password visibility toggle
|
|
12
|
+
- Prefix and suffix for additional context
|
|
13
|
+
- Character counter for length limits
|
|
14
|
+
- Navigation arrows for numeric values
|
|
15
|
+
- Autocomplete and spellcheck support
|
|
16
|
+
- Clear button for value reset
|
|
17
|
+
|
|
18
|
+
**Common use cases:**
|
|
19
|
+
|
|
20
|
+
- Registration and login forms
|
|
21
|
+
- Contact information fields (email, phone)
|
|
22
|
+
- Numeric fields (quantity, price, age)
|
|
23
|
+
- Password fields with visibility toggle
|
|
24
|
+
- Search fields with quick clear
|
|
25
|
+
- Formatted input (phones, dates, cards)
|
|
26
|
+
- Currency fields with automatic formatting
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<script setup>
|
|
30
|
+
import { ref } from 'vue'
|
|
31
|
+
|
|
32
|
+
const email = ref('')
|
|
33
|
+
const password = ref('')
|
|
34
|
+
|
|
35
|
+
const handleInput = (event, validation) => {
|
|
36
|
+
console.log('Input value:', validation.value)
|
|
37
|
+
console.log('Valid:', validation.status)
|
|
38
|
+
}
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<div class="form">
|
|
43
|
+
<Input
|
|
44
|
+
v-model="email"
|
|
45
|
+
type="email"
|
|
46
|
+
label="Email"
|
|
47
|
+
placeholder="example@mail.com"
|
|
48
|
+
required
|
|
49
|
+
@input="handleInput"
|
|
50
|
+
/>
|
|
51
|
+
|
|
52
|
+
<Input
|
|
53
|
+
v-model="password"
|
|
54
|
+
type="password"
|
|
55
|
+
label="Password"
|
|
56
|
+
placeholder="Enter password"
|
|
57
|
+
minlength="8"
|
|
58
|
+
required
|
|
59
|
+
iconVisibility="visibility"
|
|
60
|
+
iconVisibilityOff="visibility_off"
|
|
61
|
+
/>
|
|
62
|
+
|
|
63
|
+
<Input
|
|
64
|
+
type="currency"
|
|
65
|
+
label="Price"
|
|
66
|
+
currency="USD"
|
|
67
|
+
language="en-US"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
</template>
|
|
71
|
+
```
|
|
72
|
+
Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
|
|
73
|
+
|
|
74
|
+
Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
|
|
75
|
+
|
|
76
|
+
**Основные возможности:**
|
|
77
|
+
|
|
78
|
+
- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
|
|
79
|
+
- Встроенная валидация с пользовательскими сообщениями
|
|
80
|
+
- Маскирование для форматированного ввода
|
|
81
|
+
- Форматирование валюты и чисел с локализацией
|
|
82
|
+
- Переключатель видимости пароля
|
|
83
|
+
- Префикс и суффикс для дополнительного контекста
|
|
84
|
+
- Счётчик символов для ограничения длины
|
|
85
|
+
- Стрелки навигации для числовых значений
|
|
86
|
+
- Поддержка автозаполнения и проверки орфографии
|
|
87
|
+
- Кнопка очистки значения
|
|
88
|
+
|
|
89
|
+
**Типичные сценарии использования:**
|
|
90
|
+
|
|
91
|
+
- Формы регистрации и авторизации
|
|
92
|
+
- Поля ввода контактных данных (email, телефон)
|
|
93
|
+
- Числовые поля (количество, цена, возраст)
|
|
94
|
+
- Поля для ввода паролей с переключением видимости
|
|
95
|
+
- Поля поиска с быстрой очисткой
|
|
96
|
+
- Форматированный ввод (телефоны, даты, карты)
|
|
97
|
+
- Валютные поля с автоматическим форматированием
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<script setup>
|
|
101
|
+
import { ref } from 'vue'
|
|
102
|
+
|
|
103
|
+
const email = ref('')
|
|
104
|
+
const password = ref('')
|
|
105
|
+
|
|
106
|
+
const handleInput = (event, validation) => {
|
|
107
|
+
console.log('Введённое значение:', validation.value)
|
|
108
|
+
console.log('Валидно:', validation.status)
|
|
109
|
+
}
|
|
110
|
+
</script>
|
|
111
|
+
|
|
112
|
+
<template>
|
|
113
|
+
<div class="form">
|
|
114
|
+
<Input
|
|
115
|
+
v-model="email"
|
|
116
|
+
type="email"
|
|
117
|
+
label="Email"
|
|
118
|
+
placeholder="example@mail.com"
|
|
119
|
+
required
|
|
120
|
+
@input="handleInput"
|
|
121
|
+
/>
|
|
122
|
+
|
|
123
|
+
<Input
|
|
124
|
+
v-model="password"
|
|
125
|
+
type="password"
|
|
126
|
+
label="Пароль"
|
|
127
|
+
placeholder="Введите пароль"
|
|
128
|
+
minlength="8"
|
|
129
|
+
required
|
|
130
|
+
iconVisibility="visibility"
|
|
131
|
+
iconVisibilityOff="visibility_off"
|
|
132
|
+
/>
|
|
133
|
+
|
|
134
|
+
<Input
|
|
135
|
+
type="currency"
|
|
136
|
+
label="Цена"
|
|
137
|
+
currency="RUB"
|
|
138
|
+
language="ru-RU"
|
|
139
|
+
/>
|
|
140
|
+
</div>
|
|
141
|
+
</template>
|
|
142
|
+
```
|
|
143
|
+
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
Компонент текстового поля ввода с поддержкой валидации, маскирования и форматирования.
|
|
2
|
+
|
|
3
|
+
Input предоставляет гибкий интерфейс для ввода данных различных типов: текст, числа, email, пароли, телефоны, URL, даты и время. Компонент автоматически применяет соответствующую валидацию, форматирование и клавиатуру в зависимости от указанного типа. Поддерживает маскирование для структурированного ввода (телефоны, даты, кастомные паттерны), форматирование валют и чисел, управление видимостью пароля и интеграцию с компонентом Field для единообразной стилизации.
|
|
4
|
+
|
|
5
|
+
**Основные возможности:**
|
|
6
|
+
|
|
7
|
+
- Множественные типы ввода (text, number, email, password, tel, url, date, time и другие)
|
|
8
|
+
- Встроенная валидация с пользовательскими сообщениями
|
|
9
|
+
- Маскирование для форматированного ввода
|
|
10
|
+
- Форматирование валюты и чисел с локализацией
|
|
11
|
+
- Переключатель видимости пароля
|
|
12
|
+
- Префикс и суффикс для дополнительного контекста
|
|
13
|
+
- Счётчик символов для ограничения длины
|
|
14
|
+
- Стрелки навигации для числовых значений
|
|
15
|
+
- Поддержка автозаполнения и проверки орфографии
|
|
16
|
+
- Кнопка очистки значения
|
|
17
|
+
|
|
18
|
+
**Типичные сценарии использования:**
|
|
19
|
+
|
|
20
|
+
- Формы регистрации и авторизации
|
|
21
|
+
- Поля ввода контактных данных (email, телефон)
|
|
22
|
+
- Числовые поля (количество, цена, возраст)
|
|
23
|
+
- Поля для ввода паролей с переключением видимости
|
|
24
|
+
- Поля поиска с быстрой очисткой
|
|
25
|
+
- Форматированный ввод (телефоны, даты, карты)
|
|
26
|
+
- Валютные поля с автоматическим форматированием
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<script setup>
|
|
30
|
+
import { ref } from 'vue'
|
|
31
|
+
|
|
32
|
+
const email = ref('')
|
|
33
|
+
const password = ref('')
|
|
34
|
+
|
|
35
|
+
const handleInput = (event, validation) => {
|
|
36
|
+
console.log('Введённое значение:', validation.value)
|
|
37
|
+
console.log('Валидно:', validation.status)
|
|
38
|
+
}
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<div class="form">
|
|
43
|
+
<Input
|
|
44
|
+
v-model="email"
|
|
45
|
+
type="email"
|
|
46
|
+
label="Email"
|
|
47
|
+
placeholder="example@mail.com"
|
|
48
|
+
required
|
|
49
|
+
@input="handleInput"
|
|
50
|
+
/>
|
|
51
|
+
|
|
52
|
+
<Input
|
|
53
|
+
v-model="password"
|
|
54
|
+
type="password"
|
|
55
|
+
label="Пароль"
|
|
56
|
+
placeholder="Введите пароль"
|
|
57
|
+
minlength="8"
|
|
58
|
+
required
|
|
59
|
+
iconVisibility="visibility"
|
|
60
|
+
iconVisibilityOff="visibility_off"
|
|
61
|
+
/>
|
|
62
|
+
|
|
63
|
+
<Input
|
|
64
|
+
type="currency"
|
|
65
|
+
label="Цена"
|
|
66
|
+
currency="RUB"
|
|
67
|
+
language="ru-RU"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
</template>
|
|
71
|
+
```
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
## Input Masking
|
|
2
|
+
|
|
3
|
+
Properties `mask`, `maskVisible`, `maskNone`, and `maskAttrs` are designed to manage formatted input with automatic separator insertion and character control at specified positions.
|
|
4
|
+
|
|
5
|
+
**Properties:**
|
|
6
|
+
|
|
7
|
+
- `mask` — mask template as a string (e.g., `+1 (***) ***-****`)
|
|
8
|
+
- `maskVisible` — controls placeholder characters display (default `true`)
|
|
9
|
+
- `maskNone` — completely disables the mask
|
|
10
|
+
- `maskAttrs` — object with extended mask settings
|
|
11
|
+
|
|
12
|
+
Properties work together: `mask` defines the formatting structure, where special character (default `*`) defines positions for digit input, and other characters (spaces, brackets, hyphens) are automatically inserted as fixed separators. `maskVisible` controls the display of unfilled positions, where when set to `true` they are displayed with placeholder characters `_`, and when `false` only entered characters with separators are shown. `maskNone` allows completely disabling masking logic, converting the field to a regular text input. `maskAttrs` provides access to extended settings, allowing configuration of special characters (`special`), regular expressions for validation (`match`), custom placeholder characters (`view`), validation patterns (`pattern`), and rubber groups (`rubber`).
|
|
13
|
+
|
|
14
|
+
```html
|
|
15
|
+
<script setup>
|
|
16
|
+
import { ref } from 'vue'
|
|
17
|
+
const value = ref('')
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<template>
|
|
21
|
+
<!-- US Phone -->
|
|
22
|
+
<Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
|
|
23
|
+
|
|
24
|
+
<!-- Credit Card -->
|
|
25
|
+
<Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
|
|
26
|
+
|
|
27
|
+
<!-- Without placeholder display -->
|
|
28
|
+
<Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
|
|
29
|
+
</template>
|
|
30
|
+
```
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
## Маскирование ввода
|
|
2
|
+
|
|
3
|
+
Свойства `mask`, `maskVisible`, `maskNone` и `maskAttrs` предназначены для управления форматированным вводом с автоматической подстановкой разделителей и контролем символов в заданных позициях.
|
|
4
|
+
|
|
5
|
+
**Свойства:**
|
|
6
|
+
|
|
7
|
+
- `mask` — шаблон маски в виде строки (например, `+1 (***) ***-****`)
|
|
8
|
+
- `maskVisible` — управляет отображением символов-заполнителей (по умолчанию `true`)
|
|
9
|
+
- `maskNone` — полностью отключает маску
|
|
10
|
+
- `maskAttrs` — объект с расширенными настройками маски
|
|
11
|
+
|
|
12
|
+
Свойства работают совместно: `mask` определяет структуру форматирования, где специальный символ (по умолчанию `*`) определяет позиции для ввода цифр, а остальные символы (пробелы, скобки, дефисы) автоматически подставляются как фиксированные разделители. `maskVisible` управляет отображением незаполненных позиций, где при значении `true` они отображаются символами-заполнителями `_`, а при `false` показываются только введённые символы с разделителями. `maskNone` позволяет полностью отключить логику маскирования, превращая поле в обычный текстовый инпут. `maskAttrs` обеспечивает доступ к расширенным настройкам, позволяя настраивать специальные символы (`special`), регулярные выражения для проверки (`match`), кастомные символы-заполнители (`view`), паттерны валидации (`pattern`) и резиновые группы (`rubber`).
|
|
13
|
+
|
|
14
|
+
```html
|
|
15
|
+
<script setup>
|
|
16
|
+
import { ref } from 'vue'
|
|
17
|
+
const value = ref('')
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<template>
|
|
21
|
+
<!-- Телефон США -->
|
|
22
|
+
<Input v-model="value" type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Телефон" />
|
|
23
|
+
|
|
24
|
+
<!-- Кредитная карта -->
|
|
25
|
+
<Input v-model="value" type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Карта" />
|
|
26
|
+
|
|
27
|
+
<!-- Без отображения символов-заполнителей -->
|
|
28
|
+
<Input v-model="value" type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="Без заполнителя" />
|
|
29
|
+
</template>
|
|
30
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
## Working with Numbers
|
|
2
|
+
|
|
3
|
+
Properties `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep`, and `align` are designed to manage numeric value input and formatting with localization support and interactive control elements.
|
|
4
|
+
|
|
5
|
+
**Properties:**
|
|
6
|
+
|
|
7
|
+
- `type` — input type (`number` or `number-format`)
|
|
8
|
+
- `fraction` — number of decimal places (number, `true` for dynamic fractional part)
|
|
9
|
+
- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
|
|
10
|
+
- `min` — minimum allowed value
|
|
11
|
+
- `max` — maximum allowed value
|
|
12
|
+
- `step` — step size for keyboard input
|
|
13
|
+
- `arrow` — control arrows type (`auto`, `stepper`, `carousel`, `none`)
|
|
14
|
+
- `arrowStep` — step size for arrow clicks
|
|
15
|
+
- `align` — arrows placement (`left`, `center`, `right`)
|
|
16
|
+
|
|
17
|
+
Properties work together: `type` defines the base input mode, where `number` activates simple numeric input with basic validation without formatting, and `number-format` enables automatic formatting with thousands separators and decimal places depending on locale. `language` defines regional rules for thousands separators (space, comma, period) and decimal separator (period or comma). Properties `min` and `max` activate built-in range validation. `step` defines increment/decrement magnitude when using arrow keys up/down and Page Up/Down. Properties `arrow` and `arrowStep` add visual control elements (± buttons or < > arrows) with customizable step size, where if `arrowStep` is not specified, `step` value is used. `align` controls arrows placement in the input field.
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<script setup>
|
|
21
|
+
import { ref } from 'vue'
|
|
22
|
+
const value = ref('1234567.89')
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<template>
|
|
26
|
+
<!-- Simple numeric input -->
|
|
27
|
+
<Input v-model="value" type="number" label="Number" />
|
|
28
|
+
|
|
29
|
+
<!-- Formatted number with locale -->
|
|
30
|
+
<Input v-model="value" type="number-format" language="en-US" label="Formatted" />
|
|
31
|
+
|
|
32
|
+
<!-- With range constraints -->
|
|
33
|
+
<Input v-model="value" type="number" :min="0" :max="100" label="From 0 to 100" />
|
|
34
|
+
|
|
35
|
+
<!-- With step and stepper arrows -->
|
|
36
|
+
<Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Step 5/10" />
|
|
37
|
+
|
|
38
|
+
<!-- With center alignment -->
|
|
39
|
+
<Input v-model="value" type="number-format" align="center" :fraction="2" label="Centered" />
|
|
40
|
+
</template>
|
|
41
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
## Работа с числами
|
|
2
|
+
|
|
3
|
+
Свойства `type`, `fraction`, `language`, `min`, `max`, `step`, `arrow`, `arrowStep` и `align` предназначены для управления вводом и форматированием числовых значений с поддержкой локализации и интерактивных элементов управления.
|
|
4
|
+
|
|
5
|
+
**Свойства:**
|
|
6
|
+
|
|
7
|
+
- `type` — тип инпута (`number` или `number-format`)
|
|
8
|
+
- `fraction` — количество знаков после запятой (число, `true` для динамической дробной части)
|
|
9
|
+
- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
|
|
10
|
+
- `min` — минимальное допустимое значение
|
|
11
|
+
- `max` — максимальное допустимое значение
|
|
12
|
+
- `step` — шаг изменения при клавиатурном вводе
|
|
13
|
+
- `arrow` — тип управляющих стрелок (`auto`, `stepper`, `carousel`, `none`)
|
|
14
|
+
- `arrowStep` — шаг изменения при нажатии на стрелки
|
|
15
|
+
- `align` — расположение стрелок (`left`, `center`, `right`)
|
|
16
|
+
|
|
17
|
+
Свойства работают совместно: `type` определяет базовый режим ввода, где `number` активирует простой числовой ввод с базовой валидацией без форматирования, а `number-format` включает автоматическое форматирование с разделителями тысяч и десятичными знаками в зависимости от локали. `language` определяет региональные правила для разделителей тысяч (пробел, запятая, точка) и десятичного разделителя (точка или запятая). Свойства `min` и `max` активируют встроенную валидацию диапазона. `step` определяет величину инкремента/декремента при использовании клавиш стрелок вверх/вниз и Page Up/Down. Свойства `arrow` и `arrowStep` добавляют визуальные элементы управления (кнопки ± или стрелки < >) с настраиваемым шагом изменения, где если `arrowStep` не указан, используется значение `step`. `align` управляет расположением стрелок в поле ввода.
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<script setup>
|
|
21
|
+
import { ref } from 'vue'
|
|
22
|
+
const value = ref('1234567.89')
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<template>
|
|
26
|
+
<!-- Простой числовой ввод -->
|
|
27
|
+
<Input v-model="value" type="number" label="Число" />
|
|
28
|
+
|
|
29
|
+
<!-- Форматированное число с локалью -->
|
|
30
|
+
<Input v-model="value" type="number-format" language="ru-RU" label="Форматированное" />
|
|
31
|
+
|
|
32
|
+
<!-- С ограничениями диапазона -->
|
|
33
|
+
<Input v-model="value" type="number" :min="0" :max="100" label="От 0 до 100" />
|
|
34
|
+
|
|
35
|
+
<!-- С шагом и стрелками stepper -->
|
|
36
|
+
<Input v-model="value" type="number" arrow="stepper" :step="5" :arrow-step="10" label="Шаг 5/10" />
|
|
37
|
+
|
|
38
|
+
<!-- С выравниванием по центру -->
|
|
39
|
+
<Input v-model="value" type="number-format" align="center" :fraction="2" label="По центру" />
|
|
40
|
+
</template>
|
|
41
|
+
```
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
## Input Field Type
|
|
2
|
+
|
|
3
|
+
The `type` property defines the type and behavior of the Input field.
|
|
4
|
+
|
|
5
|
+
**Available values:**
|
|
6
|
+
|
|
7
|
+
- `'text'` — standard text field (default value)
|
|
8
|
+
- `'search'` — search field with quick clear functionality
|
|
9
|
+
- `'number'` — numeric field with basic number validation
|
|
10
|
+
- `'number-format'` — numeric field with formatting (thousands separators)
|
|
11
|
+
- `'currency'` — field for currency input with currency formatting
|
|
12
|
+
- `'email'` — field for email input with corresponding validation
|
|
13
|
+
- `'password'` — field for password input (hides characters)
|
|
14
|
+
- `'datetime'` — field for date and time input
|
|
15
|
+
- `'date'` — field for date input
|
|
16
|
+
- `'year-month'` — field for year and month input
|
|
17
|
+
- `'time'` — field for time input
|
|
18
|
+
- `'hour-minute'` — field for hours and minutes input
|
|
19
|
+
- `'tel'` — field for telephone number input
|
|
20
|
+
- `'url'` — field for web address input with URL validation
|
|
21
|
+
- `'checkbox'` — checkbox (used for boolean values)
|
|
22
|
+
- `'radio'` — radio button (used for selecting one option from a group)
|
|
23
|
+
|
|
24
|
+
Each type activates corresponding validation, formatting, and input mechanisms. For the `password` type, a visibility toggle function is available through a special icon. Types `number`, `number-format`, and `currency` automatically enable formatting and restrict input to numeric values only. Types `email`, `tel`, and `url` apply built-in HTML5 validation and set the appropriate `inputMode` for mobile keyboards. Date and time related types (`datetime`, `date`, `year-month`, `time`, `hour-minute`) activate special input masks and value formatting.
|
|
25
|
+
|
|
26
|
+
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
## Тип поля ввода
|
|
2
|
+
|
|
3
|
+
Свойство `type` определяет тип и поведение поля ввода Input.
|
|
4
|
+
|
|
5
|
+
**Возможные значения:**
|
|
6
|
+
|
|
7
|
+
- `'text'` — обычное текстовое поле (значение по умолчанию)
|
|
8
|
+
- `'search'` — поле для поиска с возможностью быстрой очистки
|
|
9
|
+
- `'number'` — числовое поле с базовой валидацией чисел
|
|
10
|
+
- `'number-format'` — числовое поле с форматированием (разделители тысяч)
|
|
11
|
+
- `'currency'` — поле для ввода денежных значений с форматированием валюты
|
|
12
|
+
- `'email'` — поле для ввода электронной почты с соответствующей валидацией
|
|
13
|
+
- `'password'` — поле для ввода пароля (скрывает символы)
|
|
14
|
+
- `'datetime'` — поле для ввода даты и времени
|
|
15
|
+
- `'date'` — поле для ввода даты
|
|
16
|
+
- `'year-month'` — поле для ввода года и месяца
|
|
17
|
+
- `'time'` — поле для ввода времени
|
|
18
|
+
- `'hour-minute'` — поле для ввода часов и минут
|
|
19
|
+
- `'tel'` — поле для ввода телефонного номера
|
|
20
|
+
- `'url'` — поле для ввода веб-адреса с валидацией URL
|
|
21
|
+
- `'checkbox'` — чекбокс (используется для булевых значений)
|
|
22
|
+
- `'radio'` — радиокнопка (используется для выбора одного варианта из группы)
|
|
23
|
+
|
|
24
|
+
Каждый тип активирует соответствующие механизмы валидации, форматирования и ввода. Для типа `password` доступна функция переключения видимости через специальную иконку. Типы `number`, `number-format` и `currency` автоматически включают форматирование и ограничивают ввод только числовыми значениями. Типы `email`, `tel` и `url` применяют встроенную HTML5-валидацию и устанавливают соответствующий `inputMode` для мобильных клавиатур. Типы, связанные с датой и временем (`datetime`, `date`, `year-month`, `time`, `hour-minute`), активируют специальные маски ввода и форматирование значений.
|
|
25
|
+
|
|
26
|
+
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
|
|
2
|
+
|
|
3
|
+
import currencyEn from './currency.en.mdx'
|
|
4
|
+
import currencyRu from './currency.ru.mdx'
|
|
5
|
+
import dateEn from './date.en.mdx'
|
|
6
|
+
import dateRu from './date.ru.mdx'
|
|
7
|
+
import inputEn from './input.en.mdx'
|
|
8
|
+
import inputRu from './input.ru.mdx'
|
|
9
|
+
import maskEn from './mask.en.mdx'
|
|
10
|
+
import maskRu from './mask.ru.mdx'
|
|
11
|
+
import numberEn from './number.en.mdx'
|
|
12
|
+
import numberRu from './number.ru.mdx'
|
|
13
|
+
import typeEn from './type.en.mdx'
|
|
14
|
+
import typeRu from './type.ru.mdx'
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* MDX files for Input component
|
|
18
|
+
*
|
|
19
|
+
* MDX файлы для компонента Input
|
|
20
|
+
*/
|
|
21
|
+
export const wikiMdxInput: StorybookComponentsMdxItem = {
|
|
22
|
+
name: 'Input',
|
|
23
|
+
descriptions: {
|
|
24
|
+
currency: {
|
|
25
|
+
en: currencyEn,
|
|
26
|
+
ru: currencyRu
|
|
27
|
+
},
|
|
28
|
+
date: {
|
|
29
|
+
en: dateEn,
|
|
30
|
+
ru: dateRu
|
|
31
|
+
},
|
|
32
|
+
input: {
|
|
33
|
+
en: inputEn,
|
|
34
|
+
ru: inputRu
|
|
35
|
+
},
|
|
36
|
+
mask: {
|
|
37
|
+
en: maskEn,
|
|
38
|
+
ru: maskRu
|
|
39
|
+
},
|
|
40
|
+
number: {
|
|
41
|
+
en: numberEn,
|
|
42
|
+
ru: numberRu
|
|
43
|
+
},
|
|
44
|
+
type: {
|
|
45
|
+
en: typeEn,
|
|
46
|
+
ru: typeRu
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
### `close`
|
|
2
2
|
|
|
3
|
-
Event
|
|
3
|
+
Event fires when attempting to close the list after navigation has reached the root level.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
The event does not pass any parameters.
|
|
5
|
+
**When it fires:**
|
|
6
|
+
- Pressing the **Escape** key at the root level of the list
|
|
7
|
+
- Pressing the **←** (left arrow) key when there are no open submenus/groups
|
|
8
|
+
- Attempting to navigate back when there are no nested items
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
### `close`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Событие срабатывает при попытке закрыть список, когда навигация достигла корневого уровня.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Событие не передаёт параметры.
|
|
5
|
+
**Когда срабатывает:**
|
|
6
|
+
- Нажатие клавиши **Escape** на корневом уровне списка
|
|
7
|
+
- Нажатие клавиши **←** (стрелка влево), когда нет открытых подменю/групп
|
|
8
|
+
- Попытка навигации назад при отсутствии вложенных элементов
|