675704e4da
This commit introduces the ability to delete items. A new `ItemDeleteModal` component provides a confirmation step before removal. - Adds a 'Delete' option to the action menu in the items table. - Refactors the `useItems` composable to ensure reactivity with `useLocalStorage` by creating new array references on add/remove operations. - Renames `AddModal` to `EditModal` to better align with its future role in both adding and editing items.
54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
<template>
|
||
<UModal
|
||
v-model:open="open"
|
||
:title="`删除 ${item?.name}？`"
|
||
:description="`确定吗？此操作不可被还原。`"
|
||
>
|
||
<slot />
|
||
|
||
<template #body>
|
||
<div class="flex justify-end gap-2">
|
||
<UButton
|
||
label="Cancel"
|
||
color="neutral"
|
||
variant="subtle"
|
||
@click="open = false"
|
||
/>
|
||
<UButton
|
||
label="Delete"
|
||
color="error"
|
||
variant="solid"
|
||
loading-auto
|
||
@click="onSubmit"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</UModal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
item?: Item | null;
|
||
}>(),
|
||
{
|
||
item: null,
|
||
}
|
||
);
|
||
|
||
const { removeItem } = useItemsStore();
|
||
|
||
const open = defineModel<boolean>("open", { default: false });
|
||
|
||
async function onSubmit() {
|
||
// await new Promise((resolve) => setTimeout(resolve, 1000));
|
||
if (!props.item || props.item.id == null) {
|
||
return;
|
||
}
|
||
removeItem(props.item.id);
|
||
open.value = false;
|
||
}
|
||
</script>
|
||
|
||
<style></style>
|