`ValidatableControlShell`

Эта страница не завершена

Приносим свои извинения, но данная страница ещё не завершена.

Такие элементы ввода, как однострочное текстовое поле (ValidatableControlShell(type="text")), многострочное текстовое ввода (textarea), выпадающие список (select) и так далее обычно употребляются не по одиночке, в окружении вспомогательных элементов:

Заголовочная надпись (обычно элемент label)
Комментарий (например, «тире и скобки можно необязательны» для поля ввода номера телефона)
Метки «обязательное» или «необязательное»
Сообщения валидации

Согласно одному из принципов качественного дизайна, все эти элементы окружения должны быть выполнены в едином стиле, потому появляется потребность в шаблонном компоненте, содержимое которого будет окружать элемент ввода. В YDF таким компонентом является ValidatableControlShell — в дословном переводе: «оболочка валидируемого компонента». Как следует из названия, данный компонент не является самостоятельным, а должен входить в состав других компонентов, а точнее быть для них оболочкой.

Сам ValidatableControlShell не является валидируемым компонентом, поскольку он лишь отображает переданные ему сообщения валидации, но при этом сам ничего не валидирует, так как валидация — задача основного компонента, который ValidatableControlShell окружает.
При выборе названия избегалось слово «обёртка» («wrapper»), так как оно гораздо более многозначное, чем «оболочка». Так, по отношению к компонентам пользовательского интерфейса «обёртка» может означать не только буквальное обёртывание основного компонента с обеих сторон своими элементами, но и расширение функциональности основного компонента.

Обзор

Pug-примесь

ValidatableControlShell--YDF

Live template-ы Pug-примеси (официальный плагин для семейства сред разработки IntelliJ IDEA)

Наподобие автодополнения: ValidatableControlShell--YDF
Сокращённый: vsc-ydf
Loading Placeholder

Stylus-примесь для генерации стилей

generateValidatableControlShellYDF_GUI_ComponentStyles

Готовые темы

ValidatableControlShell__YDF.Themes.regular: Базовая (по умолчанию)

Готовые геометрические вариации

ValidatableControlShell__YDF.GeometricVariations.regular: Базовая (по умолчанию)
ValidatableControlShell__YDF.GeometricVariations.small: Компактная

Готовые декоративные вариации

ValidatableControlShell__YDF.DecorativeVariations.regular: Базовая (по умолчанию)

Loading placeholder

Недоступен

Использование

Разметка

Подключение в проект

Разметка данного GUI-компонента поставляется в виде Pug-примеси ValidatableControlShell--YDF. Способ подключения — стандартный: путём включения Pug-файла Components.pug в Ваш pug-файл, при этом туда же предварительно должен быть включён файл Functionality.pug (последний уже входит в шаблоны страниц , повторное включение приведёт к ошибке).

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug

В Вашем случае относительный путь к директории node_modules может быть другим в в зависимости от того, насколько глубже корневой директории проекта находится Ваш Pug-файл с этим кодом.

Напомним, что одно только включение этих файлов никакого выходного HTML-кода не даст: чтобы сгенерировать HTML-код компонента ValidatableControlShell, нужно вызывать Pug-примесь ValidatableControlShell--YDF. Кроме того, если на данном этапе пока ещё не подключены стили, то при вызове этой примеси HTML-код хотя и будет сгенерирован, но корректного отображения пока не будет. Но если Вы ещё не знаете, как подключать стили, то не волнуйтесь, так ниже это будет обязательно описано.

Pug-примесь `ValidatableControlShell--YDF`

ValidatableControlShell--YDF

(

Параметр №1

Обязательный

Общее техническое наименование: properties
Русскоязычное имя: Свойства
Тип: Properties

Параметр №2

Необязательный

Общее техническое наименование: statesSimulations
Русскоязычное имя: Симуляции состояний
Тип: StatesSimulations

):void

ValidatableControlShell.propertiesSpecification

