feat(ui/space): var-space complete

packages/varlet-ui/src/space/Space.tsx

@@ -0,0 +1,51 @@
+import { defineComponent } from 'vue'
+import { props, TSize } from './props'
+import './space.less'
+import { toPxNum } from '../utils/elements'
+
+const sizefilter = (size: TSize) => {
+  if (typeof size === 'string') {
+    if (!size.match(/\d/g)) return [size, 'class']
+    return [`${toPxNum(size)}px`, 'style']
+  }
+  if (typeof size === 'number') return [`${toPxNum(size)}px`, 'style']
+  if (Array.isArray(size)) {
+    return [`${toPxNum(size[0])}px ${toPxNum(size[1])}px`, 'style']
+  }
+  return ['normal', 'class']
+}
+
+export default defineComponent({
+  name: 'VarSpace',
+  props,
+  setup(props, { slots }) {
+    const [size, sizeUseto] = sizefilter(props.size)
+
+    const renderSpace = (slots.default?.() ?? []).map((child) => (
+      <div
+        class={['var-space__item', sizeUseto === 'class' ? `var-space__item--${size}` : '']}
+        style={[sizeUseto === 'style' ? `margin:${size}` : '']}
+      >
+        {child}
+      </div>
+    ))
+    return () => {
+      return (
+        <>
+          <div
+            class={[
+              'var-space',
+              props.inline ? 'var-space--inline' : '',
+              `var-space--${props.direction}`,
+              `var-space--justifyContent__${props.justify}`,
+              props.align ? `var-space--${props.align}` : '',
+              `var-space--${props.wrap ? 'warp' : 'nowarp'}`,
+            ]}
+          >
+            {renderSpace}
+          </div>
+        </>
+      )
+    }
+  },
+})

packages/varlet-ui/src/space/docs/en-US.md

@@ -0,0 +1,80 @@
+# Space 
+
+### Intro
+
+The component library provides two auxiliary layout components,
+`<var-space>`,
+so that you can layout more efficiently.
+
+### Install
+
+```js
+import { createApp } from 'vue'
+import { Space } from '@varlet/ui'
+
+createApp().use(Space)
+```
+
+### Basic use
+
+```html
+<var-space>
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+</var-space>
+```
+
+### Vertical
+
+```html
+<var-space direction="column">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+</var-space>
+```
+
+### Space Between
+
+```html
+<var-space :size="['30px','10px']">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+</var-space>
+```
+
+### Right Align
+
+```html
+<var-space justify="end" >
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+</var-space>
+```
+
+## API
+
+### Space Props
+
+|     Prop      |      Description     |     Type    |    Default    |
+| ------------- | ------------ | ---------- | ----------- |
+|    `align`   |   Vertical arrangement, Can be set to`stretch` `center` `start` `end` `baseline` | _string_   |   `-`|
+|`justify`|Horizontal arrangement, Can be set to `start` `end` `center` `space-around` `space-between`|_string_|`start`|
+|     `size`   |   spacing, Can be set to `mini` `small` `normal` `large`或`[垂直间距, 水平间距]`(Support length unit)| _string_\|_number_\|[_string_\|_number_,_string_\|_number_]|`normal`|
+|`wrap`|Whether to exceed the line break|_boolean_|`true`|
+|`direction`|Layout direction, Can be set to `row` `column`|_string_|`row`|
+|`inline`|Is it an inline element|_boolean_|`false`|
+
+
+### Style Variables
+Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
+
+| Variable | Default |
+| --- | --- |
+| `--space-mini-margin`|`4px`|
+| `--space-small-margin`|`4px 6px`|
+| `--space-normal-margin`|`8px 12px`|
+| `--space-large-margin`|`12px 20px`|
+

packages/varlet-ui/src/space/docs/zh-CN.md

