tpl/objects/dialog.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

include heading.pug

mixin dialog(title)
    - const slots = {}

    mixin slot(key)
        - slots[key] = block

    -
        block ? block() : undefined 

        let classes = {
            'o-dialog':             true,
            'o-dialog--flat':       attributes.flat,
            'o-dialog--scrollable': attributes.scrollable,
        }

        let headerClass = {
            'o-dialog__header': true,
            'u-themed':         !attributes.flat,
            't-lowered':        !attributes.flat,
            'l-media':           true,
        }

        let sidebarHeaderClass = {
            'o-dialog__header--sidebar': true,
        }

        Object.assign(sidebarHeaderClass, headerClass);

        let bodyClass = {
            'o-dialog__body': true
        }
        if (attributes.bodyClass) {
            bodyClass[attributes.bodyClass] = true;
        }

    div(class=classes)
        if slots['sidebar-header'] || attributes.sidebarTitle
            div(class=sidebarHeaderClass)
                if slots['sidebar-header']
                    - slots['sidebar-header']()
                else
                    +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle

        if slots.sidebar
            .o-dialog__sidebar.l-overflow
                - slots.sidebar()

        div(class=headerClass)
            if slots.header
                - slots.header()
            else
                if title
                    +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title
            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')

        section(class=bodyClass)
            if slots.body
                - slots.body()

        footer.o-dialog__footer.l-button-group
            +a-button(outline=true)= 'Cancel'
            = ' '
            +a-button(variant='accent')= 'Continue'