模态对话框

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const handleOk = () => {
        visible = false;
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
</script>

<Button onclick={() => (visible = true)}>打开弹窗</Button>
<Modal afterClose={handleAfterClose} bind:visible closeOnEsc onCancel={handleCancel} onOk={handleOk} title="基本对话框">
    This is the content of a basic modal.
    <br />
    More content...
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const handleOk = () => {
        visible = false;
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
</script>

<Button onclick={() => (visible = true)}>打开弹窗</Button>
<Modal afterClose={handleAfterClose} bind:visible closeOnEsc footerFill onCancel={handleCancel} onOk={handleOk} title="基本对话框">
    This is the content of a basic modal.
    <br />
    More content...
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>点击遮罩层不可关闭</Button>
<Modal bind:visible maskClosable={false} onOk={close} title="对话框标题">
    <p>This is a modal that cannot be closed by clicking on the mask.</p>
    <p>More content...</p>
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>自定义按钮文字</Button>
<Modal bind:visible cancelText="No, thanks." okText="Sounds great!" onOk={close} title="自定义按钮文字">
    <p>This is a modal with customized button texts.</p>
    <p>More content...</p>
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>自定义按钮属性</Button>
<Modal bind:visible cancelButtonProps={{ size: 'small', disabled: true }} okButtonProps={{ size: 'small', type: 'warning' }} onOk={close} title="自定义按钮属性">
    <p>This is a modal with customized button props.</p>
    <p>More content...</p>
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
</script>

<Button onclick={() => (visible = true)}>自定义页脚样式</Button>
<Modal bind:visible title="自定义页脚">
    <p>This is a modal with a customized footer.</p>
    <p>More content...</p>
    {#snippet footer()}
        <Button type="primary" onclick={() => (visible = false)}>Yes, I Understand</Button>
    {/snippet}
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>自定义对话框样式</Button>
<Modal bind:visible bodyStyle="overflow: auto; height: 200px" centered onOk={close} title="自定义样式">
    <p style="line-height: 1.8">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
    <p style="line-height: 1.8">区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
    <ul>
        <li>
            <p>Semi Design 以内容优先进行设计。</p>
        </li>
        <li>
            <p>更容易地自定义主题。</p>
        </li>
        <li>
            <p>适用国际化场景。</p>
        </li>
        <li>
            <p>效率场景加入人性化关怀</p>
        </li>
    </ul>
</Modal>

<script lang="ts">
    import { IconSemiLogo, IconVigoLogo } from '@fibrae/semi-icons-svelte';
    import { Button, List, ListItem, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const data = [
        {
            icon: IconSemiLogo,
            title: 'Boost new feature adoption with Integration',
            content: 'Sample data is prepared for you to demonstrate how Integration may be useful for your team',
        },
        {
            icon: IconVigoLogo,
            title: 'Introducing Dark Mode',
            content: 'Sample data is prepared for you to demonstrate how Integration may be useful for your team',
        },
        {
            icon: IconSemiLogo,
            title: 'New List Component',
            content: 'Sample data is prepared for you to demonstrate how Integration may be useful for your team',
        },
    ];
    const btnStyle = 'width: 240px; margin: 4px 50px';
</script>

<Button onclick={() => (visible = true)}>自定义对话框</Button>
<Modal bind:visible>
    {#snippet header()}{/snippet}
    <h3 style="text-align: center; font-size: 24px; margin: 40px">Semi Design New Features</h3>
    <List dataSource={data} split={false}>
        {#snippet item({ item: entry })}
            <ListItem>
                {#snippet header()}
                    <entry.icon style="font-size: 48px" />
                {/snippet}
                {#snippet main()}
                    <div>
                        <h6 style="margin: 0; font-size: 16px">{entry.title}</h6>
                        <p style="margin-top: 4px; color: var(--semi-color-text-1)">{entry.content}</p>
                    </div>
                {/snippet}
            </ListItem>
        {/snippet}
    </List>
    {#snippet footer()}
        <div style="text-align: center">
            <Button style={btnStyle} theme="solid" type="primary" onclick={() => (visible = false)}>Continue</Button>
            <Button style={btnStyle} theme="borderless" type="primary" onclick={() => (visible = false)}>Learn more features</Button>
        </div>
    {/snippet}
</Modal>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const close = () => {
        visible = false;
    };
</script>

<Button onclick={() => (visible = true)}>打开全屏弹窗</Button>
<Modal bind:visible fullScreen onOk={close} title="全屏对话框标题">
    <p>This is a full screen modal</p>
    <p>More content...</p>
</Modal>

<script lang="ts">
    import { IconSend } from '@fibrae/semi-icons-svelte';
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    const success = () => Modal.success({ title: 'This is a success message', content: 'bla bla bla...' });
    const info = () => Modal.info({ title: 'Here is some info', content: 'bla bla bla...' });
    const error = () => Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...' });
    const warning = () => Modal.warning({ title: 'Warning: be cautious ahead', content: 'bla bla bla...' });
    const confirm = () => Modal.confirm({ title: 'Are you sure ?', content: 'bla bla bla...' });
    const custom = () =>
        Modal.info({
            title: 'This is a custom modal',
            content: 'bla bla bla...',
            icon: sendIcon,
            cancelButtonProps: { theme: 'borderless' },
            okButtonProps: { theme: 'solid' },
        });
</script>

{#snippet sendIcon()}
    <IconSend />
{/snippet}

<div>
    <Button onclick={info}>Info</Button>
    <br />
    <br />
    <Button onclick={success}>Success</Button>
    <br />
    <br />
    <Button type="danger" onclick={error}>Error</Button>
    <br />
    <br />
    <Button type="warning" onclick={warning}>Warning</Button>
    <br />
    <br />
    <Button type="primary" onclick={confirm}>Confirm</Button>
    <br />
    <br />
    <Button onclick={custom}>Custom</Button>
</div>

<script lang="ts">
    import { Button, Modal } from '@fibrae/semi-ui-svelte';

    // Reads the contexts (ConfigProvider, LocaleProvider) of this component, so call it during initialization
    const modal = Modal.useModal();
</script>

<div>
    <Button onclick={() => modal.confirm({ title: 'This is a success message', content: 'Context consumer' })}>Confirm Modal</Button>
</div>

<script lang="ts">
    import { Button, dragMove, Modal } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
</script>

<div>
    <Button onclick={() => (visible = true)}>Open Modal</Button>
    <Modal {@attach dragMove({ positionStrategy: 'relative' })} bind:visible centered title="可拖拽Modal">
        <p>This is the content of a basic sidesheet.</p>
        <p>Here is more content...</p>
    </Modal>
</div>