diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index 13ac324..423ca40 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -1,4 +1,4 @@ -### 安装pnpm +### 安装 pnpm ```shell npm i pnpm -g @@ -6,7 +6,7 @@ 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 \ No newline at end of file +- skeleton diff --git a/packages/varlet-vue2-ui/src/button/docs/en-US.md b/packages/varlet-vue2-ui/src/button/docs/en-US.md index 7e4b244..050f525 100644 --- a/packages/varlet-vue2-ui/src/button/docs/en-US.md +++ b/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) ``` diff --git a/packages/varlet-vue2-ui/src/button/example/index.vue b/packages/varlet-vue2-ui/src/button/example/index.vue index 92a33db..210706c 100644 --- a/packages/varlet-vue2-ui/src/button/example/index.vue +++ b/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, diff --git a/packages/varlet-vue2-ui/src/cell/Cell.vue b/packages/varlet-vue2-ui/src/cell/Cell.vue new file mode 100644 index 0000000..a525cac --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/Cell.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/cell/__test__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/cell/__test__/__snapshots__/index.spec.js.snap new file mode 100644 index 0000000..c11eb21 --- /dev/null +++ b/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`] = ` +"
+
基本使用
+
+ +
+
这是单元格
+ +
+ +
+
+ +
+
这是单元格
+ +
+ +
+
+
+
显示图标
+
+
+
+
这是单元格
+ +
+
+
+
+
+
+
这是单元格
+ +
+
+
+
+
+
显示描述
+
+
+
+
这是单元格
+
描述
+
+
+
+
+ +
+
这是单元格
+
描述
+
+ +
+
+
+
显示边框
+
+ +
+
这是单元格
+ +
+ +
+
+ +
+
这是单元格
+ +
+ +
+
" +`; + +exports[`test cell props 1`] = ` +"
+
+
+
This is Cell
+
This is desc
+
+
text
+
" +`; diff --git a/packages/varlet-vue2-ui/src/cell/__test__/index.spec.js b/packages/varlet-vue2-ui/src/cell/__test__/index.spec.js new file mode 100644 index 0000000..da68104 --- /dev/null +++ b/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() +}) diff --git a/packages/varlet-vue2-ui/src/cell/cell.less b/packages/varlet-vue2-ui/src/cell/cell.less new file mode 100644 index 0000000..1bb819c --- /dev/null +++ b/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); + } +} diff --git a/packages/varlet-vue2-ui/src/cell/docs/en-US.md b/packages/varlet-vue2-ui/src/cell/docs/en-US.md new file mode 100644 index 0000000..c194195 --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/docs/en-US.md @@ -0,0 +1,80 @@ +# Cell + +### Intro + +The cell is a single display item in the list. + +### Install + +```js +import Vue from 'vue' +import { Cell } from '@varlet-vue2/ui' + +Vue.use(Cell) +``` + +### Basic Usage + +```html + This is Cell +``` + +### Show Icon +```html + + + +``` + +### Show Description +```html + +``` + +### Show Border +```html + This is Cell +``` + +## API + +### Props + +| Prop | Description | Type | Default | +| ----- | -------------- | -------- | ---------- | +| `title` | Title | _string \| number_ | `-` | +| `icon` | Icon name | _string_ | `-` | +| `desc` | Description | _string_ | `-` | +| `border` | Whether to show border | _boolean_ | `false` | +| `icon-class` | Icon className | _string_ | `-` | +| `title-class` | Title className | _string_ | `-` | +| `desc-class` | Description className | _string_ | `-` | +| `extra-class` | Extra className | _string_ | `-` | + +### Slots + +| Name | Description | SlotProps | +| ----- | -------------- | -------- | +| `default` | Content of cell | `-` | +| `icon` | Icon of cell | `-` | +| `desc` | Description of cell | `-` | +| `extra` | Extra of cell | `-` | + +### Style Variables +Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider) + +| Variable | Default | +| --- | --- | +| `--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` | + diff --git a/packages/varlet-vue2-ui/src/cell/docs/zh-CN.md b/packages/varlet-vue2-ui/src/cell/docs/zh-CN.md new file mode 100644 index 0000000..3a04da1 --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/docs/zh-CN.md @@ -0,0 +1,79 @@ +# 单元格 + +### 介绍 + +单元格为列表中的单个展示项。 + +### 引入 + +```js +import Vue from 'vue' +import { Cell } from '@varlet-vue2/ui' + +Vue.use(Cell) +``` + +### 基本使用 + +```html + 这是单元格 +``` + +### 显示图标 +```html + + + +``` + +### 显示描述 +```html + +``` + +### 显示边框 +```html + 这是单元格 +``` + +## API + +### 属性 + +| 参数 | 说明 | 类型 | 默认值 | +| ----- | -------------- | -------- | ---------- | +| `title` | 单元格标题 | _string \| number_ | `-` | +| `icon` | 左侧图标名称 | _string_ | `-` | +| `desc` | 单元格描述 | _string_ | `-` | +| `border` | 是否显示边框 | _boolean_ | `false` | +| `icon-class` | 图标额外类名 | _string_ | `-` | +| `title-class` | 标题额外类名 | _string_ | `-` | +| `desc-class` | 描述额外类名 | _string_ | `-` | +| `extra-class` | 右侧内容额外类名 | _string_ | `-` | + +### 插槽 + +| 名称 | 说明 | 参数 | +| ----- | -------------- | -------- | +| `default` | cell 的内容 | `-` | +| `icon` | 自定义左侧 icon 区域 | `-` | +| `desc` | 描述的内容 | `-` | +| `extra` | 自定义右侧区域内容 | `-` | + +### 样式变量 +以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider)进行样式定制。 + +| 变量名 | 默认值 | +| --- | --- | +| `--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` | diff --git a/packages/varlet-vue2-ui/src/cell/example/index.vue b/packages/varlet-vue2-ui/src/cell/example/index.vue new file mode 100644 index 0000000..8a3153c --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/example/index.vue @@ -0,0 +1,66 @@ + + + diff --git a/packages/varlet-vue2-ui/src/cell/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/cell/example/locale/en-US.ts new file mode 100644 index 0000000..5748d6a --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/example/locale/en-US.ts @@ -0,0 +1,8 @@ +export default { + basicUsage: 'Basic Usage', + showIcon: 'Show Icon', + showDesc: 'Show Description', + showBorder: 'Show Border', + content: 'This is Cell', + description: 'Description', +} diff --git a/packages/varlet-vue2-ui/src/cell/example/locale/index.ts b/packages/varlet-vue2-ui/src/cell/example/locale/index.ts new file mode 100644 index 0000000..d2e375e --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/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 as any) +add('en-US', enUS as any) diff --git a/packages/varlet-vue2-ui/src/cell/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/cell/example/locale/zh-CN.ts new file mode 100644 index 0000000..5f710ee --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/example/locale/zh-CN.ts @@ -0,0 +1,8 @@ +export default { + basicUsage: '基本使用', + showIcon: '显示图标', + showDesc: '显示描述', + showBorder: '显示边框', + content: '这是单元格', + description: '描述', +} diff --git a/packages/varlet-vue2-ui/src/cell/index.ts b/packages/varlet-vue2-ui/src/cell/index.ts new file mode 100644 index 0000000..66b5b32 --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/index.ts @@ -0,0 +1,10 @@ +import type { VueConstructor } from 'vue' +import Cell from './Cell.vue' + +Cell.install = function (app: VueConstructor) { + app.component(Cell.name, Cell) +} + +export const _CellComponent = Cell + +export default Cell diff --git a/packages/varlet-vue2-ui/src/cell/props.ts b/packages/varlet-vue2-ui/src/cell/props.ts new file mode 100644 index 0000000..68e25ee --- /dev/null +++ b/packages/varlet-vue2-ui/src/cell/props.ts @@ -0,0 +1,27 @@ +export const props = { + title: { + type: [Number, String], + }, + icon: { + type: String, + }, + desc: { + type: String, + }, + border: { + type: Boolean, + default: false, + }, + iconClass: { + type: String, + }, + titleClass: { + type: String, + }, + descClass: { + type: String, + }, + extraClass: { + type: String, + }, +} diff --git a/packages/varlet-vue2-ui/src/skeleton/docs/en-US.md b/packages/varlet-vue2-ui/src/skeleton/docs/en-US.md index 307e43d..48a05e3 100644 --- a/packages/varlet-vue2-ui/src/skeleton/docs/en-US.md +++ b/packages/varlet-vue2-ui/src/skeleton/docs/en-US.md @@ -63,7 +63,6 @@ export default { data: () => ({ loading: false }), - methods: { fullscreen() { this.loading = true diff --git a/packages/varlet-vue2-ui/src/skeleton/docs/zh-CN.md b/packages/varlet-vue2-ui/src/skeleton/docs/zh-CN.md index cd37f0c..b2bc4ab 100644 --- a/packages/varlet-vue2-ui/src/skeleton/docs/zh-CN.md +++ b/packages/varlet-vue2-ui/src/skeleton/docs/zh-CN.md @@ -62,7 +62,6 @@ export default { data: () => ({ loading: false, }), - methods: { fullscreen() { this.loading = true diff --git a/packages/varlet-vue2-ui/src/skeleton/example/index.vue b/packages/varlet-vue2-ui/src/skeleton/example/index.vue index 84c776c..a049893 100644 --- a/packages/varlet-vue2-ui/src/skeleton/example/index.vue +++ b/packages/varlet-vue2-ui/src/skeleton/example/index.vue @@ -39,11 +39,13 @@ import { use, pack } from './locale' export default { name: 'SkeletonExample', + components: { VarSkeleton, VarButton, AppType, }, + data() { return { loading: true, diff --git a/packages/varlet-vue2-ui/types/cell.d.ts b/packages/varlet-vue2-ui/types/cell.d.ts new file mode 100644 index 0000000..c551166 --- /dev/null +++ b/packages/varlet-vue2-ui/types/cell.d.ts @@ -0,0 +1,18 @@ +import { VarComponent } from './varComponent' + +export interface CellProps { + title?: string | number; + icon?: string; + desc?: string; + border?: boolean; + iconClass?: string; + titleClass?: string; + descClass?: string; + extraClass?: string; +} + +export class Cell extends VarComponent { + $props: CellProps +} + +export class _CellComponent extends Cell {}