<template>
  <H1 top>
    Vexip UI
  </H1>
  <P>
    Vexip UI 提供了一系类开箱即用的组件。 每个组件几乎所有的
    <Strong> 属性默认值 </Strong>
    均可以通过注入配置快速修改（除了值和选项属性），轻松实现定制化。
    同时，组件代码的编写非常注重降低
    <Strong> 源码阅读 </Strong>
    的门槛，代码的排布尽可能的贴近平时的业务代码的习惯，避免让人眼花缭乱的封装。
  </P>
  <H2> 特性 </H2>
  <UL>
    <li>还算多的组件，为网站开发助力，希望能提高点效率</li>
    <li>开箱即用的高质量 Vue3 组件</li>
    <li>遵循直觉的设计，代码也尽可能写得直接一些，不要拐弯抹角</li>
    <li>使用组合式 Api 编写，性能与拓展性应该还不错</li>
    <li>700+ 单元测试，为组件的使用提供良好的基础稳定性</li>
  </UL>
  <Blockquote> 所有组件兼容现代浏览器，尽量保证近两三个版本的支持。 </Blockquote>
</template>

<script setup lang="ts">
const types = ['default', 'primary', 'info', 'success', 'warning', 'error'] as const
</script>

<template>
  <Space vertical>
    <Text v-for="textType in types" :key="textType" :type="textType">
      {{ textType.charAt(0).toLocaleUpperCase() + textType.substring(1) }}
    </Text>
    <Text disabled>
      Disabled
    </Text>
    <Text
      v-for="textType in types"
      :key="textType"
      mark
      :type="textType"
    >
      {{ `Mark ${textType.charAt(0).toLocaleUpperCase() + textType.substring(1)}` }}
    </Text>
    <Text
      v-for="textType in types"
      :key="textType"
      mark
      reversed
      :type="textType"
    >
      {{ `Mark ${textType.charAt(0).toLocaleUpperCase() + textType.substring(1)} Reverse` }}
    </Text>
    <Text code>
      Code
    </Text>
    <Text underline>
      Underline
    </Text>
    <Text delete>
      Delete
    </Text>
    <Text strong>
      Strong
    </Text>
    <Text italic>
      Italic
    </Text>
    <Text keyboard>
      Keyboard
    </Text>
  </Space>
</template>

<template>
  <Title :level="1" top>
    一级标题
  </Title>
  <Title :level="2">
    二级标题
  </Title>
  <Title :level="3">
    三级标题
  </Title>
  <Title :level="4">
    四级标题
  </Title>
  <Title :level="5">
    五级标题
  </Title>
  <Title :level="6">
    六级标题
  </Title>
  <H5 type="success">
    有类型的标题
  </H5>
  <H5 thin>
    细的标题
  </H5>
</template>

<template>
  <div style="position: relative; padding-inline-start: 16px">
    <div
      :style="{
        position: 'absolute',
        top: '0',
        bottom: '0',
        insetInlineStart: '0',
        width: '16px',
        backgroundColor: 'var(--vxp-fill-color-humble)'
      }"
    ></div>
    <H4 marker top>
      标题
    </H4>
    <H4 marker type="success">
      标题
    </H4>
    <H4 marker aligned type="error">
      标题
    </H4>
    <H4 marker aligned marker-type="primary">
      标题
    </H4>
    <H4 marker type="info" marker-type="warning">
      标题
    </H4>
    <H4 marker marker-type="pink">
      标题
    </H4>
  </div>
</template>