Detaljpanel

Komponent: FDetailsPanel
Status: Beta

Innehåll

Användning
Typescript
Egna knappar
Redigera objekt
Flera detaljpaneler i samma yta
Textnycklar
Props, Events & Slots

Detaljpanel (FDetailsPanel) används tillsammand med applikationslayout för att visa detaljer om ett objekt som användaren har valt.

<script setup lang="ts">
import { FPageLayout, FDetailsPanel, useDetailsPanel, FResizePane } from "@fkui/vue";

interface Item {
    name: string;
}

const name = "awesome-panel";
const panel = useDetailsPanel<Item>(name);
const ExamplePanel = FDetailsPanel<Item>;

function openPanel(): void {
    panel.open({
        name: "Kalle Anka",
    });
}
</script>

<template>
    <div class="layout-container">
        <f-page-layout layout="three-column">
            <template #default="layoutScope">
                <f-resize-pane :slot="layoutScope.right" min="200px" max="50%">
                    <example-panel :name>
                        <template #default="panelScope">
                            <h2 :slot="panelScope.header">Detaljpanel</h2>
                            <p :slot="panelScope.content">{{ panelScope.item.name }}</p>
                        </template>
                    </example-panel>
                </f-resize-pane>

                <button
                    :slot="layoutScope.content"
                    type="button"
                    class="button button--primary"
                    @click="openPanel"
                >
                    Öppna
                </button>
            </template>
        </f-page-layout>
    </div>
</template>

<style scoped>
.layout-container {
    container-type: size;
    height: 200px;
}
</style>

Detaljpanel består av tre slottar:

header - rubrik
content - huvudinnehåll
footer - frivilligt innehåll som placeras längst ner

Detaljpanel kombineras med fördel med justerbar yta (FResizePane) eller fixerad yta (FFixedPane).

Användning

Lägg till en FDetailsPanel i en yta i FPageLayout och namnge den med ett unikt namn.

 <f-page-layout layout="three-column">
     <template #default="layoutScope">
+        <f-details-panel :slot="layoutScope.right" name="awesome-panel">
+            <template #default> </template>
+        </f-details-panel>
         <div :slot="layoutScope.content">Innehållsyta</div>
     </template>
 </f-page-layout>

Om panelen ska ha en justerbar storlek lägg en FResizePane runt om:

 <f-page-layout layout="three-column">
     <template #default="layoutScope">
-        <f-details-panel :slot="layoutScope.right" name="awesome-panel">
+        <f-resize-pane :slot="layoutScope.right">
+            <f-details-panel name="awesome-panel">
                 <template #default> </template>
             </f-details-panel>
+        </f-resize-pane>
         <div :slot="layoutScope.content">Innehållsyta</div>
     </template>
 </f-page-layout>

Du lägger innehåll i respektive slot:

 <f-page-layout layout="three-column">
     <template #default="layoutScope">
         <f-details-panel :slot="layoutScope.right" name="awesome-panel">
-            <template #default> </template>
+            <template #default="panelScope">
+                <h2 :slot="panelScope.header">Rubrik</h2>
+                <div :slot="panelScope.content">Innehåll</div>
+                <div :slot="panelScope.footer">Footer</div>
+            </template>
         </f-details-panel>
         <div :slot="layoutScope.content">Innehållsyta</div>
     </template>

Detalpanelen öppnas med API från useDetailsPanel() och kräver ett objekt. Använd namnet du angett i propen name som identifierare för att hämta ut rätt detaljpanel.

import { useDetailsPanel } from "@fkui/vue";

const panel = useDetailsPanel("awesome-panel");

panel.open(myItem); // öppnar panelen med innehållet från myItem
panel.close(); // stänger panelen, samma som att användaren klickar på stängkrysset

useDetailsPanel() kan användas överallt i din kodbas så länge namnet matchar en detaljpanel. Det är säkert att anropa useDetailsPanel() före detaljpanelen skapats upp men den måste finnas när open() senare anropas.

Vi rekommenderar att du lägger namnet på panelen i en konstant som återanvänds mellan filer.

export const awesomePanel = "awesomePanel";

import { awesomePanel } from "./constants";

const panel = useDetailsPanel(awesomePanel);

-<f-details-panel name="awesome-panel">
+<f-details-panel :name="awesomePanel">

Du återfår objektet i panelen med scope attribute item:

         <f-details-panel :slot="layoutScope.right" name="awesome-panel">
             <template #default="panelScope">
                 <h2 :slot="panelScope.header">Rubrik</h2>
