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

    const { Title } = Typography;
</script>

<template>
    <div>
        <Title style="margin: 8px 0">h1. Semi Design</Title>
        <Title :heading="2" style="margin: 8px 0">h2. Semi Design</Title>
        <Title :heading="3" style="margin: 8px 0">h3. Semi Design</Title>
        <Title :heading="4" style="margin: 8px 0">h4. Semi Design</Title>
        <Title :heading="5" style="margin: 8px 0">h5. Semi Design</Title>
        <Title :heading="6" style="margin: 8px 0">h6. Semi Design</Title>
    </div>
</template>

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

    const { Text } = Typography;
</script>

<template>
    <div>
        <Text>Text</Text>
        <br />
        <br />
        <Text type="secondary">Secondary</Text>
        <br />
        <br />
        <Text type="tertiary">Tertiary v>=1.2.0</Text>
        <br />
        <br />
        <Text type="quaternary">Quaternary v>=1.2.0</Text>
        <br />
        <br />
        <Text type="warning">Warning</Text>
        <br />
        <br />
        <Text type="danger">Danger</Text>
        <br />
        <br />
        <Text type="success">Success v>=1.7.0</Text>
        <br />
        <br />
        <Text disabled>Disabled</Text>
        <br />
        <br />
        <Text mark>Default Mark</Text>
        <br />
        <br />
        <Text code>Example Code</Text>
        <br />
        <br />
        <Text underline>Underline</Text>
        <br />
        <br />
        <Text delete>Deleted</Text>
        <br />
        <br />
        <Text strong>Strong</Text>
    </div>
</template>

<script setup lang="ts">
    import { IconLink } from '@fibrous/semi-icons-vue';
    import { Typography } from '@fibrous/semi-ui-vue';

    const { Text } = Typography;
</script>

<template>
    <div>
        <Text :link="{ href: 'https://semi.design/' }">链接文本</Text>
        <br />
        <br />
        <Text :link="{ href: 'https://semi.design/' }">打开网站</Text>
        <br />
        <br />
        <Text link underline>
            带下划线的网页链接
            <template #icon>
                <IconLink />
            </template>
        </Text>
    </div>
</template>

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

    const { Paragraph, Title } = Typography;
</script>

<template>
    <div>
        <Title :heading="5">默认行距</Title>
        <Paragraph> Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </Paragraph>
        <br />
        <Title :heading="5">宽松行距</Title>
        <Paragraph spacing="extended"> Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </Paragraph>
    </div>
</template>

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

    const { Numeral } = Typography;
</script>

<template>
    <div>
        <Numeral component="div" :precision="1">
            <p>点赞量：1.6111e1 K</p>
        </Numeral>

        <p>播放量:<Numeral :precision="1" rule="numbers">2.4444e2</Numeral>K</p>

        <Numeral component="div" :precision="2" rule="percentages" style="margin-bottom: 12px">
            <p>好评率: 0.915</p>
        </Numeral>

        <Numeral rule="percentages" style="margin-bottom: 12px">这场比赛我的胜率是0.6，输的概率是0.4</Numeral>

        <Numeral component="div" :precision="2" rule="bytes-decimal" truncate="floor">
            <p>已使用: 1000</p>
            <p>未使用: {{ 1024 * 1000 }}</p>
        </Numeral>

        <Numeral component="div" :precision="2" rule="bytes-binary" truncate="floor">
            <p>已使用: 1024</p>
            <p>未使用: {{ 2e12 }}</p>
        </Numeral>
    </div>
</template>

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

    const { Numeral } = Typography;

    function parserTCH(oldVal: string) {
        return oldVal
            .split(' ')
            .map((item) => (Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item))
            .join(' ');
    }

    const infos = [
        { type: 'Stars', min: '7100' },
        { type: 'Fork', min: '560' },
        { type: 'Downloads', min: '5000000' },
        { type: 'Contributors', min: '100' },
    ];
</script>

<template>
    <div>
        <Numeral component="div" :parser="parserTCH">
            Semi Design 重视我们的用户，加入并助力我们不断完善
            <p v-for="item in infos" :key="item.min">
                {{ item.type }}：<b style="color: var(--semi-violet-5)">{{ item.min }}</b>
            </p>
        </Numeral>
        <br />
        <Numeral :link="{ href: 'https://semi.design', target: '_blank' }" :parser="parserTCH"> 现已服务 {{ 1e5 }} 用户，前往官网 &gt;&gt; </Numeral>
    </div>
</template>

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

    const { Paragraph, Text } = Typography;
</script>

