feat: add Typography components (#146)

* feat: create text component

* feat: components and docs

* test: add tests

README.md

@@ -23,9 +23,9 @@
 
 **English** | [中文](./README.zh-CN.md)
 
-Vexip UI provides a series of out-of-the-box components.
+Vexip UI provides a series of out-of-box components.
 
-This library is using base on vue 3.0 with only using **composition api**, and design and code components in the traditional way by Vue possible, fully **TypeScript** (not AnyScript).
+This library is using base on vue 3.0 with using **composition api**, and design and code components in the traditional way by Vue possible, fully **TypeScript** (not AnyScript).
 
 Almost all the **default value of props** for each component can be quickly modified by configuration (except value and options props), for easy customization.
 
@@ -35,10 +35,10 @@ There are currently **70+** components, many you can see everywhere and a few ma
 
 ## Features
 
-- Not less components and functions for website development, hoping may improve efficiency
-- Vue3 components of out-of-the-box (may not help if you still using Vue2)
-- Configurable **default value of props** for easy customization
-- entirely using the composition api, the performance and extensibility should be good
+- Not less components for website development, hoping may improve efficiency
+- Out-of-box and high quality **Vue3** components
+- Follow the intuitive design, and write as directly as possible
+- Using the composition api, the performance and extensibility should be good
 - **700+** unit tests to provide good basic stability for component usage
 
 ## Install

README.zh-CN.md

@@ -25,7 +25,7 @@
 
 Vexip UI 提供了一系列开箱即用的组件。
 
-该组件库使用全新的 **组合式 Api** 编写，并尽可能采用 Vue 传统的方式设计和编写组件，全量的 **TypeScript**（不是 AnyScript）。
+组件库使用全新的 **组合式 Api** 编写，并尽可能采用 Vue 传统的方式设计和编写组件，全量的 **TypeScript**（不是 AnyScript）。
 
 每个组件几乎所有的 **属性默认值** 均可以通过注入配置快速修改（除了值和选项属性），轻松实现定制化。
 
@@ -35,10 +35,10 @@ Vexip UI 提供了一系列开箱即用的组件。
 
 ## 特性
 
-- 还算多的组件和功能，为网站开发助力，希望能提高点效率
+- 还算多的组件，为网站开发助力，希望能提高点效率
 - 开箱即用 **Vue3** 组件（如果你还在用 Vue2，这里可能帮不到你）
-- 可配置的 **属性默认值**，轻松实现定制化
-- 完全使用组合式 Api 编写，性能与拓展性应该还不错
+- 遵循直觉的设计，代码也尽可能写得直接一些，不要拐弯抹角
+- 使用组合式 Api 编写，性能与拓展性应该还不错
 - **700+** 单元测试，为组件的使用提供良好的基础稳定性
 
 ## 安装

components/index.ts

@@ -102,6 +102,8 @@ import { Viewer } from './viewer'
 import { VirtualList } from './virtual-list'
 import { Wheel } from './wheel'
 
+import { Title, Text, Blockquote, OL, UL, H1, H2, H3, H4, H5, H6, P, Strong } from './typography'
+
 import { buildInstall } from './create'
 
 export type {
@@ -219,7 +221,21 @@ const components = [
   Loading,
   Message,
   Notice,
-  Toast
+  Toast,
+  // typography
+  Title,
+  Text,
+  Blockquote,
+  OL,
+  UL,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Strong
 ]
 
 export { buildInstall }
@@ -322,6 +338,7 @@ export * from './toast'
 export * from './tooltip'
 export * from './transfer'
 export * from './tree'
+export * from './typography'
 export * from './upload'
 export * from './upload-file'
 export * from './upload-list'

components/space/helper.ts

@@ -12,13 +12,13 @@ export function flatVNodes(children: VNodeNormalizedChildren) {
     if (vnode === null) continue
 
     if (Array.isArray(vnode)) {
-      loop.push(...vnode)
+      loop.unshift(...vnode)
     }
 
     if (!isVNode(vnode) || vnode.type === Comment) continue
 
     if (vnode.type === Fragment && Array.isArray(vnode.children)) {
-      loop.push(vnode.children)
+      loop.unshift(vnode.children)
     } else if (typeof vnode === 'string' || typeof vnode === 'number') {
       result.push(createTextVNode(vnode))
     } else {

components/typography/blockquote.tsx

@@ -0,0 +1,30 @@
+import { defineComponent, computed } from 'vue'
+import { useNameHelper, useProps } from '@vexip-ui/config'
+
+import type { PropType } from 'vue'
+import type { TypographyType } from './symbol'
+
+export default defineComponent({
+  name: 'Blockquote',
+  props: {
+    type: String as PropType<TypographyType>
+  },
+  emits: [],
+  setup(_props, { slots }) {
+    const props = useProps('blockquote', _props, {
+      type: 'default'
+    })
+
+    const nh = useNameHelper('blockquote')
+
+    const className = computed(() => {
+      return {
+        [nh.b()]: true,
+        [nh.bs('vars')]: true,
+        [nh.bm(props.type)]: props.type !== 'default'
+      }
+    })
+
+    return () => <blockquote class={className.value}>{slots.default?.()}</blockquote>
+  }
+})

components/typography/h.tsx

@@ -0,0 +1,43 @@
+import { defineComponent } from 'vue'
+import Title from './title'
+import { useProps, booleanProp } from '@vexip-ui/config'
+
+import type { PropType } from 'vue'
+import type { TypographyType, TitleLevel } from './symbol'
+
+function createHComponent(level: TitleLevel) {
+  return defineComponent({
+    name: `H${level}`,
+    props: {
+      type: String as PropType<TypographyType>,
+      top: booleanProp,
+      marker: booleanProp,
+      aligned: booleanProp,
+      thin: booleanProp,
+      markerType: String as PropType<TypographyType>
+    },
+    emits: [],
+    setup(_props, { slots }) {
+      const props = useProps('text', _props, {
+        type: 'default',
+        top: false,
+        marker: false,
+        aligned: false,
+        thin: false
+      })
+
+      return () => (
+        <Title {...props} level={level}>
+          {slots.default?.()}
+        </Title>
+      )
+    }
+  })
+}
+
+export const H1 = createHComponent(1)
+export const H2 = createHComponent(2)
+export const H3 = createHComponent(3)
+export const H4 = createHComponent(4)
+export const H5 = createHComponent(5)
+export const H6 = createHComponent(6)

components/typography/index.ts

@@ -0,0 +1,9 @@
+export { default as Title } from './title'
+export { default as Text } from './text'
+export { default as Blockquote } from './blockquote'
+export { default as OL } from './ol'
+export { default as UL } from './ul'
+export { H1, H2, H3, H4, H5, H6 } from './h'
+export { default as P } from './p'
+export { default as Strong } from './strong'
+export type { TypographyType, TitleLevel } from './symbol'

components/typography/ol.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue'
+import { useNameHelper, useProps } from '@vexip-ui/config'
+
+import type { PropType } from 'vue'
+
+export default defineComponent({
+  name: 'OL',
+  props: {
+    type: String as PropType<'a' | 'A' | 'i' | 'I' | '1'>
+  },
+  emits: [],
+  setup(_props, { slots }) {
+    const props = useProps('text', _props, {
+      type: '1'
+    })
+
+    const nh = useNameHelper('ol')
+
+    return () => (
+      <ol class={nh.b()} type={props.type}>
+        {slots.default?.()}
+      </ol>
+    )
+  }
+})

components/typography/p.tsx

@@ -0,0 +1,43 @@
+import { defineComponent } from 'vue'
+import Text from './text'
+import { useProps, booleanProp } from '@vexip-ui/config'
+
+import type { PropType } from 'vue'
+import type { TypographyType } from './symbol'
+
+export default defineComponent({
+  name: 'P',
+  props: {
+    type: String as PropType<TypographyType>,
+    delete: booleanProp,
+    strong: booleanProp,
+    italic: booleanProp,
+    underline: booleanProp,
+    mark: booleanProp,
+    disabled: booleanProp,
+    keyboard: booleanProp,
+    thin: booleanProp,
+    reversed: booleanProp
+  },
+  emits: [],
+  setup(_props, { slots }) {
+    const props = useProps('text', _props, {
+      type: 'default',
+      delete: false,
+      strong: false,
+      italic: false,
+      underline: false,
+      mark: false,
+      disabled: false,
+      keyboard: false,
+      thin: false,
+      reversed: false
+    })
+
+    return () => (
+      <Text {...props} tag={'p'}>
+        {slots.default?.()}
+      </Text>
+    )
+  }
+})

components/typography/strong.tsx

@@ -0,0 +1,41 @@
+import { defineComponent } from 'vue'
+import Text from './text'
+import { useProps, booleanProp } from '@vexip-ui/config'
+
+import type { PropType } from 'vue'
+import type { TypographyType } from './symbol'
+
+export default defineComponent({
+  name: 'Strong',
+  props: {
+    type: String as PropType<TypographyType>,
+    delete: booleanProp,
+    italic: booleanProp,
+    underline: booleanProp,
+    mark: booleanProp,
+    disabled: booleanProp,
+    keyboard: booleanProp,
+    thin: booleanProp,
+    reversed: booleanProp
+  },
+  emits: [],
+  setup(_props, { slots }) {
+    const props = useProps('text', _props, {
+      type: 'default',
+      delete: false,
+      italic: false,
+      underline: false,
+      mark: false,
+      disabled: false,
+      keyboard: false,
+      thin: false,
+      reversed: false
+    })
+
+    return () => (
+      <Text {...props} tag={'strong'} strong>
+        {slots.default?.()}
+      </Text>
+    )
+  }
+})

components/typography/style.ts

@@ -0,0 +1 @@
+import '@/style/typography.scss'

components/typography/symbol.ts

@@ -0,0 +1,2 @@
+export type TypographyType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
+export type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6