Modal

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

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

<template>
    <Button @click="visible = true">打开弹窗</Button>
    <Modal v-model:visible="visible" closeOnEsc title="基本对话框" @afterClose="handleAfterClose" @cancel="handleCancel" @ok="handleOk">
        This is the content of a basic modal.
        <br />
        More content...
    </Modal>
</template>

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

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

<template>
    <Button @click="visible = true">打开弹窗</Button>
    <Modal v-model:visible="visible" closeOnEsc footerFill title="基本对话框" @afterClose="handleAfterClose" @cancel="handleCancel" @ok="handleOk">
        This is the content of a basic modal.
        <br />
        More content...
    </Modal>
</template>

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

    const visible = ref(false);
    const close = () => {
        visible.value = false;
    };
</script>

<template>
    <Button @click="visible = true">点击遮罩层不可关闭</Button>
    <Modal v-model:visible="visible" :maskClosable="false" title="对话框标题" @ok="close">
        <p>This is a modal that cannot be closed by clicking on the mask.</p>
        <p>More content...</p>
    </Modal>
</template>

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

    const visible = ref(false);
    const close = () => {
        visible.value = false;
    };
</script>

<template>
    <Button @click="visible = true">自定义按钮文字</Button>
    <Modal v-model:visible="visible" cancelText="No, thanks." okText="Sounds great!" title="自定义按钮文字" @ok="close">
        <p>This is a modal with customized button texts.</p>
        <p>More content...</p>
    </Modal>
</template>

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

    const visible = ref(false);
    const close = () => {
        visible.value = false;
    };
</script>

<template>
    <Button @click="visible = true">自定义按钮属性</Button>
    <Modal v-model:visible="visible" :cancelButtonProps="{ size: 'small', disabled: true }" :okButtonProps="{ size: 'small', type: 'warning' }" title="自定义按钮属性" @ok="close">
        <p>This is a modal with customized button props.</p>
        <p>More content...</p>
    </Modal>
</template>

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

    const visible = ref(false);
</script>

<template>
    <Button @click="visible = true">自定义页脚样式</Button>
    <Modal v-model:visible="visible" title="自定义页脚">
        <p>This is a modal with a customized footer.</p>
        <p>More content...</p>
        <template #footer>
            <Button type="primary" @click="visible = false">Yes, I Understand</Button>
        </template>
    </Modal>
</template>

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

    const visible = ref(false);
    const close = () => {
        visible.value = false;
    };
</script>

<template>
    <Button @click="visible = true">自定义对话框样式</Button>
    <Modal v-model:visible="visible" :bodyStyle="{ overflow: 'auto', height: '200px' }" centered title="自定义样式" @ok="close">
        <p :style="{ lineHeight: 1.8 }">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
        <p :style="{ lineHeight: 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>
</template>

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

    const visible = ref(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>

<template>
    <Button @click="visible = true">自定义对话框</Button>
    <Modal v-model:visible="visible">
        <template #header />
        <h3 :style="{ textAlign: 'center', fontSize: '24px', margin: '40px' }">Semi Design New Features</h3>
        <List :dataSource="data" :split="false">
            <template #item="{ item }">
                <List.Item>
                    <template #header>
                        <component :is="item.icon" :style="{ fontSize: '48px' }" />
                    </template>
                    <template #main>
                        <div>
                            <h6 :style="{ margin: 0, fontSize: '16px' }">{{ item.title }}</h6>
                            <p :style="{ marginTop: '4px', color: 'var(--semi-color-text-1)' }">{{ item.content }}</p>
                        </div>
                    </template>
                </List.Item>
            </template>
        </List>
        <template #footer>
            <div :style="{ textAlign: 'center' }">
                <Button :style="btnStyle" theme="solid" type="primary" @click="visible = false">Continue</Button>
                <Button :style="btnStyle" theme="borderless" type="primary" @click="visible = false"> Learn more features </Button>
            </div>
        </template>
    </Modal>
</template>

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

    const visible = ref(false);
    const close = () => {
        visible.value = false;
    };
</script>

<template>
    <Button @click="visible = true">打开全屏弹窗</Button>
    <Modal v-model:visible="visible" fullScreen title="全屏对话框标题" @ok="close">
        <p>This is a full screen modal</p>
        <p>More content...</p>
    </Modal>
</template>

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

    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: h(IconSend),
            cancelButtonProps: { theme: 'borderless' },
            okButtonProps: { theme: 'solid' },
        });
</script>

<template>
    <div>
        <Button @click="info">Info</Button>
        <br />
        <br />
        <Button @click="success">Success</Button>
        <br />
        <br />
        <Button type="danger" @click="error">Error</Button>
        <br />
        <br />
        <Button type="warning" @click="warning">Warning</Button>
        <br />
        <br />
        <Button type="primary" @click="confirm">Confirm</Button>
        <br />
        <br />
        <Button @click="custom">Custom</Button>
    </div>
</template>

<script setup lang="ts">
    import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
    import { Button, ConfigProvider, Modal } from '@fibrous/semi-ui-vue';

    const [modal, Holder] = Modal.useModal();
    const config = { title: 'This is a success message', content: 'Context consumer' };
</script>

<template>
    <ConfigProvider :locale="en_GB">
        <div>
            <Button @click="modal.confirm(config)">Confirm Modal</Button>
        </div>
        <Holder />
    </ConfigProvider>
</template>

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

    const visible = ref(false);
</script>

<template>
    <div>
        <Button @click="visible = true">Open Modal</Button>
        <Modal v-model:visible="visible" centered title="可拖拽Modal">
            <template #modal="{ modal }">
                <DragMove positionStrategy="relative">
                    <component :is="modal" />
                </DragMove>
            </template>
            <p>This is the content of a basic sidesheet.</p>
            <p>Here is more content...</p>
        </Modal>
    </div>
</template>