feat(ui/col): add a direction API for col (#716)

varletjs · Oct 7, 2022 · 6a30c8e · 6a30c8e
1 parent 5981cc8
commit 6a30c8e
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/col/Col.vue b/packages/varlet-ui/src/col/Col.vue
@@ -14,6 +14,7 @@
       )
     "
     :style="{
+      flexDirection: direction,
       paddingLeft: toSizeUnit(padding.left),
       paddingRight: toSizeUnit(padding.right),
     }"
@@ -43,7 +44,6 @@ export default defineComponent({
     const span: ComputedRef<number> = computed(() => toNumber(props.span))
     const offset: ComputedRef<number> = computed(() => toNumber(props.offset))
     const { row, bindRow } = useRow()
-
     const colProvider: ColProvider = {
       setPadding(pad: ColPadding) {
         padding.value = pad

diff --git a/packages/varlet-ui/src/col/docs/zh-CN.md b/packages/varlet-ui/src/col/docs/zh-CN.md
@@ -6,6 +6,7 @@
 | --- | --- | --- | --- | 
 | `span` | 列占据的栅格数 | _number \| string_ | `24` |
 | `offset` | 列偏移的栅格数 | _number \| string_ | `0` |
+| `direction` | 布局方向 可选值为 row column |  _string_ | `row` |
 | `xs`     | `<768px` 响应式栅格数或者栅格属性对象  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |
 | `sm`     | `≥768px` 响应式栅格数或者栅格属性对象  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |
 | `md`     | `≥992px` 响应式栅格数或者栅格属性对象  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |

diff --git a/packages/varlet-ui/src/col/props.ts b/packages/varlet-ui/src/col/props.ts
@@ -1,6 +1,8 @@
 import type { PropType } from 'vue'
 import { SizeDescriptor } from './provide'
 
+export type ColDirection = 'row' | 'column'
+
 export const props = {
   span: {
     type: [String, Number],
@@ -10,6 +12,10 @@ export const props = {
     type: [String, Number],
     default: 0,
   },
+  direction: {
+    type: String as PropType<ColDirection>,
+    default: 'row',
+  },
   onClick: {
     type: Function as PropType<(e: Event) => void>,
   },

diff --git a/packages/varlet-ui/src/row/Row.vue b/packages/varlet-ui/src/row/Row.vue
@@ -28,7 +28,6 @@ export default defineComponent({
   props,
   setup(props) {
     const { cols, bindCols, length } = useCols()
-
     const average: ComputedRef<number> = computed(() => {
       const gutter: number = toPxNum(props.gutter)
       return gutter / 2

diff --git a/packages/varlet-ui/src/row/docs/en-US.md b/packages/varlet-ui/src/row/docs/en-US.md
@@ -252,6 +252,7 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 |----------| --------------------------------------------------- |----------| ------- |
 | `span`   | Number of grids occupied by columns                 | _string \| number_                                                          | `24`    |
 | `offset` | Number of grids for column offsets                  | _string \| number_                                                          | `0`     |
+| `direction` | The optional value of layout direction is row column |  _string_ | `row` |
 | `xs`     | `<768px` Responsive columns or column props object  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-`     |
 | `sm`     | `≥768px` Responsive columns or column props object  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-`     |
 | `md`     | `≥992px` Responsive columns or column props object  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-`     |

diff --git a/packages/varlet-ui/src/row/docs/zh-CN.md b/packages/varlet-ui/src/row/docs/zh-CN.md
@@ -242,6 +242,7 @@ import ObjectExample from '../example/ResponsiveObject.vue'
 |----------|--------------------------|----------|---------|
 | `span`   | 列占据的栅格数                  | _string \| number_ | `24` |
 | `offset` | 列偏移的栅格数                  | _string \| number_ | `0` |
+| `direction` | 布局方向 可选值为 row column |  _string_ | `row` |
 | `xs`     | `<768px` 响应式栅格数或者栅格属性对象  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |
 | `sm`     | `≥768px` 响应式栅格数或者栅格属性对象  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |
 | `md`     | `≥992px` 响应式栅格数或者栅格属性对象  | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |

diff --git a/packages/varlet-ui/src/row/example/index.vue b/packages/varlet-ui/src/row/example/index.vue
@@ -17,12 +17,13 @@ watchLang(use)
     <var-col :span="8">span: 8</var-col>
     <var-col :span="8">span: 8</var-col>
     <var-col :span="8">span: 8</var-col>
+    <var-col :span="8">span: 8</var-col>
   </var-row>
 
   <app-type>{{ pack.offset }}</app-type>
   <var-row>
     <var-col :span="16" :offset="8">offset: 8 span: 16</var-col>
-    <var-col :span="8">span: 8</var-col>
+    <var-col :span="7">span: 7</var-col>
     <var-col :span="8">span: 8</var-col>
     <var-col :span="8">span: 8</var-col>
   </var-row>

diff --git a/packages/varlet-ui/src/row/props.ts b/packages/varlet-ui/src/row/props.ts
@@ -1,5 +1,7 @@
 import type { PropType } from 'vue'
 
+export type RowDirection = 'row' | 'column'
+
 function justifyValidator(justify: string) {
   return ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'].includes(justify)
 }
@@ -26,4 +28,8 @@ export const props = {
   onClick: {
     type: Function as PropType<(e: Event) => void>,
   },
+  direction: {
+    type: String as PropType<RowDirection>,
+    default: 'row',
+  },
 }
diff --git a/packages/varlet-ui/types/col.d.ts b/packages/varlet-ui/types/col.d.ts
@@ -8,6 +8,7 @@ export type SizeDescriptor = {
 export interface ColProps extends BasicAttributes {
   span?: string | number
   offset?: string | number
+  direction?: string
   xs?: string | number | SizeDescriptor | undefined
   sm?: string | number | SizeDescriptor | undefined
   md?: string | number | SizeDescriptor | undefined

diff --git a/packages/varlet-ui/types/row.d.ts b/packages/varlet-ui/types/row.d.ts
@@ -8,6 +8,7 @@ export interface RowProps extends BasicAttributes {
   gutter?: string | number
   justify?: RowJustify
   align?: RowAlign
+  direction?: string
   onClick?: (e: Event) => void
 }