Notification

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

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

<template>
    <Button @click="Notification.open(opts)">Display Notification</Button>
</template>

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

    const opts = {
        duration: 3,
        position: 'topRight',
        content: 'semi-ui-notification',
        title: 'Hi bytedance',
    } as const;
</script>

<template>
    <ButtonGroup>
        <Button @click="Notification.info({ ...opts, position: 'top' })">top</Button>
        <Button @click="Notification.info({ ...opts, position: 'topLeft' })">topLeft</Button>
        <Button @click="Notification.info(opts)">topRight</Button>
    </ButtonGroup>
    <br />
    <br />
    <ButtonGroup>
        <Button @click="Notification.info({ ...opts, position: 'bottom' })">bottom</Button>
        <Button @click="Notification.info({ ...opts, position: 'bottomRight' })">bottomRight</Button>
        <Button @click="Notification.info({ ...opts, position: 'bottomLeft' })">bottomLeft</Button>
    </ButtonGroup>
</template>

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

    const opts = {
        title: 'Hi, Bytedance',
        content: 'ies dance dance dance',
        duration: 3,
    };

    // icon is a VNode or a render function, which a template cannot express
    const showIcon = (icon: typeof IconVigoLogo, color?: string) => Notification.info({ ...opts, icon: h(icon, color ? { style: { color } } : null) });
</script>

<template>
    <h5>默认的图标</h5>
    <Button :style="{ margin: '4px' }" type="primary" @click="Notification.success(opts)">Success</Button>
    <Button :style="{ margin: '4px' }" @click="Notification.info(opts)">Info</Button>
    <Button :style="{ margin: '4px' }" type="warning" @click="Notification.warning(opts)">Warning</Button>
    <Button :style="{ margin: '4px' }" type="danger" @click="Notification.error(opts)">Error</Button>
    <h5>自定义图标</h5>
    <Button aria-label="Toutiao 图标通知" :style="{ marginRight: '5px' }" @click="showIcon(IconToutiaoLogo, 'red')">
        <template #icon>
            <IconToutiaoLogo />
        </template>
    </Button>
    <Button aria-label="Vigo 图标通知" :style="{ marginRight: '5px' }" @click="showIcon(IconVigoLogo)">
        <template #icon>
            <IconVigoLogo />
        </template>
    </Button>
    <Button aria-label="粉色 Vigo 图标通知" @click="showIcon(IconVigoLogo, 'pink')">
        <template #icon>
            <IconVigoLogo />
        </template>
    </Button>
</template>

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

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

<template>
    <Button @click="Notification.info(opts)">Info</Button>
    <br />
    <br />
    <Button @click="Notification.success(opts)">Success</Button>
    <br />
    <br />
    <Button type="warning" @click="Notification.warning(opts)">Warning</Button>
    <br />
    <br />
    <Button type="danger" @click="Notification.error(opts)">Error</Button>
</template>

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

    const { Text } = Typography;

    // content is a VNode or a render function, which a template cannot express
    const opts = {
        title: 'This is a title',
        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="Notification.info(opts)">Display Notification</Button>
</template>

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

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

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

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

    const opts = {
        content: 'Not auto close',
        title: 'Hi',
        duration: 0,
    };
    const ids = ref<string[]>([]);

    function show() {
        ids.value.push(Notification.info(opts));
    }

    function hide() {
        const first = ids.value.shift();
        if (first) {
            Notification.close(first);
        }
    }
</script>

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

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

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

<template>
    <Button @click="Notification.info(opts)">Click multiple times</Button>
</template>

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

    function show() {
        const id = Notification.open({
            title: 'Hi, Bytedance',
            content: 'ies dance dance dance',
            duration: 3,
        });
        setTimeout(() => {
            Notification.open({
                title: 'Hi, Bytedance',
                content: 'updated',
                duration: 10,
                id,
            });
        }, 1000);
    }
</script>

<template>
    <Button @click="show">Display Notification</Button>
</template>

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

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

    const [notification, Holder] = Notification.useNotification();
    const ids = ref<string[]>([]);
    // The function is rendered as a functional component inside the notification, so it can inject from where Holder sits
    const content = () => `ReachableContext: ${inject(reachableKey)}`;

    function show() {
        ids.value.push(notification.info({ title: 'Hook Notification', content, duration: 0 }));
    }

    function hide() {
        const first = ids.value.shift();
        if (first) {
            notification.close(first);
        }
    }
</script>

<template>
    <Space>
        <Button @click="show">Show Notification</Button>
        <Button @click="hide">Hide Notification</Button>
    </Space>
    <Holder />
</template>