feat: add component cell

CONTRIBUTION.md

@@ -1,12 +1,12 @@
-### 安装pnpm
+### 安装 pnpm
 
 ```shell
 npm i pnpm -g
 ```
 
 ### 构建依赖
 
-node版本v16+
+node 版本 v16+
 
 ```shell
 pnpm bootstrap
@@ -25,40 +25,12 @@ pnpm dev
 
 #### checklist
 
-- 组件example效果和vue3版本一致
-- 组件example暗黑模式正常
-- 组件example国际化正常
-- 组件单元测试所有case通过
-- 组件types类型声明完成
-- 组件文档适配Vue2写法
-
-#### 单元测试
-
-```shell
-npm i -g yarn
-```
-
-```shell
-yarn test -w -c skeleton
-```
-
-- props -> propsData
-- unmount -> destroy
-- slots -> scopedSlots（注意：参数default属性值直接为字符串）
-
-#### 提交项目
-
-```shell
-git add .
-```
-
-```shell
-git commit -m "feat: add component 这里写组件名称" or git commit -m "feat(ui/这里写组件名称): add component 这里写组件名称"
-```
-
-```shell
-git push -u
-```
+- 组件 example 效果和 vue3 版本一致
+- 组件 example 暗黑模式正常
+- 组件 example 国际化正常
+- 组件单元测试所有 case 通过
+- 组件 types 类型声明完成
+- 组件文档适配 Vue2 写法
 
 #### Todolist
 
@@ -69,4 +41,4 @@ git push -u
 - chip
 - image
 - badge
-- skeleton
+- skeleton

packages/varlet-vue2-ui/src/button/docs/en-US.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Button } from '@varlet/ui'
+import { Button } from '@varlet-vue2/ui'
 
 Vue.use(Button)
 ```

packages/varlet-vue2-ui/src/button/example/index.vue

