UI.Dialog - компонент позволяющий дать пользователю выбор из двух опций

Dialog
  header: Позволяет задать текст заголовка

Dialog
  header: 
    Header: Позволяет добавлять любые компоненты
    Button: Кнопка

У диалога есть кнопки ok\cancel. Они имеют тип Button и ведут себя соответствующе

Dialog
  header: Диалог
  ok: Положительное действие
    enabled: false
  cancel: Отмена
    .click: ()->
      Произвольный обработчик события

По-умолчанию после нажатия управляющих кнопок происходит закрытие диалога, но это поведение можно отменить.

Dialog
  header: Незакрываемый диалог
  ok: Положительное действие
    .click: ()->
      return false; //если функция-обработчик возвращает false, то диалог не выполняет своё стандартное поведение
  cancel: Отмена
    .click: ()->
      return false

У диалога есть методы show и hide. При их вызове диалог показывается\скрывается (соответственно).

Метод show может принимать своим аргументом функцию. Она будет выполнена после того как пользователь выберет действие (если стандартное поведение не отменено).

Пример включающий в себя все описанные возможности:

def Page main
    header:
        Header: Диалоги

    Dialog d1
        header: Диалог 1
        ok: Ок
        cancel: Отмена
            .click: ()->
                d1.hide();


    Dialog d2
        header: Диалог 2 с длиннейшим заголовком
            Header.medium: В диалоге может быть ещё и дополнительный текст
            Header.small: И дополнительное пояснение
        ok: Показать Диалог 1
            .click: ()->
                d1.show();

                return false;
        cancel: Закрыть

    Dialog d3
        header:
            Header: Диалог с управляющей кнопкой
            Button: Активировать
                filled: true
                .click: ()->
                    d3.ok.disabled = false
                    d3.ok = 'Активировано'
        ok: Ок
            disabled: true


    Label: Демонстрация простого диалога
    Button: Показать диалог 1
        filled: true
        .click: ()->
            d1.show()

    Label: Демонстрация диалога с дополнительными элементами и открытием другого вложенного диалога (1)
    Button: Показать диалог 2
        filled: true
        .click: ()->
            d2.show()

    Boolean d3result
    Label: Демонстрация диалога с динамическим изменением текста кнопок и пользовательскими элементами. {{d3result?'Активировано':''}}
    Button: Показать диалог 3
        filled: true
        .click: ()->
             d3.ok.disabled = true;
             d3.ok = 'Далее';
             // открыть диалог и использовать результат завершения
             d3.show(function(result){
                d3result = result;
             });


    Button next: NO WAY
        disabled: true