Something went wrong. Try again.
A simple to-do app focused on tasks that can be completed within a specific time span. taskline.tobinio.dev
Something went wrong. Try again.
1.7 kB · 74 lines
Vue
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<script setup lang="ts"> import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, } from "reka-ui";
const { t } = useI18n();
const open = defineModel("open", { default: false });
const emit = defineEmits<{ join: [string] }>();
const uuid = ref("");
const isValid = computed(() => { return uuid.value !== ""; });
function onCreate() { open.value = false; emit("join", uuid.value); }</script>
<template> <PopoverRoot v-model:open="open"> <PopoverTrigger> <div class="border-secondary flex cursor-pointer items-center gap-1 rounded border px-1" > <Icon name="material-symbols:add-2-rounded" size="20" /> {{ t("organization.join") }} </div> <slot name="display" /> </PopoverTrigger> <PopoverPortal> <PopoverContent class="bg-popover z-50 mx-2 flex flex-col gap-2 rounded-lg p-2 drop-shadow-lg/30" side="top" :side-offset="5" > <input v-model="uuid" data-testid="edit-label-name-input" class="border-secondary-popover h-8 w-36 rounded border pl-1" :placeholder="t('uuid')" type="text" > <button type="button" data-testid="edit-label-save-button" class="bg-primary hover:bg-primary-hover border-secondary-popover disabled:bg-popover flex h-8 cursor-pointer items-center justify-center rounded border px-0.5 transition-colors" :disabled="!isValid" @click="onCreate" > <Icon name="material-symbols:add-2-rounded" class="transition-colors" size="20" /> </button> <PopoverArrow class="fill-popover" :height="10" :width="20" :rounded="true" /> </PopoverContent> </PopoverPortal> </PopoverRoot></template>