<template>
    <div>
        <Text>正常文本</Text>
        <Paragraph spacing="extended"> Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </Paragraph>
        <br />
        <Text size="small">小文本</Text>
        <Paragraph size="small"> Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </Paragraph>
        <br />
        <Text size="small">
            这是一段文本，样式为 small
            <Text link size="inherit">这是一段链接，设置 size 为 inherit 继承外部样式设置</Text>
        </Text>
    </div>
</template>

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

    const { Paragraph, Text, Numeral } = Typography;
    // fixed so the server render and the browser agree
    const timestamp = 1700000000;
</script>

<template>
    <div>
        <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
        <Paragraph :copyable="{ content: 'Hello, Semi Design!' }">点击复制文本。</Paragraph>
        <Paragraph copyable @copy="Toast.success({ content: '复制文本成功' })">点击右边的图标复制文本。</Paragraph>
        时间戳:
        <Numeral copyable truncate="ceil" underline>{{ timestamp }}s</Numeral>
        <Paragraph copyable>
            自定义复制节点
            <template #copyIcon>
                <IconSetting style="color: var(--semi-color-link)" />
            </template>
        </Paragraph>
        <Paragraph :copyable="{ content: 'Custom render!' }">
            自定义复制渲染
            <template #copyAction="{ copied, copy, config }">
                <Button size="small" @click="copy">
                    <span>{{ copied ? '复制成功' : `点击复制:${config.content}` }}</span>
                </Button>
            </template>
        </Paragraph>
        <br />
        <br />
        <Text id="typography-copyable-paste" type="secondary">粘贴区域：</Text>
        <br />
        <TextArea aria-labelledby="typography-copyable-paste" autosize :rows="3" style="width: 320px; margin-top: 4px" />
    </div>
</template>

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

    const { Paragraph, Title, Text } = Typography;
</script>

<template>
    <div>
        <Title :ellipsis="{ showTooltip: true }" :heading="5" style="width: 250px">是一个很长很长很长很长5号标题</Title>
        <br />
        <Text :ellipsis="{ showTooltip: true }" style="width: 150px">
            可以自定义浮层里的展示内容试试看吧
            <template #ellipsisContent>这是自定义要展示的内容</template>
        </Text>
        <br />
        <Text :ellipsis="{ showTooltip: true, pos: 'middle' }" link style="width: 150px">是一个很长很长很长很长的链接</Text>
        <br />
        <Paragraph :ellipsis="{ suffix: '小尾巴' }" style="width: 300px"> 有后缀的情况：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。 </Paragraph>
        <br />
        <Paragraph :ellipsis="{ rows: 3 }" style="width: 300px"> 这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </Paragraph>
        <br />
        <Paragraph :ellipsis="{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: '300px' } } } }" style="width: 300px">
            多行截断，展示 Popover：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
        </Paragraph>
        <br />
        <Paragraph :ellipsis="{ rows: 3, expandable: true, collapsible: true, collapseText: '折叠我吧' }" style="width: 300px" @expand="(expanded, e) => console.log(expanded, e)">
            支持展开和折叠：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
        </Paragraph>
        <br />
        <Text :ellipsis="{ showTooltip: true, pos: 'middle' }" style="width: 150px; word-break: break-word">
            sssssssssssssssssssssssss
            <template #ellipsisContent>全英文设置了word-break</template>
        </Text>
        <br />
        <br />
        <Title :ellipsis="{ showTooltip: true }" :heading="5" style="width: 250px">
            这是一个自定义弹出层组件的省略文本，背景色是蓝色
            <template #ellipsisTooltip="{ content, trigger }">
                <Tooltip style="background-color: var(--semi-color-primary)">
                    <component :is="trigger" />
                    <template #content>{{ content }}</template>
                </Tooltip>
            </template>
        </Title>
    </div>
</template>

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

    const { Text } = Typography;
</script>

<template>
    <div>
        <Text :ellipsis="{ showTooltip: true }" style="width: 150px">
            有问题的超长文本发生截断时可按需进行自定义配置
            <template #ellipsisContent>架构|Semi-inf|graph.cheet.relation</template>
        </Text>
        <br />
        <Text :ellipsis="{ showTooltip: { opts: { class: 'components-typography-demo' } } }" style="width: 150px">
            覆盖类名超长文本发生截断时可使用类名覆盖进行自定义配置
            <template #ellipsisContent>架构|Semi-inf|graph.cheet.relation</template>
        </Text>
        <br />
        <Text :ellipsis="{ showTooltip: { opts: { style: { wordBreak: 'break-all' } } } }" style="width: 150px">
            覆盖style超长文本发生截断时可使用style进行自定义配置
            <template #ellipsisContent>架构|Semi-inf|graph.cheet.relation</template>
        </Text>
    </div>
</template>