Toast

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

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
        stack: true,
    };
    const throttleOpts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        onClose: () => throttled.cancel(),
        stack: true,
    };
    const throttled = throttle(() => Toast.info(throttleOpts), 10000, { edges: ['leading'] });
</script>

<template>
    <div>
        <Button @click="Toast.info(opts)">Display Toast</Button>
        <br />
        <br />
        <Button @click="throttled">Throttled Toast</Button>
    </div>
</template>

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

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
    };
</script>

<template>
    <Button style="color: var(--semi-color-success)" @click="Toast.success('Hi,Bytedance dance dance')"> Success </Button>
    <br />
    <br />
    <Button type="warning" @click="Toast.warning(opts)">Warning</Button>
    <br />
    <br />
    <Button type="danger" @click="Toast.error(opts)">Error</Button>
</template>

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

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
        theme: 'light',
    } as const;
</script>

<template>
    <Button @click="Toast.info(opts)">Info</Button>
    <br />
    <br />
    <Button style="color: var(--semi-color-success)" @click="Toast.success(opts)">Success</Button>
    <br />
    <br />
    <Button type="warning" @click="Toast.warning(opts)">Warning</Button>
    <br />
    <br />
    <Button type="danger" @click="Toast.error(opts)">Error</Button>
</template>

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

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        stack: true,
    };
</script>

<template>
    <Button @click="Toast.info(opts)">多次点击</Button>
</template>

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

    const { Text } = Typography;

    // content is a VNode or a render function, which a template cannot express
    const opts = {
        content: () => h('span', [h(Text, () => 'Hi, Bytedance dance dance'), h(Text, { link: true, style: { marginLeft: '12px' } }, () => '更多')]),
        duration: 3,
    };

    const multiLineOpts = {
        content: () => [h('div', 'Hi, Bytedance dance dance'), h('div', { style: { marginTop: '8px' } }, [h(Text, { link: true }, () => '查看详情'), h(Text, { link: true, style: { marginLeft: '20px' } }, () => '一会再看')])],
        duration: 3,
    };
</script>

<template>
    <Button @click="Toast.info(opts)">Display Toast</Button>
    <br />
    <br />
    <Button @click="Toast.info(multiLineOpts)">Display Multi-line Toast</Button>
</template>

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

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
    };
</script>

<template>
    <Button @click="Toast.info(opts)">Close After 10s</Button>
</template>

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

    const toastId = ref<string | null>(null);

    function destroy() {
        toastId.value = null;
    }

    const opts = {
        content: 'Not auto close',
        duration: 0,
        onClose: destroy,
    };

    function show() {
        if (toastId.value) {
            return;
        }
        toastId.value = Toast.info(opts);
    }

    function hide() {
        if (toastId.value) {
            Toast.close(toastId.value);
        }
        destroy();
    }
</script>

<template>
    <Button type="primary" @click="show">Show Toast</Button>
    <br />
    <br />
    <Button type="primary" @click="hide">Hide Toast</Button>
</template>

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

    function show() {
        const id = 'toastid';
        Toast.info({ content: 'Update Content By Id', id });
        setTimeout(() => {
            Toast.success({ content: 'Id By Content Update', id });
        }, 1000);
    }
</script>

<template>
    <Button type="primary" @click="show">Update Content By Id</Button>
</template>

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

    const reachableKey: InjectionKey<string> = Symbol('reachable');
    provide(reachableKey, 'Light');

    const [toast, Holder] = Toast.useToast();
    // The function is rendered as a functional component inside the toast, so it can inject from where Holder sits
    const config = {
        duration: 0,
        content: () => `ReachableContext: ${inject(reachableKey)}`,
    };
</script>

<template>
    <div>
        <Button @click="toast.success(config)">Hook Toast</Button>
    </div>
    <Holder />
</template>

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

    const ToastInCustomContainer = ToastFactory.create({
        getPopupContainer: () => document.getElementById('custom-toast-container') as HTMLElement,
    });
    onBeforeUnmount(() => ToastInCustomContainer.destroyAll());
</script>

<template>
    <div>
        <Button @click="Toast.info('Toast')">Default Toast</Button>
        <br />
        <br />
        <Button @click="ToastInCustomContainer.info('Toast in some container')">Toast in custom container</Button>
        <div id="custom-toast-container">custom container</div>
    </div>
</template>