feat: cell

packages/varlet-ui/src/back-top/example/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="var-back-top__example">
     <div>
-      <div v-for="list in lists" :key="list">Scroll to bottom {{ list }}</div>
+      <var-cell v-for="list in lists" :key="list">Scroll to bottom {{ list }}</var-cell>
       <var-back-top target=".var-back-top__example" visibility-height="100" :duration="300" @click="test" />
     </div>
   </div>
@@ -10,13 +10,17 @@
 <script>
 import { defineComponent } from 'vue'
 import BackTop from '..'
+import Cell from '../../cell'
+import VarCell from '../../cell/Cell'
 
 const lists = [...Array(100).keys()]
 
 export default defineComponent({
   name: 'BackTopExample',
   components: {
+    VarCell,
     [BackTop.name]: BackTop,
+    [Cell.name]: Cell,
   },
   setup() {
     const test = () => {

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

@@ -0,0 +1,40 @@
+<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 :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__label" :class="[labelClass ? labelClass : null]" v-if="$slots.label || label">
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </div>
+    </div>
+    <div class="var-cell__extra" :class="[extraClass ? extraClass : null]" v-if="$slots.extra">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+import Icon from '../icon'
+
+export default defineComponent({
+  name: 'VarCell',
+  components: {
+    [Icon.name]: Icon,
+  },
+  props,
+})
+</script>
+
+<style lang="less">
+@import './cell';
+</style>

packages/varlet-ui/src/cell/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const Cell = require('../../../cjs/cell').default
+const { render } = require('@testing-library/vue')
+
+test('test cell', async () => {
+  const wrapper = render(Cell)
+  console.log(wrapper)
+})

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

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

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

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <app-type>基本使用</app-type>
+    <var-cell> This is Cell </var-cell>
+    <var-cell> This is Cell </var-cell>
+  </div>
+  <div>
+    <app-type>显示icon</app-type>
+    <var-cell icon="fire" title="This is Cell">
+      <template #extra>
+        <var-icon name="information" />
+      </template>
+    </var-cell>
+    <var-cell icon="fire" title="This is Cell">
+      <template #extra>
+        <var-icon name="information" />
+      </template>
+    </var-cell>
+  </div>
+  <div>
+    <app-type>显示副标题</app-type>
+    <var-cell icon="fire" title="This is Cell" label="description">
+      <template #extra>
+        <var-icon name="information" />
+      </template>
+    </var-cell>
+    <var-cell title="This is Cell" label="description" />
+  </div>
+  <div>
+    <app-type>显示分割线</app-type>
+    <var-cell border> This is Cell </var-cell>
+    <var-cell border> This is Cell </var-cell>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Icon from '../../icon'
+import Cell from '..'
+
+export default defineComponent({
+  name: 'CellExample',
+  components: {
+    [Cell.name]: Cell,
+    [Icon.name]: Icon,
+  },
+})
+</script>
+
+<style scoped>
+.example {
+  background: antiquewhite;
+}
+</style>

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

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Cell from './Cell.vue'
+
+Cell.install = function (app: App) {
+  app.component(Cell.name, Cell)
+}
+
+export default Cell

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

@@ -0,0 +1,27 @@
+export const props = {
+  title: {
+    type: [Number, String],
+  },
+  icon: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+  },
+  titleClass: {
+    type: String,
+  },
+  labelClass: {
+    type: String,
+  },
+  extraClass: {
+    type: String,
+  },
+}

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

@@ -1,24 +1,26 @@
 <template>
-	<var-index-bar v-model:active="active" :sticky-offset-top="35" @change="change">
-		<div v-for="item in list" :key="item">
-			<var-index-anchor :index="item" style="background: #a7d1e5"> 标题{{ item }} </var-index-anchor>
-			<span>{{ item }}文本</span><br />
-			<span>{{ item }}文本</span><br />
-			<span>{{ item }}文本</span><br />
-		</div>
-	</var-index-bar>
+  <var-index-bar v-model:active="active" @change="change">
+    <div v-for="item in list" :key="item">
+      <var-index-anchor :index="item" class="var-index-anchor__example"> Title {{ item }} </var-index-anchor>
+      <var-cell>{{ item }} text</var-cell>
+      <var-cell>{{ item }} text</var-cell>
+      <var-cell>{{ item }} text</var-cell>
+    </div>
+  </var-index-bar>
 </template>
 
 <script>
 import { defineComponent, ref, onBeforeMount } from 'vue'
 import IndexAnchor from '../../index-anchor/IndexAnchor.vue'
 import IndexBar from '..'
+import Cell from '../../cell'
 
 export default defineComponent({
   name: 'IndexBarExample',
   components: {
     [IndexBar.name]: IndexBar,
     [IndexAnchor.name]: IndexAnchor,
+    [Cell.name]: Cell,
   },
   setup() {
     const active = ref('A')
@@ -43,8 +45,13 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
-.example {
-	background: antiquewhite;
+<style lang="less">
+.var-index-anchor__example {
+  background: #e7edf7;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  color: #2e67ba;
 }
 </style>

packages/varlet-ui/varlet.config.js

@@ -242,6 +242,13 @@ module.exports = {
         },
         doc: 'back-top',
       },
+      {
+        text: {
+          zh_CN: 'Cell 单元格',
+          en_US: 'Cell',
+        },
+        doc: 'cell',
+      },
     ],
     language: 'zh_CN',
   },