-                <div :slot="panelScope.content">Innehåll</div>
+                <div :slot="panelScope.content">
+                    <pre>{{ panelScope.item }}</pre>
+                </div>
                 <div :slot="panelScope.footer">Footer</div>
             </template>
         </f-details-panel>

Skicka en valfri callback om du vill agera på att detaljpanelen stängs:

panel.open(myItem, {
    onClose() {
        /* anropas när detaljpanel stängs */
    },
});

Tänk på att

onClose() anropas bara om detaljpanelen stängs. Om detaljpanelen öppnas med ett nytt objekt innan slutanvändaren stängt panelen anropas inte onClose() på det föregående objektet. Endast callback som associerats med det senaste öppnade objektet anropas.

Typescript

Detaljpanelen är generic och kan typsäkras genom att skapa ett alias för komponenten.

import { FDetailsPanel, useDetailsPanel } from "@fkui/vue";

interface Item {
    name: string;
}

const panel = useDetailsPanel<Item>("awesome-panel");
const ItemPanel = FDetailsPanel<Item>;

panel.open({ name: "Kalle Anka" });

-<f-details-panel name="awesome-panel">
+<item-panel name="awesome-panel">
     <template #default="{ item }">

item kommer då vara av typen Item.

Definiera upp att elementet ärver från FDetailsPanel om du använder HTML-validate:

 "elements": [
     "html5",
+    {
+        "item-panel": { "inherits": "f-details-panel" }
+    }
 ]

Egna knappar

Du kan lägga in egna knappar som stänger detaljpanelen.

         <f-details-panel :slot="layoutScope.right" name="awesome-panel">
             <template #default="panelScope">
                 <h2 :slot="panelScope.header">Rubrik</h2>
-                <div :slot="panelScope.content">Innehåll</div>
+                <div :slot="panelScope.content">
+                    <button type="button" @click="panelScope.close()">
+                        Stäng
+                    </button>
+                </div>
                 <div :slot="panelScope.footer">Footer</div>
             </template>
         </f-details-panel>

close() tar en optional sträng som kan användas för att särskilja olika knappar:

<button type="button" @click="close('save')">Spara</button>
<button type="button" @click="close('cancel')">Avbryt</button>

panel.open(myItem, {
    onClose({ reason }) {
        if (reason === "save") {
            /* ... */
        }
    },
});

Tänk på att

Om du ska använda detaljpanelen för att redigera objekt tänk på att skicka in en kopia av original-objektet istället. Annars riskerar du att mutera originalet vilket bland annat förhindrar att avbryta redigering.

Redigera objekt

Riktlinjer för att använda detaljpanelen för att redigera objekt:

Använd en separat knapp med en annan orsak (@click="close('save')") för att låta slutanvändaren ha möjlighet att ångra sig och förhindra att man oavsikligt redigerar data.
Använd en kopia av objektet och mutera inte originalobjektet direkt förrän användaren explicit valt att spara.

<script setup lang="ts">
import { reactive } from "vue";
import {
    FDetailsPanel,
    FInteractiveTable,
    FPageLayout,
    FResizePane,
    FTableColumn,
    FTextField,
    useDetailsPanel,
} from "@fkui/vue";

interface Row {
    id: number;
    column1: string;
    column2: string;
    column3: string;
    column4: string;
}

const name = "edit-panel";
const panel = useDetailsPanel<Row>(name);
const ExamplePanel = FDetailsPanel<Row>;

const rows = reactive([
    { id: 1, column1: "Text11", column2: "Text12", column3: "Text13", column4: "Text14" },
    { id: 2, column1: "Text21", column2: "Text22", column3: "Text23", column4: "Text24" },
    { id: 3, column1: "Text31", column2: "Text33", column3: "Text33", column4: "Text34" },
    { id: 4, column1: "Text41", column2: "Text44", column3: "Text43", column4: "Text44" },
    { id: 5, column1: "Text51", column2: "Text52", column3: "Text53", column4: "Text54" },
    { id: 6, column1: "Text61", column2: "Text62", column3: "Text63", column4: "Text64" },
    { id: 7, column1: "Text71", column2: "Text72", column3: "Text73", column4: "Text74" },
    { id: 8, column1: "Text81", column2: "Text82", column3: "Text83", column4: "Text84" },
    { id: 9, column1: "Text91", column2: "Text92", column3: "Text93", column4: "Text94" },
]);

