Komponent

CRatingModal

Status

Experimentell

Betygsmodal är en komponent för att öppna en modal för att betygsätta med köttbullar.

Betygsmodalen använder komponenten CRating.

<script lang="ts">
import { defineComponent } from "vue";
import { type CRatingModalResult, CRatingModal } from "..";

export default defineComponent({
    name: "CRatingModalExample",
    components: { CRatingModal },
    data() {
        return {
            modalOpen: false,
            title: "Betygsätt betygsmodalen",
            ratingText: "Hur många köttbullar ger du denna komponent?",
            result: null as CRatingModalResult | null,
        };
    },
    methods: {
        onClick(): void {
            this.modalOpen = !this.modalOpen;
        },
        onClose(): void {
            this.modalOpen = false;
        },
        onSubmit(result: CRatingModalResult): void {
            this.result = result;
        },
    },
});
</script>

<template>
    <button type="button" class="button button--primary" @click="onClick">Öppna betygsmodal</button>

    <c-rating-modal :title :rating-text :is-open="modalOpen" @close="onClose" @submit="onSubmit" />

    <pre>{{ result }}</pre>
</template>

API

Props

isOpen: boolean Optional

If the modal is open. Use this to toggle if the modal should be visible or not.

Default: false

title: string Optional

Title of the modal.

Default: "Sätt ett betyg"

ratingText: string Optional

Description text for rating field.

Default: "Hur många köttbullar vill du ge?"

Events

close

Emitted when modal is closed by clicking a button or pressing escape.

submit

Emitted when modal has been submitted.

Arguments:

• <anonymous>: CRatingModalResult