Files
lucia-frontend/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue
2026-03-09 18:04:43 +08:00

59 lines
1.3 KiB
Vue

<template>
<ul class="space-y-2" id="cyp-conformance-result-check">
<li
class="flex justify-start items-center pr-4"
v-for="(act, index) in displayData"
:key="index"
:title="act"
>
<span class="material-symbols-outlined text-primary mr-2">
check_circle
</span>
<p
class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden"
>
{{ act }}
</p>
</li>
</ul>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc. All rights reserved.
// Authors:
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
// imacat.yang@dsp.im (imacat), 2023/9/23
/**
* @module components/Discover/Conformance/ConformanceSidebar/ResultCheck
* Conformance result display with check-circle icons showing
* matched activities.
*/
import { ref, watch, onBeforeUnmount } from "vue";
import emitter from "@/utils/emitter";
const props = defineProps(["data", "select"]);
const displayData = ref(props.select);
watch(
() => props.data,
(newValue) => {
displayData.value = newValue;
},
);
watch(
() => props.select,
(newValue) => {
displayData.value = newValue;
},
);
emitter.on("reset", (val) => (displayData.value = val));
onBeforeUnmount(() => {
emitter.off("reset");
});
</script>