feat(ui/layout): add component layout (#8)

packages/varlet-vue2-ui/src/col/Col.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="var-col var--box"
+    :class="[
+      span ? `var-col--span-${span}` : null,
+      offset ? `var-col--offset-${offset}` : null,
+      ...getSize('xs', xs),
+      ...getSize('sm', sm),
+      ...getSize('md', md),
+      ...getSize('lg', lg),
+      ...getSize('xl', xl),
+    ]"
+    :style="{
+      paddingLeft: toSizeUnit(padding.left),
+      paddingRight: toSizeUnit(padding.right),
+    }"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '../utils/create'
+import { isPlainObject } from '../utils/shared'
+import { props } from './props'
+import { toSizeUnit } from '../utils/elements'
+import { createChildrenMixin } from '../utils/mixins/relation'
+
+export default defineComponent({
+  name: 'VarCol',
+  data: () => ({
+    padding: { left: 0, right: 0 },
+    toSizeUnit,
+  }),
+  mixins: [createChildrenMixin('row', { childrenKey: 'cols' })],
+  props,
+  watch: {
+    span: {
+      handler() {
+        this.row.computePadding()
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleClick(e) {
+      const { getListeners } = this
+      const { onClick } = getListeners()
+
+      if (!onClick) {
+        return
+      }
+      onClick(e)
+    },
+    setPadding(pad) {
+      this.padding = pad
+    },
+    getSize(mode, size) {
+      const classes = []
+
+      if (!size) {
+        return classes
+      }
+
+      if (isPlainObject(size)) {
+        const { span, offset } = size
+        span && classes.push(`var-col--span-${mode}-${span}`)
+        offset && classes.push(`var-col--offset-${mode}-${offset}`)
+      } else {
+        classes.push(`var-col--span-${mode}-${size}`)
+      }
+
+      return classes
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './col';
+</style>

packages/varlet-vue2-ui/src/col/col.less

@@ -0,0 +1,49 @@
+.var-col {
+  transition: all 0.25s;
+}
+
+.create-col(@i) when (@i =< 24) {
+  .var-col--span-@{i} {
+    flex: 0 0 @i * (100% / 24);
+  }
+
+  .var-col--offset-@{i} {
+    margin-left: @i * (100% / 24);
+  }
+
+  .create-col(@i + 1);
+}
+
+.create-responsive-col(@i, @mode) when (@i =< 24) {
+  .var-col--span-@{mode}-@{i} {
+    flex: 0 0 @i * (100% / 24);
+  }
+
+  .var-col--offset-@{mode}-@{i} {
+    margin-left: @i * (100% / 24);
+  }
+
+  .create-responsive-col(@i + 1,@mode);
+}
+
+.create-col(1);
+
+@media only screen and (max-width: 767px) {
+  .create-responsive-col(1, xs);
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .create-responsive-col(1, sm);
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .create-responsive-col(1, md);
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1919px) {
+  .create-responsive-col(1, lg);
+}
+
+@media only screen and (min-width: 1920px) {
+  .create-responsive-col(1, xl);
+}

packages/varlet-vue2-ui/src/col/docs/zh-CN.md

@@ -0,0 +1,25 @@
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| `span` | 列占据的栅格数 | _number \| string_ | `24` |
+| `offset` | 列偏移的栅格数 | _number \| string_ | `0` |
+| `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 }_ | `-` |
+| `lg`     | `≥1200px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |
+| `xl`     | `≥1920px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` |
+
+### 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| `click` | 点击 Col 时触发 | `event: Event` |
+
+### 插槽
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| `default` | Col 内容 | `-` |

packages/varlet-vue2-ui/src/col/index.ts

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

packages/varlet-vue2-ui/src/col/props.ts

@@ -0,0 +1,31 @@
+import type { PropType } from 'vue'
+import { SizeDescriptor } from './provide'
+
+export const props = {
+  span: {
+    type: [String, Number],
+    default: 24,
+  },
+  offset: {
+    type: [String, Number],
+    default: 0,
+  },
+  onClick: {
+    type: Function as PropType<(e: Event) => void>,
+  },
+  xs: {
+    type: [Object as SizeDescriptor, Number, String] as PropType<string | number | SizeDescriptor | undefined>,
+  },
+  sm: {
+    type: [Object as SizeDescriptor, Number, String] as PropType<string | number | SizeDescriptor | undefined>,
+  },
+  md: {
+    type: [Object as SizeDescriptor, Number, String] as PropType<string | number | SizeDescriptor | undefined>,
+  },
+  lg: {
+    type: [Object as SizeDescriptor, Number, String] as PropType<string | number | SizeDescriptor | undefined>,
+  },
+  xl: {
+    type: [Object as SizeDescriptor, Number, String] as PropType<string | number | SizeDescriptor | undefined>,
+  },
+}

packages/varlet-vue2-ui/src/row/Row.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="var-row__wrap">
+    <div
+      class="var-row var--box"
+      :style="{
+        justifyContent: justify,
+        alignItems: align,
+        margin: average ? `0 -${average}px` : undefined,
+      }"
+      @click="handleClick"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { props } from './props'
+import { defineComponent } from '../utils/create'
+import { toPxNum } from '../utils/elements'
+import { createParentMixin } from '../utils/mixins/relation'
+
+export default defineComponent({
+  name: 'VarRow',
+  props,
+  mixins: [createParentMixin('row', { childrenKey: 'cols' })],
+  computed: {
+    average() {
+      return toPxNum(this.gutter) / 2
+    },
+  },
+  methods: {
+    computePadding() {
+      const { average } = this
+      this.cols.forEach((col) => {
+        col.setPadding({ left: average.value, right: average.value })
+      })
+    },
+    handleClick(e) {
+      const { getListeners } = this
+      const { onClick } = getListeners()
+
+      if (!onClick) {
+        return
+      }
+
+      onClick(e)
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './row';
+</style>