60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<template>
|
|
<Story>
|
|
<Variant :setup-app="setupApp" title="Person">
|
|
<div class="p-5">
|
|
<PopoverActorCard :actor="baseActor">
|
|
<div><b> Popover me !</b></div></PopoverActorCard
|
|
>
|
|
</div>
|
|
</Variant>
|
|
<Variant :setup-app="setupApp" title="Group">
|
|
<div class="p-5">
|
|
<PopoverActorCard :actor="group">
|
|
<div><b> Popover me !</b></div></PopoverActorCard
|
|
>
|
|
</div>
|
|
</Variant>
|
|
</Story>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import PopoverActorCard from "./PopoverActorCard.vue";
|
|
import FloatingVue from "floating-vue";
|
|
import "floating-vue/dist/style.css";
|
|
import { ActorType } from "@/types/enums";
|
|
|
|
const baseActorAvatar = {
|
|
id: "",
|
|
name: "",
|
|
alt: "",
|
|
metadata: {},
|
|
url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
|
|
};
|
|
|
|
const baseActor = {
|
|
name: "Thomas Citharel",
|
|
preferredUsername: "tcit",
|
|
avatar: baseActorAvatar,
|
|
domain: null,
|
|
url: "",
|
|
summary: "",
|
|
suspended: false,
|
|
type: ActorType.PERSON,
|
|
};
|
|
|
|
const group = {
|
|
...baseActor,
|
|
name: "Framasoft",
|
|
preferredUsername: "framasoft",
|
|
domain: "mobilizon.fr",
|
|
avatar: {
|
|
...baseActorAvatar,
|
|
url: "https://framapiaf.s3.framasoft.org/framapiaf/accounts/avatars/000/000/399/original/aa56a445efb72803.jpg",
|
|
},
|
|
};
|
|
|
|
function setupApp({ app }) {
|
|
app.use(FloatingVue);
|
|
}
|
|
</script>
|