feat(ui/card): add component card

varletjs · Feb 18, 2022 · 8c2bb09 · 8c2bb09
2 parents 03890ce + 2085879
commit 8c2bb09
Show file tree

Hide file tree

Showing 15 changed files with 725 additions and 0 deletions.
diff --git a/packages/varlet-vue2-ui/src/card/Card.vue b/packages/varlet-vue2-ui/src/card/Card.vue
@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="var-card"
+    :class="[elevation ? `var-elevation--${elevation}` : 'var-elevation--2']"
+    v-ripple="{ disabled: !ripple }"
+    @click="handleClick"
+  >
+    <slot name="image">
+      <img
+        class="var-card__image"
+        :style="{
+          objectFit: fit,
+          height: toSizeUnit(height),
+        }"
+        :src="src"
+        :alt="alt"
+        v-if="src"
+      />
+    </slot>
+    <slot name="title">
+      <div class="var-card__title" v-if="title">{{ title }}</div>
+    </slot>
+    <slot name="subtitle">
+      <div class="var-card__subtitle" v-if="subtitle">{{ subtitle }}</div>
+    </slot>
+    <slot name="description">
+      <div class="var-card__description" v-if="description">{{ description }}</div>
+    </slot>
+    <div class="var-card__footer" v-if="hasSlots('extra')">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Ripple from '../ripple'
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+import { toSizeUnit } from '../utils/elements'
+
+export default defineComponent({
+  name: 'VarCard',
+  directives: { Ripple },
+  props,
+  data() {
+    return {
+      toSizeUnit,
+    }
+  },
+  methods: {
+    handleClick(e) {
+      const { disabled } = this
+      const { onClick } = this.getListeners()
+
+      if (!onClick || disabled) {
+        return
+      }
+
+      onClick(e)
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import '../ripple/ripple';
+@import './card';
+</style>
diff --git a/packages/varlet-vue2-ui/src/card/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/card/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test card example 1`] = `
+"<div class=\\"var-card-outer\\">
+  <div class=\\"app-type\\">基本使用</div>
+  <div class=\\"var-card var-elevation--2\\">
+    <!---->
+    <div class=\\"var-card__title\\">风景</div>
+    <!---->
+    <div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">显示副标题</div>
+  <div class=\\"var-card var-elevation--2\\">
+    <!---->
+    <div class=\\"var-card__title\\">风景</div>
+    <div class=\\"var-card__subtitle\\">公园里的风景</div>
+    <div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">显示图片</div>
+  <div class=\\"var-card var-elevation--2\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-card__image\\" style=\\"object-fit: cover;\\">
+    <div class=\\"var-card__title\\">风景</div>
+    <div class=\\"var-card__subtitle\\">公园里的风景</div>
+    <div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
+    <!---->
+  </div>
+  <div class=\\"app-type\\">使用插槽</div>
+  <div class=\\"var-card var-elevation--2\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-card__image\\" style=\\"object-fit: cover;\\">
+    <div class=\\"var-card__title\\">风景</div>
+    <div class=\\"var-card__subtitle\\">公园里的风景</div>
+    <div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
+    <div class=\\"var-card__footer\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\" style=\\"margin-right: 10px;\\">
+        <!---->
+        <div class=\\"var-button__content\\">添加按钮</div>
+      </button> <button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2\\">
+        <!---->
+        <div class=\\"var-button__content\\">添加按钮</div>
+      </button></div>
+  </div>
+  <div class=\\"app-type\\">水波效果</div>
+  <div class=\\"var-card var-elevation--2\\">
+    <!---->
+    <div class=\\"var-card__title\\">风景</div>
+    <div class=\\"var-card__subtitle\\">公园里的风景</div>
+    <div class=\\"var-card__description\\">公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。</div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`test card props 1`] = `
+"<div class=\\"var-card var-elevation--2\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" alt=\\"This is an image\\" class=\\"var-card__image\\" style=\\"object-fit: cover; height: 200px;\\">
+  <div class=\\"var-card__title\\">This is Card</div>
+  <div class=\\"var-card__subtitle\\">This is subtitle</div>
+  <div class=\\"var-card__description\\">This is description</div>
+  <div class=\\"var-card__footer\\">
+    <div>text</div>
+  </div>
+</div>"
+`;
diff --git a/packages/varlet-vue2-ui/src/card/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/card/__tests__/index.spec.js
@@ -0,0 +1,66 @@
+import example from '../example'
+import Vue from 'vue'
+import Card from '..'
+import VarCard from '../Card'
+import { mount } from '@vue/test-utils'
+
+test('test card example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test card plugin', () => {
+  Vue.use(Card)
+  expect(Vue.component(Card.name)).toBeTruthy()
+})
+
+test('test card props', async () => {
+  const wrapper = mount(VarCard, {
+    propsData: {
+      title: 'This is Card',
+      description: 'This is description',
+      subtitle: 'This is subtitle',
+      src: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+      fit: 'cover',
+      height: '200px',
+      alt: 'This is an image',
+      elevation: '2',
+      ripple: true,
+    },
+    scopedSlots: {
+      extra: '<div>text</div>',
+    },
+  })
+
+  expect(wrapper.find('img').attributes('style')).toMatch('height: 200px')
+  expect(wrapper.find('img').attributes('style')).toMatch('object-fit: cover')
+  expect(wrapper.find('img').attributes('alt')).toMatch('This is an image')
+  expect(wrapper.find('img').attributes('src')).toMatch('https://varlet.gitee.io/varlet-ui/cat.jpg')
+  expect(wrapper.find('.var-card__title').text()).toBe('This is Card')
+  expect(wrapper.find('.var-card__subtitle').text()).toBe('This is subtitle')
+  expect(wrapper.find('.var-card__description').text()).toBe('This is description')
+  expect(wrapper.find('.var-card__footer').text()).toBe('text')
+  expect(wrapper.classes()).toContain('var-elevation--2')
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test card onClick with null callback', () => {
+  const wrapper = mount(VarCard)
+  wrapper.trigger('click')
+  wrapper.destroy()
+})
+
+test('test card onClick', () => {
+  const onClick = jest.fn()
+  const wrapper = mount(VarCard, {
+    listeners: {
+      click: onClick,
+    },
+  })
+
+  wrapper.trigger('click')
+  expect(onClick).toHaveBeenCalledTimes(1)
+  wrapper.destroy()
+})
diff --git a/packages/varlet-vue2-ui/src/card/card.less b/packages/varlet-vue2-ui/src/card/card.less
@@ -0,0 +1,85 @@
+@card-padding: 0 0 15px 0;
+@card-background: #fff;
+@card-border-radius: 4px;
+@card-image-width: 100%;
+@card-image-height: 200px;
+@card-title-color: #333;
+@card-title-font-size: 20px;
+@card-title-padding: 0 12px;
+@card-title-margin: 15px 0 0 0;
+@card-subtitle-color: rgba(0, 0, 0, 0.6);
+@card-subtitle-font-size: 14px;
+@card-subtitle-padding: 0 13px;
+@card-subtitle-margin: 10px 0 0 0;
+@card-description-color: rgba(0, 0, 0, 0.6);
+@card-description-font-size: 14px;
+@card-description-margin: 20px 0 0 0;
+@card-description-padding: 0 13px;
+@card-footer-padding: 0 12px;
+@card-footer-margin: 30px 0 0px 0;
+@card-line-height: 22px;
+
+:root {
+  --card-padding: @card-padding;
+  --card-background: @card-background;
+  --card-border-radius: @card-border-radius;
+  --card-image-width: @card-image-width;
+  --card-image-height: @card-image-height;
+  --card-title-color: @card-title-color;
+  --card-title-font-size: @card-title-font-size;
+  --card-title-padding: @card-title-padding;
+  --card-title-margin: @card-title-margin;
+  --card-subtitle-color: @card-subtitle-color;
+  --card-subtitle-font-size: @card-subtitle-font-size;
+  --card-subtitle-padding: @card-subtitle-padding;
+  --card-subtitle-margin: @card-subtitle-margin;
+  --card-description-color: @card-description-color;
+  --card-description-font-size: @card-description-font-size;
+  --card-description-margin: @card-description-margin;
+  --card-description-padding: @card-description-padding;
+  --card-footer-padding: @card-footer-padding;
+  --card-footer-margin: @card-footer-margin;
+  --card-line-height: @card-line-height;
+}
+
+.var-card {
+  border-radius: var(--card-border-radius);
+  overflow: hidden;
+  padding: var(--card-padding);
+  line-height: var(--card-line-height);
+  background: var(--card-background);
+  transition: background-color 0.25s;
+
+  &__image {
+    width: var(--card-image-width);
+    height: var(--card-image-height);
+    display: block;
+  }
+
+  &__title {
+    font-size: var(--card-title-font-size);
+    padding: var(--card-title-padding);
+    margin: var(--card-title-margin);
+    color: var(--card-title-color);
+  }
+
+  &__subtitle {
+    font-size: var(--card-subtitle-font-size);
+    color: var(--card-subtitle-color);
+    padding: var(--card-subtitle-padding);
+    margin: var(--card-subtitle-margin);
+  }
+
+  &__description {
+    font-size: var(--card-description-font-size);
+    color: var(--card-description-color);
+    margin: var(--card-description-margin);
+    padding: var(--card-description-padding);
+    word-break: break-all;
+  }
+
+  &__footer {
+    padding: var(--card-footer-padding);
+    margin: var(--card-footer-margin);
+  }
+}