function openPanel(row: Row): void {
    /* to handle when the panel is closed without saving we avoid mutating the
     * row directly by creating a copy and when saving we write down the actual
     * values */
    const copy = { ...row };
    panel.open(copy, {
        onClose({ reason }) {
            if (reason === "save") {
                Object.assign(row, copy);
            }
        },
    });
}
</script>

<template>
    <div class="layout-container">
        <f-page-layout layout="three-column">
            <template #default="layoutScope">
                <f-resize-pane :slot="layoutScope.right" min="200px" max="50%">
                    <example-panel :name>
                        <template #default="exampleScope">
                            <div :slot="exampleScope.content">
                                <f-text-field
                                    v-model="exampleScope.item.column1"
                                    v-validation.required.maxLength="{ maxLength: { length: 10 } }"
                                >
                                    Etikett-rubrik 1
                                </f-text-field>
                                <f-text-field
                                    v-model="exampleScope.item.column2"
                                    v-validation.required.maxLength="{ maxLength: { length: 10 } }"
                                >
                                    Etikett-rubrik 2
                                </f-text-field>
                                <f-text-field
                                    v-model="exampleScope.item.column3"
                                    v-validation.required.maxLength="{ maxLength: { length: 10 } }"
                                >
                                    Etikett-rubrik 3
                                </f-text-field>
                                <f-text-field
                                    v-model="exampleScope.item.column4"
                                    v-validation.required.maxLength="{ maxLength: { length: 10 } }"
                                >
                                    Etikett-rubrik 4
                                </f-text-field>
                                <div class="button-group">
                                    <button
                                        class="button button-group__item button--primary button--small"
                                        type="button"
                                        @click="exampleScope.close('save')"
                                    >
                                        Spara
                                    </button>
                                    <button
                                        class="button button-group__item button--secondary button--small"
                                        type="button"
                                        @click="exampleScope.close()"
                                    >
                                        Avbryt
                                    </button>
                                </div>
                            </div>
                        </template>
                    </example-panel>
                </f-resize-pane>

                <div :slot="layoutScope.content">
                    <f-interactive-table :rows key-attribute="id" @click="openPanel($event)">
                        <template #caption>Tabell</template>
                        <template #default="{ row }">
                            <f-table-column name="column1" title="Kolumnrubrik">
                                {{ row.column1 }}
                            </f-table-column>
                            <f-table-column name="column2" title="Kolumnrubrik">
                                {{ row.column2 }}
                            </f-table-column>
                            <f-table-column name="column3" title="Kolumnrubrik">
                                {{ row.column3 }}
                            </f-table-column>
                            <f-table-column name="column4" title="Kolumnrubrik">
                                {{ row.column4 }}
                            </f-table-column>
                        </template>
                    </f-interactive-table>
                </div>
            </template>
        </f-page-layout>
    </div>
</template>

<style scoped>
.layout-container {
    container-type: size;
    height: 520px;
}
</style>

Flera detaljpaneler i samma yta

Ibland är det användbart att skapa upp flera detaljpaneler i samma yta. Som en riktlinje rekommenderar vi att endast visa en detaljpanel åt gången.

Om du har flera detaljpaneler och vill stoppa andra från att visas samtidigt sätt propen exclusive till ett gemensamt gruppnamn:

Då det blir flera rotelement behöver panelerna placeras i en FFixedPane eller FResizePane för att layout ska bete sig korrekt.

<f-fixed-pane>
    <f-details-panel name="panel-1" exclusive="panels"></f-details-panel>
    <f-details-panel name="panel-2" exclusive="panels"></f-details-panel>
</f-fixed-pane>

Om en detaljpanel i samma grupp öppnas stängs alla andra detaljpaneler automatiskt (utan att onClose() anropas).

<f-fixed-pane>
    <f-details-panel name="panel-1" exclusive="panels"></f-details-panel>
    <f-details-panel name="panel-2" exclusive="panels"></f-details-panel>
</f-fixed-pane>

Textnycklar

fkui.details-panel.close: ‐
Default: "Stäng"

Props, Events & Slots

Props

name: string: Name of this panel. Used when referencing the panel in useDetailsPanel.
exclusive: string Optional: An optional identifier to prevent other panels with the same identifier from being open at the same time.

Slots

default

Panel content. Use native slots

Bindings:

item: T — Object the panel was opened with.
close: (reason?: string) => void — Callback to close the panel. The optional reason will be passed to the onClose() callback.
header: string — Native slot name for header content
footer: string — Native slot name for footer content
content: string — Native slot name for main content

Kakor på webbplatsen

Detaljpanel