气泡确认框

<script setup lang="ts">
    import { Button, Popconfirm, Toast } from '@fibrous/semi-ui-vue';

    const onConfirm = () => {
        Toast.success('确认保存！');
    };

    const onCancel = () => {
        Toast.warning('取消保存！');
    };
</script>

<template>
    <Popconfirm @cancel="onCancel" @confirm="onConfirm">
        <Button>保存</Button>
        <template #title>确定是否要保存此修改？</template>
        <template #content>此修改将不可逆</template>
    </Popconfirm>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { IconAlertTriangle } from '@fibrous/semi-icons-vue';
    import { Button, Popconfirm, Radio, RadioGroup, type RadioValue } from '@fibrous/semi-ui-vue';

    type TypeKey = 'default' | 'warning' | 'danger' | 'tertiary';

    const typeMap: Record<TypeKey, { okType?: 'danger'; color?: string }> = {
        default: {},
        warning: { color: 'var(--semi-color-warning)' },
        danger: { okType: 'danger', color: 'var(--semi-color-danger)' },
        tertiary: { color: 'var(--semi-color-tertiary)' },
    };
    const keys = Object.keys(typeMap) as TypeKey[];
    const type = ref<TypeKey>('default');
    const visible = ref(true);

    const changeType = (value: RadioValue | undefined) => {
        const key = keys.find((item) => item === value);
        if (key) type.value = key;
    };
</script>

<template>
    <div>
        <RadioGroup :modelValue="type" :style="{ marginTop: '14px', marginBottom: '14px' }" type="button" @update:modelValue="changeType">
            <Radio v-for="key in keys" :key="key" :value="key">
                <span :style="{ color: `var(--semi-color-${key === 'default' ? 'primary' : key})` }">{{ key }}</span>
            </Radio>
        </RadioGroup>
        <div>
            <Popconfirm v-model:visible="visible" :okType="typeMap[type].okType" trigger="custom">
                <Button @click="visible = !visible">点击此处</Button>
                <template #icon>
                    <IconAlertTriangle size="extra-large" :style="{ color: typeMap[type].color }" />
                </template>
                <template #title>确定是否要保存此修改？</template>
                <template #content>此修改将不可逆</template>
            </Popconfirm>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Button, Popconfirm } from '@fibrous/semi-ui-vue';

    const onConfirm = () =>
        new Promise<void>((resolve) => {
            setTimeout(() => {
                console.log('resolve,close popconfirm');
                resolve();
            }, 2000);
        });

    const onCancel = () =>
        new Promise<void>((_resolve, reject) => {
            setTimeout(() => {
                console.log('reject, popconfirm still exist');
                reject();
            }, 2000);
        });
</script>

<template>
    <Popconfirm @cancel="onCancel" @confirm="onConfirm">
        <Button>保存</Button>
        <template #title>确定是否要保存此修改？</template>
        <template #content>此修改将不可逆</template>
    </Popconfirm>
</template>

<script setup lang="ts">
    import { Button, Popconfirm, Space } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Space>
        <Popconfirm :okButtonProps="{ autoFocus: true, type: 'danger' }">
            <Button>确认聚焦</Button>
            <template #title>确定是否要保存此修改？</template>
            <template #content>此修改将不可逆</template>
        </Popconfirm>
        <Popconfirm :cancelButtonProps="{ autoFocus: true }">
            <Button>取消聚焦</Button>
            <template #title>确定是否要保存此修改？</template>
            <template #content>此修改将不可逆</template>
        </Popconfirm>
        <Popconfirm>
            <Button>内容聚焦</Button>
            <template #title>确定是否要保存此修改？</template>
            <template #content="{ initialFocusRef }">
                <input :ref="initialFocusRef" placeholder="focus here" />
            </template>
        </Popconfirm>
    </Space>
</template>