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

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

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

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

<script lang="ts">
    import { IconLink } from '@fibrae/semi-icons-svelte';
    import { TypographyText } from '@fibrae/semi-ui-svelte';
</script>

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

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

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

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

<div>
    <TypographyNumeral component="div" precision={1}>
        <p>点赞量：1.6111e1 K</p>
    </TypographyNumeral>

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

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

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

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

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

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

    const 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>

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

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

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

<script lang="ts">
    import { IconSetting } from '@fibrae/semi-icons-svelte';
    import { Button, TextArea, Toast, TypographyNumeral, TypographyParagraph, TypographyText } from '@fibrae/semi-ui-svelte';

    // fixed so the server render and the browser agree
    const timestamp = 1700000000;
</script>

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

<script lang="ts">
    import { Tooltip, TypographyParagraph, TypographyText, TypographyTitle } from '@fibrae/semi-ui-svelte';
</script>

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

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

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