feat(ui/card): add Card component

varletjs · Jun 4, 2021 · 90b0a14 · 90b0a14
1 parent b444ed0
commit 90b0a14
Show file tree

Hide file tree

Showing 11 changed files with 243 additions and 0 deletions.
diff --git a/packages/varlet-ui/src/card/Card.vue b/packages/varlet-ui/src/card/Card.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="var-card" :class="[elevation ? `var-elevation--${elevation}` : 'var-elevation--3']">
+    <slot name="image" v-if="src">
+      <img class="var-card__image" :style="{ objectFit: fit, height: toSizeUnit(height) }" :src="src" :alt="alt" />
+    </slot>
+    <div class="var-card__content">
+      <slot name="title" v-if="title"
+        ><div class="var-card__title">{{ title }}</div></slot
+      >
+      <slot name="subtitle" v-if="subtitle"
+        ><div class="var-card__subtitle">{{ subtitle }}</div></slot
+      >
+      <slot name="desc" v-if="desc">
+        <div class="var-card__desc">{{ desc }}</div>
+      </slot>
+    </div>
+    <div class="var-card__footer" v-if="$slots.extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+import { toSizeUnit } from '../utils/elements'
+
+export default defineComponent({
+  name: 'VarCard',
+  props,
+  setup() {
+    return {
+      toSizeUnit,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './card';
+</style>
diff --git a/packages/varlet-ui/src/card/__tests__/index.spec.js b/packages/varlet-ui/src/card/__tests__/index.spec.js
@@ -0,0 +1,14 @@
+import example from '../example'
+import Card from '..'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+
+test('test card example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test card plugin', () => {
+  const app = createApp({}).use(Card)
+  expect(app.component(Card.name)).toBeTruthy()
+})
diff --git a/packages/varlet-ui/src/card/card.less b/packages/varlet-ui/src/card/card.less
@@ -0,0 +1,55 @@
+@import '../styles/var';
+@import '../styles/elevation';
+
+@card-title-font-size: 20px;
+@card-title-font-weight: 700;
+@card-subtitle-font-size: 14px;
+@card-subtitle-font-weight: normal;
+@card-desc-font-size: 16px;
+@card-subtitle-color: rgba(0, 0, 0, 0.6);
+@card-desc-color: #333;
+@card-padding: 10px 12px;
+@card-row-spacing: 10px;
+@card-border-color: #f0f0f0;
+@card-border-left: 12px;
+@card-border-right: 12px;
+@card-border-radius: 4px;
+@card-line-height: 30px;
+@card-image-width: 100%;
+@card-image-height-default: 200px;
+@card-padding-bottom: 10px;
+.var-card {
+  border: 1px solid @card-border-color;
+  border-radius: @card-border-radius;
+  overflow: hidden;
+  padding-bottom: @card-padding-bottom;
+  &__image {
+    width: @card-image-width;
+    height: @card-image-height-default;
+    display: block;
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding: @card-padding;
+  }
+  &__title {
+    position: relative;
+    font-size: @card-title-font-size;
+    font-weight: @card-title-font-weight;
+  }
+  &__subtitle {
+    font-size: @card-subtitle-font-size;
+    font-weight: @card-subtitle-font-weight;
+    color: @card-subtitle-color;
+    margin: @card-row-spacing 0;
+  }
+  &__desc {
+    font-size: @card-desc-font-size;
+    color: @card-desc-color;
+    margin-top: @card-row-spacing;
+  }
+  &__footer {
+    padding: @card-padding;
+  }
+}
diff --git a/packages/varlet-ui/src/card/docs/en-US.md b/packages/varlet-ui/src/card/docs/en-US.md
diff --git a/packages/varlet-ui/src/card/docs/zh-CN.md b/packages/varlet-ui/src/card/docs/zh-CN.md
diff --git a/packages/varlet-ui/src/card/example/index.vue b/packages/varlet-ui/src/card/example/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <app-type>{{ pack.basicUsage }}</app-type>
+  <var-card :title="pack.title" :desc="pack.description" />
+  <app-type>{{ pack.showSubtitle }}</app-type>
+  <var-card :title="pack.title" :subtitle="pack.subtitle" :desc="pack.description" />
+  <app-type>{{ pack.showImage }}</app-type>
+  <var-card :title="pack.title" src="https://varlet.gitee.io/varlet-ui/cat.jpg" />
+  <app-type>{{ pack.useSlot }}</app-type>
+  <var-card
+    :title="pack.title"
+    :subtitle="pack.subtitle"
+    :desc="pack.description"
+    src="https://varlet.gitee.io/varlet-ui/cat.jpg"
+  >
+    <template #extra>
+      <var-button text outline type="primary">{{ pack.button }}</var-button>
+    </template>
+  </var-card>
+</template>
+
+<script>
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import Button from '../../button'
+import Card from '..'
+import { pack, use } from './locale'
+import { watchLang } from '../../utils/components'
+
+export default {
+  name: 'CardExample',
+  components: {
+    [Card.name]: Card,
+    [Button.name]: Button,
+    AppType,
+  },
+  setup() {
+    watchLang(use)
+    return {
+      pack,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.example {
+  background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/card/example/locale/en-US.ts b/packages/varlet-ui/src/card/example/locale/en-US.ts
@@ -0,0 +1,10 @@
+export default {
+  basicUsage: 'Basic Usage',
+  title: 'Title',
+  showSubtitle: 'Show Subtitle',
+  subtitle: 'Subtitle',
+  description: 'Description',
+  showImage: 'Show Image',
+  useSlot: 'Use Slot',
+  button: 'Use Button',
+}
diff --git a/packages/varlet-ui/src/card/example/locale/index.ts b/packages/varlet-ui/src/card/example/locale/index.ts
@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)
diff --git a/packages/varlet-ui/src/card/example/locale/zh-CN.ts b/packages/varlet-ui/src/card/example/locale/zh-CN.ts
@@ -0,0 +1,10 @@
+export default {
+  basicUsage: '基本使用',
+  title: '这是标题',
+  showSubtitle: '显示副标题',
+  subtitle: '这是副标题',
+  description: '这是描述',
+  showImage: '显示图片',
+  useSlot: '使用插槽',
+  button: '添加按钮',
+}
diff --git a/packages/varlet-ui/src/card/index.ts b/packages/varlet-ui/src/card/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Card from './Card.vue'
+
+Card.install = function (app: App) {
+  app.component(Card.name, Card)
+}
+
+export default Card
diff --git a/packages/varlet-ui/src/card/props.ts b/packages/varlet-ui/src/card/props.ts
@@ -0,0 +1,34 @@
+import { PropType } from 'vue'
+
+function fitValidator(fit: string) {
+  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit)
+}
+
+export const props = {
+  src: {
+    type: String,
+  },
+  fit: {
+    type: String as PropType<'fill' | 'contain' | 'cover' | 'none' | 'scale-down'>,
+    validator: fitValidator,
+    default: 'cover',
+  },
+  height: {
+    type: [String, Number],
+  },
+  alt: {
+    type: String,
+  },
+  title: {
+    type: [Number, String],
+  },
+  subtitle: {
+    type: String,
+  },
+  desc: {
+    type: String,
+  },
+  elevation: {
+    type: [Number, String],
+  },
+}