@@ -73,6 +73,8 @@ import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet-vue2/cli/site/utils'
 
 export default {
+  name: 'ButtonExample',
+
   components: {
     VarButton,
     VarIcon,

packages/varlet-vue2-ui/src/cell/Cell.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="var-cell" :class="[border ? 'var-cell--border' : null]">
+    <div class="var-cell__icon" :class="[iconClass ? iconClass : null]" v-if="$slots.icon || icon">
+      <slot name="icon">
+        <var-icon class="var--flex" :name="icon" />
+      </slot>
+    </div>
+    <div class="var-cell__content">
+      <div class="var-cell__title" :class="[titleClass ? titleClass : null]">
+        <slot>{{ title }}</slot>
+      </div>
+      <div class="var-cell__desc" :class="[descClass ? descClass : null]" v-if="$slots.desc || desc">
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </div>
+    </div>
+    <div class="var-cell__extra" :class="[extraClass ? extraClass : null]" v-if="$slots.extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+import VarIcon from '../icon'
+
+export default defineComponent({
+  name: 'VarCell',
+  components: {
+    VarIcon,
+  },
+  props,
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../icon/icon';
+@import './cell';
+</style>

packages/varlet-vue2-ui/src/cell/__test__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test cell example 1`] = `
+"<div>
+  <div class=\\"app-type\\">基本使用</div>
+  <div class=\\"var-cell\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+  <div class=\\"var-cell\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+<div>
+  <div class=\\"app-type\\">显示图标</div>
+  <div class=\\"var-cell\\">
+    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
+  </div>
+  <div class=\\"var-cell\\">
+    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
+  </div>
+</div>
+<div>
+  <div class=\\"app-type\\">显示描述</div>
+  <div class=\\"var-cell\\">
+    <div class=\\"var-cell__icon\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <div class=\\"var-cell__desc\\">描述</div>
+    </div>
+    <div class=\\"var-cell__extra\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
+  </div>
+  <div class=\\"var-cell\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <div class=\\"var-cell__desc\\">描述</div>
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+<div>
+  <div class=\\"app-type\\">显示边框</div>
+  <div class=\\"var-cell var-cell--border\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+  <div class=\\"var-cell var-cell--border\\">
+    <!--v-if-->
+    <div class=\\"var-cell__content\\">
+      <div class=\\"var-cell__title\\">这是单元格</div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`test cell props 1`] = `
+"<div class=\\"var-cell var-cell--border\\">
+  <div class=\\"var-cell__icon test-icon-class\\"><i class=\\"var-icon var-icon--set var-icon-fire var--flex\\" style=\\"transition: transform 0ms;\\"></i></div>
+  <div class=\\"var-cell__content\\">
+    <div class=\\"var-cell__title test-title-class\\">This is Cell</div>
+    <div class=\\"var-cell__desc test-desc-class\\">This is desc</div>
+  </div>
+  <div class=\\"var-cell__extra test-extra-class\\">text</div>
+</div>"
+`;

packages/varlet-vue2-ui/src/cell/__test__/index.spec.js

@@ -0,0 +1,42 @@
+import example from '../example'
+import Vue from 'vue'
+import Cell from '..'
+import VarCell from '../Cell'
+import { mount } from '@vue/test-utils'
+
+test('test cell example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test cell plugin', () => {
+  Vue.use(Cell)
+  expect(Vue.component(Cell.name)).toBeTruthy()
+})
+
+test('test cell props', async () => {
+  const wrapper = mount(VarCell, {
+    propsData: {
+      title: 'This is Cell',
+      desc: 'This is desc',
+      border: true,
+      iconClass: 'test-icon-class',
+      titleClass: 'test-title-class',
+      descClass: 'test-desc-class',
+      extraClass: 'test-extra-class',
+      icon: 'fire',
+    },
+    scopedSlots: {
+      extra: 'text',
+    },
+  })
+  expect(wrapper.find('.var-icon').exists()).toBe(true)
+  expect(wrapper.find('.var-icon').classes('var-icon-fire')).toBe(true)
+  expect(wrapper.classes('var-cell--border')).toBe(true)
+  expect(wrapper.find('.var-cell__title').text()).toBe('This is Cell')
+  expect(wrapper.find('.var-cell__desc').text()).toBe('This is desc')
+  expect(wrapper.find('.test-extra-class').text()).toBe('text')
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})

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

@@ -0,0 +1,74 @@
+@cell-font-size: var(--font-size-md);
+@cell-desc-font-size: var(--font-size-sm);
+@cell-desc-color: rgba(0, 0, 0, 0.6);
+@cell-padding: 10px 12px;
+@cell-min-height: 40px;
+@cell-border-color: #bcc2cb;
+@cell-border-left: 12px;
+@cell-border-right: 12px;
+@cell-icon-right: 8px;
+@cell-extra-left: 8px;
+
+:root {
+  --cell-font-size: @cell-font-size;
+  --cell-desc-font-size: @cell-desc-font-size;
+  --cell-desc-color: @cell-desc-color;
+  --cell-padding: @cell-padding;
+  --cell-min-height: @cell-min-height;
+  --cell-border-color: @cell-border-color;
+  --cell-border-left: @cell-border-left;
+  --cell-border-right: @cell-border-right;
+  --cell-icon-right: @cell-icon-right;
+  --cell-extra-left: @cell-extra-left;
+}
+
+.var-cell {
+  align-items: center;
+  display: flex;
+  min-height: var(--cell-min-height);
+  outline: none;
+  padding: var(--cell-padding);
+  position: relative;
+  box-sizing: border-box;
+  font-size: var(--cell-font-size);
+
+  &--border {
+    &::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      right: var(--cell-border-right);
+      bottom: 0;
+      left: var(--cell-border-left);
+      border-bottom: 1px solid var(--cell-border-color);
+      transform: scaleY(0.5);
+    }
+  }
+
+  &__icon {
+    margin-right: var(--cell-icon-right);
+    flex: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__desc {
+    font-size: var(--cell-desc-font-size);
+    color: var(--cell-desc-color);
+  }
+
+  &__extra {
+    flex: 0;
+    margin-left: var(--cell-extra-left);
+  }
+}