{

label

Русскоязычное наименование: Заголовочная надпись
Тип: string
Запрещён ли undefined: Нет
Запрещён ли null: Да
Минимум символов: 1

guidance

Русскоязычное наименование: Комментарий
Тип: string
Запрещён ли undefined: Нет
Запрещён ли null: Да
Минимум символов: 1

required

Русскоязычное наименование: Является ли ввод обязательным
Тип: boolean
Замещение значения undefined: false
Запрещён ли null: Да

mustDisplayAppropriateBadgeIfInputIsRequired

Русскоязычное наименование: Нужно ли отображать надпись «обязательное» когда ввод обязателен
Тип: boolean
Замещение значения undefined: false
Запрещён ли null: Да

mustDisplayAppropriateBadgeIfInputIsOptional

Русскоязычное наименование: Нужно ли отображать надпись «необязательное» когда ввод необязателен
Тип: boolean
Замещение значения undefined: false
Запрещён ли null: Да

mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge

Русскоязычное наименование: Нужно ли добавлять невидимый значок для выравнивание высоты
Тип: boolean
Замещение значения undefined: false
Запрещён ли null: Да

coreElementHTML_ID

Русскоязычное наименование: HTML-идентификатор элемента-ядра
Тип: string
Запрещён ли undefined: Нет
Запрещён ли null: Да
Минимум символов: 1

labelElementHTML_ID

Русскоязычное наименование: HTML-идентификатор заголовочной надписи
Тип: string
Запрещён ли undefined: Нет
Запрещён ли null: Да
Минимум символов: 1

mainSlotWrapperAdditionalCSS_Classes

Русскоязычное наименование

CSS-классы основного слота

Тип

индексный массив

Замещение значения undefined

[]

Запрещён ли null

Да

Запрещены ли элементы типа undefined

Да

Запрещены ли элементы типа null

Да

Элементы массива

Тип: string
Минимум символов: 1

theme

Русскоязычное наименование

Тема

Тип

string

Замещение значения undefined

ValidatableControlShell__YDF.Themes.regular

Запрещён ли null

Да

Допустимые варианты

ValidatableControlShell__YDF.Themes.regular
(Любые, определённые через `ValidatableControlShell__YDF.defineThemes(themesNames)`)

areThemesCSS_ClassesCommon

Русскоязычное наименование: Являются ли CSS-классы тем общими для всех компонентов
Тип: boolean
Замещение значения undefined: ValidatableControlShell__YDF.areThemesCSS_ClassesCommon
Запрещён ли null: Да

geometricVariation

Русскоязычное наименование

Геометрическая вариация

Тип

string

Замещение значения undefined

ValidatableControlShell__YDF.GeometricVariations.regular

Запрещён ли null

Да

Допустимые варианты

ValidatableControlShell__YDF.GeometricVariations.regular
ValidatableControlShell__YDF.GeometricVariations.small
(Любые, определённые через `ValidatableControlShell__YDF.defineGeometricVariations(geometricVariationsNames)`)

decorativeVariation

Русскоязычное наименование

Декоративная вариация

Тип

string

Замещение значения undefined

ValidatableControlShell__YDF.DecorativeVariations.regular

Запрещён ли null

Да

Допустимые варианты

ValidatableControlShell__YDF.DecorativeVariations.regular
(Любые, определённые через `ValidatableControlShell__YDF.defineDecorativeVariations(decorativeVariationsNames)`)

}

ValidatableControlShell.statesSimulations

{

validationErrorsMessages

Русскоязычное наименование

Сообщения об ошибках валидации

Тип

полиморфный

Замещение значения undefined

false

Запрещён ли null

Да

Варианты

Тип
индексный массив
Запрещены ли элементы типа undefined
Да
Запрещены ли элементы типа null
Да
Элементы массива
Тип
string
Минимум символов
1
Тип
boolean

asynchronousValidationsStatuses

Русскоязычное наименование

Статусы асинхронной валидации

Тип

полиморфный

Замещение значения undefined

false

Запрещён ли null

Да

Варианты

Тип
индексный массив
Запрещены ли элементы типа undefined
Да
Запрещены ли элементы типа null
Да
Элементы массива
Тип
объект фиксированной структуры
Структура объекта
{
ID
Тип
string
Запрещён ли undefined
Да
Запрещён ли null
Да
Допустимые варианты
IN_PROGRESS
FINISHED_AND_VALID
FINISHED_BUT_INVALID
MALFUNCTION
message
Тип
string
Запрещён ли undefined
Да
Запрещён ли null
Да
Минимум символов
1
}
Тип
boolean

}

ValidatableControlShell

Обзор

Использование

Разметка

Подключение в проект

Pug-примесь ValidatableControlShell--YDF

`ValidatableControlShell`

Pug-примесь `ValidatableControlShell--YDF`