pupperjs/test/templates/template.pupper

import ImportedComponent(from="./ImportedComponent.pupper")

template
    .container-fluid
        //- Stylesheets
        link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/litera/bootstrap.min.css", integrity="sha384-enpDwFISL6M3ZGZ50Tjo8m65q06uLVnyvkFO3rsoW0UC15ATBFz3QEhr3hmxpYsn", crossorigin="anonymous")

        .text-center
            .d-flex.p-3.mx-auto.flex-column
                header.masthead.mb-auto 
                    .inner
                        h3.masthead-brand=page.title

                //- Main contents
                main.inner.cover.my-3(role="main")
                    h1.cover-heading=page.description

                    p.lead=page.lead

                    hr.my-5

                    .row.mt-5.justify-content-around.align-items-center
                        if puppies === undefined || puppies.length === 0
                            ="Oh noe! No puppies to show :("
                        else
                            //- Render the puppies and share the onClickPuppy method with it
                            each index, puppy in puppies
                                .col-5.mb-5
                                    .puppy.card.px-0.text-dark(:data-pop="index", :data-id="puppy.id")
                                        .img-responsive
                                            unless puppy.shibe
                                                .cover
                                                    a(href="#", @click="replacePuppy(puppy, $event)")|Load a new pupper
                                            
                                            img.card-img-top(:src="puppy.thumbnail", crossorigin="auto")

                                        .card-header
                                            h5.card-title=puppy.title
                                            small.text-muted="Served by pupper.js"

                                        .card-body
                                            !=puppy.description

                                            //- Displays a custom message if it's a shibe
                                            if puppy.shibe === true
                                                p.text-warning="shibbe!!!"

                                            //- Displays a puppy properties
                                            if puppy.properties
                                                .row.justify-content-center.mt-3
                                                    each property in puppy.properties
                                                        .col
                                                            span.badge.badge-info.w-100=property

                    div 
                        h3|Testing slots and components

                        slot(name="slot")

data
    page = {
        title: "pupper.js is awesome!",
        description: "I use pupper.js because I love puppies!",
        lead: "Also we love puppers, shiberinos and other doggos too! 🐶"
    }

    puppies = [
        {
            id: 1,
            title: "A cutie pup",
            description: "Look at this cutie",
            thumbnail: "https://placedog.net/800",
            properties: ["beautiful", "doge"]
        },
        {
            id: 2,
            title: "Another cute pup",
            description: "Isn't it a cute doggo?!",
            thumbnail: "https://placedog.net/400",
            properties: ["wow", "much woof"]
        }
    ]

style(lang="scss", scoped)
    .row {
        .puppy {
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);

            .img-responsive {
                position: relative;

                .cover {
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.3);

                    a {
                        color: #fff;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                
                &:hover .cover {
                    display: block;
                }
            }
        }
    }

implementation
    //- Declaring methods
    #replacePuppy(puppy, e)
        e.preventDefault();
        
        if (!puppy.thumbnail.includes("?random"))
            puppy.thumbnail += "?random";
        
        const url = new URL(puppy.thumbnail);
        url.searchParams.set("u", +new Date());

        puppy.thumbnail = url.toString();

    //- Listening to pupper.js events.
    when#created
        console.log("The component was created.");

    when#mounted
        console.log("The component was mounted.");

        this.$nextTick(() => {
            this.puppies.push({
                id: 3,
                title: "Wow, a shibe!",
                description: "Cute shiberino!!!",
                thumbnail: "https://media.istockphoto.com/photos/happy-shiba-inu-dog-on-yellow-redhaired-japanese-dog-smile-portrait-picture-id1197121742?k=20&m=1197121742&s=170667a&w=0&h=SDkUmO-JcBKWXl7qK2GifsYzVH19D7e6DAjNpAGJP2M=",
                shibe: true
            });

            ImportedComponent.mount(this.$slots.slot);
        });