@@ -0,0 +1,81 @@
+# Space 间隔
+
+### 介绍
+
+组件库提供了`<var-space>`布局的组件，使您更有效率的进行flex布局。
+
+### 引入
+
+```js
+import { createApp } from 'vue'
+import { Space } from '@varlet/ui'
+
+createApp().use(Space)
+```
+
+### 基本用法
+
+```html
+<var-space>
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+</var-space>
+```
+
+### 垂直
+
+```html
+<var-space direction="column">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+</var-space>
+```
+
+### 间隙
+
+```html
+<var-space :size="['30px','10px']">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+</var-space>
+```
+
+### 靠右
+
+```html
+<var-space justify="end" >
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+</var-space>
+```
+
+## API
+
+### 属性
+
+### Space Props
+
+|     参数      |      说明     |     类型    |    默认值    |
+| ------------- | ------------ | ---------- | ----------- |
+|    `align`   |   垂直排列方式 可选值为`stretch` `center` `start` `end` `baseline` | _string_   |   `-`|
+|`justify`|水平排列方式 可选值为`start` `end` `center` `space-around` `space-between`|_string_|`start`|
+|     `size`   |   间距，可选值为`mini` `small` `normal` `large`或`[垂直间距, 水平间距]`(支持长度单位)| _string_\|_number_\|[_string_\|_number_,_string_\|_number_]|`normal`|
+|`wrap`|是否超出换行|_boolean_|`true`|
+|`direction`|布局方向 可选值为`row` `column`|_string_|`row`|
+|`inline`|是否为行内元素|_boolean_|`false`|
+
+
+### 样式变量
+
+以下为组件使用的css变量,可以使用[StyleProvider组件](#/zh-CN/style-provider)进行样式定制
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--space-mini-margin`|`4px`|
+| `--space-small-margin`|`4px 6px`|
+| `--space-normal-margin`|`8px 12px`|
+| `--space-large-margin`|`12px 20px`|
+

packages/varlet-ui/src/space/example/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <app-type>{{ pack.baseUse }}</app-type>
+  <var-space>
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+  </var-space>
+
+  <app-type>{{ pack.vertical }}</app-type>
+  <var-space direction="column">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+  </var-space>
+
+  <app-type>{{ pack.space }}</app-type>
+  <var-space :size="['30px', '10px']">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+    <var-button>Button3</var-button>
+  </var-space>
+
+  <app-type>{{ pack.rightAlign }}</app-type>
+  <var-space justify="end">
+    <var-button>Button1</var-button>
+    <var-button>Button2</var-button>
+  </var-space>
+</template>
+<script>
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import VarSpace from '..'
+import VarButton from '../../button'
+import { pack, use } from './locale'
+import { watchLang } from '@varlet/cli/site/utils'
+
+export default {
+  components: { VarSpace, VarButton, AppType },
+  setup() {
+    watchLang(use)
+    return {
+      pack,
+    }
+  },
+}
+</script>

packages/varlet-ui/src/space/example/locale/en-US.ts

@@ -0,0 +1,6 @@
+export default {
+  baseUse: 'Basic use',
+  vertical: 'Vertical',
+  space: 'Space Between',
+  rightAlign: 'Right Align',
+}

packages/varlet-ui/src/space/example/locale/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)

packages/varlet-ui/src/space/example/locale/zh-CN.ts

@@ -0,0 +1,6 @@
+export default {
+  baseUse: '基本用法',
+  vertical: '垂直',
+  space: '间隙',
+  rightAlign: '靠右',
+}

packages/varlet-ui/src/space/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Space from './Space'
+
+Space.install = function (app: App) {
+  app.component(Space.name, Space)
+}
+
+export const _SpaceComponent = Space
+
+export default Space

packages/varlet-ui/src/space/props.ts

@@ -0,0 +1,48 @@
+import type { PropType } from 'vue'
+
+const sizeValidator = (size: TSize): boolean => {
+  if (typeof size === 'string') {
+    return ['mini', 'small', 'normal', 'large'].includes(size) || !!size.match(/\d/g)
+  }
+  if (typeof size === 'number') return true
+  return Array.isArray(size) && size.every((v) => typeof v === 'number' || typeof v === 'string')
+}
+const justifyValidator = (justify: string): boolean => {
+  return ['start', 'end', 'center', 'space-around', 'space-between'].includes(justify)
+}
+
+type TAlign = 'stretch' | 'center' | 'start' | 'end' | 'baseline' | 'initial' | 'inherit'
+
+type TDirection = 'row' | 'column'
+
+type TJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'
+
+export type TSize = 'mini' | 'small' | 'normal' | 'large' | number | string | [number | string, number | string]
+
+export const props = {
+  align: {
+    type: String as PropType<TAlign>,
+  },
+  size: {
+    type: [String, Number, Array] as PropType<TSize>,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  wrap: {
+    type: Boolean,
+    default: true,
+  },
+  direction: {
+    type: String as PropType<TDirection>,
+    default: 'row',
+  },
+  justify: {
+    type: String as PropType<TJustify>,
+    default: 'start',
+    validator: justifyValidator,
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+}