diff --git a/components.js b/components.js new file mode 100644 index 000000000..c0c25f949 --- /dev/null +++ b/components.js @@ -0,0 +1,34 @@ +// List of components that have been adapted to Vue 3.0 +module.exports = [ + 'button', + 'cell', + 'icon', + 'info', + 'image', + 'col', + 'row', + 'popup', + 'rate', + 'slider', + 'slider-item', + 'switch', + 'action-sheet', + 'loading', + 'overlay', + 'swipe-cell', + 'circle', + 'count-down', + 'divider', + 'empty', + 'progress', + 'skeleton', + 'step', + 'steps', + 'tag', + 'grid', + 'grid-item', + 'nav-bar', + 'pagination', + 'sidebar', + 'tree-select', +]; diff --git a/docs/site/mobile.js b/docs/site/mobile.js index dd5f87f86..fe83fab5e 100644 --- a/docs/site/mobile.js +++ b/docs/site/mobile.js @@ -1,7 +1,7 @@ -import Locale from '../../src-next/locale'; -import enUS from '../../src-next/locale/lang/en-US'; -import { get } from '../../src-next/utils'; -import { camelize } from '../../src-next/utils/format/string'; +import Locale from '../../src/locale'; +import enUS from '../../src/locale/lang/en-US'; +import { get } from '../../src/utils'; +import { camelize } from '../../src/utils/format/string'; // import Lazyload from '../../src/lazyload'; const { app } = window; diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index a10b3bb4c..6260b18f5 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/packages/vant-cli/src/common/index.ts @@ -7,6 +7,7 @@ import { outputFileSync, } from 'fs-extra'; import { + ROOT, SRC_DIR, getVantConfig, ROOT_WEBPACK_CONFIG_FILE, @@ -36,10 +37,15 @@ export function hasDefaultExport(code: string) { export function getComponents() { const EXCLUDES = ['.DS_Store']; const dirs = readdirSync(SRC_DIR); + + // TODO + // whitelist for 3.0 development + const whiteList = require(join(ROOT, 'components.js')); + return dirs - .filter(dir => !EXCLUDES.includes(dir)) - .filter(dir => - ENTRY_EXTS.some(ext => { + .filter((dir) => !EXCLUDES.includes(dir)) + .filter((dir) => + ENTRY_EXTS.some((ext) => { const path = join(SRC_DIR, dir, `index.${ext}`); if (existsSync(path)) { return hasDefaultExport(readFileSync(path, 'utf-8')); @@ -47,7 +53,8 @@ export function getComponents() { return false; }) - ); + ) + .filter((dir) => whiteList.includes(dir)); } export function isDir(dir: string) { diff --git a/src-next/action-sheet/README.md b/src-next/action-sheet/README.md deleted file mode 100644 index a79ac6ccc..000000000 --- a/src-next/action-sheet/README.md +++ /dev/null @@ -1,191 +0,0 @@ -# ActionSheet - -### Install - -```js -import Vue from 'vue'; -import { ActionSheet } from 'vant'; - -Vue.use(ActionSheet); -``` - -## Usage - -### Basic Usage - -Use `actions` prop to set options of action-sheet. - -```html - - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - show: false, - actions: [ - { name: 'Option 1' }, - { name: 'Option 2' }, - { name: 'Option 3' }, - ], - }; - }, - methods: { - onSelect(item) { - this.show = false; - Toast(item.name); - }, - }, -}; -``` - -### Show Cancel Button - -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - show: false, - actions: [ - { name: 'Option 1' }, - { name: 'Option 2' }, - { name: 'Option 3' }, - ], - }; - }, - methods: { - onCancel() { - Toast('cancel'); - }, - }, -}; -``` - -### Show Description - -```html - -``` - -```js -export default { - data() { - return { - show: false, - actions: [ - { name: 'Option 1' }, - { name: 'Option 2' }, - { name: 'Option 3', subname: 'Description' }, - ], - }; - }, -}; -``` - -### Option Status - -```html - -``` - -```js -export default { - data() { - return { - show: false, - actions: [ - { name: 'Colored Option', color: '#07c160' }, - { name: 'Disabled Option', disabled: true }, - { name: 'Loading Option', loading: true }, - ], - }; - }, -}; -``` - -### Custom Panel - -```html - -
Content
- - - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| v-model (value) | Whether to show ActionSheet | _boolean_ | `false` | -| actions | Options | _Action[]_ | `[]` | -| title | Title | _string_ | - | -| cancel-text | Text of cancel button | _string_ | - | -| description `v2.2.8` | Description above the options | _string_ | - | -| close-icon `v2.2.13` | Close icon name | _string_ | `cross` | -| duration `v2.0.3` | Transition duration, unit second | _number \| string_ | `0.3` | -| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` | -| overlay | Whether to show overlay | _boolean_ | `true` | -| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | -| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | -| close-on-popstate `v2.5.3` | Whether to close when popstate | _boolean_ | `false` | -| close-on-click-action | Whether to close when click action | _boolean_ | `false` | -| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | -| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | -| get-container | Return the mount node for ActionSheet | _string \| () => Element_ | - | - -### Data Structure of Action - -| Key | Description | Type | -| --------- | ---------------------------- | --------- | -| name | Title | _string_ | -| subname | Subtitle | _string_ | -| color | Text color | _string_ | -| className | className for the option | _any_ | -| loading | Whether to be loading status | _boolean_ | -| disabled | Whether to be disabled | _boolean_ | - -### Events - -| Event | Description | Arguments | -| --- | --- | --- | -| select | Triggered when click option | _action: Action, index: number_ | -| cancel | Triggered when click cancel button | - | -| open | Triggered when open ActionSheet | - | -| close | Triggered when close ActionSheet | - | -| opened | Triggered when opened ActionSheet | - | -| closed | Triggered when closed ActionSheet | - | -| click-overlay | Triggered when click overlay | - | diff --git a/src-next/action-sheet/README.zh-CN.md b/src-next/action-sheet/README.zh-CN.md deleted file mode 100644 index 0993e4e71..000000000 --- a/src-next/action-sheet/README.zh-CN.md +++ /dev/null @@ -1,205 +0,0 @@ -# ActionSheet 动作面板 - -### 介绍 - -底部弹起的模态面板，包含与当前情境相关的多个选项。 - -### 引入 - -```js -import Vue from 'vue'; -import { ActionSheet } from 'vant'; - -Vue.use(ActionSheet); -``` - -## 代码演示 - -### 基础用法 - -动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。 - -```html - - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - show: false, - actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }], - }; - }, - methods: { - onSelect(item) { - // 默认情况下点击选项时不会自动收起 - // 可以通过 close-on-click-action 属性开启自动收起 - this.show = false; - Toast(item.name); - }, - }, -}; -``` - -### 展示取消按钮 - -设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。 - -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - show: false, - actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }], - }; - }, - methods: { - onCancel() { - Toast('取消'); - }, - }, -}; -``` - -### 展示描述信息 - -通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。 - -```html - -``` - -```js -export default { - data() { - return { - show: false, - actions: [ - { name: '选项一' }, - { name: '选项二' }, - { name: '选项三', subname: '描述信息' }, - ], - }; - }, -}; -``` - -### 选项状态 - -可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色 - -```html - -``` - -```js -export default { - data() { - return { - show: false, - actions: [ - { name: '着色选项', color: '#07c160' }, - { name: '禁用选项', disabled: true }, - { name: '加载选项', loading: true }, - ], - }; - }, -}; -``` - -### 自定义面板 - -通过插槽可以自定义面板的展示内容，同时可以使用`title`属性展示标题栏 - -```html - -
内容
- - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| v-model (value) | 是否显示动作面板 | _boolean_ | `false` | -| actions | 面板选项列表 | _Action[]_ | `[]` | -| title | 顶部标题 | _string_ | - | -| cancel-text | 取消按钮文字 | _string_ | - | -| description `v2.2.8` | 选项上方的描述信息 | _string_ | - | -| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` | -| duration `v2.0.3` | 动画时长，单位秒 | _number \| string_ | `0.3` | -| round `v2.0.9` | 是否显示圆角 | _boolean_ | `true` | -| overlay | 是否显示遮罩层 | _boolean_ | `true` | -| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` | -| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` | -| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` | -| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | -| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | - -### Action 数据结构 - -`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值： - -| 键名 | 说明 | 类型 | -| --------- | ------------------------ | --------- | -| name | 标题 | _string_ | -| subname | 二级标题 | _string_ | -| color | 选项文字颜色 | _string_ | -| className | 为对应列添加额外的 class | _any_ | -| loading | 是否为加载状态 | _boolean_ | -| disabled | 是否为禁用状态 | _boolean_ | - -### Events - -| 事件名 | 说明 | 回调参数 | -| --- | --- | --- | -| select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ | -| cancel | 点击取消按钮时触发 | - | -| open | 打开面板时触发 | - | -| close | 关闭面板时触发 | - | -| opened | 打开面板且动画结束后触发 | - | -| closed | 关闭面板且动画结束后触发 | - | -| click-overlay | 点击遮罩层时触发 | - | - -## 常见问题 - -### 引入时提示 dependencies not found？ - -在 1.x 版本中，动作面板的组件名为`Actionsheet`，从 2.0 版本开始更名为`ActionSheet`，请注意区分。 diff --git a/src-next/action-sheet/demo/index.vue b/src-next/action-sheet/demo/index.vue deleted file mode 100644 index 24b0e31fe..000000000 --- a/src-next/action-sheet/demo/index.vue +++ /dev/null @@ -1,154 +0,0 @@ - - - - - diff --git a/src-next/action-sheet/index.less b/src-next/action-sheet/index.less deleted file mode 100644 index 79ba786b9..000000000 --- a/src-next/action-sheet/index.less +++ /dev/null @@ -1,90 +0,0 @@ -@import '../style/var'; -@import '../style/mixins/hairline'; - -.van-action-sheet { - max-height: @action-sheet-max-height; - color: @action-sheet-item-text-color; - - &__item, - &__cancel { - display: block; - width: 100%; - padding: 14px @padding-md; - font-size: @action-sheet-item-font-size; - background-color: @action-sheet-item-background; - border: none; - cursor: pointer; - - &:active { - background-color: @active-color; - } - } - - &__item { - line-height: @action-sheet-item-line-height; - - &--loading, - &--disabled { - color: @action-sheet-item-disabled-text-color; - - &:active { - background-color: @action-sheet-item-background; - } - } - - &--disabled { - cursor: not-allowed; - } - - &--loading { - cursor: default; - } - } - - &__subname { - margin-top: @padding-xs; - color: @action-sheet-subname-color; - font-size: @action-sheet-subname-font-size; - line-height: @action-sheet-subname-line-height; - } - - &__gap { - display: block; - height: @action-sheet-cancel-padding-top; - background-color: @action-sheet-cancel-padding-color; - } - - &__header { - font-weight: @font-weight-bold; - font-size: @action-sheet-header-font-size; - line-height: @action-sheet-header-height; - text-align: center; - } - - &__description { - position: relative; - padding: 20px @padding-md; - color: @action-sheet-description-color; - font-size: @action-sheet-description-font-size; - line-height: @action-sheet-description-line-height; - text-align: center; - - &::after { - .hairline-bottom(@cell-border-color, @padding-md, @padding-md); - } - } - - &__close { - position: absolute; - top: 0; - right: 0; - padding: @action-sheet-close-icon-padding; - color: @action-sheet-close-icon-color; - font-size: @action-sheet-close-icon-size; - line-height: inherit; - - &:active { - color: @action-sheet-close-icon-active-color; - } - } -} diff --git a/src-next/action-sheet/test/__snapshots__/demo.spec.js.snap b/src-next/action-sheet/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 0b0f77f33..000000000 --- a/src-next/action-sheet/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
基础用法
- -
-
-
展示取消按钮
- -
-
-
展示描述信息
- -
-
-
-
-
选项状态
- -
-
-
-
-
自定义面板
- -
-
- - - - - -
-`; diff --git a/src-next/action-sheet/test/__snapshots__/index.spec.js.snap b/src-next/action-sheet/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index e28dc8120..000000000 --- a/src-next/action-sheet/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,40 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`callback events 1`] = ` -
-
-
-`; - -exports[`close-icon prop 1`] = ` -
-
Title -
-
-`; - -exports[`color option 1`] = `
`; - -exports[`description prop 1`] = ` -
-
This is a description
-
-`; - -exports[`disable lazy-render 1`] = ` - -`; - -exports[`render title and default slot 1`] = ` -
-
Title -
-
Default
-
-`; - -exports[`round prop 1`] = `
`; diff --git a/src-next/action-sheet/test/demo.spec.js b/src-next/action-sheet/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/action-sheet/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/action-sheet/test/index.spec.js b/src-next/action-sheet/test/index.spec.js deleted file mode 100644 index e07eeca18..000000000 --- a/src-next/action-sheet/test/index.spec.js +++ /dev/null @@ -1,186 +0,0 @@ -import { mount, later } from '../../../test'; -import ActionSheet from '..'; - -test('callback events', () => { - const callback = jest.fn(); - const onInput = jest.fn(); - const onCancel = jest.fn(); - const onSelect = jest.fn(); - - const actions = [ - { name: 'Option', callback }, - { name: 'Option', disabled: true }, - { name: 'Option', loading: true }, - { name: 'Option', subname: 'Subname' }, - ]; - - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - actions, - cancelText: 'Cancel', - }, - context: { - on: { - input: onInput, - cancel: onCancel, - select: onSelect, - }, - }, - }); - - const options = wrapper.findAll('.van-action-sheet__item'); - options.at(0).trigger('click'); - options.at(1).trigger('click'); - wrapper.find('.van-action-sheet__cancel').trigger('click'); - - expect(callback).toHaveBeenCalled(); - expect(onCancel).toHaveBeenCalled(); - expect(onInput).toHaveBeenCalledWith(false); - expect(onSelect).toHaveBeenCalledWith(actions[0], 0); - expect(wrapper).toMatchSnapshot(); -}); - -test('click overlay and close', async () => { - const onInput = jest.fn(); - const onClickOverlay = jest.fn(); - const div = document.createElement('div'); - - mount({ - template: ` -
- -
- `, - components: { - ActionSheet, - }, - data() { - return { - getContainer: () => div, - }; - }, - methods: { - onInput, - onClickOverlay, - }, - }); - - await later(); - - div.querySelector('.van-overlay').click(); - expect(onInput).toHaveBeenCalledWith(false); - expect(onClickOverlay).toHaveBeenCalledTimes(1); -}); - -test('disable lazy-render', () => { - const wrapper = mount(ActionSheet, { - propsData: { - lazyRender: false, - actions: [{ name: 'Option' }, { name: 'Option' }], - cancelText: 'Cancel', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('render title and default slot', () => { - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - title: 'Title', - }, - scopedSlots: { - default() { - return 'Default'; - }, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('get container', () => { - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - getContainer: 'body', - }, - }); - - expect(wrapper.vm.$el.parentNode).toEqual(document.body); -}); - -test('close-on-click-action prop', () => { - const onInput = jest.fn(); - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - actions: [{ name: 'Option' }], - closeOnClickAction: true, - }, - context: { - on: { - input: onInput, - }, - }, - }); - - const option = wrapper.find('.van-action-sheet__item'); - option.trigger('click'); - - expect(onInput).toHaveBeenCalledWith(false); -}); - -test('round prop', () => { - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - round: true, - actions: [{ name: 'Option' }], - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('color option', () => { - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - actions: [{ name: 'Option', color: 'red' }], - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('description prop', () => { - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - description: 'This is a description', - actions: [{ name: 'Option' }], - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('close-icon prop', () => { - const wrapper = mount(ActionSheet, { - propsData: { - value: true, - title: 'Title', - closeIcon: 'cross', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/button/README.md b/src-next/button/README.md deleted file mode 100644 index 3414b3b30..000000000 --- a/src-next/button/README.md +++ /dev/null @@ -1,134 +0,0 @@ -# Button - -### Install - -```js -import Vue from 'vue'; -import { Button } from 'vant'; - -Vue.use(Button); -``` - -## Usage - -### Type - -```html -Default -Primary -Info -Danger -Warning -``` - -### Plain - -```html -Primary -Danger -``` - -### Hairline - -```html -Hairline -Hairline -``` - -### Disabled - -```html -Diabled -Diabled -``` - -### Loading - -```html - - - -``` - -### Shape - -```html -Square -Round -``` - -### Icon - -```html - -Button -Button -``` - -### Size - -```html -Large -Normal -Small -Mini -``` - -### Block Element - -```html -Block Element -``` - -### Route - -```html -URL -Vue Router -``` - -### Custom Color - -```html -Pure -Pure -Gradient -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| type | Can be set to `primary` `info` `warning` `danger` | _string_ | `default` | -| size | Can be set to `large` `small` `mini` | _string_ | `normal` | -| text | Text | _string_ | - | -| color `v2.1.8` | Color, support linear-gradient | _string_ | - | -| icon | Left Icon | _string_ | - | -| icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` | -| tag | HTML Tag | _string_ | `button` | -| native-type | Native Type Attribute | _string_ | `''` | -| plain | Whether to be plain button | _boolean_ | `false` | -| block | Whether to set display block | _boolean_ | `false` | -| round | Whether to be round button | _boolean_ | `false` | -| square | Whether to be square button | _boolean_ | `false` | -| disabled | Whether to disable button | _boolean_ | `false` | -| loading | Whether show loading status | _boolean_ | `false` | -| loading-text | Loading text | _string_ | - | -| loading-type | Loading type, can be set to `spinner` | _string_ | `circular` | -| loading-size | Loading icon size | _string_ | `20px` | -| url | Link URL | _string_ | - | -| to | Target route of the link, same as to of vue-router | _string \| object_ | - | -| replace | If true, the navigation will not leave a history record | _boolean_ | `false` | - -### Events - -| Event | Description | Arguments | -| --- | --- | --- | -| click | Triggered when click button and not disabled or loading | _event: Event_ | -| touchstart | Triggered when touch start | _event: TouchEvent_ | diff --git a/src-next/button/README.zh-CN.md b/src-next/button/README.zh-CN.md deleted file mode 100644 index 092bd1211..000000000 --- a/src-next/button/README.zh-CN.md +++ /dev/null @@ -1,157 +0,0 @@ -# Button 按钮 - -### 引入 - -```js -import Vue from 'vue'; -import { Button } from 'vant'; - -Vue.use(Button); -``` - -## 代码演示 - -### 按钮类型 - -支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default` - -```html -默认按钮 -主要按钮 -信息按钮 -警告按钮 -危险按钮 -``` - -### 朴素按钮 - -通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。 - -```html -朴素按钮 -朴素按钮 -``` - -### 细边框 - -设置`hairline`属性可以开启 0.5px 边框，基于伪类实现 - -```html -细边框按钮 -细边框按钮 -``` - -### 禁用状态 - -通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击 - -```html -禁用状态 -禁用状态 -``` - -### 加载状态 - -通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字 - -```html - - - -``` - -### 按钮形状 - -通过`square`设置方形按钮，通过`round`设置圆形按钮 - -```html -方形按钮 -圆形按钮 -``` - -### 图标按钮 - -通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL - -```html - -按钮 -按钮 -``` - -### 按钮尺寸 - -支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` - -```html -大号按钮 -普通按钮 -小型按钮 -迷你按钮 -``` - -### 块级元素 - -按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素 - -```html -块级元素 -``` - -### 页面导航 - -可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转 - -```html -URL 跳转 -路由跳转 -``` - -### 自定义颜色 - -通过`color`属性可以自定义按钮的颜色 - -```html -单色按钮 -单色按钮 -渐变色按钮 -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| type | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | -| size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` | -| text | 按钮文字 | _string_ | - | -| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | -| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | -| tag | 根节点的 HTML 标签 | _string_ | `button` | -| native-type | 原生 button 标签的 type 属性 | _string_ | - | -| block | 是否为块级元素 | _boolean_ | `false` | -| plain | 是否为朴素按钮 | _boolean_ | `false` | -| square | 是否为方形按钮 | _boolean_ | `false` | -| round | 是否为圆形按钮 | _boolean_ | `false` | -| disabled | 是否禁用按钮 | _boolean_ | `false` | -| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` | -| loading | 是否显示为加载状态 | _boolean_ | `false` | -| loading-text | 加载状态提示文字 | _string_ | - | -| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | _string_ | `circular` | -| loading-size | 加载图标大小 | _string_ | `20px` | -| url | 点击后跳转的链接地址 | _string_ | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | -| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ---------- | ---------------------------------------- | ------------------- | -| click | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_ | -| touchstart | 开始触摸按钮时触发 | _event: TouchEvent_ | diff --git a/src-next/button/demo/index.vue b/src-next/button/demo/index.vue deleted file mode 100644 index 2eb52e3bd..000000000 --- a/src-next/button/demo/index.vue +++ /dev/null @@ -1,173 +0,0 @@ - - - - - diff --git a/src-next/button/index.less b/src-next/button/index.less deleted file mode 100644 index 5f2ad00ae..000000000 --- a/src-next/button/index.less +++ /dev/null @@ -1,183 +0,0 @@ -@import '../style/var'; - -.van-button { - position: relative; - display: inline-block; - box-sizing: border-box; - height: @button-default-height; - margin: 0; - padding: 0; - font-size: @button-default-font-size; - line-height: @button-default-line-height; - text-align: center; - border-radius: @button-border-radius; - cursor: pointer; - transition: opacity @animation-duration-fast; - -webkit-appearance: none; - - &::before { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - background-color: @black; - border: inherit; - border-color: @black; - border-radius: inherit; /* inherit parent's border radius */ - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; - } - - &:active::before { - opacity: 0.1; - } - - &--loading, - &--disabled { - &::before { - display: none; - } - } - - &--default { - color: @button-default-color; - background-color: @button-default-background-color; - border: @button-border-width solid @button-default-border-color; - } - - &--primary { - color: @button-primary-color; - background-color: @button-primary-background-color; - border: @button-border-width solid @button-primary-border-color; - } - - &--info { - color: @button-info-color; - background-color: @button-info-background-color; - border: @button-border-width solid @button-info-border-color; - } - - &--danger { - color: @button-danger-color; - background-color: @button-danger-background-color; - border: @button-border-width solid @button-danger-border-color; - } - - &--warning { - color: @button-warning-color; - background-color: @button-warning-background-color; - border: @button-border-width solid @button-warning-border-color; - } - - &--plain { - background-color: @button-plain-background-color; - - &.van-button--primary { - color: @button-primary-background-color; - } - - &.van-button--info { - color: @button-info-background-color; - } - - &.van-button--danger { - color: @button-danger-background-color; - } - - &.van-button--warning { - color: @button-warning-background-color; - } - } - - &--large { - width: 100%; - height: @button-large-height; - } - - &--normal { - padding: 0 15px; - font-size: @button-normal-font-size; - } - - &--small { - height: @button-small-height; - padding: 0 @padding-xs; - font-size: @button-small-font-size; - } - - &__loading { - color: inherit; - font-size: inherit; - } - - &--mini { - height: @button-mini-height; - padding: 0 @padding-base; - font-size: @button-mini-font-size; - - & + .van-button--mini { - margin-left: @padding-base; - } - } - - &--block { - display: block; - width: 100%; - } - - &--disabled { - cursor: not-allowed; - opacity: @button-disabled-opacity; - } - - &--loading { - cursor: default; - } - - &--round { - border-radius: @button-round-border-radius; - } - - &--square { - border-radius: 0; - } - - // align-items are ignored when flex container is a button in legacy safari - // see: https://bugs.webkit.org/show_bug.cgi?id=169700 - &__content { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - } - - &__icon { - min-width: 1em; - font-size: 1.2em; - line-height: inherit; - } - - &__icon + &__text, - &__loading + &__text { - margin-left: 5px; - } - - &--hairline { - border-width: 0; - - &::after { - border-color: inherit; - border-radius: @button-border-radius * 2; - } - - &.van-button--round::after { - border-radius: @button-round-border-radius; - } - - &.van-button--square::after { - border-radius: 0; - } - } -} diff --git a/src-next/button/test/__snapshots__/demo.spec.js.snap b/src-next/button/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 9d218df71..000000000 --- a/src-next/button/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,86 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; diff --git a/src-next/button/test/__snapshots__/index.spec.js.snap b/src-next/button/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 239b474c2..000000000 --- a/src-next/button/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`icon-prefix prop 1`] = ` - -`; - -exports[`loading-size prop 1`] = ` - -`; diff --git a/src-next/button/test/demo.spec.js b/src-next/button/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/button/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/button/test/index.spec.js b/src-next/button/test/index.spec.js deleted file mode 100644 index bd9d96bdb..000000000 --- a/src-next/button/test/index.spec.js +++ /dev/null @@ -1,95 +0,0 @@ -import { mount } from '../../../test'; -import Button from '..'; - -test('loading-size prop', () => { - const wrapper = mount(Button, { - propsData: { - loading: true, - loadingSize: '10px', - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('click event', () => { - const onClick = jest.fn(); - const wrapper = mount(Button, { - context: { - on: { - click: onClick, - }, - }, - }); - - wrapper.trigger('click'); - expect(onClick).toHaveBeenCalled(); -}); - -test('not trigger click event when disabled', () => { - const onClick = jest.fn(); - const wrapper = mount(Button, { - propsData: { - disabled: true, - }, - context: { - on: { - click: onClick, - }, - }, - }); - - wrapper.trigger('click'); - expect(onClick).toHaveBeenCalledTimes(0); -}); - -test('not trigger click event when loading', () => { - const onClick = jest.fn(); - const wrapper = mount(Button, { - propsData: { - loading: true, - }, - context: { - on: { - click: onClick, - }, - }, - }); - - wrapper.trigger('click'); - expect(onClick).toHaveBeenCalledTimes(0); -}); - -test('touchstart event', () => { - const onTouchstart = jest.fn(); - const wrapper = mount(Button, { - context: { - on: { - touchstart: onTouchstart, - }, - }, - }); - - wrapper.trigger('touchstart'); - expect(onTouchstart).toHaveBeenCalled(); -}); - -test('hide border when color is gradient', () => { - const wrapper = mount(Button, { - propsData: { - color: 'linear-gradient(#000, #fff)', - }, - }); - - expect(wrapper.element.style.border).toEqual('0px'); -}); - -test('icon-prefix prop', () => { - const wrapper = mount(Button, { - propsData: { - icon: 'success', - iconPrefix: 'my-icon', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/cell-group/index.less b/src-next/cell-group/index.less deleted file mode 100644 index bc42a8bea..000000000 --- a/src-next/cell-group/index.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '../style/var'; - -.van-cell-group { - background-color: @cell-group-background-color; - - &__title { - padding: @cell-group-title-padding; - color: @cell-group-title-color; - font-size: @cell-group-title-font-size; - line-height: @cell-group-title-line-height; - } -} diff --git a/src-next/cell/README.md b/src-next/cell/README.md deleted file mode 100644 index 63e9248b5..000000000 --- a/src-next/cell/README.md +++ /dev/null @@ -1,164 +0,0 @@ -# Cell - -### Install - -```js -import Vue from 'vue'; -import { Cell, CellGroup } from 'vant'; - -Vue.use(Cell); -Vue.use(CellGroup); -``` - -## Usage - -### Basic Usage - -```html - - - - -``` - -### Size - -```html - - - - -``` - -### Left Icon - -```html - - - -``` - -### Value only - -```html - - - -``` - -### Link - -```html - - - - - -``` - -### Router - -```html - - - - -``` - -### Group Title - -```html - - - - - - -``` - -### Use Slots - -```html - - - - - - - - - -``` - -### Vertical Center - -```html - -``` - -## API - -### CellGroup Props - -| Attribute | Description | Type | Default | -| --------- | ---------------------------- | --------- | ------- | -| title | Group title | _string_ | - | -| border | Whether to show outer border | _boolean_ | `true` | - -### Cell Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| title | Title | _number \| string_ | - | -| value | Right text | _number \| string_ | - | -| label | Description below the title | _string_ | - | -| size | Size，can be set to `large` | _string_ | - | -| icon | Left Icon | _string_ | - | -| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | -| border | Whether to show inner border | _boolean_ | `true` | -| center | Whether to center content vertically | _boolean_ | `true` | -| url | Link URL | _string_ | - | -| to | Target route of the link, same as to of vue-router | _string \| object_ | - | -| replace | If true, the navigation will not leave a history record | _boolean_ | `false` | -| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | -| is-link | Whether to show link icon | _boolean_ | `false` | -| required | Whether to show required mark | _boolean_ | `false` | -| arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` | -| title-style | Title style | _any_ | - | -| title-class | Title className | _any_ | - | -| value-class | Value className | _any_ | - | -| label-class | Label className | _any_ | - | - -### Cell Events - -| Event | Description | Arguments | -| ----- | ------------------------- | -------------- | -| click | Triggered when click cell | _event: Event_ | - -### CellGroup Slots - -| Name | Description | -| ------- | ------------ | -| default | Default slot | -| title | Custom title | - -### Cell Slots - -| Name | Description | -| ---------- | --------------------------------- | -| default | Custom value | -| icon | Custom icon | -| title | Custom title | -| label | Custom label | -| right-icon | Custom right icon | -| extra | Custom extra content on the right | diff --git a/src-next/cell/README.zh-CN.md b/src-next/cell/README.zh-CN.md deleted file mode 100644 index d02da1172..000000000 --- a/src-next/cell/README.zh-CN.md +++ /dev/null @@ -1,167 +0,0 @@ -# Cell 单元格 - -### 引入 - -```js -import Vue from 'vue'; -import { Cell, CellGroup } from 'vant'; - -Vue.use(Cell); -Vue.use(CellGroup); -``` - -## 代码演示 - -### 基础用法 - -`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框 - -```html - - - - -``` - -### 单元格大小 - -通过`size`属性可以控制单元格的大小 - -```html - - -``` - -### 展示图标 - -通过`icon`属性在标题左侧展示图标 - -```html - -``` - -### 只设置 value - -只设置`value`时，内容会靠左对齐 - -```html - -``` - -### 展示箭头 - -设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向 - -```html - - - -``` - -### 页面导航 - -可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转 - -```html - - -``` - -### 分组标题 - -通过`CellGroup`的`title`属性可以指定分组标题 - -```html - - - - - - -``` - -### 使用插槽 - -如以上用法不能满足你的需求，可以使用插槽来自定义内容 - -```html - - - - - - - - - -``` - -### 垂直居中 - -通过`center`属性可以让`Cell`的左右内容都垂直居中 - -```html - -``` - -## API - -### CellGroup Props - -| 参数 | 说明 | 类型 | 默认值 | -| ------ | -------------- | --------- | ------ | -| title | 分组标题 | _string_ | `-` | -| border | 是否显示外边框 | _boolean_ | `true` | - -### Cell Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 左侧标题 | _number \| string_ | - | -| value | 右侧内容 | _number \| string_ | - | -| label | 标题下方的描述信息 | _string_ | - | -| size | 单元格大小，可选值为 `large` | _string_ | - | -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | -| url | 点击后跳转的链接地址 | _string_ | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | -| border | 是否显示内边框 | _boolean_ | `true` | -| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | -| clickable | 是否开启点击反馈 | _boolean_ | `false` | -| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | -| required | 是否显示表单必填星号 | _boolean_ | `false` | -| center | 是否使内容垂直居中 | _boolean_ | `false` | -| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | -| title-style | 左侧标题额外样式 | _any_ | - | -| title-class | 左侧标题额外类名 | _any_ | - | -| value-class | 右侧内容额外类名 | _any_ | - | -| label-class | 描述信息额外类名 | _any_ | - | - -### Cell Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------------- | -------------- | -| click | 点击单元格时触发 | _event: Event_ | - -### CellGroup Slots - -| 名称 | 说明 | -| ------- | -------------- | -| default | 默认插槽 | -| title | 自定义分组标题 | - -### Cell Slots - -| 名称 | 说明 | -| ---------- | ----------------------------- | -| default | 自定义右侧 value 的内容 | -| title | 自定义左侧 title 的内容 | -| label | 自定义标题下方 label 的内容 | -| icon | 自定义左侧图标 | -| right-icon | 自定义右侧按钮，默认为`arrow` | -| extra | 自定义单元格最右侧的额外内容 | diff --git a/src-next/cell/demo/index.vue b/src-next/cell/demo/index.vue deleted file mode 100644 index f7b47398a..000000000 --- a/src-next/cell/demo/index.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - - - diff --git a/src-next/cell/index.less b/src-next/cell/index.less deleted file mode 100644 index 8bcb4878a..000000000 --- a/src-next/cell/index.less +++ /dev/null @@ -1,104 +0,0 @@ -@import '../style/var'; -@import '../style/mixins/hairline'; - -.van-cell { - position: relative; - display: flex; - box-sizing: border-box; - width: 100%; - padding: @cell-vertical-padding @cell-horizontal-padding; - overflow: hidden; - color: @cell-text-color; - font-size: @cell-font-size; - line-height: @cell-line-height; - background-color: @cell-background-color; - - &::after { - .hairline-bottom(@cell-border-color, @padding-md, @padding-md); - } - - &:last-child::after, - &--borderless::after { - display: none; - } - - &__label { - margin-top: @cell-label-margin-top; - color: @cell-label-color; - font-size: @cell-label-font-size; - line-height: @cell-label-line-height; - } - - &__title, - &__value { - flex: 1; - } - - &__value { - position: relative; - overflow: hidden; - color: @cell-value-color; - text-align: right; - vertical-align: middle; - word-wrap: break-word; - - &--alone { - color: @text-color; - text-align: left; - } - } - - &__left-icon, - &__right-icon { - min-width: 1em; - height: @cell-line-height; - font-size: @cell-icon-size; - line-height: @cell-line-height; - } - - &__left-icon { - margin-right: 5px; - } - - &__right-icon { - margin-left: 5px; - color: @cell-right-icon-color; - } - - &--clickable { - cursor: pointer; - - &:active { - background-color: @cell-active-color; - } - } - - &--required { - overflow: visible; - - &::before { - position: absolute; - left: @padding-xs; - color: @cell-required-color; - font-size: @cell-font-size; - content: '*'; - } - } - - &--center { - align-items: center; - } - - &--large { - padding-top: @cell-large-vertical-padding; - padding-bottom: @cell-large-vertical-padding; - - .van-cell__title { - font-size: @cell-large-title-font-size; - } - - .van-cell__label { - font-size: @cell-large-label-font-size; - } - } -} diff --git a/src-next/cell/shared.ts b/src-next/cell/shared.ts deleted file mode 100644 index f3c2ec949..000000000 --- a/src-next/cell/shared.ts +++ /dev/null @@ -1,40 +0,0 @@ -export type SharedCellProps = { - icon?: string; - size?: string; - border: boolean; - center?: boolean; - isLink?: boolean; - required?: boolean; - clickable?: boolean; - iconPrefix?: string; - titleStyle?: any; - titleClass?: any; - valueClass?: any; - labelClass?: any; - title?: string | number; - value?: string | number; - label?: string | number; - arrowDirection?: 'up' | 'down' | 'left' | 'right'; -}; - -export const cellProps = { - icon: String, - size: String, - center: Boolean, - isLink: Boolean, - required: Boolean, - clickable: Boolean, - iconPrefix: String, - titleStyle: null as any, - titleClass: null as any, - valueClass: null as any, - labelClass: null as any, - title: [Number, String], - value: [Number, String], - label: [Number, String], - arrowDirection: String, - border: { - type: Boolean, - default: true, - }, -}; diff --git a/src-next/cell/test/__snapshots__/demo.spec.js.snap b/src-next/cell/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 20a039dac..000000000 --- a/src-next/cell/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,110 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
单元格
-
内容
-
-
-
单元格 -
描述信息
-
-
内容
-
-
-
-
-
-
单元格
-
内容
-
-
-
单元格 -
描述信息
-
-
内容
-
-
-
-
- -
单元格
-
内容
-
-
-
-
-
内容
-
-
-
-
-
单元格
- -
-
-
单元格
-
内容
- -
-
-
单元格
-
内容
- -
-
-
-
-
URL 跳转
- -
-
-
路由跳转
- -
-
-
-
-
分组 1
-
-
-
单元格
-
内容
-
-
-
-
-
分组 2
-
-
-
单元格
-
内容
-
-
-
-
-
-
-
单元格 标签
-
内容
- -
-
- -
单元格
- -
-
-
-
-
单元格 -
描述信息
-
-
内容
-
-
-
-`; diff --git a/src-next/cell/test/__snapshots__/index.spec.js.snap b/src-next/cell/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index cd68daa26..000000000 --- a/src-next/cell/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CellGroup title slot 1`] = ` -
-
CustomTitle
-
-
-`; - -exports[`arrow direction 1`] = ` -
-
-`; - -exports[`icon-prefix prop 1`] = ` -
-
-`; - -exports[`render slot 1`] = ` -
Custom Icon
Custom Title
Custom Label
-
Custom Extra
-`; - -exports[`title-style prop 1`] = ` -
-
title
-
-`; diff --git a/src-next/cell/test/demo.spec.js b/src-next/cell/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/cell/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/cell/test/index.spec.js b/src-next/cell/test/index.spec.js deleted file mode 100644 index 0fd6b240d..000000000 --- a/src-next/cell/test/index.spec.js +++ /dev/null @@ -1,80 +0,0 @@ -import Cell from '..'; -import CellGroup from '../../cell-group'; -import { mount } from '../../../test'; - -test('click event', () => { - const click = jest.fn(); - const wrapper = mount(Cell, { - context: { - on: { - click, - }, - }, - }); - - wrapper.trigger('click'); - expect(click).toHaveBeenCalled(); -}); - -test('arrow direction', () => { - const wrapper = mount(Cell, { - propsData: { - isLink: true, - arrowDirection: 'down', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('render slot', () => { - const wrapper = mount({ - template: ` - - - - - - - `, - components: { - Cell, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('title-style prop', () => { - const wrapper = mount(Cell, { - propsData: { - title: 'title', - titleStyle: { - color: 'red', - }, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('CellGroup title slot', () => { - const wrapper = mount(CellGroup, { - scopedSlots: { - title: () => 'CustomTitle', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('icon-prefix prop', () => { - const wrapper = mount(Cell, { - propsData: { - iconPrefix: 'my-icon', - icon: 'success', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/circle/README.md b/src-next/circle/README.md deleted file mode 100644 index 6b2ae7a1d..000000000 --- a/src-next/circle/README.md +++ /dev/null @@ -1,126 +0,0 @@ -# Circle - -### Install - -```js -import Vue from 'vue'; -import { Circle } from 'vant'; - -Vue.use(Circle); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -export default { - data() { - return { - currentRate: 0, - }; - }, - computed: { - text() { - return this.currentRate.toFixed(0) + '%'; - }, - }, -}; -``` - -### Custom Width - -```html - -``` - -### Custom Color - -```html - -``` - -### Gradient - -```html - -``` - -```js -export default { - data() { - return { - currentRate: 0, - gradientColor: { - '0%': '#3fecff', - '100%': '#6149f6', - }, - }; - }, -}; -``` - -### Counter Clockwise - -```html - -``` - -### Custom Size - -```html - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| v-model:currentRate | Current rate | _number_ | - | -| rate | Target rate | _number \| string_ | `100` | -| size | Circle size | _number \| string_ | `100px` | -| color `v2.1.4` | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` | -| layer-color | Layer color | _string_ | `white` | -| fill | Fill color | _string_ | `none` | -| speed | Animate speed（rate/s） | _number \| string_ | `0` | -| text | Text | _string_ | - | -| stroke-width | Stroke width | _number \| string_ | `40` | -| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` | -| clockwise | Whether to be clockwise | _boolean_ | `true` | - -### Slots - -| Name | Description | -| ------- | ------------------- | -| default | custom text content | diff --git a/src-next/circle/README.zh-CN.md b/src-next/circle/README.zh-CN.md deleted file mode 100644 index dc12f5aa5..000000000 --- a/src-next/circle/README.zh-CN.md +++ /dev/null @@ -1,143 +0,0 @@ -# Circle 环形进度条 - -### 引入 - -```js -import Vue from 'vue'; -import { Circle } from 'vant'; - -Vue.use(Circle); -``` - -## 代码演示 - -### 基础用法 - -`rate`属性表示进度条的目标进度，`v-model:currentRate`表示动画过程中的实时进度。当`rate`发生变化时，`v-model:currentRate`会以`speed`的速度变化，直至达到`rate`设定的值。 - -```html - -``` - -```js -export default { - data() { - return { - currentRate: 0, - }; - }, - computed: { - text() { - return this.currentRate.toFixed(0) + '%'; - }, - }, -}; -``` - -### 宽度定制 - -通过`stroke-width`属性来控制进度条宽度 - -```html - -``` - -### 颜色定制 - -通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色 - -```html - -``` - -### 渐变色 - -`color`属性支持传入对象格式来定义渐变色 - -```html - -``` - -```js -export default { - data() { - return { - currentRate: 0, - gradientColor: { - '0%': '#3fecff', - '100%': '#6149f6', - }, - }; - }, -}; -``` - -### 逆时针方向 - -将`clockwise`设置为`false`，进度会从逆时针方向开始 - -```html - -``` - -### 大小定制 - -通过`size`属性设置圆环直径 - -```html - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| v-model:currentRate | 当前进度 | _number_ | - | -| rate | 目标进度 | _number \| string_ | `100` | -| size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` | -| color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | -| layer-color | 轨道颜色 | _string_ | `white` | -| fill | 填充颜色 | _string_ | `none` | -| speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` | -| text | 文字 | _string_ | - | -| stroke-width | 进度条宽度 | _number \| string_ | `40` | -| stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` | -| clockwise | 是否顺时针增加 | _boolean_ | `true` | - -### Slots - -| 名称 | 说明 | -| ------- | -------------- | -| default | 自定义文字内容 | diff --git a/src-next/circle/demo/index.vue b/src-next/circle/demo/index.vue deleted file mode 100644 index 975e86e26..000000000 --- a/src-next/circle/demo/index.vue +++ /dev/null @@ -1,137 +0,0 @@ - - - - - diff --git a/src-next/circle/index.js b/src-next/circle/index.js deleted file mode 100644 index 0f11ef480..000000000 --- a/src-next/circle/index.js +++ /dev/null @@ -1,186 +0,0 @@ -import { createNamespace, isObject, addUnit } from '../utils'; -import { raf, cancelRaf } from '../utils/dom/raf'; -import { BLUE, WHITE } from '../utils/constant'; - -const [createComponent, bem] = createNamespace('circle'); - -const PERIMETER = 3140; - -let uid = 0; - -function format(rate) { - return Math.min(Math.max(rate, 0), 100); -} - -function getPath(clockwise, viewBoxSize) { - const sweepFlag = clockwise ? 1 : 0; - return `M ${viewBoxSize / 2} ${ - viewBoxSize / 2 - } m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`; -} - -export default createComponent({ - props: { - text: String, - strokeLinecap: String, - currentRate: { - type: Number, - default: 0, - }, - speed: { - type: [Number, String], - default: 0, - }, - size: { - type: [Number, String], - default: 100, - }, - fill: { - type: String, - default: 'none', - }, - rate: { - type: [Number, String], - default: 100, - }, - layerColor: { - type: String, - default: WHITE, - }, - color: { - type: [String, Object], - default: BLUE, - }, - strokeWidth: { - type: [Number, String], - default: 40, - }, - clockwise: { - type: Boolean, - default: true, - }, - }, - - emits: ['update:currentRate'], - - beforeCreate() { - this.uid = `van-circle-gradient-${uid++}`; - }, - - computed: { - style() { - const size = addUnit(this.size); - return { - width: size, - height: size, - }; - }, - - path() { - return getPath(this.clockwise, this.viewBoxSize); - }, - - viewBoxSize() { - return +this.strokeWidth + 1000; - }, - - layerStyle() { - const offset = (PERIMETER * this.currentRate) / 100; - - return { - stroke: `${this.color}`, - strokeWidth: `${+this.strokeWidth + 1}px`, - strokeLinecap: this.strokeLinecap, - strokeDasharray: `${offset}px ${PERIMETER}px`, - }; - }, - - hoverStyle() { - return { - fill: `${this.fill}`, - stroke: `${this.layerColor}`, - strokeWidth: `${this.strokeWidth}px`, - }; - }, - - gradient() { - return isObject(this.color); - }, - - LinearGradient() { - if (!this.gradient) { - return; - } - - const Stops = Object.keys(this.color) - .sort((a, b) => parseFloat(a) - parseFloat(b)) - .map((key, index) => ( - - )); - - return ( - - - {Stops} - - - ); - }, - }, - - watch: { - rate: { - handler(rate) { - this.startTime = Date.now(); - this.startRate = this.currentRate; - this.endRate = format(rate); - this.increase = this.endRate > this.startRate; - this.duration = Math.abs( - ((this.startRate - this.endRate) * 1000) / this.speed - ); - - if (this.speed) { - cancelRaf(this.rafId); - this.rafId = raf(this.animate); - } else { - this.$emit('update:currentRate', this.endRate); - } - }, - immediate: true, - }, - }, - - methods: { - animate() { - const now = Date.now(); - const progress = Math.min((now - this.startTime) / this.duration, 1); - const rate = progress * (this.endRate - this.startRate) + this.startRate; - - this.$emit('update:currentRate', format(parseFloat(rate.toFixed(1)))); - - if (this.increase ? rate < this.endRate : rate > this.endRate) { - this.rafId = raf(this.animate); - } - }, - }, - - render() { - return ( -
- - {this.LinearGradient} - - - - {this.$slots.default - ? this.$slots.default() - : this.text &&
{this.text}
} -
- ); - }, -}); diff --git a/src-next/circle/index.less b/src-next/circle/index.less deleted file mode 100644 index 46edec25c..000000000 --- a/src-next/circle/index.less +++ /dev/null @@ -1,34 +0,0 @@ -@import '../style/var'; - -.van-circle { - position: relative; - display: inline-block; - text-align: center; - - svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - &__layer { - fill: none; - stroke-linecap: round; - } - - &__text { - position: absolute; - top: 50%; - left: 0; - box-sizing: border-box; - width: 100%; - padding: 0 @padding-base; - color: @circle-text-color; - font-weight: @circle-text-font-weight; - font-size: @circle-text-font-size; - line-height: @circle-text-line-height; - transform: translateY(-50%); - } -} diff --git a/src-next/circle/test/__snapshots__/demo.spec.js.snap b/src-next/circle/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 6e0db1b94..000000000 --- a/src-next/circle/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
- - - -
70%
-
-
-
-
- - - -
宽度定制
-
-
- - - -
颜色定制
-
-
- - - - - - - - - -
渐变色
-
-
- - - -
逆时针
-
-
- - - -
大小定制
-
-
-
-
-`; diff --git a/src-next/circle/test/__snapshots__/index.spec.js.snap b/src-next/circle/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 8749d4958..000000000 --- a/src-next/circle/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`size prop 1`] = ` -
- - -
-`; - -exports[`speed is 0 1`] = ` -
- - -
-`; - -exports[`stroke-linecap prop 1`] = ` -
- - -
-`; diff --git a/src-next/circle/test/demo.spec.js b/src-next/circle/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/circle/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/circle/test/index.spec.js b/src-next/circle/test/index.spec.js deleted file mode 100644 index 5b6a1481f..000000000 --- a/src-next/circle/test/index.spec.js +++ /dev/null @@ -1,59 +0,0 @@ -import Vue from 'vue'; -import Circle from '..'; -import { mount, later } from '../../../test'; - -test('speed is 0', async () => { - const wrapper = mount(Circle, { - propsData: { - rate: 50, - value: 0, - }, - listeners: { - input(value) { - Vue.nextTick(() => { - wrapper.setProps({ value }); - }); - }, - }, - }); - - await later(); - expect(wrapper).toMatchSnapshot(); -}); - -test('animate', async () => { - const onInput = jest.fn(); - mount(Circle, { - propsData: { - rate: 50, - speed: 100, - }, - listeners: { - input: onInput, - }, - }); - - await later(50); - expect(onInput).toHaveBeenCalled(); - expect(onInput.mock.calls[0][0]).not.toEqual(0); -}); - -test('size prop', () => { - const wrapper = mount(Circle, { - propsData: { - size: 100, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('stroke-linecap prop', () => { - const wrapper = mount(Circle, { - propsData: { - strokeLinecap: 'square', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/col/README.md b/src-next/col/README.md deleted file mode 100644 index d6be11217..000000000 --- a/src-next/col/README.md +++ /dev/null @@ -1,119 +0,0 @@ -# Layout - -### Intro - -Quickly and easily create layouts with `van-row` and `van-col` - -### Install - -```js -import Vue from 'vue'; -import { Col, Row } from 'vant'; - -Vue.use(Col); -Vue.use(Row); -``` - -## Usage - -### Basic Usage - -Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid. - -```html - - span: 8 - span: 8 - span: 8 - - - - span: 4 - offset: 4, span: 10 - span: 6 - - - - offset: 12, span: 12 - -``` - -### Column Spacing - -Set grid spacing using `gutter` attribute. The default value is 0 - -```html - - span: 8 - span: 8 - span: 8 - -``` - -### Flex Layout - -Setting `type` to `flex` to enable flex layout - -```html - - span: 6 - span: 6 - span: 6 - - - - span: 6 - span: 6 - span: 6 - - - - span: 6 - span: 6 - span: 6 - - - - span: 6 - span: 6 - span: 6 - - - - span: 6 - span: 6 - span: 6 - -``` - -## API - -### Row Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| type | Layout type, can be set to `flex` | _string_ | - | -| gutter | Grid spacing（px） | _number \| string_ | - | -| tag | Custom element tag | _string_ | `div` | -| justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` | -| align | Flex cross axis, be set to center/bottom | _string_ | `top` | - -### Col Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| span | number of column the grid spans | _number \| string_ | - | -| offset | number of spacing on the left side of the grid | _number \| string_ | - | -| tag | Custom element tag | _string_ | `div` | - -### Row Events - -| Event | Description | Arguments | -| ----- | ------------------------ | -------------- | -| click | Triggered when click row | _event: Event_ | - -### Col Events - -| Event | Description | Arguments | -| ----- | ------------------------ | -------------- | -| click | Triggered when click col | _event: Event_ | diff --git a/src-next/col/README.zh-CN.md b/src-next/col/README.zh-CN.md deleted file mode 100644 index 7eb405993..000000000 --- a/src-next/col/README.zh-CN.md +++ /dev/null @@ -1,124 +0,0 @@ -# Layout 布局 - -### 介绍 - -Layout 提供了`van-row`和`van-col`两个组件来进行行列布局 - -### 引入 - -```js -import Vue from 'vue'; -import { Col, Row } from 'vant'; - -Vue.use(Col); -Vue.use(Row); -``` - -## 代码演示 - -### 基础用法 - -Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比 -此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同 - -```html - - span: 8 - span: 8 - span: 8 - - - - span: 4 - offset: 4, span: 10 - - - - offset: 12, span: 12 - -``` - -### 设置列元素间距 - -通过`gutter`属性可以设置列元素之间的间距，默认间距为 0 - -```html - - span: 8 - span: 8 - span: 8 - -``` - -### Flex 布局 - -将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐 - -```html - - - span: 6 - span: 6 - span: 6 - - - - - span: 6 - span: 6 - span: 6 - - - - - span: 6 - span: 6 - span: 6 - - - - - span: 6 - span: 6 - span: 6 - - - - - span: 6 - span: 6 - span: 6 - -``` - -## API - -### Row Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| type | 布局方式，可选值为`flex` | _string_ | - | -| gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - | -| tag | 自定义元素标签 | _string_ | `div` | -| justify | Flex 主轴对齐方式，可选值为 `end` `center`
`space-around` `space-between` | _string_ | `start` | -| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` | - -### Col Props - -| 参数 | 说明 | 类型 | 默认值 | -| ------ | -------------- | ------------------ | ------ | -| span | 列元素宽度 | _number \| string_ | - | -| offset | 列元素偏移距离 | _number \| string_ | - | -| tag | 自定义元素标签 | _string_ | `div` | - -### Row Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------- | -------------- | -| click | 点击时触发 | _event: Event_ | - -### Col Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------- | -------------- | -| click | 点击时触发 | _event: Event_ | diff --git a/src-next/col/demo/index.vue b/src-next/col/demo/index.vue deleted file mode 100644 index 5b396922a..000000000 --- a/src-next/col/demo/index.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - - diff --git a/src-next/col/index.js b/src-next/col/index.js deleted file mode 100644 index 36db2b39c..000000000 --- a/src-next/col/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import { createNamespace } from '../utils'; -import { ChildrenMixin } from '../mixins/relation'; - -const [createComponent, bem] = createNamespace('col'); - -export default createComponent({ - mixins: [ChildrenMixin('vanRow')], - - props: { - span: [Number, String], - offset: [Number, String], - tag: { - type: String, - default: 'div', - }, - }, - - emits: ['click'], - - computed: { - style() { - const { index } = this; - const { spaces } = this.parent || {}; - - if (spaces && spaces[index]) { - const { left, right } = spaces[index]; - return { - paddingLeft: left ? `${left}px` : null, - paddingRight: right ? `${right}px` : null, - }; - } - }, - }, - - methods: { - onClick(event) { - this.$emit('click', event); - }, - }, - - render() { - const { span, offset } = this; - return ( - - {this.$slots.default?.()} - - ); - }, -}); diff --git a/src-next/col/index.less b/src-next/col/index.less deleted file mode 100644 index 35fa2f4f5..000000000 --- a/src-next/col/index.less +++ /dev/null @@ -1,20 +0,0 @@ -@import '../style/var'; - -.van-col { - float: left; - box-sizing: border-box; - min-height: 1px; -} - -.generate-col(24); -.generate-col(@n, @i: 1) when (@i =< @n) { - .van-col--@{i} { - width: @i * 100% / 24; - } - - .van-col--offset-@{i} { - margin-left: @i * 100% / 24; - } - - .generate-col(@n, (@i + 1)); -} diff --git a/src-next/col/test/__snapshots__/demo.spec.js.snap b/src-next/col/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 7c04f9b40..000000000 --- a/src-next/col/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,58 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
span: 8
-
span: 8
-
span: 8
-
-
-
span: 4
-
- offset: 4, span: 10 -
-
-
-
- offset: 12, span: 12 -
-
-
-
-
-
span: 8
-
span: 8
-
span: 8
-
-
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
-`; diff --git a/src-next/col/test/__snapshots__/index.spec.js.snap b/src-next/col/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 2d4588095..000000000 --- a/src-next/col/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`gutter prop 1`] = ` -
-
24
-
12
-
12
-
8
-
8
-
8
-
6
-
6
-
6
-
6
-
7
-
6
-
5
-
4
-
3
-
2
-
-`; diff --git a/src-next/col/test/demo.spec.js b/src-next/col/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/col/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/col/test/index.spec.js b/src-next/col/test/index.spec.js deleted file mode 100644 index dfe0a20ac..000000000 --- a/src-next/col/test/index.spec.js +++ /dev/null @@ -1,48 +0,0 @@ -import Col from '..'; -import Row from '../../row'; -import { mount } from '../../../test'; - -test('Col click event', () => { - const wrapper = mount(Col); - wrapper.trigger('click'); - - expect(wrapper.emitted('click')).toBeTruthy(); -}); - -test('Row click event', () => { - const wrapper = mount(Row); - wrapper.trigger('click'); - - expect(wrapper.emitted('click')).toBeTruthy(); -}); - -test('gutter prop', () => { - const wrapper = mount({ - template: ` - - 24 - - 12 - 12 - - 8 - 8 - 8 - - 6 - 6 - 6 - 6 - - 7 - 6 - 5 - 4 - 3 - 2 - - `, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/count-down/README.md b/src-next/count-down/README.md deleted file mode 100644 index 0ed8d66f8..000000000 --- a/src-next/count-down/README.md +++ /dev/null @@ -1,165 +0,0 @@ -# CountDown - -### Install - -```js -import Vue from 'vue'; -import { CountDown } from 'vant'; - -Vue.use(CountDown); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -export default { - data() { - return { - time: 30 * 60 * 60 * 1000, - }; - }, -}; -``` - -### Custom Format - -```html - -``` - -### Millisecond - -```html - -``` - -### Custom Style - -```html - - - - - -``` - -### Manual Control - -```html - - - - - - -``` - -```js -import { Toast } from 'vant'; - -export default { - methods: { - start() { - this.$refs.countDown.start(); - }, - pause() { - this.$refs.countDown.pause(); - }, - reset() { - this.$refs.countDown.reset(); - }, - finish() { - Toast('Finished'); - }, - }, -}; -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| time | Total time | _number \| string_ | `0` | -| format | Time format | _string_ | `HH:mm:ss` | -| auto-start | Whether to auto start count down | _boolean_ | `true` | -| millisecond | Whether to enable millisecond render | _boolean_ | `false` | - -### Available formats - -| Format | Description | -| ------ | --------------------- | -| DD | Day | -| HH | Hour | -| mm | Minute | -| ss | Second | -| S | Millisecond, 1-digit | -| SS | Millisecond, 2-digits | -| SSS | Millisecond, 3-digits | - -### Events - -| Event | Description | Arguments | -| --------------- | ---------------------------------- | -------------------- | -| finish | Triggered when count down finished | - | -| change `v2.4.4` | Triggered when count down changed | _timeData: TimeData_ | - -### Slots - -| Name | Description | SlotProps | -| ------- | -------------- | -------------------- | -| default | Custom Content | _timeData: TimeData_ | - -### TimeData Structure - -| Name | Description | Type | -| ------------ | ------------------- | -------- | -| days | Remain days | _number_ | -| hours | Remain hours | _number_ | -| minutes | Remain minutes | _number_ | -| seconds | Remain seconds | _number_ | -| milliseconds | Remain milliseconds | _number_ | - -### Methods - -Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods - -| Name | Description | Attribute | Return value | -| ----- | ---------------- | --------- | ------------ | -| start | Start count down | - | - | -| pause | Pause count down | - | - | -| reset | Reset count down | - | - | diff --git a/src-next/count-down/README.zh-CN.md b/src-next/count-down/README.zh-CN.md deleted file mode 100644 index cfd1aada5..000000000 --- a/src-next/count-down/README.zh-CN.md +++ /dev/null @@ -1,183 +0,0 @@ -# CountDown 倒计时 - -### 引入 - -```js -import Vue from 'vue'; -import { CountDown } from 'vant'; - -Vue.use(CountDown); -``` - -## 代码演示 - -### 基础用法 - -`time`属性表示倒计时总时长，单位为毫秒 - -```html - -``` - -```js -export default { - data() { - return { - time: 30 * 60 * 60 * 1000, - }; - }, -}; -``` - -### 自定义格式 - -通过`format`属性设置倒计时文本的内容 - -```html - -``` - -### 毫秒级渲染 - -倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染 - -```html - -``` - -### 自定义样式 - -通过插槽自定义倒计时的样式，`timeData`对象格式见下方表格 - -```html - - - - - -``` - -### 手动控制 - -通过 ref 获取到组件实例后，可以调用`start`、`pause`、`reset`方法 - -```html - - - - - - -``` - -```js -import { Toast } from 'vant'; - -export default { - methods: { - start() { - this.$refs.countDown.start(); - }, - pause() { - this.$refs.countDown.pause(); - }, - reset() { - this.$refs.countDown.reset(); - }, - finish() { - Toast('倒计时结束'); - }, - }, -}; -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | -------------------- | ------------------ | ---------- | -| time | 倒计时时长，单位毫秒 | _number \| string_ | `0` | -| format | 时间格式 | _string_ | `HH:mm:ss` | -| auto-start | 是否自动开始倒计时 | _boolean_ | `true` | -| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` | - -### format 格式 - -| 格式 | 说明 | -| ---- | ------------ | -| DD | 天数 | -| HH | 小时 | -| mm | 分钟 | -| ss | 秒数 | -| S | 毫秒（1 位） | -| SS | 毫秒（2 位） | -| SSS | 毫秒（3 位） | - -### Events - -| 事件名 | 说明 | 回调参数 | -| --------------- | ---------------- | -------------------- | -| finish | 倒计时结束时触发 | - | -| change `v2.4.4` | 倒计时变化时触发 | _timeData: TimeData_ | - -### Slots - -| 名称 | 说明 | SlotProps | -| ------- | ---------- | -------------------- | -| default | 自定义内容 | _timeData: TimeData_ | - -### TimeData 格式 - -| 名称 | 说明 | 类型 | -| ------------ | -------- | -------- | -| days | 剩余天数 | _number_ | -| hours | 剩余小时 | _number_ | -| minutes | 剩余分钟 | _number_ | -| seconds | 剩余秒数 | _number_ | -| milliseconds | 剩余毫秒 | _number_ | - -### 方法 - -通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) - -| 方法名 | 说明 | 参数 | 返回值 | -| --- | --- | --- | --- | -| start | 开始倒计时 | - | - | -| pause | 暂停倒计时 | - | - | -| reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - | - -## 常见问题 - -### 在 iOS 系统上倒计时不生效？ - -如果你遇到了在 iOS 上倒计时不生效的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。 - -对此问题的详细解释：[stackoverflow](https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios)。 diff --git a/src-next/count-down/demo/index.vue b/src-next/count-down/demo/index.vue deleted file mode 100644 index 47619b927..000000000 --- a/src-next/count-down/demo/index.vue +++ /dev/null @@ -1,130 +0,0 @@ - - - - - diff --git a/src-next/count-down/index.js b/src-next/count-down/index.js deleted file mode 100644 index b6eb9dd1d..000000000 --- a/src-next/count-down/index.js +++ /dev/null @@ -1,166 +0,0 @@ -import { createNamespace } from '../utils'; -import { raf, cancelRaf } from '../utils/dom/raf'; -import { isSameSecond, parseTimeData, parseFormat } from './utils'; - -const [createComponent, bem] = createNamespace('count-down'); - -export default createComponent({ - props: { - millisecond: Boolean, - time: { - type: [Number, String], - default: 0, - }, - format: { - type: String, - default: 'HH:mm:ss', - }, - autoStart: { - type: Boolean, - default: true, - }, - }, - - emits: ['change', 'finish'], - - data() { - return { - remain: 0, - }; - }, - - computed: { - timeData() { - return parseTimeData(this.remain); - }, - - formattedTime() { - return parseFormat(this.format, this.timeData); - }, - }, - - watch: { - time: { - immediate: true, - handler() { - this.reset(); - }, - }, - }, - - activated() { - if (this.keepAlivePaused) { - this.counting = true; - this.keepAlivePaused = false; - this.tick(); - } - }, - - deactivated() { - if (this.counting) { - this.pause(); - this.keepAlivePaused = true; - } - }, - - beforeDestroy() { - this.pause(); - }, - - methods: { - // @exposed-api - start() { - if (this.counting) { - return; - } - - this.counting = true; - this.endTime = Date.now() + this.remain; - this.tick(); - }, - - // @exposed-api - pause() { - this.counting = false; - cancelRaf(this.rafId); - }, - - // @exposed-api - reset() { - this.pause(); - this.remain = +this.time; - - if (this.autoStart) { - this.start(); - } - }, - - tick() { - if (this.millisecond) { - this.microTick(); - } else { - this.macroTick(); - } - }, - - microTick() { - this.rafId = raf(() => { - /* istanbul ignore if */ - // in case of call reset immediately after finish - if (!this.counting) { - return; - } - - this.setRemain(this.getRemain()); - - if (this.remain > 0) { - this.microTick(); - } - }); - }, - - macroTick() { - this.rafId = raf(() => { - /* istanbul ignore if */ - // in case of call reset immediately after finish - if (!this.counting) { - return; - } - - const remain = this.getRemain(); - - if (!isSameSecond(remain, this.remain) || remain === 0) { - this.setRemain(remain); - } - - if (this.remain > 0) { - this.macroTick(); - } - }); - }, - - getRemain() { - return Math.max(this.endTime - Date.now(), 0); - }, - - setRemain(remain) { - this.remain = remain; - this.$emit('change', this.timeData); - - if (remain === 0) { - this.pause(); - this.$emit('finish'); - } - }, - }, - - render() { - return ( -
- {this.$slots.default - ? this.$slots.default(this.timeData) - : this.formattedTime} -
- ); - }, -}); diff --git a/src-next/count-down/index.less b/src-next/count-down/index.less deleted file mode 100644 index 5a6206a0b..000000000 --- a/src-next/count-down/index.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '../style/var'; - -.van-count-down { - color: @count-down-text-color; - font-size: @count-down-font-size; - line-height: @count-down-line-height; -} diff --git a/src-next/count-down/test/__snapshots__/index.spec.js.snap b/src-next/count-down/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 24d2499e0..000000000 --- a/src-next/count-down/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`complete format prop 1`] = `
01-05-59-59-999
`; - -exports[`disable auto-start prop 1`] = `
100
`; - -exports[`incomplate format prop 1`] = `
29-59-59-999
`; - -exports[`milliseconds format S 1`] = `
01-5
`; - -exports[`milliseconds format SS 1`] = `
01-50
`; diff --git a/src-next/count-down/test/index.spec.js b/src-next/count-down/test/index.spec.js deleted file mode 100644 index 1f0376509..000000000 --- a/src-next/count-down/test/index.spec.js +++ /dev/null @@ -1,233 +0,0 @@ -import CountDown from '..'; -import { mount, later } from '../../../test'; - -test('macro task finish event', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 1, - }, - }); - - expect(wrapper.emitted('finish')).toBeFalsy(); - await later(50); - expect(wrapper.emitted('finish')).toBeTruthy(); -}); - -test('micro task finish event', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 1, - millisecond: true, - }, - }); - - expect(wrapper.emitted('finish')).toBeFalsy(); - await later(50); - expect(wrapper.emitted('finish')).toBeTruthy(); -}); - -test('macro task re-render', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 1000, - format: 'SSS', - }, - }); - - const prevSnapShot = wrapper.html(); - await later(50); - const laterSnapShot = wrapper.html(); - - expect(prevSnapShot !== laterSnapShot).toBeTruthy(); -}); - -test('micro task re-render', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 100, - format: 'SSS', - millisecond: true, - }, - }); - - const prevSnapShot = wrapper.html(); - await later(50); - const laterSnapShot = wrapper.html(); - - expect(prevSnapShot !== laterSnapShot).toBeTruthy(); -}); - -test('disable auto-start prop', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 100, - format: 'SSS', - autoStart: false, - }, - }); - - await later(50); - expect(wrapper).toMatchSnapshot(); -}); - -test('start method', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 100, - format: 'SSS', - autoStart: false, - millisecond: true, - }, - }); - - const prevSnapShot = wrapper.html(); - - wrapper.vm.start(); - wrapper.vm.start(); - - await later(50); - - const laterShapShot = wrapper.html(); - - expect(prevSnapShot !== laterShapShot).toBeTruthy(); -}); - -test('pause method', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 100, - format: 'SSS', - millisecond: true, - }, - }); - - const prevSnapShot = wrapper.html(); - wrapper.vm.pause(); - await later(50); - const laterShapShot = wrapper.html(); - - expect(prevSnapShot === laterShapShot).toBeTruthy(); -}); - -test('reset method', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 100, - format: 'SSS', - millisecond: true, - }, - }); - - const prevSnapShot = wrapper.html(); - await later(50); - wrapper.vm.reset(); - const laterShapShot = wrapper.html(); - - expect(prevSnapShot === laterShapShot).toBeTruthy(); -}); - -test('complete format prop', () => { - const wrapper = mount(CountDown, { - propsData: { - time: 30 * 60 * 60 * 1000 - 1, - autoStart: false, - format: 'DD-HH-mm-ss-SSS', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('milliseconds format SS', () => { - const wrapper = mount(CountDown, { - propsData: { - time: 1500, - autoStart: false, - format: 'ss-SS', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('milliseconds format S', () => { - const wrapper = mount(CountDown, { - propsData: { - time: 1500, - autoStart: false, - format: 'ss-S', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('incomplate format prop', () => { - const wrapper = mount(CountDown, { - propsData: { - time: 30 * 60 * 60 * 1000 - 1, - autoStart: false, - format: 'HH-mm-ss-SSS', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('pause when destroyed', () => { - const wrapper = mount(CountDown); - expect(wrapper.vm.counting).toBeTruthy(); - wrapper.destroy(); - expect(wrapper.vm.counting).toBeFalsy(); -}); - -test('pause when deactivated', async () => { - const wrapper = mount({ - template: ` - - - - `, - data() { - return { - render: true, - }; - }, - methods: { - getCountDown() { - return this.$refs.countDown; - }, - }, - }); - - const countDown = wrapper.vm.getCountDown(); - expect(countDown.counting).toBeTruthy(); - - wrapper.setData({ render: false }); - expect(countDown.counting).toBeFalsy(); - wrapper.setData({ render: true }); - expect(countDown.counting).toBeTruthy(); - - countDown.pause(); - wrapper.setData({ render: false }); - wrapper.setData({ render: true }); - expect(countDown.counting).toBeFalsy(); -}); - -test('change event', async () => { - const wrapper = mount(CountDown, { - propsData: { - time: 1, - }, - }); - - expect(wrapper.emitted('change')).toBeFalsy(); - await later(50); - expect(wrapper.emitted('change')[0][0]).toEqual({ - days: 0, - hours: 0, - milliseconds: 0, - minutes: 0, - seconds: 0, - }); -}); diff --git a/src-next/count-down/utils.ts b/src-next/count-down/utils.ts deleted file mode 100644 index 63c17264e..000000000 --- a/src-next/count-down/utils.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { padZero } from '../utils/format/string'; - -export type TimeData = { - days: number; - hours: number; - minutes: number; - seconds: number; - milliseconds: number; -}; - -const SECOND = 1000; -const MINUTE = 60 * SECOND; -const HOUR = 60 * MINUTE; -const DAY = 24 * HOUR; - -export function parseTimeData(time: number): TimeData { - const days = Math.floor(time / DAY); - const hours = Math.floor((time % DAY) / HOUR); - const minutes = Math.floor((time % HOUR) / MINUTE); - const seconds = Math.floor((time % MINUTE) / SECOND); - const milliseconds = Math.floor(time % SECOND); - - return { - days, - hours, - minutes, - seconds, - milliseconds, - }; -} - -export function parseFormat(format: string, timeData: TimeData): string { - const { days } = timeData; - let { hours, minutes, seconds, milliseconds } = timeData; - - if (format.indexOf('DD') === -1) { - hours += days * 24; - } else { - format = format.replace('DD', padZero(days)); - } - - if (format.indexOf('HH') === -1) { - minutes += hours * 60; - } else { - format = format.replace('HH', padZero(hours)); - } - - if (format.indexOf('mm') === -1) { - seconds += minutes * 60; - } else { - format = format.replace('mm', padZero(minutes)); - } - - if (format.indexOf('ss') === -1) { - milliseconds += seconds * 1000; - } else { - format = format.replace('ss', padZero(seconds)); - } - - if (format.indexOf('S') !== -1) { - const ms = padZero(milliseconds, 3); - - if (format.indexOf('SSS') !== -1) { - format = format.replace('SSS', ms); - } else if (format.indexOf('SS') !== -1) { - format = format.replace('SS', ms.slice(0, 2)); - } else { - format = format.replace('S', ms.charAt(0)); - } - } - - return format; -} - -export function isSameSecond(time1: number, time2: number): boolean { - return Math.floor(time1 / 1000) === Math.floor(time2 / 1000); -} diff --git a/src-next/divider/README.md b/src-next/divider/README.md deleted file mode 100644 index 78274ffcb..000000000 --- a/src-next/divider/README.md +++ /dev/null @@ -1,63 +0,0 @@ -# Divider - -### Install - -```js -import Vue from 'vue'; -import { Divider } from 'vant'; - -Vue.use(Divider); -``` - -## Usage - -### Basic Usage - -```html - -``` - -### With Text - -```html -Text -``` - -### Content Position - -```html -Text -Text -``` - -### Dashed - -```html -Text -``` - -### Custom Style - -```html - - Text - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| dashed | Whether to use dashed border | _boolean_ | `false` | -| hairline | Whether to use hairline | _boolean_ | `true` | -| content-position | Content position，can be set to `left` `right` | _string_ | `center` | - -### Slots - -| Name | Description | -| ------- | ----------- | -| default | content | diff --git a/src-next/divider/README.zh-CN.md b/src-next/divider/README.zh-CN.md deleted file mode 100644 index 0a6b265b1..000000000 --- a/src-next/divider/README.zh-CN.md +++ /dev/null @@ -1,73 +0,0 @@ -# Divider 分割线 - -### 引入 - -```js -import Vue from 'vue'; -import { Divider } from 'vant'; - -Vue.use(Divider); -``` - -## 代码演示 - -### 基础用法 - -默认渲染一条水平分割线 - -```html - -``` - -### 展示文字 - -通过插槽在可以分割线中间插入内容 - -```html -文字 -``` - -### 内容位置 - -通过`content-position`指定内容所在位置 - -```html -文字 -文字 -``` - -### 虚线 - -添加`dashed`属性使分割线渲染为虚线 - -```html -文字 -``` - -### 自定义样式 - -可以直接通过`style`属性设置分割线的样式 - -```html - - 文字 - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | -------------------------------- | --------- | -------- | -| dashed | 是否使用虚线 | _boolean_ | `false` | -| hairline | 是否使用 0.5px 线 | _boolean_ | `true` | -| content-position | 内容位置，可选值为`left` `right` | _string_ | `center` | - -### Slots - -| 名称 | 说明 | -| ------- | ---- | -| default | 内容 | diff --git a/src-next/divider/demo/index.vue b/src-next/divider/demo/index.vue deleted file mode 100644 index c1ab46bc8..000000000 --- a/src-next/divider/demo/index.vue +++ /dev/null @@ -1,78 +0,0 @@ - - - - - diff --git a/src-next/divider/index.less b/src-next/divider/index.less deleted file mode 100644 index 962964c45..000000000 --- a/src-next/divider/index.less +++ /dev/null @@ -1,64 +0,0 @@ -@import '../style/var'; - -.van-divider { - display: flex; - align-items: center; - margin: @divider-margin; - color: @divider-text-color; - font-size: @divider-font-size; - line-height: @divider-line-height; - border-color: @divider-border-color; - border-style: solid; - border-width: 0; - - &::before, - &::after { - display: block; - flex: 1; - box-sizing: border-box; - height: 1px; - border-color: inherit; - border-style: inherit; - border-width: @border-width-base 0 0; - } - - &::before { - content: ''; - } - - &--hairline { - &::before, - &::after { - transform: scaleY(0.5); - } - } - - &--dashed { - border-style: dashed; - } - - &--content-center, - &--content-left, - &--content-right { - &::before { - margin-right: @divider-content-padding; - } - - &::after { - margin-left: @divider-content-padding; - content: ''; - } - } - - &--content-left { - &::before { - max-width: @divider-content-left-width; - } - } - - &--content-right { - &::after { - max-width: @divider-content-right-width; - } - } -} diff --git a/src-next/divider/test/__snapshots__/demo.spec.js.snap b/src-next/divider/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 1ea4ff2d6..000000000 --- a/src-next/divider/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
- -
-
- -
-
- - -
-
- -
-
- -
-
-`; diff --git a/src-next/divider/test/demo.spec.js b/src-next/divider/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/divider/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/empty/README.md b/src-next/empty/README.md deleted file mode 100644 index 8b13ced49..000000000 --- a/src-next/empty/README.md +++ /dev/null @@ -1,81 +0,0 @@ -# Empty - -### Install - -```js -import Vue from 'vue'; -import { Empty } from 'vant'; - -Vue.use(Empty); -``` - -## Usage - -### Basic Usage - -```html - -``` - -### Image Type - -Use the image prop to display different placeholder images - -```html - - - - - - -``` - -### Custom Image - -```html - - - -``` - -### Bottom Content - -```html - - - Button - - - - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` | -| description | Desciption | _string_ | - | - -### Slots - -| Name | Description | -| ----------- | --------------------- | -| default | Custom bottom content | -| image | Custom image | -| description | Custom description | diff --git a/src-next/empty/README.zh-CN.md b/src-next/empty/README.zh-CN.md deleted file mode 100644 index 1b8af0093..000000000 --- a/src-next/empty/README.zh-CN.md +++ /dev/null @@ -1,90 +0,0 @@ -# Empty 空状态 - -### 介绍 - -空状态时的占位提示，2.6 版本开始支持此组件 - -### 引入 - -```js -import Vue from 'vue'; -import { Empty } from 'vant'; - -Vue.use(Empty); -``` - -## 代码演示 - -### 基础用法 - -```html - -``` - -### 图片类型 - -Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用 - -```html - - - - - - -``` - -### 自定义图片 - -需要自定义图片时，可以在 image 属性中传入任意图片 URL - -```html - - - -``` - -### 底部内容 - -通过默认插槽可以在 Empty 组件的下方插入内容 - -```html - - - 按钮 - - - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` | -| description | 图片下方的描述文字 | _string_ | - | - -### Slots - -| 名称 | 说明 | -| ----------- | -------------- | -| default | 自定义底部内容 | -| image | 自定义图标 | -| description | 自定义描述文字 | diff --git a/src-next/empty/demo/index.vue b/src-next/empty/demo/index.vue deleted file mode 100644 index 3c8d4d49a..000000000 --- a/src-next/empty/demo/index.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - - - diff --git a/src-next/empty/index.js b/src-next/empty/index.js deleted file mode 100644 index a59d4de40..000000000 --- a/src-next/empty/index.js +++ /dev/null @@ -1,70 +0,0 @@ -import { createNamespace } from '../utils'; -import Network from './Network'; - -const [createComponent, bem] = createNamespace('empty'); - -const PRESETS = ['error', 'search', 'default']; - -export default createComponent({ - props: { - description: String, - image: { - type: String, - default: 'default', - }, - }, - - methods: { - genImageContent() { - const slots = this.$slots.image?.(); - - if (slots) { - return slots; - } - - if (this.image === 'network') { - return ; - } - - let { image } = this; - - if (PRESETS.indexOf(image) !== -1) { - image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`; - } - - return ; - }, - - genImage() { - return
{this.genImageContent()}
; - }, - - genDescription() { - const description = this.$slots.description - ? this.slot.description() - : this.description; - - if (description) { - return

{description}

; - } - }, - - genBottom() { - const slot = this.$slots.default?.(); - - if (slot) { - return
{slot}
; - } - }, - }, - - render() { - return ( -
- {this.genImage()} - {this.genDescription()} - {this.genBottom()} -
- ); - }, -}); diff --git a/src-next/empty/index.less b/src-next/empty/index.less deleted file mode 100644 index 2a28d2b86..000000000 --- a/src-next/empty/index.less +++ /dev/null @@ -1,32 +0,0 @@ -@import '../style/var'; - -.van-empty { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: @empty-padding; - - &__image { - width: @empty-image-size; - height: @empty-image-size; - - img { - width: 100%; - height: 100%; - } - } - - &__description { - margin-top: @empty-description-margin-top; - padding: @empty-description-padding; - color: @empty-description-color; - font-size: @empty-description-font-size; - line-height: @empty-description-line-height; - } - - &__bottom { - margin-top: @empty-bottom-margin-top; - } -} diff --git a/src-next/empty/test/__snapshots__/demo.spec.js.snap b/src-next/empty/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index a2ae408b9..000000000 --- a/src-next/empty/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-

描述文字

-
-
-
-
-
-
- - - -
-
-
-
-
-
-
-

描述文字

-
-
- - -
-
-
-
-
-
-

描述文字

-
-
-
-
-
-

描述文字

-
-
-
-
-`; diff --git a/src-next/empty/test/__snapshots__/index.spec.js.snap b/src-next/empty/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 4484b79f0..000000000 --- a/src-next/empty/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,83 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`bottom slot 1`] = ` -
-
-
Custom bottom
-
-`; - -exports[`description slot 1`] = ` -
-
-

Custom description

-
-`; - -exports[`image slot 1`] = ` -
-
Custom Image
-
-`; - -exports[`render svg when image is network 1`] = ` -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-`; diff --git a/src-next/empty/test/demo.spec.js b/src-next/empty/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/empty/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/empty/test/index.spec.js b/src-next/empty/test/index.spec.js deleted file mode 100644 index 54d3d4438..000000000 --- a/src-next/empty/test/index.spec.js +++ /dev/null @@ -1,42 +0,0 @@ -import Empty from '..'; -import { mount } from '../../../test'; - -test('image slot', () => { - const wrapper = mount(Empty, { - scopedSlots: { - image: () => 'Custom Image', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('description slot', () => { - const wrapper = mount(Empty, { - scopedSlots: { - description: () => 'Custom description', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('bottom slot', () => { - const wrapper = mount(Empty, { - scopedSlots: { - default: () => 'Custom bottom', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('render svg when image is network', () => { - const wrapper = mount(Empty, { - propsData: { - image: 'network', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/grid-item/index.js b/src-next/grid-item/index.js deleted file mode 100644 index c003d9dbb..000000000 --- a/src-next/grid-item/index.js +++ /dev/null @@ -1,151 +0,0 @@ -// Utils -import { createNamespace, addUnit } from '../utils'; -import { BORDER } from '../utils/constant'; -import { route, routeProps } from '../utils/router'; - -// Mixins -import { ChildrenMixin } from '../mixins/relation'; - -// Components -import Info from '../info'; -import Icon from '../icon'; - -const [createComponent, bem] = createNamespace('grid-item'); - -export default createComponent({ - mixins: [ChildrenMixin('vanGrid')], - - props: { - ...routeProps, - dot: Boolean, - text: String, - icon: String, - iconPrefix: String, - badge: [Number, String], - }, - - emits: ['click'], - - computed: { - style() { - const { square, gutter, columnNum } = this.parent; - const percent = `${100 / columnNum}%`; - - const style = { - flexBasis: percent, - }; - - if (square) { - style.paddingTop = percent; - } else if (gutter) { - const gutterValue = addUnit(gutter); - style.paddingRight = gutterValue; - - if (this.index >= columnNum) { - style.marginTop = gutterValue; - } - } - - return style; - }, - - contentStyle() { - const { square, gutter } = this.parent; - - if (square && gutter) { - const gutterValue = addUnit(gutter); - - return { - right: gutterValue, - bottom: gutterValue, - height: 'auto', - }; - } - }, - }, - - methods: { - onClick(event) { - this.$emit('click', event); - route(this.$router, this); - }, - - genIcon() { - if (this.$slots.icon) { - return ( -
- {this.$slots.icon()} - -
- ); - } - - if (this.icon) { - return ( - - ); - } - }, - - getText() { - if (this.$slots.text) { - return this.$slots.text(); - } - - if (this.text) { - return {this.text}; - } - }, - - genContent() { - if (this.$slots.default) { - return this.$slots.default(); - } - - return [this.genIcon(), this.getText()]; - }, - }, - - render() { - const { - center, - border, - square, - gutter, - direction, - clickable, - } = this.parent; - - return ( -
-
- {this.genContent()} -
-
- ); - }, -}); diff --git a/src-next/grid-item/index.less b/src-next/grid-item/index.less deleted file mode 100644 index 322982c53..000000000 --- a/src-next/grid-item/index.less +++ /dev/null @@ -1,78 +0,0 @@ -@import '../style/var'; - -.van-grid-item { - position: relative; - box-sizing: border-box; - - &--square { - height: 0; - } - - &__icon { - font-size: @grid-item-icon-size; - } - - &__icon-wrapper { - position: relative; - } - - &__text { - color: @grid-item-text-color; - font-size: @grid-item-text-font-size; - line-height: 1.5; - word-wrap: break-word; - } - - &__icon + &__text { - margin-top: @padding-xs; - } - - &__content { - display: flex; - flex-direction: column; - box-sizing: border-box; - height: 100%; - padding: @grid-item-content-padding; - background-color: @grid-item-content-background-color; - - &::after { - z-index: 1; - border-width: 0 @border-width-base @border-width-base 0; - } - - &--square { - position: absolute; - top: 0; - right: 0; - left: 0; - } - - &--center { - align-items: center; - justify-content: center; - } - - &--horizontal { - flex-direction: row; - - .van-grid-item__icon + .van-grid-item__text { - margin-top: 0; - margin-left: @padding-xs; - } - } - - &--surround { - &::after { - border-width: @border-width-base; - } - } - - &--clickable { - cursor: pointer; - - &:active { - background-color: @grid-item-content-active-color; - } - } - } -} diff --git a/src-next/grid/README.md b/src-next/grid/README.md deleted file mode 100644 index 0ab19d44b..000000000 --- a/src-next/grid/README.md +++ /dev/null @@ -1,134 +0,0 @@ -# Grid - -### Install - -```js -import Vue from 'vue'; -import { Grid, GridItem } from 'vant'; - -Vue.use(Grid); -Vue.use(GridItem); -``` - -## Usage - -### Basic Usage - -```html - - - - - - -``` - -### Column Num - -```html - - - -``` - -### Custom Content - -```html - - - - - - - - - - - -``` - -### Square - -```html - - - -``` - -### Gutter - -```html - - - -``` - -### Horizontal - -```html - - - - - -``` - -### Route - -```html - - - - -``` - -### Show Badge - -```html - - - - -``` - -## API - -### Grid Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| column-num `v2.0.4` | Column Num | _number \| string_ | `4` | -| icon-size `v2.2.6` | Icon size | _number \| string_ | `28px` | -| gutter | Gutter | _number \| string_ | `0` | -| border | Whether to show border | _boolean_ | `true` | -| center | Whether to center content | _boolean_ | `true` | -| square | Whether to be square shape | _boolean_ | `false` | -| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | -| direction `v2.8.2` | Content arrangement direction, can be set to `horizontal` | _string_ | `vertical` | - -### GridItem Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| text | Text | _string_ | - | -| icon | Icon name or URL | _string_ | - | -| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | -| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` | -| badge `v2.5.6` | Content of the badge | _number \| string_ | - | -| url | Link URL | _string_ | - | -| to | Target route of the link, same as to of vue-router | _string \| object_ | - | -| replace | If true, the navigation will not leave a history record | _boolean_ | `false` | - -### GridItem Events - -| Event | Description | Arguments | -| ----- | ---------------------- | -------------- | -| click | Triggered when clicked | _event: Event_ | - -### GridItem Slots - -| Name | Description | -| ------- | -------------- | -| default | Custom content | -| icon | Custom icon | -| text | Custom text | diff --git a/src-next/grid/README.zh-CN.md b/src-next/grid/README.zh-CN.md deleted file mode 100644 index 1dd484706..000000000 --- a/src-next/grid/README.zh-CN.md +++ /dev/null @@ -1,155 +0,0 @@ -# Grid 宫格 - -### 介绍 - -宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航 - -### 引入 - -```js -import Vue from 'vue'; -import { Grid, GridItem } from 'vant'; - -Vue.use(Grid); -Vue.use(GridItem); -``` - -## 代码演示 - -### 基础用法 - -通过`icon`属性设置格子内的图标，`text`属性设置文字内容 - -```html - - - - - - -``` - -### 自定义列数 - -默认一行展示四个格子，可以通过`column-num`自定义列数 - -```html - - - -``` - -### 自定义内容 - -通过插槽可以自定义格子展示的内容 - -```html - - - - - - - - - - - -``` - -### 正方形格子 - -设置`square`属性后，格子的高度会和宽度保持一致 - -```html - - - -``` - -### 格子间距 - -通过`gutter`属性设置格子之间的距离 - -```html - - - -``` - -### 内容横排 - -将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列 - -```html - - - - - -``` - -### 页面导航 - -通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接 - -```html - - - - -``` - -### 徽标提示 - -设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 - -```html - - - - -``` - -## API - -### Grid Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| column-num `v2.0.4` | 列数 | _number \| string_ | `4` | -| icon-size `v2.2.6` | 图标大小，默认单位为`px` | _number \| string_ | `28px` | -| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` | -| border | 是否显示边框 | _boolean_ | `true` | -| center | 是否将格子内容居中显示 | _boolean_ | `true` | -| square | 是否将格子固定为正方形 | _boolean_ | `false` | -| clickable | 是否开启格子点击反馈 | _boolean_ | `false` | -| direction `v2.8.2` | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` | - -### GridItem Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| text | 文字 | _string_ | - | -| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | -| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` | -| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - | -| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - | -| url | 点击后跳转的链接地址 | _string_ | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | -| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | - -### GridItem Events - -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | -------------- | -| click | 点击格子时触发 | _event: Event_ | - -### GridItem Slots - -| 名称 | 说明 | -| ------- | -------------------- | -| default | 自定义宫格的所有内容 | -| icon | 自定义图标 | -| text | 自定义文字 | diff --git a/src-next/grid/demo/index.vue b/src-next/grid/demo/index.vue deleted file mode 100644 index 544f524f1..000000000 --- a/src-next/grid/demo/index.vue +++ /dev/null @@ -1,131 +0,0 @@ - - - - - diff --git a/src-next/grid/index.js b/src-next/grid/index.js deleted file mode 100644 index 5c0d7f62c..000000000 --- a/src-next/grid/index.js +++ /dev/null @@ -1,52 +0,0 @@ -import { createNamespace, addUnit } from '../utils'; -import { BORDER_TOP } from '../utils/constant'; -import { ParentMixin } from '../mixins/relation'; - -const [createComponent, bem] = createNamespace('grid'); - -export default createComponent({ - mixins: [ParentMixin('vanGrid')], - - props: { - square: Boolean, - gutter: [Number, String], - iconSize: [Number, String], - direction: String, - clickable: Boolean, - columnNum: { - type: [Number, String], - default: 4, - }, - center: { - type: Boolean, - default: true, - }, - border: { - type: Boolean, - default: true, - }, - }, - - computed: { - style() { - const { gutter } = this; - - if (gutter) { - return { - paddingLeft: addUnit(gutter), - }; - } - }, - }, - - render() { - return ( -
- {this.$slots.default?.()} -
- ); - }, -}); diff --git a/src-next/grid/index.less b/src-next/grid/index.less deleted file mode 100644 index 47a890003..000000000 --- a/src-next/grid/index.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var'; - -.van-grid { - display: flex; - flex-wrap: wrap; -} diff --git a/src-next/grid/test/__snapshots__/demo.spec.js.snap b/src-next/grid/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 4b9a61ac3..000000000 --- a/src-next/grid/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,196 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
-
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
-
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
-
-
-
-
- 文字
-
-
-
- 文字
-
-
-
- 文字
-
-
-
-
-
-
-
- 路由跳转
-
-
-
- URL 跳转
-
-
-
-
-
-
-
-
- 文字
-
-
-
-
99+
- 文字
-
-
-
-
-`; diff --git a/src-next/grid/test/__snapshots__/index.spec.js.snap b/src-next/grid/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index e7d763ddc..000000000 --- a/src-next/grid/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`icon-size prop 1`] = ` -
-
-
-
-
-
-`; - -exports[`render icon-slot 1`] = ` -
-
-
-
-
-
1
-
-
-
-
-`; - -exports[`sqaure and set gutter 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-`; diff --git a/src-next/grid/test/demo.spec.js b/src-next/grid/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/grid/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/grid/test/index.spec.js b/src-next/grid/test/index.spec.js deleted file mode 100644 index 77377b69f..000000000 --- a/src-next/grid/test/index.spec.js +++ /dev/null @@ -1,60 +0,0 @@ -import { mount } from '../../../test'; - -test('click grid item', () => { - const onClick = jest.fn(); - const wrapper = mount({ - template: ` - - - - `, - methods: { - onClick, - }, - }); - - const Item = wrapper.find('.van-grid-item__content'); - Item.trigger('click'); - - expect(onClick).toHaveBeenCalledTimes(1); -}); - -test('sqaure and set gutter', () => { - const wrapper = mount({ - template: ` - - - - - - `, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('icon-size prop', () => { - const wrapper = mount({ - template: ` - - - - `, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('render icon-slot', () => { - const wrapper = mount({ - template: ` - - -
- - - `, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/icon/README.md b/src-next/icon/README.md deleted file mode 100644 index fac716683..000000000 --- a/src-next/icon/README.md +++ /dev/null @@ -1,99 +0,0 @@ -# Icon - -### Install - -```js -import Vue from 'vue'; -import { Icon } from 'vant'; - -Vue.use(Icon); -``` - -## Usage - -### Basic Usage - -Use `name` prop to set icon name or icon URL - -```html - - -``` - -### Show Badge - -Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon. - -Use `badge` prop, the badge will be displayed in the upper right corner of the icon. - -```html - - - -``` - -### Icon Color - -Use `color` prop to set icon color - -```html - - -``` - -### Icon Size - -Use `size` prop to set icon size - -```html - -``` - -### Use local font file - -Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file. - -```js -import 'vant/lib/icon/local.css'; -``` - -### Add custom iconfont - -```css -@font-face { - font-family: 'my-icon'; - src: url('./my-icon.ttf') format('truetype'); -} - -.my-icon { - font-family: 'my-icon'; -} - -.my-icon-extra::before { - content: '\e626'; -} -``` - -```html - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| -------------- | ----------------------- | ------------------ | ---------- | -| name | Icon name or URL | _string_ | `''` | -| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` | -| badge `v2.5.6` | Content of the badge | _number \| string_ | `''` | -| color | Icon color | _string_ | `inherit` | -| size | Icon size | _number \| string_ | `inherit` | -| class-prefix | ClassName prefix | _string_ | `van-icon` | -| tag | HTML Tag | _string_ | `i` | - -### Events - -| Event | Description | Arguments | -| ----- | ------------------------- | -------------- | -| click | Triggered when click icon | _event: Event_ | diff --git a/src-next/icon/README.zh-CN.md b/src-next/icon/README.zh-CN.md deleted file mode 100644 index 794490b64..000000000 --- a/src-next/icon/README.zh-CN.md +++ /dev/null @@ -1,106 +0,0 @@ -# Icon 图标 - -### 介绍 - -基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用 - -### 引入 - -```js -import Vue from 'vue'; -import { Icon } from 'vant'; - -Vue.use(Icon); -``` - -## 代码演示 - -### 基础用法 - -`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例 - -```html - - -``` - -### 徽标提示 - -设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 - -```html - - - -``` - -### 图标颜色 - -`Icon`的`color`属性用来设置图标的颜色 - -```html - - -``` - -### 图标大小 - -`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px` - -```html - -``` - -### 使用本地字体文件 - -Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader` - -```js -import 'vant/lib/icon/local.css'; -``` - -### 自定义图标 - -如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用 - -```css -/* 引入第三方或自定义的字体图标样式 */ -@font-face { - font-family: 'my-icon'; - src: url('./my-icon.ttf') format('truetype'); -} - -.my-icon { - font-family: 'my-icon'; -} - -.my-icon-extra::before { - content: '\e626'; -} -``` - -```html - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| name | 图标名称或图片链接 | _string_ | - | -| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` | -| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - | -| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - | -| color | 图标颜色 | _string_ | `inherit` | -| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` | -| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` | -| tag | HTML 标签 | _string_ | `i` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | -------------- | -| click | 点击图标时触发 | _event: Event_ | diff --git a/src-next/icon/demo/index.vue b/src-next/icon/demo/index.vue deleted file mode 100644 index 9b37e53c1..000000000 --- a/src-next/icon/demo/index.vue +++ /dev/null @@ -1,229 +0,0 @@ - - - - - diff --git a/src-next/icon/index.less b/src-next/icon/index.less deleted file mode 100644 index f1b78f967..000000000 --- a/src-next/icon/index.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var'; -@import '~@vant/icons/src/index.less'; - -.van-icon { - &__image { - width: 1em; - height: 1em; - object-fit: contain; - } -} diff --git a/src-next/icon/local.less b/src-next/icon/local.less deleted file mode 100644 index 8232ecf08..000000000 --- a/src-next/icon/local.less +++ /dev/null @@ -1 +0,0 @@ -@import '~@vant/icons/src/encode.less'; diff --git a/src-next/icon/test/__snapshots__/index.spec.js.snap b/src-next/icon/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 54ddf2e50..000000000 --- a/src-next/icon/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,38 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`dot prop 1`] = ` - -
- -`; - -exports[`render icon default slot 1`] = ` -Default slot - -`; - -exports[`render icon with builtin icon name 1`] = ` - - -`; - -exports[`render icon with local image 1`] = ` - - -`; - -exports[`render icon with url name 1`] = ` - - -`; - -exports[`size without unit 1`] = ` - - -`; - -exports[`tag prop 1`] = ` -
- -
-`; diff --git a/src-next/icon/test/index.spec.js b/src-next/icon/test/index.spec.js deleted file mode 100644 index 60062101f..000000000 --- a/src-next/icon/test/index.spec.js +++ /dev/null @@ -1,65 +0,0 @@ -import Icon from '..'; -import { mount } from '../../../test'; - -test('render icon with builtin icon name', () => { - const wrapper = mount(Icon, { - propsData: { - name: 'success', - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('render icon with url name', () => { - const wrapper = mount(Icon, { - propsData: { - name: 'https://img.yzcdn.com/icon.jpg', - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('render icon with local image', () => { - const wrapper = mount(Icon, { - propsData: { - name: '/assets/icon.jpg', - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('render icon default slot', () => { - const wrapper = mount({ - render(h) { - return h(Icon, { props: { name: 'success' } }, ['Default slot']); - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('tag prop', () => { - const wrapper = mount(Icon, { - propsData: { - tag: 'div', - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('dot prop', () => { - const wrapper = mount(Icon, { - propsData: { - dot: true, - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('size without unit', () => { - const wrapper = mount(Icon, { - propsData: { - size: 20, - }, - }); - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/image/README.md b/src-next/image/README.md deleted file mode 100644 index 2b3bb1bf9..000000000 --- a/src-next/image/README.md +++ /dev/null @@ -1,105 +0,0 @@ -# Image - -### Install - -```js -import Vue from 'vue'; -import { Image as VanImage } from 'vant'; - -Vue.use(VanImage); -``` - -## Usage - -### Basic Usage - -```html - -``` - -### Fit Mode - -```html - -``` - -### Round - -Show round image, it may not works at `fit=contain` and `fit=scale-down` - -```html - -``` - -### Lazy Load - -```html - -``` - -```js -import Vue from 'vue'; -import { Lazyload } from 'vant'; - -Vue.use(Lazyload); -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| src | Src | _string_ | - | -| fit | Fit mode | _string_ | `fill` | -| alt | Alt | _string_ | - | -| width | Width | _number \| string_ | - | -| height | Height | _number \| string_ | - | -| radius `v2.1.6` | Border Radius | _number \| string_ | `0` | -| round | Whether to be round | _boolean_ | `false` | -| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | -| show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` | -| show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` | -| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` | -| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` | - -### fit optional value - -| name | desctription | -| --- | --- | -| contain | Keep aspect ratio, fully display the long side of the image | -| cover | Keep aspect ratio, fully display the short side of the image, cutting the long side | -| fill | Stretch and resize image to fill the content box | -| none | Not resize image | -| scale-down | Take the smaller of `none` or `contain` | - -### Events - -| Event | Description | Arguments | -| ----- | -------------------------------- | -------------- | -| click | Triggered when click image | _event: Event_ | -| load | Triggered when image loaded | - | -| error | Triggered when image load failed | - | - -### Slots - -| Name | Description | -| ---------------- | ---------------------------------- | -| default `v2.9.0` | Custom the content below the image | -| loading | Custom loading placeholder | -| error | Custom error placeholder | diff --git a/src-next/image/README.zh-CN.md b/src-next/image/README.zh-CN.md deleted file mode 100644 index adf57f026..000000000 --- a/src-next/image/README.zh-CN.md +++ /dev/null @@ -1,175 +0,0 @@ -# Image 图片 - -### 介绍 - -增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示 - -### 引入 - -```js -import Vue from 'vue'; -import { Image as VanImage } from 'vant'; - -Vue.use(VanImage); -``` - -## 代码演示 - -### 基础用法 - -基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性 - -```html - -``` - -### 填充模式 - -通过`fit`属性可以设置图片填充模式，可选值见下方表格 - -```html - -``` - -### 圆形图片 - -通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。 - -```html - -``` - -### 图片懒加载 - -设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用 - -```html - -``` - -```js -import Vue from 'vue'; -import { Lazyload } from 'vant'; - -Vue.use(Lazyload); -``` - -### 加载中提示 - -`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容 - -```html - - - -``` - -### 加载失败提示 - -`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容 - -```html - - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| src | 图片链接 | _string_ | - | -| fit | 图片填充模式 | _string_ | `fill` | -| alt | 替代文本 | _string_ | - | -| width | 宽度，默认单位为`px` | _number \| string_ | - | -| height | 高度，默认单位为`px` | _number \| string_ | - | -| radius `v2.1.6` | 圆角大小，默认单位为`px` | _number \| string_ | `0` | -| round | 是否显示为圆形 | _boolean_ | `false` | -| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` | -| show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` | -| show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` | -| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` | -| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` | - -### 图片填充模式  - -| 名称 | 含义 | -| ---------- | ------------------------------------------------------ | -| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 | -| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | -| fill | 拉伸图片，使图片填满元素 | -| none | 保持图片原有尺寸 | -| scale-down | 取`none`或`contain`中较小的一个 | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ------------------ | -------------- | -| click | 点击图片时触发 | _event: Event_ | -| load | 图片加载完毕时触发 | - | -| error | 图片加载失败时触发 | - | - -### Slots - -| 名称 | 说明 | -| ---------------- | -------------------------- | -| default `v2.9.0` | 自定义图片下方的内容 | -| loading | 自定义加载中的提示内容 | -| error | 自定义加载失败时的提示内容 | - -## 常见问题 - -### 如何引用本地图片？ - -在 .vue 文件中通过相对路径引用本地图片时，需要在图片的链接外包上一层 `require()`，将图片 URL 转换为 webpack 模块请求，并结合 [file-loader](https://github.com/webpack-contrib/file-loader) 或者 [url-loader](https://github.com/webpack-contrib/url-loader) 进行处理。 - -```html - - - - - -``` - -> 对此更详细的解释可以参考 vue-loader 的[处理资源路径](https://vue-loader.vuejs.org/zh/guide/asset-url.html)章节。 - -### 使用 image 标签无法渲染？ - -使用 Image 组件时，可能会遇到将 \ 作为标签名时无法渲染的问题，比如下面的写法： - -```html - - - - - diff --git a/src-next/image/index.js b/src-next/image/index.js deleted file mode 100644 index 8903c1ce6..000000000 --- a/src-next/image/index.js +++ /dev/null @@ -1,188 +0,0 @@ -import { createNamespace, isDef, addUnit, inBrowser } from '../utils'; -import Icon from '../icon'; - -const [createComponent, bem] = createNamespace('image'); - -export default createComponent({ - props: { - src: String, - fit: String, - alt: String, - round: Boolean, - width: [Number, String], - height: [Number, String], - radius: [Number, String], - lazyLoad: Boolean, - showError: { - type: Boolean, - default: true, - }, - showLoading: { - type: Boolean, - default: true, - }, - errorIcon: { - type: String, - default: 'warning-o', - }, - loadingIcon: { - type: String, - default: 'photo-o', - }, - }, - - emits: ['load', 'error', 'click'], - - data() { - return { - loading: true, - error: false, - }; - }, - - watch: { - src() { - this.loading = true; - this.error = false; - }, - }, - - computed: { - style() { - const style = {}; - - if (isDef(this.width)) { - style.width = addUnit(this.width); - } - - if (isDef(this.height)) { - style.height = addUnit(this.height); - } - - if (isDef(this.radius)) { - style.overflow = 'hidden'; - style.borderRadius = addUnit(this.radius); - } - - return style; - }, - }, - - created() { - const { $Lazyload } = this; - - if ($Lazyload && inBrowser) { - $Lazyload.$on('loaded', this.onLazyLoaded); - $Lazyload.$on('error', this.onLazyLoadError); - } - }, - - beforeDestroy() { - const { $Lazyload } = this; - - if ($Lazyload) { - $Lazyload.$off('loaded', this.onLazyLoaded); - $Lazyload.$off('error', this.onLazyLoadError); - } - }, - - methods: { - onLoad(event) { - this.loading = false; - this.$emit('load', event); - }, - - onLazyLoaded({ el }) { - if (el === this.$refs.image && this.loading) { - this.onLoad(); - } - }, - - onLazyLoadError({ el }) { - if (el === this.$refs.image && !this.error) { - this.onError(); - } - }, - - onError(event) { - this.error = true; - this.loading = false; - this.$emit('error', event); - }, - - onClick(event) { - this.$emit('click', event); - }, - - genPlaceholder() { - if (this.loading && this.showLoading) { - return ( -
- {this.$slots.loading ? ( - this.$slots.loading() - ) : ( - - )} -
- ); - } - - if (this.error && this.showError) { - return ( -
- {this.$slots.error ? ( - this.$slots.error() - ) : ( - - )} -
- ); - } - }, - - genImage() { - const imgData = { - class: bem('img'), - attrs: { - alt: this.alt, - }, - style: { - objectFit: this.fit, - }, - }; - - if (this.error) { - return; - } - - if (this.lazyLoad) { - return ; - } - - if (this.src) { - return ( - - ); - } - }, - }, - - render() { - return ( -
- {this.genImage()} - {this.genPlaceholder()} - {this.$slots.default?.()} -
- ); - }, -}); diff --git a/src-next/image/index.less b/src-next/image/index.less deleted file mode 100644 index 5f5af3f91..000000000 --- a/src-next/image/index.less +++ /dev/null @@ -1,45 +0,0 @@ -@import '../style/var'; - -.van-image { - position: relative; - display: inline-block; - - &--round { - overflow: hidden; - border-radius: 50%; - - img { - border-radius: inherit; - } - } - - &__img, - &__error, - &__loading { - display: block; - width: 100%; - height: 100%; - } - - &__error, - &__loading { - position: absolute; - top: 0; - left: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: @image-placeholder-text-color; - font-size: @image-placeholder-font-size; - background-color: @image-placeholder-background-color; - } - - &__loading-icon { - font-size: @image-loading-icon-size; - } - - &__error-icon { - font-size: @image-error-icon-size; - } -} diff --git a/src-next/image/test/__snapshots__/demo.spec.js.snap b/src-next/image/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 2c1671de0..000000000 --- a/src-next/image/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
contain
-
-
-
-
-
-
-
cover
-
-
-
-
-
-
-
fill
-
-
-
-
-
-
-
none
-
-
-
-
-
-
-
scale-down
-
-
-
-
-
-
-
-
-
-
-
contain
-
-
-
-
-
-
-
cover
-
-
-
-
-
-
-
fill
-
-
-
-
-
-
-
none
-
-
-
-
-
-
-
scale-down
-
-
-
-
-
-
-
-
-
-
-
默认提示
-
-
-
-
- -
-
-
自定义提示
-
-
-
-
-
-
-
-
-
-
-
默认提示
-
-
-
-
-
-
-
自定义提示
-
-
-
-
-`; diff --git a/src-next/image/test/__snapshots__/index.spec.js.snap b/src-next/image/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 95dbee240..000000000 --- a/src-next/image/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,58 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`default slot 1`] = ` -
-
-
Custom Default -
-`; - -exports[`error-icon prop 1`] = ` -
-
-
-
-`; - -exports[`lazy load 1`] = ` -
-
-
-
-`; - -exports[`lazy-load error event 1`] = ` -
-
-
-
-`; - -exports[`lazy-load load event 1`] = `
`; - -exports[`load event 1`] = `
`; - -exports[`load event 2`] = ` -
-
-
-
-`; - -exports[`loading-icon prop 1`] = ` -
-
-
-
-`; - -exports[`radius prop 1`] = ` -
-
-
-
-`; - -exports[`show-error prop 1`] = `
`; - -exports[`show-loading prop 1`] = `
`; diff --git a/src-next/image/test/demo.spec.js b/src-next/image/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/image/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/image/test/index.spec.js b/src-next/image/test/index.spec.js deleted file mode 100644 index 28529a564..000000000 --- a/src-next/image/test/index.spec.js +++ /dev/null @@ -1,172 +0,0 @@ -import { mount } from '../../../test'; -import VanImage from '..'; - -test('click event', () => { - const wrapper = mount(VanImage); - - wrapper.trigger('click'); - expect(wrapper.emitted('click')[0][0]).toBeTruthy(); - wrapper.destroy(); -}); - -test('load event', () => { - const wrapper = mount(VanImage, { - propsData: { - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - }); - - wrapper.find('img').trigger('load'); - - expect(wrapper.emitted('load')[0][0]).toBeTruthy(); - expect(wrapper).toMatchSnapshot(); - - wrapper.setProps({ src: '' }); - expect(wrapper).toMatchSnapshot(); -}); - -test('error event', () => { - const wrapper = mount(VanImage, { - propsData: { - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - }); - - wrapper.find('img').trigger('error'); - - expect(wrapper.emitted('error')[0][0]).toBeTruthy(); -}); - -test('lazy load', () => { - const wrapper = mount(VanImage, { - propsData: { - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - lazyLoad: true, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('lazy-load load event', (done) => { - const wrapper = mount(VanImage, { - propsData: { - lazyLoad: true, - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - mocks: { - $Lazyload: { - $on(eventName, hanlder) { - if (eventName === 'loaded') { - setTimeout(() => { - hanlder({ el: null }); - hanlder({ el: wrapper.find('img').element }); - expect(wrapper.emitted('load').length).toEqual(1); - expect(wrapper).toMatchSnapshot(); - wrapper.destroy(); - }); - } - }, - $off() { - done(); - }, - }, - }, - }); -}); - -test('lazy-load error event', (done) => { - const wrapper = mount(VanImage, { - propsData: { - lazyLoad: true, - }, - mocks: { - $Lazyload: { - $on(eventName, hanlder) { - if (eventName === 'error') { - setTimeout(() => { - hanlder({ el: null }); - hanlder({ el: wrapper.find('img').element }); - expect(wrapper.emitted('error').length).toEqual(1); - expect(wrapper).toMatchSnapshot(); - wrapper.destroy(); - }); - } - }, - $off() { - done(); - }, - }, - }, - }); -}); - -test('show-loading prop', () => { - const wrapper = mount(VanImage, { - propsData: { - showLoading: false, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('show-error prop', () => { - const wrapper = mount(VanImage, { - propsData: { - showError: false, - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - }); - - wrapper.find('img').trigger('error'); - - expect(wrapper).toMatchSnapshot(); -}); - -test('error-icon prop', () => { - const wrapper = mount(VanImage, { - propsData: { - errorIcon: 'error', - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - }); - - wrapper.find('img').trigger('error'); - - expect(wrapper).toMatchSnapshot(); -}); - -test('loading-icon prop', () => { - const wrapper = mount(VanImage, { - propsData: { - loadingIcon: 'success', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('radius prop', () => { - const wrapper = mount(VanImage, { - propsData: { - radius: 3, - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('default slot', () => { - const wrapper = mount(VanImage, { - propsData: { - src: 'https://img.yzcdn.cn/vant/cat.jpeg', - }, - scopedSlots: { - default: () => 'Custom Default', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/info/index.less b/src-next/info/index.less deleted file mode 100644 index a35a927f5..000000000 --- a/src-next/info/index.less +++ /dev/null @@ -1,29 +0,0 @@ -@import '../style/var'; - -.van-info { - position: absolute; - top: 0; - right: 0; - box-sizing: border-box; - min-width: @info-size; - padding: @info-padding; - color: @info-color; - font-weight: @info-font-weight; - font-size: @info-font-size; - font-family: @info-font-family; - line-height: @info-size - @info-border-width * 2; - text-align: center; - background-color: @info-background-color; - border: @info-border-width solid @white; - border-radius: @info-size; - transform: translate(50%, -50%); - transform-origin: 100%; - - &--dot { - width: @info-dot-size; - min-width: 0; - height: @info-dot-size; - background-color: @info-dot-color; - border-radius: 100%; - } -} diff --git a/src-next/info/test/__snapshots__/index.spec.js.snap b/src-next/info/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 84b187992..000000000 --- a/src-next/info/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should not render when info is empty string 1`] = ``; - -exports[`should not render when info is empty undefined 1`] = ``; - -exports[`should render when info is zero 1`] = `
0
`; diff --git a/src-next/info/test/index.spec.js b/src-next/info/test/index.spec.js deleted file mode 100644 index d0a2e1678..000000000 --- a/src-next/info/test/index.spec.js +++ /dev/null @@ -1,32 +0,0 @@ -import Info from '..'; -import { mount } from '../../../test'; - -test('should not render when info is empty string', () => { - const wrapper = mount(Info, { - propsData: { - info: '', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('should not render when info is empty undefined', () => { - const wrapper = mount(Info, { - propsData: { - info: undefined, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('should render when info is zero', () => { - const wrapper = mount(Info, { - propsData: { - info: 0, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/loading/README.md b/src-next/loading/README.md deleted file mode 100644 index 0f040966f..000000000 --- a/src-next/loading/README.md +++ /dev/null @@ -1,60 +0,0 @@ -# Loading - -### Install - -```js -import Vue from 'vue'; -import { Loading } from 'vant'; - -Vue.use(Loading); -``` - -## Usage - -### Type - -```html - -``` - -### Color - -```html - -``` - -### Size - -```html - -``` - -### Text - -```html -Loading... -``` - -### Vertical - -```html -Loading... -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| color | Loading color | _string_ | `#c9c9c9` | -| type | Can be set to `spinner` | _string_ | `circular` | -| size | Icon size | _number \| string_ | `30px` | -| text-size | Text font size | _number \| string_ | `14px` | -| vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` | - -### Slots - -| Name | Description | -| ------- | ------------ | -| default | Loading text | diff --git a/src-next/loading/README.zh-CN.md b/src-next/loading/README.zh-CN.md deleted file mode 100644 index 9531f5ddf..000000000 --- a/src-next/loading/README.zh-CN.md +++ /dev/null @@ -1,70 +0,0 @@ -# Loading 加载 - -### 引入 - -```js -import Vue from 'vue'; -import { Loading } from 'vant'; - -Vue.use(Loading); -``` - -## 代码演示 - -### 加载类型 - -通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner` - -```html - -``` - -### 自定义颜色 - -通过`color`属性设置加载图标的颜色 - -```html - -``` - -### 自定义大小 - -通过`size`属性设置加载图标的大小，默认单位为`px` - -```html - -``` - -### 加载文案 - -可以使用默认插槽在图标的右侧插入加载文案 - -```html -加载中... -``` - -### 垂直排列 - -设置`vertical`属性后，图标和文案会垂直排列 - -```html -加载中... -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --------- | ---------------------------- | ------------------ | ---------- | -| color | 颜色 | _string_ | `#c9c9c9` | -| type | 类型，可选值为 `spinner` | _string_ | `circular` | -| size | 加载图标大小，默认单位为`px` | _number \| string_ | `30px` | -| text-size | 文字大小，默认单位为`px` | _number \| string_ | `14px` | -| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | - -### Slots - -| 名称 | 说明 | -| ------- | -------- | -| default | 加载文案 | diff --git a/src-next/loading/demo/index.vue b/src-next/loading/demo/index.vue deleted file mode 100644 index 16cb624ab..000000000 --- a/src-next/loading/demo/index.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - - - diff --git a/src-next/loading/index.less b/src-next/loading/index.less deleted file mode 100644 index ff2ed370a..000000000 --- a/src-next/loading/index.less +++ /dev/null @@ -1,103 +0,0 @@ -@import '../style/var'; - -.van-loading { - position: relative; - color: @loading-spinner-color; - font-size: 0; - vertical-align: middle; - - &__spinner { - position: relative; - display: inline-block; - width: @loading-spinner-size; - // compatible for 1.x, users may set width or height in root element - max-width: 100%; - height: @loading-spinner-size; - max-height: 100%; - vertical-align: middle; - animation: van-rotate @loading-spinner-animation-duration linear infinite; - - &--spinner { - animation-timing-function: steps(12); - - i { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &::before { - display: block; - width: 2px; - height: 25%; - margin: 0 auto; - background-color: currentColor; - border-radius: 40%; - content: ' '; - } - } - } - - &--circular { - animation-duration: 2s; - } - } - - &__circular { - display: block; - width: 100%; - height: 100%; - - circle { - animation: van-circular 1.5s ease-in-out infinite; - stroke: currentColor; - stroke-width: 3; - stroke-linecap: round; - } - } - - &__text { - display: inline-block; - margin-left: @padding-xs; - color: @loading-text-color; - font-size: @loading-text-font-size; - vertical-align: middle; - } - - &--vertical { - display: flex; - flex-direction: column; - align-items: center; - - .van-loading__text { - margin: @padding-xs 0 0; - } - } -} - -@keyframes van-circular { - 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -40; - } - - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -120; - } -} - -.generate-spinner(@n, @i: 1) when (@i =< @n) { - .van-loading__spinner--spinner i:nth-of-type(@{i}) { - transform: rotate(@i * 30deg); - opacity: 1 - (0.75 / 12) * (@i - 1); - } - .generate-spinner(@n, (@i + 1)); -} -.generate-spinner(12); diff --git a/src-next/loading/test/__snapshots__/demo.spec.js.snap b/src-next/loading/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 424aa506c..000000000 --- a/src-next/loading/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
- -
-
-
- -
-
-
- -
-
-
- 加载中... -
-
-
-
- 加载中... -
-
-
-`; diff --git a/src-next/loading/test/__snapshots__/index.spec.js.snap b/src-next/loading/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 925bda61e..000000000 --- a/src-next/loading/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,5 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`size prop 1`] = `
`; - -exports[`text-size prop 1`] = `
Text
`; diff --git a/src-next/loading/test/demo.spec.js b/src-next/loading/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/loading/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/loading/test/index.spec.js b/src-next/loading/test/index.spec.js deleted file mode 100644 index 5459775a1..000000000 --- a/src-next/loading/test/index.spec.js +++ /dev/null @@ -1,25 +0,0 @@ -import { mount } from '../../../test'; -import Loading from '..'; - -test('size prop', () => { - const wrapper = mount(Loading, { - propsData: { - size: 20, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('text-size prop', () => { - const wrapper = mount(Loading, { - propsData: { - textSize: 20, - }, - scopedSlots: { - default: () => 'Text', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/locale/README.md b/src-next/locale/README.md deleted file mode 100644 index 45e81da88..000000000 --- a/src-next/locale/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# Internationalization - -### Intro - -The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below. - -### Switch languages - -Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to different languages. - -```js -import { Locale } from 'vant'; -import enUS from 'vant/lib/locale/lang/en-US'; - -Locale.use('en-US', enUS); -``` - -### Modify default configs - -Use `Locale.add` method to modify the default configs. - -```js -import { Locale } from 'vant'; - -const messages = { - 'en-US': { - vanPicker: { - confirm: 'Close', - }, - }, -}; - -Locale.add(messages); -``` - -### Config files - -Current supported languages: - -| Language | Filename | -| ------------------------ | -------- | -| Chinese | zh-CN | -| Traditional Chinese (HK) | zh-HK | -| Traditional Chinese (TW) | zh-TW | -| English | en-US | -| Turkish | tr-TR | -| Spanish (Spain) | es-ES | -| Japanese | ja-JP | -| Romanian | ro-RO | - -> View all language configs [Here](https://github.com/youzan/vant/tree/dev/src/locale/lang). diff --git a/src-next/locale/README.zh-CN.md b/src-next/locale/README.zh-CN.md deleted file mode 100644 index 87d754e02..000000000 --- a/src-next/locale/README.zh-CN.md +++ /dev/null @@ -1,55 +0,0 @@ -# 国际化 - -### 介绍 - -Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案。 - -### 多语言切换 - -Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可以切换当前使用的语言。 - -```js -import { Locale } from 'vant'; -import enUS from 'vant/lib/locale/lang/en-US'; - -Locale.use('en-US', enUS); -``` - -### 修改默认文案 - -通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下： - -```js -import { Locale } from 'vant'; - -const messages = { - 'zh-CN': { - vanPicker: { - confirm: '关闭', // 将'确认'修改为'关闭' - }, - }, -}; - -Locale.add(messages); -``` - -### 配置文件 - -目前支持的语言: - -| 语言 | 文件名 | -| -------------- | ------ | -| 简体中文 | zh-CN | -| 繁體中文（港） | zh-HK | -| 繁體中文（台） | zh-TW | -| 英语 | en-US | -| 土耳其语 | tr-TR | -| 西班牙语 | es-ES | -| 日语 | ja-JP | -| 罗马尼亚语 | ro-RO | - -> 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的 i18n 配置文件。 - -### Sku 组件 - -语言包中默认不包含 Sku 业务组件的语言配置，因此如果有 Sku 组件的国际化需求，请自行配置国际化文案。 diff --git a/src-next/locale/index.ts b/src-next/locale/index.ts deleted file mode 100644 index fa9391281..000000000 --- a/src-next/locale/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ref } from 'vue'; -import { deepAssign } from '../utils/deep-assign'; -import defaultMessages from './lang/zh-CN'; - -type Messages = Record>; - -const lang = ref('zh-CN'); -const messages = ref({ - 'zh-CN': defaultMessages, -}); - -export default { - messages() { - return messages.value[lang.value]; - }, - - use(newLang: string, newMessages?: object) { - lang.value = newLang; - this.add({ [newLang]: newMessages }); - }, - - add(newMessages = {}) { - deepAssign(messages.value, newMessages); - }, -}; diff --git a/src-next/locale/lang/en-US.ts b/src-next/locale/lang/en-US.ts deleted file mode 100644 index 99268eae0..000000000 --- a/src-next/locale/lang/en-US.ts +++ /dev/null @@ -1,77 +0,0 @@ -export default { - name: 'Name', - tel: 'Phone', - save: 'Save', - confirm: 'Confirm', - cancel: 'Cancel', - delete: 'Delete', - complete: 'Complete', - loading: 'Loading...', - telEmpty: 'Please fill in the tel', - nameEmpty: 'Please fill in the name', - nameInvalid: 'Malformed name', - confirmDelete: 'Are you sure you want to delete?', - telInvalid: 'Malformed phone number', - vanCalendar: { - end: 'End', - start: 'Start', - title: 'Calendar', - startEnd: 'Start/End', - weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - monthTitle: (year: number, month: number) => `${year}/${month}`, - rangePrompt: (maxRange: number) => `Choose no more than ${maxRange} days`, - }, - vanContactCard: { - addText: 'Add contact info', - }, - vanContactList: { - addText: 'Add new contact', - }, - vanPagination: { - prev: 'Previous', - next: 'Next', - }, - vanPullRefresh: { - pulling: 'Pull to refresh...', - loosing: 'Loose to refresh...', - }, - vanSubmitBar: { - label: 'Total：', - }, - vanCoupon: { - unlimited: 'Unlimited', - discount: (discount: number) => `${discount * 10}% off`, - condition: (condition: number) => `At least ${condition}`, - }, - vanCouponCell: { - title: 'Coupon', - tips: 'No coupons', - count: (count: number) => `You have ${count} coupons`, - }, - vanCouponList: { - empty: 'No coupons', - exchange: 'Exchange', - close: 'Close', - enable: 'Available', - disabled: 'Unavailable', - placeholder: 'Coupon code', - }, - vanAddressEdit: { - area: 'Area', - postal: 'Postal', - areaEmpty: 'Please select a receiving area', - addressEmpty: 'Address can not be empty', - postalEmpty: 'Wrong postal code', - defaultAddress: 'Set as the default address', - telPlaceholder: 'Phone', - namePlaceholder: 'Name', - areaPlaceholder: 'Area', - }, - vanAddressEditDetail: { - label: 'Address', - placeholder: 'Address', - }, - vanAddressList: { - add: 'Add new address', - }, -}; diff --git a/src-next/locale/lang/es-ES.ts b/src-next/locale/lang/es-ES.ts deleted file mode 100644 index 85dc38d7f..000000000 --- a/src-next/locale/lang/es-ES.ts +++ /dev/null @@ -1,77 +0,0 @@ -export default { - name: 'Nombre', - tel: 'Teléfono', - save: 'Guardar', - confirm: 'Confirmar', - cancel: 'Cancelar', - delete: 'Eliminar', - complete: 'Completado', - loading: 'Cargando...', - telEmpty: 'Por favor rellena el teléfono', - nameEmpty: 'Por favor rellena el nombre', - nameInvalid: 'nombre inválido', - confirmDelete: 'Estás seguro de eliminarlo?', - telInvalid: 'Teléfono inválido', - vanCalendar: { - end: 'Fin', - start: 'Inicio', - title: 'Calendario', - startEnd: 'Inicio/Fin', - weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'], - monthTitle: (year: number, month: number) => `${year}/${month}`, - rangePrompt: (maxRange: number) => `Elija no más de ${maxRange} días`, - }, - vanContactCard: { - addText: 'Añadir información de contacto', - }, - vanContactList: { - addText: 'Añadir nuevo contacto', - }, - vanPagination: { - prev: 'Anterior', - next: 'Siguiente', - }, - vanPullRefresh: { - pulling: 'Tira para recargar...', - loosing: 'Suelta para recargar...', - }, - vanSubmitBar: { - label: 'Total：', - }, - vanCoupon: { - unlimited: 'Ilimitado', - discount: (discount: number) => `${discount * 10}% de descuento`, - condition: (condition: number) => `Al menos ${condition}`, - }, - vanCouponCell: { - title: 'Cupón', - tips: 'Sin cupones', - count: (count: number) => `You have ${count} coupons`, - }, - vanCouponList: { - empty: 'Sin cupones', - exchange: 'Intercambio', - close: 'Cerrar', - enable: 'Disponible', - disabled: 'No disponible', - placeholder: 'Código del cupón', - }, - vanAddressEdit: { - area: 'Área', - postal: 'Código Postal', - areaEmpty: 'Por favor selecciona una área de recogida', - addressEmpty: 'La dirección no puede estar vacia', - postalEmpty: 'Código postal inválido', - defaultAddress: 'Establecer como dirección por defecto', - telPlaceholder: 'Teléfono', - namePlaceholder: 'Nombre', - areaPlaceholder: 'Área', - }, - vanAddressEditDetail: { - label: 'Dirección', - placeholder: 'Dirección', - }, - vanAddressList: { - add: 'Anadir dirección', - }, -}; diff --git a/src-next/locale/lang/ja-JP.ts b/src-next/locale/lang/ja-JP.ts deleted file mode 100644 index 83e2b9497..000000000 --- a/src-next/locale/lang/ja-JP.ts +++ /dev/null @@ -1,78 +0,0 @@ -export default { - name: 'お名前', - tel: '電話番号', - save: 'セーブ', - confirm: '確認', - cancel: 'キャンセル', - delete: '削除', - complete: '完了', - loading: '読み込み中...', - telEmpty: '電話番号を入力してください', - nameEmpty: '名前を入力してください', - nameInvalid: '正しい名前を入力してください', - confirmDelete: '本当に削除しますか', - telInvalid: '正しい電話番号を入力してください', - vanCalendar: { - end: '終了', - start: '開始', - title: '日付選択', - confirm: '確認', - startEnd: '開始/終了', - weekdays: ['日', '月', '火', '水', '木', '金', '土'], - monthTitle: (year: number, month: number) => `${year}年${month}月`, - rangePrompt: (maxRange: number) => `${maxRange}日以内を選択してください`, - }, - vanContactCard: { - addText: '連絡先を追加', - }, - vanContactList: { - addText: '新しい連絡先を追加', - }, - vanPagination: { - prev: '前のページ', - next: '次のページ', - }, - vanPullRefresh: { - pulling: 'プルダウンして更新...', - loosing: 'リリース時に更新...', - }, - vanSubmitBar: { - label: '合計：', - }, - vanCoupon: { - unlimited: '入場ありません', - discount: (discount: number) => `${10 - discount}割引`, - condition: (condition: number) => `${condition}円以上で利用可能`, - }, - vanCouponCell: { - title: 'クーポン', - tips: '利用可能なクーポンがありません', - count: (count: number) => `${count}枚が利用可能`, - }, - vanCouponList: { - empty: 'クーポンはありません', - exchange: '両替', - close: 'クーポンを使用しません', - enable: '利用可能', - disabled: '利用できません', - placeholder: '割引コードを入力してください', - }, - vanAddressEdit: { - area: '地域', - postal: '郵便番号', - areaEmpty: '地域を選択してください', - addressEmpty: '詳しい住所を入力してください', - postalEmpty: '邮政编码格式不正确', - defaultAddress: 'デフォルトの住所に設定', - telPlaceholder: '荷受人の携帯番号', - namePlaceholder: '荷受人の名前', - areaPlaceholder: '县 / 市 / 町を選択', - }, - vanAddressEditDetail: { - label: '詳しい住所', - placeholder: '番地、階の部屋番号など', - }, - vanAddressList: { - add: '住所を追加', - }, -}; diff --git a/src-next/locale/lang/ro-RO.ts b/src-next/locale/lang/ro-RO.ts deleted file mode 100644 index 95ec534db..000000000 --- a/src-next/locale/lang/ro-RO.ts +++ /dev/null @@ -1,77 +0,0 @@ -export default { - name: 'Nume', - tel: 'Telefon', - save: 'Salvează', - confirm: 'Confirmă', - cancel: 'Anulează', - delete: 'Șterge', - complete: 'Finalizează', - loading: 'Încărcare...', - telEmpty: 'Te rugăm să completezi telefonul', - nameEmpty: 'Te rugăm să completezi numele', - nameInvalid: 'Nume incorect', - confirmDelete: 'Ești sigur ca vrei sa stergi?', - telInvalid: 'Număr de telefon invalid', - vanCalendar: { - end: 'Sfârșit', - start: 'Început', - title: 'Calendar', - startEnd: 'Început/Sfârsit', - weekdays: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'], - monthTitle: (year: number, month: number) => `${year}/${month}`, - rangePrompt: (maxRange: number) => `Alege maxim ${maxRange} zile`, - }, - vanContactCard: { - addText: 'Adaugă informațiile de contact', - }, - vanContactList: { - addText: 'Adaugă contact nou', - }, - vanPagination: { - prev: 'Precedenta', - next: 'Urmatoarea', - }, - vanPullRefresh: { - pulling: 'Trage pentru a da împrospăta...', - loosing: 'Eliberează pentru a împrospăta...', - }, - vanSubmitBar: { - label: 'Total：', - }, - vanCoupon: { - unlimited: 'Nelimitat', - discount: (discount: number) => `${discount * 10}% discount`, - condition: (condition: number) => `Cel puțin ${condition}`, - }, - vanCouponCell: { - title: 'Cupon', - tips: 'Fără cupoane', - count: (count: number) => `Ai ${count} cupoane`, - }, - vanCouponList: { - empty: 'Fără cupoane', - exchange: 'Schimbă', - close: 'Închide', - enable: 'Disponibil', - disabled: 'Indisponibil', - placeholder: 'Cod cupon', - }, - vanAddressEdit: { - area: 'Zonă', - postal: 'Cod postal', - areaEmpty: 'Te rugăm sa selectezi o zona de primire', - addressEmpty: 'Adresa nu poate fi goală', - postalEmpty: 'Cod postal invalid', - defaultAddress: 'Setează ca adresă de pornire', - telPlaceholder: 'Telefon', - namePlaceholder: 'Nume', - areaPlaceholder: 'Zonă', - }, - vanAddressEditDetail: { - label: 'Adresă', - placeholder: 'Adresă', - }, - vanAddressList: { - add: 'Adaugă adresă nouă', - }, -}; diff --git a/src-next/locale/lang/tr-TR.ts b/src-next/locale/lang/tr-TR.ts deleted file mode 100644 index 76218b8fa..000000000 --- a/src-next/locale/lang/tr-TR.ts +++ /dev/null @@ -1,77 +0,0 @@ -export default { - name: 'İsim', - tel: 'Telefon', - save: 'Kaydet', - confirm: 'Onayla', - cancel: 'İptal', - delete: 'Sil', - complete: 'Tamamla', - loading: 'Yükleniyor...', - telEmpty: 'Lütfen tel. no giriniz', - nameEmpty: 'Lütfen isim giriniz', - nameInvalid: 'Geçersiz isim', - confirmDelete: 'Silmek istediğinize emin misiniz?', - telInvalid: 'Geçersiz tel. numarası', - vanCalendar: { - end: 'Son', - start: 'Başlat', - title: 'Takvim', - startEnd: 'Başlat/Son', - weekdays: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'], - monthTitle: (year: number, month: number) => `${year}/${month}`, - rangePrompt: (maxRange: number) => `En fazla ${maxRange} gün seçin`, - }, - vanContactCard: { - addText: 'Kişi bilgisi ekle', - }, - vanContactList: { - addText: 'Yeni kişi ekle', - }, - vanPagination: { - prev: 'Önceki', - next: 'Sonraki', - }, - vanPullRefresh: { - pulling: 'Yenilemek için çekin...', - loosing: 'Yenilemek için bırakın...', - }, - vanSubmitBar: { - label: 'Toplam:', - }, - vanCoupon: { - unlimited: 'Sınırsız', - discount: (discount: number) => `%${discount * 10} indirim`, - condition: (condition: number) => `En az ${condition}`, - }, - vanCouponCell: { - title: 'Kupon', - tips: 'Kupon yok', - count: (count: number) => `${count} adet teklif var`, - }, - vanCouponList: { - empty: 'Kupon yok', - exchange: 'Takas', - close: 'Kapat', - enable: 'Mevcut', - disabled: 'Mevcut değil', - placeholder: 'Kupon kodu', - }, - vanAddressEdit: { - area: 'Alan', - postal: 'Posta', - areaEmpty: 'Lütfen alıcı alanını seçin', - addressEmpty: 'Adres boş olamaz!', - postalEmpty: 'Yanlış posta kodu', - defaultAddress: 'Varsayılan adres olarak ayarla', - telPlaceholder: 'Telefone', - namePlaceholder: 'İsim', - areaPlaceholder: 'Alan', - }, - vanAddressEditDetail: { - label: 'Adres', - placeholder: 'Adres', - }, - vanAddressList: { - add: 'Yeni adres ekle', - }, -}; diff --git a/src-next/locale/lang/zh-CN.ts b/src-next/locale/lang/zh-CN.ts deleted file mode 100644 index c9010ff82..000000000 --- a/src-next/locale/lang/zh-CN.ts +++ /dev/null @@ -1,78 +0,0 @@ -export default { - name: '姓名', - tel: '电话', - save: '保存', - confirm: '确认', - cancel: '取消', - delete: '删除', - complete: '完成', - loading: '加载中...', - telEmpty: '请填写电话', - nameEmpty: '请填写姓名', - nameInvalid: '请输入正确的姓名', - confirmDelete: '确定要删除吗', - telInvalid: '请输入正确的手机号', - vanCalendar: { - end: '结束', - start: '开始', - title: '日期选择', - confirm: '确定', - startEnd: '开始/结束', - weekdays: ['日', '一', '二', '三', '四', '五', '六'], - monthTitle: (year: number, month: number) => `${year}年${month}月`, - rangePrompt: (maxRange: number) => `选择天数不能超过 ${maxRange} 天`, - }, - vanContactCard: { - addText: '添加联系人', - }, - vanContactList: { - addText: '新建联系人', - }, - vanPagination: { - prev: '上一页', - next: '下一页', - }, - vanPullRefresh: { - pulling: '下拉即可刷新...', - loosing: '释放即可刷新...', - }, - vanSubmitBar: { - label: '合计：', - }, - vanCoupon: { - unlimited: '无使用门槛', - discount: (discount: number) => `${discount}折`, - condition: (condition: number) => `满${condition}元可用`, - }, - vanCouponCell: { - title: '优惠券', - tips: '暂无可用', - count: (count: number) => `${count}张可用`, - }, - vanCouponList: { - empty: '暂无优惠券', - exchange: '兑换', - close: '不使用优惠券', - enable: '可用', - disabled: '不可用', - placeholder: '请输入优惠码', - }, - vanAddressEdit: { - area: '地区', - postal: '邮政编码', - areaEmpty: '请选择地区', - addressEmpty: '请填写详细地址', - postalEmpty: '邮政编码格式不正确', - defaultAddress: '设为默认收货地址', - telPlaceholder: '收货人手机号', - namePlaceholder: '收货人姓名', - areaPlaceholder: '选择省 / 市 / 区', - }, - vanAddressEditDetail: { - label: '详细地址', - placeholder: '街道门牌、楼层房间号等信息', - }, - vanAddressList: { - add: '新增地址', - }, -}; diff --git a/src-next/locale/lang/zh-HK.ts b/src-next/locale/lang/zh-HK.ts deleted file mode 100644 index 3d567b08f..000000000 --- a/src-next/locale/lang/zh-HK.ts +++ /dev/null @@ -1,78 +0,0 @@ -export default { - name: '姓名', - tel: '電話', - save: '保存', - confirm: '確認', - cancel: '取消', - delete: '刪除', - complete: '完成', - loading: '加載中...', - telEmpty: '請填寫電話', - nameEmpty: '請填寫姓名', - nameInvalid: '請輸入正確的姓名', - confirmDelete: '確定要刪除嗎', - telInvalid: '請填寫正確的電話', - vanCalendar: { - end: '結束', - start: '開始', - title: '日期選擇', - confirm: '確定', - startEnd: '開始/結束', - weekdays: ['日', '壹', '二', '三', '四', '五', '六'], - monthTitle: (year: number, month: number) => `${year}年${month}月`, - rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`, - }, - vanContactCard: { - addText: '添加聯系人', - }, - vanContactList: { - addText: '新建聯系人', - }, - vanPagination: { - prev: '上一頁', - next: '下一頁', - }, - vanPullRefresh: { - pulling: '下拉即可刷新...', - loosing: '釋放即可刷新...', - }, - vanSubmitBar: { - label: '合計：', - }, - vanCoupon: { - unlimited: '無使用門檻', - discount: (discount: number) => `${discount}折`, - condition: (condition: number) => `滿${condition}元可用`, - }, - vanCouponCell: { - title: '優惠券', - tips: '暫無可用', - count: (count: number) => `${count}張可用`, - }, - vanCouponList: { - empty: '暫無優惠券', - exchange: '兌換', - close: '不使用優惠', - enable: '可使用優惠券', - disabled: '不可使用優惠券', - placeholder: '請輸入優惠碼', - }, - vanAddressEdit: { - area: '地區', - postal: '郵政編碼', - areaEmpty: '請選擇地區', - addressEmpty: '請填寫詳細地址', - postalEmpty: '郵政編碼格式不正確', - defaultAddress: '設為默認收貨地址', - telPlaceholder: '收貨人手機號', - namePlaceholder: '收貨人姓名', - areaPlaceholder: '選擇省 / 市 / 區', - }, - vanAddressEditDetail: { - label: '詳細地址', - placeholder: '街道門牌、樓層房間號等信息', - }, - vanAddressList: { - add: '新增地址', - }, -}; diff --git a/src-next/locale/lang/zh-TW.ts b/src-next/locale/lang/zh-TW.ts deleted file mode 100644 index aecda17ec..000000000 --- a/src-next/locale/lang/zh-TW.ts +++ /dev/null @@ -1,78 +0,0 @@ -export default { - name: '姓名', - tel: '電話', - save: '儲存', - confirm: '確認', - cancel: '取消', - delete: '刪除', - complete: '完成', - loading: '載入中...', - telEmpty: '請填寫電話', - nameEmpty: '請填寫姓名', - nameInvalid: '請輸入正確的姓名', - confirmDelete: '確定要刪除嗎', - telInvalid: '請填寫正確的電話', - vanCalendar: { - end: '結束', - start: '開始', - title: '日期選擇', - confirm: '確定', - startEnd: '開始/結束', - weekdays: ['日', '壹', '二', '三', '四', '五', '六'], - monthTitle: (year: number, month: number) => `${year}年${month}月`, - rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`, - }, - vanContactCard: { - addText: '新增聯絡人', - }, - vanContactList: { - addText: '建立聯絡人', - }, - vanPagination: { - prev: '上一頁', - next: '下一頁', - }, - vanPullRefresh: { - pulling: '下拉即可刷新...', - loosing: '釋放即可刷新...', - }, - vanSubmitBar: { - label: '合計：', - }, - vanCoupon: { - unlimited: '無使用門檻', - discount: (discount: number) => `${discount}折`, - condition: (condition: number) => `滿${condition}元可用`, - }, - vanCouponCell: { - title: '優惠券', - tips: '暫無可用', - count: (count: number) => `${count}張可用`, - }, - vanCouponList: { - empty: '暫無優惠券', - exchange: '兌換', - close: '不使用優惠', - enable: '可使用優惠券', - disabled: '不可使用優惠券', - placeholder: '請輸入優惠代碼', - }, - vanAddressEdit: { - area: '地區', - postal: '郵遞區號', - areaEmpty: '請選擇地區', - addressEmpty: '請填寫詳細地址', - postalEmpty: '郵遞區號格式不正確', - defaultAddress: '設為預設收貨地址', - telPlaceholder: '收貨人手機號碼', - namePlaceholder: '收貨人姓名', - areaPlaceholder: '選擇縣 / 市', - }, - vanAddressEditDetail: { - label: '詳細地址', - placeholder: '街道門牌、樓層房號等資訊', - }, - vanAddressList: { - add: '新增地址', - }, -}; diff --git a/src-next/mixins/checkbox.js b/src-next/mixins/checkbox.js deleted file mode 100644 index 5fc341d67..000000000 --- a/src-next/mixins/checkbox.js +++ /dev/null @@ -1,148 +0,0 @@ -/** - * Common part of Checkbox & Radio - */ -import Icon from '../icon'; -import { FieldMixin } from './field'; -import { ChildrenMixin } from './relation'; -import { addUnit } from '../utils'; - -export const CheckboxMixin = ({ parent, bem, role }) => ({ - mixins: [ChildrenMixin(parent), FieldMixin], - - props: { - name: null, - value: null, - disabled: Boolean, - iconSize: [Number, String], - checkedColor: String, - labelPosition: String, - labelDisabled: Boolean, - shape: { - type: String, - default: 'round', - }, - bindGroup: { - type: Boolean, - default: true, - }, - }, - - computed: { - disableBindRelation() { - return !this.bindGroup; - }, - - isDisabled() { - return (this.parent && this.parent.disabled) || this.disabled; - }, - - direction() { - return (this.parent && this.parent.direction) || null; - }, - - iconStyle() { - const checkedColor = - this.checkedColor || (this.parent && this.parent.checkedColor); - - if (checkedColor && this.checked && !this.isDisabled) { - return { - borderColor: checkedColor, - backgroundColor: checkedColor, - }; - } - }, - - tabindex() { - if (this.isDisabled || (role === 'radio' && !this.checked)) { - return -1; - } - - return 0; - }, - }, - - methods: { - onClick(event) { - const { target } = event; - const { icon } = this.$refs; - const iconClicked = icon === target || icon.contains(target); - - if (!this.isDisabled && (iconClicked || !this.labelDisabled)) { - this.toggle(); - - // wait for toggle method to complete - // so we can get the changed value in the click event listener - setTimeout(() => { - this.$emit('click', event); - }); - } else { - this.$emit('click', event); - } - }, - - genIcon() { - const { checked } = this; - const iconSize = this.iconSize || (this.parent && this.parent.iconSize); - - return ( -
- {this.slots('icon', { checked }) || ( - - )} -
- ); - }, - - genLabel() { - const slot = this.slots(); - - if (slot) { - return ( - - {slot} - - ); - } - }, - }, - - render() { - const Children = [this.genIcon()]; - - if (this.labelPosition === 'left') { - Children.unshift(this.genLabel()); - } else { - Children.push(this.genLabel()); - } - - return ( -
- {Children} -
- ); - }, -}); diff --git a/src-next/mixins/click-outside.js b/src-next/mixins/click-outside.js deleted file mode 100644 index 534d026f9..000000000 --- a/src-next/mixins/click-outside.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Listen to click outside event - */ -import { on, off } from '../utils/dom/event'; - -export const ClickOutsideMixin = (config) => ({ - props: { - closeOnClickOutside: { - type: Boolean, - default: true, - }, - }, - - data() { - const clickOutsideHandler = (event) => { - if (this.closeOnClickOutside && !this.$el.contains(event.target)) { - this[config.method](); - } - }; - - return { clickOutsideHandler }; - }, - - mounted() { - on(document, config.event, this.clickOutsideHandler); - }, - - beforeDestroy() { - off(document, config.event, this.clickOutsideHandler); - }, -}); diff --git a/src-next/mixins/close-on-popstate.js b/src-next/mixins/close-on-popstate.js deleted file mode 100644 index ed98c5c18..000000000 --- a/src-next/mixins/close-on-popstate.js +++ /dev/null @@ -1,44 +0,0 @@ -import { on, off } from '../utils/dom/event'; -import { BindEventMixin } from './bind-event'; - -export const CloseOnPopstateMixin = { - mixins: [ - BindEventMixin(function (bind, isBind) { - this.handlePopstate(isBind && this.closeOnPopstate); - }), - ], - - props: { - closeOnPopstate: Boolean, - }, - - data() { - return { - bindStatus: false, - }; - }, - - watch: { - closeOnPopstate(val) { - this.handlePopstate(val); - }, - }, - - methods: { - handlePopstate(bind) { - /* istanbul ignore if */ - if (this.$isServer) { - return; - } - - if (this.bindStatus !== bind) { - this.bindStatus = bind; - const action = bind ? on : off; - action(window, 'popstate', () => { - this.close(); - this.shouldReopen = false; - }); - } - }, - }, -}; diff --git a/src-next/mixins/field.js b/src-next/mixins/field.js deleted file mode 100644 index 603cff7da..000000000 --- a/src-next/mixins/field.js +++ /dev/null @@ -1,26 +0,0 @@ -export const FieldMixin = { - inject: { - vanField: { - default: null, - }, - }, - - watch: { - value() { - const field = this.vanField; - - if (field) { - field.resetValidation(); - field.validateWithTrigger('onChange'); - } - }, - }, - - created() { - const field = this.vanField; - - if (field && !field.children) { - field.children = this; - } - }, -}; diff --git a/src-next/mixins/popup/context.ts b/src-next/mixins/popup/context.ts deleted file mode 100644 index 25b501a28..000000000 --- a/src-next/mixins/popup/context.ts +++ /dev/null @@ -1,13 +0,0 @@ -export type StackItem = { - vm: any; - overlay: any; -}; - -export const context = { - zIndex: 2000, - lockCount: 0, - stack: [] as StackItem[], - find(vm: any): StackItem | undefined { - return this.stack.filter((item) => item.vm === vm)[0]; - }, -}; diff --git a/src-next/mixins/popup/index.js b/src-next/mixins/popup/index.js deleted file mode 100644 index 0b0c7a43d..000000000 --- a/src-next/mixins/popup/index.js +++ /dev/null @@ -1,206 +0,0 @@ -// Context -import { context } from './context'; - -// Utils -import { on, off, preventDefault } from '../../utils/dom/event'; -import { removeNode } from '../../utils/dom/node'; -import { getScroller } from '../../utils/dom/scroll'; - -// Mixins -import { TouchMixin } from '../touch'; -import { CloseOnPopstateMixin } from '../close-on-popstate'; - -export const popupMixinProps = { - // whether to show popup - show: Boolean, - // whether to show overlay - overlay: Boolean, - // overlay custom style - overlayStyle: Object, - // overlay custom class name - overlayClass: String, - // teleport - getContainer: [String, Function], - // whether to close popup when click overlay - closeOnClickOverlay: Boolean, - // z-index - zIndex: [Number, String], - // prevent body scroll - lockScroll: { - type: Boolean, - default: true, - }, - // whether to lazy render - lazyRender: { - type: Boolean, - default: true, - }, -}; - -export function PopupMixin(options = {}) { - return { - mixins: [TouchMixin, CloseOnPopstateMixin], - - props: popupMixinProps, - - data() { - return { - inited: this.show, - }; - }, - - computed: { - shouldRender() { - return this.inited || !this.lazyRender; - }, - }, - - watch: { - show(val) { - const type = val ? 'open' : 'close'; - this.inited = this.inited || this.show; - this[type](); - - if (!options.skipToggleEvent) { - this.$emit(type); - } - }, - - overlay: 'renderOverlay', - }, - - mounted() { - if (this.show) { - this.open(); - } - }, - - /* istanbul ignore next */ - activated() { - if (this.shouldReopen) { - this.$emit('update:show', true); - this.shouldReopen = false; - } - }, - - beforeDestroy() { - this.removeLock(); - - if (this.getContainer) { - removeNode(this.$refs.root); - } - }, - - /* istanbul ignore next */ - deactivated() { - if (this.show) { - this.close(); - this.shouldReopen = true; - } - }, - - methods: { - open() { - /* istanbul ignore next */ - if (this.$isServer || this.opened) { - return; - } - - // cover default zIndex - if (this.zIndex !== undefined) { - context.zIndex = this.zIndex; - } - - this.opened = true; - this.renderOverlay(); - this.addLock(); - }, - - addLock() { - if (this.lockScroll) { - on(document, 'touchstart', this.touchStart); - on(document, 'touchmove', this.onTouchMove); - - if (!context.lockCount) { - document.body.classList.add('van-overflow-hidden'); - } - context.lockCount++; - } - }, - - removeLock() { - if (this.lockScroll && context.lockCount) { - context.lockCount--; - off(document, 'touchstart', this.touchStart); - off(document, 'touchmove', this.onTouchMove); - - if (!context.lockCount) { - document.body.classList.remove('van-overflow-hidden'); - } - } - }, - - close() { - if (!this.opened) { - return; - } - - this.opened = false; - this.removeLock(); - this.$emit('update:show', false); - }, - - onTouchMove(event) { - this.touchMove(event); - const direction = this.deltaY > 0 ? '10' : '01'; - const el = getScroller(event.target, this.$refs.root); - const { scrollHeight, offsetHeight, scrollTop } = el; - let status = '11'; - - /* istanbul ignore next */ - if (scrollTop === 0) { - status = offsetHeight >= scrollHeight ? '00' : '01'; - } else if (scrollTop + offsetHeight >= scrollHeight) { - status = '10'; - } - - /* istanbul ignore next */ - if ( - status !== '11' && - this.direction === 'vertical' && - !(parseInt(status, 2) & parseInt(direction, 2)) - ) { - preventDefault(event, true); - } - }, - - onClickOverlay() { - this.$emit('click-overlay'); - - if (this.closeOnClickOverlay) { - // TODO - // if (this.onClickOverlay) { - // this.onClickOverlay(); - // } else { - // this.close(); - // } - this.close(); - } - }, - - renderOverlay() { - if (this.$isServer || !this.show) { - return; - } - - this.$nextTick(() => { - this.updateZIndex(this.overlay ? 1 : 0); - }); - }, - - updateZIndex(value = 0) { - this.$refs.root.style.zIndex = ++context.zIndex + value; - }, - }, - }; -} diff --git a/src-next/mixins/popup/type.ts b/src-next/mixins/popup/type.ts deleted file mode 100644 index 5944f8932..000000000 --- a/src-next/mixins/popup/type.ts +++ /dev/null @@ -1,13 +0,0 @@ -export type GetContainer = () => Element; - -export type PopupMixinProps = { - value: boolean; - zIndex: string | number; - overlay?: boolean; - lockScroll: boolean; - lazyRender: boolean; - overlayClass?: any; - overlayStyle?: object | object[]; - getContainer?: string | GetContainer; - closeOnClickOverlay?: boolean; -}; diff --git a/src-next/mixins/relation.js b/src-next/mixins/relation.js deleted file mode 100644 index 0e65df6b3..000000000 --- a/src-next/mixins/relation.js +++ /dev/null @@ -1,65 +0,0 @@ -export function ChildrenMixin(parent, options = {}) { - const indexKey = options.indexKey || 'index'; - - return { - inject: { - // TODO: disableBindRelation - parent: { - from: parent, - default: null, - }, - }, - - computed: { - [indexKey]() { - this.bindRelation(); - - if (this.parent) { - return this.parent.children.indexOf(this); - } - - return null; - }, - }, - - mounted() { - this.bindRelation(); - }, - - beforeDestroy() { - if (this.parent) { - this.parent.children = this.parent.children.filter( - (item) => item !== this - ); - } - }, - - methods: { - bindRelation() { - if (!this.parent || this.parent.children.indexOf(this) !== -1) { - return; - } - - const children = [...this.parent.children, this]; - - this.parent.children = children; - }, - }, - }; -} - -export function ParentMixin(parent) { - return { - provide() { - return { - [parent]: this, - }; - }, - - data() { - return { - children: [], - }; - }, - }; -} diff --git a/src-next/mixins/slots.js b/src-next/mixins/slots.js deleted file mode 100644 index 70449074c..000000000 --- a/src-next/mixins/slots.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Use scopedSlots in Vue 2.6+ - * downgrade to slots in lower version - */ -export const SlotsMixin = { - methods: { - slots(name = 'default', props) { - const { $slots, $scopedSlots } = this; - const scopedSlot = $scopedSlots[name]; - - if (scopedSlot) { - return scopedSlot(props); - } - - return $slots[name]; - }, - }, -}; diff --git a/src-next/mixins/touch.js b/src-next/mixins/touch.js deleted file mode 100644 index 45f9190da..000000000 --- a/src-next/mixins/touch.js +++ /dev/null @@ -1,61 +0,0 @@ -import { on } from '../utils/dom/event'; - -const MIN_DISTANCE = 10; - -function getDirection(x, y) { - if (x > y && x > MIN_DISTANCE) { - return 'horizontal'; - } - - if (y > x && y > MIN_DISTANCE) { - return 'vertical'; - } - - return ''; -} - -export const TouchMixin = { - data() { - return { direction: '' }; - }, - - methods: { - touchStart(event) { - this.resetTouchStatus(); - this.startX = event.touches[0].clientX; - this.startY = event.touches[0].clientY; - }, - - touchMove(event) { - const touch = event.touches[0]; - this.deltaX = touch.clientX - this.startX; - this.deltaY = touch.clientY - this.startY; - this.offsetX = Math.abs(this.deltaX); - this.offsetY = Math.abs(this.deltaY); - this.direction = - this.direction || getDirection(this.offsetX, this.offsetY); - }, - - resetTouchStatus() { - this.direction = ''; - this.deltaX = 0; - this.deltaY = 0; - this.offsetX = 0; - this.offsetY = 0; - }, - - // avoid Vue 2.6 event bubble issues by manually binding events - // https://github.com/youzan/vant/issues/3015 - bindTouchEvent(el) { - const { onTouchStart, onTouchMove, onTouchEnd } = this; - - on(el, 'touchstart', onTouchStart); - on(el, 'touchmove', onTouchMove); - - if (onTouchEnd) { - on(el, 'touchend', onTouchEnd); - on(el, 'touchcancel', onTouchEnd); - } - }, - }, -}; diff --git a/src-next/nav-bar/README.md b/src-next/nav-bar/README.md deleted file mode 100644 index 0a6e7fe44..000000000 --- a/src-next/nav-bar/README.md +++ /dev/null @@ -1,80 +0,0 @@ -# NavBar - -### Install - -```js -import Vue from 'vue'; -import { NavBar } from 'vant'; - -Vue.use(NavBar); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - methods: { - onClickLeft() { - Toast('Back'); - }, - onClickRight() { - Toast('Button'); - }, - }, -}; -``` - -### Use Slot - -```html - - - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| title | Title | _string_ | `''` | -| left-text | Left Text | _string_ | `''` | -| right-text | Right Text | _string_ | `''` | -| left-arrow | Whether to show left arrow | _boolean_ | `false` | -| border | Whether to show bottom border | _boolean_ | `true` | -| fixed | Whether to fixed top | _boolean_ | `false` | -| placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` | -| z-index | Z-index | _number \| string_ | `1` | - -### Slots - -| Name | Description | -| ----- | ------------------------- | -| title | Custom title | -| left | Custom left side content | -| right | Custom right side content | - -### Events - -| Event | Description | Arguments | -| ----------- | --------------------------------- | --------- | -| click-left | Triggered when click left button | - | -| click-right | Triggered when click right button | - | diff --git a/src-next/nav-bar/README.zh-CN.md b/src-next/nav-bar/README.zh-CN.md deleted file mode 100644 index 100999759..000000000 --- a/src-next/nav-bar/README.zh-CN.md +++ /dev/null @@ -1,82 +0,0 @@ -# NavBar 导航栏 - -### 引入 - -```js -import Vue from 'vue'; -import { NavBar } from 'vant'; - -Vue.use(NavBar); -``` - -## 代码演示 - -### 基础用法 - -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - methods: { - onClickLeft() { - Toast('返回'); - }, - onClickRight() { - Toast('按钮'); - }, - }, -}; -``` - -### 使用插槽 - -通过插槽自定义导航栏两侧的内容 - -```html - - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 标题 | _string_ | `''` | -| left-text | 左侧文案 | _string_ | `''` | -| right-text | 右侧文案 | _string_ | `''` | -| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` | -| border | 是否显示下边框 | _boolean_ | `true` | -| fixed | 是否固定在顶部 | _boolean_ | `false` | -| placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | -| z-index | 元素 z-index | _number \| string_ | `1` | - -### Slots - -| 名称 | 说明 | -| ----- | ------------------ | -| title | 自定义标题 | -| left | 自定义左侧区域内容 | -| right | 自定义右侧区域内容 | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ----------- | ------------------ | -------- | -| click-left | 点击左侧按钮时触发 | - | -| click-right | 点击右侧按钮时触发 | - | diff --git a/src-next/nav-bar/demo/index.vue b/src-next/nav-bar/demo/index.vue deleted file mode 100644 index cededbc20..000000000 --- a/src-next/nav-bar/demo/index.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/src-next/nav-bar/index.js b/src-next/nav-bar/index.js deleted file mode 100644 index 76b73d12f..000000000 --- a/src-next/nav-bar/index.js +++ /dev/null @@ -1,105 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { BORDER_BOTTOM } from '../utils/constant'; - -// Components -import Icon from '../icon'; - -const [createComponent, bem] = createNamespace('nav-bar'); - -export default createComponent({ - props: { - title: String, - fixed: Boolean, - zIndex: [Number, String], - leftText: String, - rightText: String, - leftArrow: Boolean, - placeholder: Boolean, - border: { - type: Boolean, - default: true, - }, - }, - - emits: ['click-left', 'click-right'], - - data() { - return { - height: null, - }; - }, - - mounted() { - if (this.placeholder && this.fixed) { - this.height = this.$refs.navBar.getBoundingClientRect().height; - } - }, - - methods: { - genLeft() { - const leftSlot = this.$slots.left?.(); - - if (leftSlot) { - return leftSlot; - } - - return [ - this.leftArrow && , - this.leftText && {this.leftText}, - ]; - }, - - genRight() { - const rightSlot = this.$slots.right?.(); - - if (rightSlot) { - return rightSlot; - } - - if (this.rightText) { - return {this.rightText}; - } - }, - - genNavBar() { - return ( -
-
- {this.genLeft()} -
-
- {this.$slots.title ? this.$slots.title() : this.title} -
-
- {this.genRight()} -
-
- ); - }, - - onClickLeft(event) { - this.$emit('click-left', event); - }, - - onClickRight(event) { - this.$emit('click-right', event); - }, - }, - - render() { - if (this.placeholder && this.fixed) { - return ( -
- {this.genNavBar()} -
- ); - } - - return this.genNavBar(); - }, -}); diff --git a/src-next/nav-bar/index.less b/src-next/nav-bar/index.less deleted file mode 100644 index 582a0a82a..000000000 --- a/src-next/nav-bar/index.less +++ /dev/null @@ -1,66 +0,0 @@ -@import '../style/var'; - -.van-nav-bar { - position: relative; - z-index: @nav-bar-z-index; - display: flex; - align-items: center; - height: @nav-bar-height; - line-height: 1.5; - text-align: center; - background-color: @nav-bar-background-color; - user-select: none; - - .van-icon { - color: @nav-bar-icon-color; - } - - &__arrow { - min-width: 1em; - margin-right: @padding-base; - font-size: @nav-bar-arrow-size; - } - - &--fixed { - position: fixed; - top: 0; - left: 0; - width: 100%; - } - - &__title { - max-width: 60%; - margin: 0 auto; - color: @nav-bar-title-text-color; - font-weight: @font-weight-bold; - font-size: @nav-bar-title-font-size; - } - - &__left, - &__right { - position: absolute; - top: 0; - bottom: 0; - display: flex; - align-items: center; - padding: 0 @padding-md; - font-size: @font-size-md; - cursor: pointer; - - &:active { - opacity: @active-opacity; - } - } - - &__left { - left: 0; - } - - &__right { - right: 0; - } - - &__text { - color: @nav-bar-text-color; - } -} diff --git a/src-next/nav-bar/test/__snapshots__/demo.spec.js.snap b/src-next/nav-bar/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index bcd8a6ba2..000000000 --- a/src-next/nav-bar/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,23 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
- 返回
-
标题
-
按钮
-
-
-
-
-
- 返回
-
标题
-
-
-
-
-
-`; diff --git a/src-next/nav-bar/test/__snapshots__/index.spec.js.snap b/src-next/nav-bar/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 263a07ecc..000000000 --- a/src-next/nav-bar/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`placeholder prop 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`render left & right slot 1`] = ` -
-
Custom Left
-
-
Custom Right
-
-`; - -exports[`render title slot 1`] = ` -
-
-
Custom Title
-
-
-`; diff --git a/src-next/nav-bar/test/demo.spec.js b/src-next/nav-bar/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/nav-bar/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/nav-bar/test/index.spec.js b/src-next/nav-bar/test/index.spec.js deleted file mode 100644 index 63149c6e0..000000000 --- a/src-next/nav-bar/test/index.spec.js +++ /dev/null @@ -1,60 +0,0 @@ -import NavBar from '..'; -import { mount, mockGetBoundingClientRect } from '../../../test'; - -test('render left & right slot', () => { - const wrapper = mount(NavBar, { - scopedSlots: { - left: () => 'Custom Left', - right: () => 'Custom Right', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('render title slot', () => { - const wrapper = mount(NavBar, { - scopedSlots: { - title: () => 'Custom Title', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('placeholder prop', () => { - const restore = mockGetBoundingClientRect({ height: 50 }); - - const wrapper = mount(NavBar, { - propsData: { - fixed: true, - placeholder: true, - }, - }); - - expect(wrapper).toMatchSnapshot(); - - restore(); -}); - -test('click-left event', () => { - const wrapper = mount(NavBar, { - propsData: { - leftText: 'left', - }, - }); - - wrapper.find('.van-nav-bar__left').trigger('click'); - expect(wrapper.emitted('click-left')).toBeTruthy(); -}); - -test('click-right event', () => { - const wrapper = mount(NavBar, { - propsData: { - rightText: 'right', - }, - }); - - wrapper.find('.van-nav-bar__right').trigger('click'); - expect(wrapper.emitted('click-right')).toBeTruthy(); -}); diff --git a/src-next/overlay/README.md b/src-next/overlay/README.md deleted file mode 100644 index 31fba67b1..000000000 --- a/src-next/overlay/README.md +++ /dev/null @@ -1,79 +0,0 @@ -# Overlay - -### Install - -```js -import Vue from 'vue'; -import { Overlay } from 'vant'; - -Vue.use(Overlay); -``` - -## Usage - -### Basic Usage - -```html - - -``` - -```js -export default { - data() { - return { - show: false - } - } -}, -``` - -### Embedded Content - -```html - -
-
-
- - - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| show | Whether to show overlay | _boolean_ | `false` | -| z-index | z-index | _number \| string_ | `1` | -| duration | Animation duration | _number \| string_ | `0.3` | -| class-name | ClassName | _string_ | - | -| custom-class `v2.2.5` | Custom style | _object_ | - | -| lock-scroll `v2.6.2` | Whether to lock background scroll | _boolean_ | `true` | - -### Events - -| Event | Description | Arguments | -| ----- | ---------------------- | -------------- | -| click | Triggered when clicked | _event: Event_ | - -### Slots - -| Name | Description | -| ---------------- | ------------ | -| default `v2.2.5` | Default slot | diff --git a/src-next/overlay/README.zh-CN.md b/src-next/overlay/README.zh-CN.md deleted file mode 100644 index 9d70faa1b..000000000 --- a/src-next/overlay/README.zh-CN.md +++ /dev/null @@ -1,85 +0,0 @@ -# Overlay 遮罩层 - -### 介绍 - -创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作 - -### 引入 - -```js -import Vue from 'vue'; -import { Overlay } from 'vant'; - -Vue.use(Overlay); -``` - -## 代码演示 - -### 基础用法 - -```html - - -``` - -```js -export default { - data() { - return { - show: false - } - } -}, -``` - -### 嵌入内容 - -通过默认插槽可以在遮罩层上嵌入任意内容 - -```html - -
-
-
- - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| show | 是否展示遮罩层 | _boolean_ | `false` | -| z-index | z-index 层级 | _number \| string_ | `1` | -| duration | 动画时长，单位秒 | _number \| string_ | `0.3` | -| class-name | 自定义类名 | _string_ | - | -| custom-style `v2.2.5` | 自定义样式 | _object_ | - | -| lock-scroll `v2.6.2` | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | `true` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------- | -------------- | -| click | 点击时触发 | _event: Event_ | - -### Slots - -| 名称 | 说明 | -| ---------------- | ---------------------------------- | -| default `v2.0.5` | 默认插槽，用于在遮罩层上方嵌入内容 | diff --git a/src-next/overlay/demo/index.vue b/src-next/overlay/demo/index.vue deleted file mode 100644 index a919f4f8c..000000000 --- a/src-next/overlay/demo/index.vue +++ /dev/null @@ -1,72 +0,0 @@ - - - - - diff --git a/src-next/overlay/index.less b/src-next/overlay/index.less deleted file mode 100644 index 3b547cff9..000000000 --- a/src-next/overlay/index.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var'; - -.van-overlay { - position: fixed; - top: 0; - left: 0; - z-index: @overlay-z-index; - width: 100%; - height: 100%; - background-color: @overlay-background-color; -} diff --git a/src-next/overlay/test/__snapshots__/demo.spec.js.snap b/src-next/overlay/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 2179861ea..000000000 --- a/src-next/overlay/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
- -
-
- -
-
-`; diff --git a/src-next/overlay/test/__snapshots__/index.spec.js.snap b/src-next/overlay/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 07b7885df..000000000 --- a/src-next/overlay/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`class-name prop 1`] = `
`; - -exports[`custom style prop 1`] = `
`; - -exports[`default slot 1`] = ``; - -exports[`duration prop 1`] = `
`; - -exports[`z-index prop 1`] = `
`; diff --git a/src-next/overlay/test/demo.spec.js b/src-next/overlay/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/overlay/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/overlay/test/index.spec.js b/src-next/overlay/test/index.spec.js deleted file mode 100644 index 093aa569c..000000000 --- a/src-next/overlay/test/index.spec.js +++ /dev/null @@ -1,98 +0,0 @@ -import { mount } from '../../../test'; -import Overlay from '..'; - -test('z-index prop', () => { - const wrapper = mount(Overlay, { - propsData: { - show: true, - zIndex: 99, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('class-name prop', () => { - const wrapper = mount(Overlay, { - propsData: { - show: true, - className: 'my-overlay', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('custom style prop', () => { - const wrapper = mount(Overlay, { - propsData: { - show: true, - customStyle: { - backgroundColor: 'red', - }, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('duration prop', () => { - const wrapper = mount(Overlay, { - propsData: { - show: true, - duration: 1, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('click event', () => { - const onClick = jest.fn(); - const wrapper = mount(Overlay, { - context: { - on: { - click: onClick, - }, - }, - }); - - wrapper.trigger('click'); - expect(onClick).toHaveBeenCalledTimes(1); -}); - -test('default slot', () => { - const wrapper = mount(Overlay, { - scopedSlots: { - default: () => 'Custom Default', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('lock-scroll prop', () => { - const onTouchMove = jest.fn(); - const wrapper = mount({ - template: ` -
- -
- `, - data() { - return { - lockScroll: true, - }; - }, - methods: { - onTouchMove, - }, - }); - - wrapper.find('.van-overlay').trigger('touchmove'); - expect(onTouchMove).toHaveBeenCalledTimes(0); - - wrapper.setData({ lockScroll: false }); - wrapper.find('.van-overlay').trigger('touchmove'); - expect(onTouchMove).toHaveBeenCalledTimes(1); -}); diff --git a/src-next/pagination/README.md b/src-next/pagination/README.md deleted file mode 100644 index 42ca945df..000000000 --- a/src-next/pagination/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# Pagination - -### Install - -```js -import Vue from 'vue'; -import { Pagination } from 'vant'; - -Vue.use(Pagination); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -export default { - data() { - return { - currentPage: 1, - }; - }, -}; -``` - -### Simple mode - -```html - -``` - -### Show ellipses - -```html - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| v-model | Current page number | _number_ | - | -| mode | Mode, can be set to `simple` `multi` | _string_ | `multi` | -| prev-text | Previous text | _string_ | `Previous` | -| next-text | Next text | _string_ | `Next` | -| total-items | Total items | _number \| string_ | `0` | -| items-per-page | Item number per page | _number \| string_ | `10` | -| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | _number \| string_ | `-` | -| show-page-size | Count of page size to show | _number \| string_ | `5` | -| force-ellipses | Whether to show ellipses | _boolean_ | `false` | - -### Events - -| Event | Description | Arguments | -| ------ | ------------------------ | --------- | -| change | Triggered on page change | - | diff --git a/src-next/pagination/README.zh-CN.md b/src-next/pagination/README.zh-CN.md deleted file mode 100644 index 89a5dcb44..000000000 --- a/src-next/pagination/README.zh-CN.md +++ /dev/null @@ -1,67 +0,0 @@ -# Pagination 分页 - -### 引入 - -```js -import Vue from 'vue'; -import { Pagination } from 'vant'; - -Vue.use(Pagination); -``` - -## 代码演示 - -### 基础用法 - -```html - -``` - -```js -export default { - data() { - return { - currentPage: 1, - }; - }, -}; -``` - -### 简单模式 - -```html - -``` - -### 显示省略号 - -```html - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| v-model | 当前页码 | _number_ | - | -| mode | 显示模式，可选值为 `simple` | _string_ | `multi` | -| prev-text | 上一页按钮文字 | _string_ | `上一页` | -| next-text | 下一页按钮文字 | _string_ | `下一页` | -| page-count | 总页数 | _number \| string_ | 根据页数计算 | -| total-items | 总记录数 | _number \| string_ | `0` | -| items-per-page | 每页记录数 | _number \| string_ | `10` | -| show-page-size | 显示的页码个数 | _number \| string_ | `5` | -| force-ellipses | 是否显示省略号 | _boolean_ | `false` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | -------- | -| change | 页码改变时触发 | - | diff --git a/src-next/pagination/demo/index.vue b/src-next/pagination/demo/index.vue deleted file mode 100644 index d579d6819..000000000 --- a/src-next/pagination/demo/index.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - - - diff --git a/src-next/pagination/index.js b/src-next/pagination/index.js deleted file mode 100644 index 8eddb1dcf..000000000 --- a/src-next/pagination/index.js +++ /dev/null @@ -1,166 +0,0 @@ -import { createNamespace } from '../utils'; -import { BORDER } from '../utils/constant'; - -const [createComponent, bem, t] = createNamespace('pagination'); - -function makePage(number, text, active) { - return { number, text, active }; -} - -export default createComponent({ - props: { - prevText: String, - nextText: String, - forceEllipses: Boolean, - mode: { - type: String, - default: 'multi', - }, - modelValue: { - type: Number, - default: 0, - }, - pageCount: { - type: [Number, String], - default: 0, - }, - totalItems: { - type: [Number, String], - default: 0, - }, - itemsPerPage: { - type: [Number, String], - default: 10, - }, - showPageSize: { - type: [Number, String], - default: 5, - }, - }, - - emits: ['change', 'update:modelValue'], - - computed: { - count() { - const count = - this.pageCount || Math.ceil(this.totalItems / this.itemsPerPage); - return Math.max(1, count); - }, - - pages() { - const pages = []; - const pageCount = this.count; - const showPageSize = +this.showPageSize; - - if (this.mode !== 'multi') { - return pages; - } - - // Default page limits - let startPage = 1; - let endPage = pageCount; - const isMaxSized = showPageSize < pageCount; - - // recompute if showPageSize - if (isMaxSized) { - // Current page is displayed in the middle of the visible ones - startPage = Math.max(this.modelValue - Math.floor(showPageSize / 2), 1); - endPage = startPage + showPageSize - 1; - - // Adjust if limit is exceeded - if (endPage > pageCount) { - endPage = pageCount; - startPage = endPage - showPageSize + 1; - } - } - - // Add page number links - for (let number = startPage; number <= endPage; number++) { - const page = makePage(number, number, number === this.modelValue); - pages.push(page); - } - - // Add links to move between page sets - if (isMaxSized && showPageSize > 0 && this.forceEllipses) { - if (startPage > 1) { - const previousPageSet = makePage(startPage - 1, '...', false); - pages.unshift(previousPageSet); - } - - if (endPage < pageCount) { - const nextPageSet = makePage(endPage + 1, '...', false); - pages.push(nextPageSet); - } - } - - return pages; - }, - }, - - watch: { - modelValue: { - handler(page) { - this.select(page); - }, - immediate: true, - }, - }, - - methods: { - select(page, emitChange) { - page = Math.min(this.count, Math.max(1, page)); - if (this.modelValue !== page) { - this.$emit('update:modelValue', page); - - if (emitChange) { - this.$emit('change', page); - } - } - }, - }, - - render() { - const value = this.modelValue; - const simple = this.mode !== 'multi'; - - const onSelect = (value) => () => { - this.select(value, true); - }; - - return ( -
    -
  • - {this.prevText || t('prev')} -
    • - {this.pages.map((page) => ( -
  • - {page.text} -
    • - ))} - {simple && ( -
  • - {this.$slots.pageDesc - ? this.$slots.pageDesc() - : `${value}/${this.count}`} -
    • - )} -
  • - {this.nextText || t('next')} -
    • -
- ); - }, -}); diff --git a/src-next/pagination/index.less b/src-next/pagination/index.less deleted file mode 100644 index 862b1677c..000000000 --- a/src-next/pagination/index.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '../style/var'; - -.van-pagination { - display: flex; - font-size: @pagination-font-size; - - &__item, - &__page-desc { - display: flex; - align-items: center; - justify-content: center; - } - - &__item { - flex: 1; - box-sizing: border-box; - min-width: @pagination-item-width; - height: @pagination-height; - color: @pagination-item-default-color; - background-color: @pagination-background-color; - cursor: pointer; - user-select: none; - - &:active { - color: @white; - background-color: @pagination-item-default-color; - } - - &::after { - border-width: @border-width-base 0 @border-width-base @border-width-base; - } - - &:last-child::after { - border-right-width: @border-width-base; - } - - &--active { - color: @white; - background-color: @pagination-item-default-color; - } - } - - &__prev, - &__next { - padding: 0 @padding-base; - cursor: pointer; - } - - &__item--disabled { - &, - &:active { - color: @pagination-item-disabled-color; - background-color: @pagination-item-disabled-background-color; - cursor: not-allowed; - opacity: @pagination-disabled-opacity; - } - } - - &__page { - flex-grow: 0; - } - - &__page-desc { - flex: 1; - height: @pagination-height; - color: @pagination-desc-color; - } - - &--simple { - .van-pagination__prev, - .van-pagination__next { - &::after { - border-width: @border-width-base; - } - } - } -} diff --git a/src-next/pagination/test/__snapshots__/demo.spec.js.snap b/src-next/pagination/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index c4e54ef49..000000000 --- a/src-next/pagination/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,34 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
    -
  • 上一页
    • -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 下一页
    • -
-
-
-
    -
  • 上一页
    • -
  • 1/12
    • -
  • 下一页
    • -
-
-
-
    -
  • 上一页
    • -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • ...
    • -
  • 下一页
    • -
-
-
-`; diff --git a/src-next/pagination/test/demo.spec.js b/src-next/pagination/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/pagination/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/popup/README.md b/src-next/popup/README.md deleted file mode 100644 index 0b6e81530..000000000 --- a/src-next/popup/README.md +++ /dev/null @@ -1,138 +0,0 @@ -# Popup - -### Install - -```js -import Vue from 'vue'; -import { Popup } from 'vant'; - -Vue.use(Popup); -``` - -## Usage - -### Basic Usage - -```html -Show Popup -Content -``` - -```js -export default { - data() { - return { - show: false, - }; - }, - - methods: { - showPopup() { - this.show = true; - }, - }, -}; -``` - -### Position - -Use `position` prop to set popup display position - -```html - -``` - -### Close Icon - -```html - - - - - -``` - -### Round Corner - -```html - -``` - -### Get Container - -Use `get-container` prop to specify mount location - -```html - - - - - - - - -``` - -```js -export default { - methods: { - getContainer() { - return document.querySelector('.my-container'); - }, - }, -}; -``` - -> Tips: The get-container prop cannot be used on the root node - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| v-model:show | Whether to show popup | _boolean_ | `false` | -| overlay | Whether to show overlay | _boolean_ | `true` | -| position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` | -| overlay-class | Custom overlay class | _string_ | - | -| overlay-style | Custom overlay style | _object_ | - | -| duration | Transition duration, unit second | _number \| string_ | `0.3` | -| round `v2.0.7` | Whether to show round corner | _boolean_ | `false` | -| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | -| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | -| close-on-popstate `v2.2.10` | Whether to close when popstate | _boolean_ | `false` | -| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | -| closeable `v2.2.0` | Whether to show close icon | _boolean_ | `false` | -| close-icon `v2.2.0` | Close icon name | _string_ | `cross` | -| close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | -| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | -| get-container | Return the mount node for Popup | _string \| () => Element_ | - | -| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | _boolean_ | `false` | - -### Events - -| Event | Description | Arguments | -| ------------- | ---------------------------- | -------------- | -| click | Triggered when click Popup | _event: Event_ | -| open | Triggered when open Popup | - | -| close | Triggered when close Popup | - | -| opened | Triggered when opened Popup | - | -| closed | Triggered when closed Popup | - | -| click-overlay | Triggered when click overlay | - | diff --git a/src-next/popup/README.zh-CN.md b/src-next/popup/README.zh-CN.md deleted file mode 100644 index 017d8628f..000000000 --- a/src-next/popup/README.zh-CN.md +++ /dev/null @@ -1,149 +0,0 @@ -# Popup 弹出层 - -### 介绍 - -弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示 - -### 引入 - -```js -import Vue from 'vue'; -import { Popup } from 'vant'; - -Vue.use(Popup); -``` - -## 代码演示 - -### 基础用法 - -通过 `v-model:show` 控制弹出层是否展示 - -```html -展示弹出层 -内容 -``` - -```js -export default { - data() { - return { - show: false, - }; - }, - - methods: { - showPopup() { - this.show = true; - }, - }, -}; -``` - -### 弹出位置 - -通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right` - -```html - -``` - -### 关闭图标 - -设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置 - -```html - - - - - -``` - -### 圆角弹窗 - -设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式 - -```html - -``` - -### 指定挂载位置 - -弹出层默认挂载到组件所在位置，可以通过`get-container`属性指定挂载位置 - -```html - - - - - - - - -``` - -```js -export default { - methods: { - // 返回一个特定的 DOM 节点，作为挂载的父节点 - getContainer() { - return document.querySelector('.my-container'); - }, - }, -}; -``` - -> 注意：使用 get-container 属性的组件不能为根节点 - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| v-model:show | 是否显示弹出层 | _boolean_ | `false` | -| overlay | 是否显示遮罩层 | _boolean_ | `true` | -| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` | -| overlay-class | 自定义遮罩层类名 | _string_ | - | -| overlay-style | 自定义遮罩层样式 | _object_ | - | -| duration | 动画时长，单位秒 | _number \| string_ | `0.3` | -| round `v2.0.7` | 是否显示圆角 | _boolean_ | `false` | -| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` | -| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` | -| close-on-popstate `v2.2.10` | 是否在页面回退时自动关闭 | _boolean_ | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | -| closeable `v2.2.0` | 是否显示关闭图标 | _boolean_ | `false` | -| close-icon `v2.2.0` | 关闭图标名称或图片链接 | _string_ | `cross` | -| close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | -| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - | -| get-container | 指定挂载的节点 | _string \| () => Element_ | - | -| safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------------- | -------------------------- | -------------- | -| click | 点击弹出层时触发 | _event: Event_ | -| open | 打开弹出层时触发 | - | -| close | 关闭弹出层时触发 | - | -| opened | 打开弹出层且动画结束后触发 | - | -| closed | 关闭弹出层且动画结束后触发 | - | -| click-overlay | 点击遮罩层时触发 | - | diff --git a/src-next/popup/demo/index.vue b/src-next/popup/demo/index.vue deleted file mode 100644 index c3260d820..000000000 --- a/src-next/popup/demo/index.vue +++ /dev/null @@ -1,162 +0,0 @@ - - - - - diff --git a/src-next/popup/index.js b/src-next/popup/index.js deleted file mode 100644 index c77cea282..000000000 --- a/src-next/popup/index.js +++ /dev/null @@ -1,137 +0,0 @@ -import { Teleport, Transition } from 'vue'; -import { createNamespace, isDef, isFunction } from '../utils'; -import { PopupMixin } from '../mixins/popup'; -import Icon from '../icon'; -import Overlay from '../overlay'; - -const [createComponent, bem] = createNamespace('popup'); - -export default createComponent({ - mixins: [PopupMixin()], - - inheritAttrs: false, - - props: { - round: Boolean, - duration: [Number, String], - closeable: Boolean, - transition: String, - safeAreaInsetBottom: Boolean, - closeIcon: { - type: String, - default: 'cross', - }, - closeIconPosition: { - type: String, - default: 'top-right', - }, - position: { - type: String, - default: 'center', - }, - overlay: { - type: Boolean, - default: true, - }, - closeOnClickOverlay: { - type: Boolean, - default: true, - }, - }, - - emits: [ - 'open', - 'close', - 'click', - 'opened', - 'closed', - 'update:show', - 'click-overlay', - ], - - beforeCreate() { - const createEmitter = (eventName) => (event) => - this.$emit(eventName, event); - - this.onClick = createEmitter('click'); - this.onOpened = createEmitter('opened'); - this.onClosed = createEmitter('closed'); - }, - - methods: { - genOverlay() { - if (this.overlay) { - return ; - } - }, - - genPopup() { - const { round, position, duration } = this; - const isCenter = position === 'center'; - - const transitionName = - this.transition || - (isCenter ? 'van-fade' : `van-popup-slide-${position}`); - - const style = {}; - if (isDef(duration)) { - const key = isCenter ? 'animationDuration' : 'transitionDuration'; - style[key] = `${duration}s`; - } - - return ( - - {this.shouldRender ? ( -
- {this.$slots.default?.()} - {this.closeable && ( - - )} -
- ) : null} - - ); - }, - }, - - render() { - const { getContainer } = this; - if (getContainer) { - const to = isFunction(getContainer) ? getContainer() : getContainer; - return ( - - {this.genOverlay()} - {this.genPopup()} - - ); - } - - return ( - <> - {this.genOverlay()} - {this.genPopup()} - - ); - }, -}); diff --git a/src-next/popup/index.less b/src-next/popup/index.less deleted file mode 100644 index 88eec745b..000000000 --- a/src-next/popup/index.less +++ /dev/null @@ -1,137 +0,0 @@ -@import '../style/var'; - -.van { - &-overflow-hidden { - overflow: hidden !important; - } - - &-popup { - position: fixed; - max-height: 100%; - overflow-y: auto; - background-color: @popup-background-color; - transition: @popup-transition; - -webkit-overflow-scrolling: touch; - - &--center { - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - - &.van-popup--round { - border-radius: @popup-round-border-radius; - } - } - - &--top { - top: 0; - left: 0; - width: 100%; - - &.van-popup--round { - border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius; - } - } - - &--right { - top: 50%; - right: 0; - transform: translate3d(0, -50%, 0); - - &.van-popup--round { - border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius; - } - } - - &--bottom { - bottom: 0; - left: 0; - width: 100%; - - &.van-popup--round { - border-radius: @popup-round-border-radius @popup-round-border-radius 0 0; - } - } - - &--left { - top: 50%; - left: 0; - transform: translate3d(0, -50%, 0); - - &.van-popup--round { - border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0; - } - } - - &--safe-area-inset-bottom { - padding-bottom: constant(safe-area-inset-bottom); - padding-bottom: env(safe-area-inset-bottom); - } - - &-slide-top-enter-active, - &-slide-left-enter-active, - &-slide-right-enter-active, - &-slide-bottom-enter-active { - transition-timing-function: ease-out; - } - - &-slide-top-leave-active, - &-slide-left-leave-active, - &-slide-right-leave-active, - &-slide-bottom-leave-active { - transition-timing-function: ease-in; - } - - &-slide-top-enter-from, - &-slide-top-leave-active { - transform: translate3d(0, -100%, 0); - } - - &-slide-right-enter-from, - &-slide-right-leave-active { - transform: translate3d(100%, -50%, 0); - } - - &-slide-bottom-enter-from, - &-slide-bottom-leave-active { - transform: translate3d(0, 100%, 0); - } - - &-slide-left-enter-from, - &-slide-left-leave-active { - transform: translate3d(-100%, -50%, 0); - } - - &__close-icon { - position: absolute; - z-index: @popup-close-icon-z-index; - color: @popup-close-icon-color; - font-size: @popup-close-icon-size; - cursor: pointer; - - &:active { - color: @popup-close-icon-active-color; - } - - &--top-left { - top: @popup-close-icon-margin; - left: @popup-close-icon-margin; - } - - &--top-right { - top: @popup-close-icon-margin; - right: @popup-close-icon-margin; - } - - &--bottom-left { - bottom: @popup-close-icon-margin; - left: @popup-close-icon-margin; - } - - &--bottom-right { - right: @popup-close-icon-margin; - bottom: @popup-close-icon-margin; - } - } - } -} diff --git a/src-next/popup/test/__snapshots__/demo.spec.js.snap b/src-next/popup/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 29daf9410..000000000 --- a/src-next/popup/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,65 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
展示弹出层
- -
- -
-
-
-
顶部弹出
- -
-
-
底部弹出
- -
-
-
左侧弹出
- -
-
-
右侧弹出
- -
- - - - -
-
-
-
关闭图标
- -
-
-
自定义图标
- -
-
-
图标位置
- -
- - - -
-
-
-
圆角弹窗
- -
- -
-
-
-
指定挂载节点
- -
-
-
-`; diff --git a/src-next/popup/test/__snapshots__/index.spec.js.snap b/src-next/popup/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 8552d5572..000000000 --- a/src-next/popup/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`close-icon prop 1`] = ` -
-
-`; - -exports[`duration prop when position is center 1`] = `
`; - -exports[`duration prop when position is top 1`] = `
`; - -exports[`reset z-index 1`] = `
`; - -exports[`round prop 1`] = `
`; diff --git a/src-next/popup/test/demo.spec.js b/src-next/popup/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/popup/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/popup/test/index.spec.js b/src-next/popup/test/index.spec.js deleted file mode 100644 index f570087a7..000000000 --- a/src-next/popup/test/index.spec.js +++ /dev/null @@ -1,265 +0,0 @@ -import Popup from '..'; -import { mount, triggerDrag, later } from '../../../test'; - -let wrapper; -afterEach(() => { - wrapper.destroy(); -}); - -test('lazy render', () => { - wrapper = mount(Popup); - expect(wrapper.vm.$el.tagName).toBeFalsy(); - wrapper.vm.value = true; - expect(wrapper.vm.$el.tagName).toBeTruthy(); -}); - -test('reset z-index', () => { - wrapper = mount(Popup, { - propsData: { - value: true, - zIndex: 10, - lockScroll: false, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('popup lock scroll', () => { - const wrapper1 = mount(Popup, { - propsData: { - value: true, - }, - }); - expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy(); - triggerDrag(document, 0, 100); - triggerDrag(document, 0, -150); - - const wrapper2 = mount(Popup, { - propsData: { - value: true, - }, - }); - wrapper1.vm.$destroy(); - expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy(); - - wrapper2.vm.$destroy(); - expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy(); -}); - -test('get container with parent', () => { - const div1 = document.createElement('div'); - const div2 = document.createElement('div'); - wrapper = mount({ - template: ` -
- -
- `, - components: { - Popup, - }, - data() { - return { - getContainer: () => div1, - }; - }, - }); - const popup = wrapper.find('.van-popup').element; - - expect(popup.parentNode).toEqual(div1); - wrapper.vm.getContainer = () => div2; - expect(popup.parentNode).toEqual(div2); - wrapper.vm.getContainer = null; - expect(popup.parentNode).toEqual(wrapper.element); -}); - -test('get container with selector', () => { - wrapper = mount({ - template: ` -
- - -
- `, - components: { - Popup, - }, - }); - - const dom1 = document.querySelector('.get-container-selector-1'); - const dom2 = wrapper.vm.$el.querySelector('.get-container-selector-2'); - - expect(dom1.parentNode).toEqual(document.body); - expect(dom2.parentNode).toEqual(wrapper.vm.$el); -}); - -test('render overlay', async () => { - const div = document.createElement('div'); - wrapper = mount({ - template: ` -
- -
- `, - components: { - Popup, - }, - data() { - return { - getContainer: () => div, - }; - }, - }); - - await later(); - - expect(div.querySelector('.van-overlay')).toBeTruthy(); -}); - -test('watch overlay prop', async () => { - const div = document.createElement('div'); - wrapper = mount({ - template: ` -
- -
- `, - components: { - Popup, - }, - data() { - return { - show: false, - overlay: false, - getContainer: () => div, - }; - }, - }); - - await later(); - expect(div.querySelector('.van-overlay')).toBeFalsy(); - - wrapper.setData({ overlay: true }); - await later(); - expect(div.querySelector('.van-overlay')).toBeFalsy(); - - wrapper.setData({ show: true }); - await later(); - expect(div.querySelector('.van-overlay')).toBeTruthy(); -}); - -test('close on click overlay', async () => { - const div = document.createElement('div'); - const onClickOverlay = jest.fn(); - - wrapper = mount({ - template: ` -
- -
- `, - components: { - Popup, - }, - data() { - return { - value: true, - getContainer: () => div, - }; - }, - methods: { - onClickOverlay, - }, - }); - - await later(); - - const modal = div.querySelector('.van-overlay'); - triggerDrag(modal, 0, -30); - modal.click(); - - expect(wrapper.vm.value).toBeFalsy(); - expect(onClickOverlay).toHaveBeenCalledTimes(1); -}); - -test('open & close event', () => { - const wrapper = mount(Popup); - wrapper.vm.value = true; - expect(wrapper.emitted('open')).toBeTruthy(); - wrapper.vm.value = false; - expect(wrapper.emitted('close')).toBeTruthy(); -}); - -test('click event', () => { - const wrapper = mount(Popup, { - propsData: { - value: true, - }, - }); - - wrapper.trigger('click'); - expect(wrapper.emitted('click')).toBeTruthy(); -}); - -test('duration prop when position is center', () => { - const wrapper = mount(Popup, { - propsData: { - value: true, - duration: 0.5, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('duration prop when position is top', () => { - const wrapper = mount(Popup, { - propsData: { - value: true, - duration: 0.5, - position: 'top', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('round prop', () => { - const wrapper = mount(Popup, { - propsData: { - value: true, - round: true, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('closeable prop', () => { - const wrapper = mount(Popup, { - propsData: { - value: true, - closeable: true, - }, - }); - - wrapper.find('.van-popup__close-icon').trigger('click'); - expect(wrapper.emitted('input')[0][0]).toEqual(false); -}); - -test('close-icon prop', () => { - const wrapper = mount(Popup, { - propsData: { - value: true, - closeable: true, - closeIcon: 'success', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/progress/README.md b/src-next/progress/README.md deleted file mode 100644 index a03e5b158..000000000 --- a/src-next/progress/README.md +++ /dev/null @@ -1,63 +0,0 @@ -# Progress - -### Install - -```js -import Vue from 'vue'; -import { Progress } from 'vant'; - -Vue.use(Progress); -``` - -## Usage - -### Basic Usage - -Use 'percentage' prop to set current progress - -```html - -``` - -### Stroke Width - -```html - -``` - -### Inactive - -```html - -``` - -### Custom Style - -Use `pivot-text` to custom text，use `color` to custom bar color - -```html - - - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| percentage | Percentage | _number \| string_ | `0` | -| stroke-width `v2.2.1` | Stroke width | _number \| string_ | `4px` | -| color | Color | _string_ | `#1989fa` | -| track-color `v2.2.9` | Track color | _string_ | `#e5e5e5` | -| pivot-text | Pivot text | _string_ | percentage | -| pivot-color | Pivot text background color | _string_ | inherit progress color | -| text-color | Pivot text color | _string_ | `white` | -| inactive | Whether to be gray | _boolean_ | `false` | -| show-pivot | Whether to show text | _boolean_ | `true` | diff --git a/src-next/progress/README.zh-CN.md b/src-next/progress/README.zh-CN.md deleted file mode 100644 index 856b9e8a1..000000000 --- a/src-next/progress/README.zh-CN.md +++ /dev/null @@ -1,67 +0,0 @@ -# Progress 进度条 - -### 引入 - -```js -import Vue from 'vue'; -import { Progress } from 'vant'; - -Vue.use(Progress); -``` - -## 代码演示 - -### 基础用法 - -进度条默认为蓝色，使用`percentage`属性来设置当前进度 - -```html - -``` - -### 线条粗细 - -通过`stroke-width`可以设置进度条的粗细 - -```html - -``` - -### 置灰 - -设置`inactive`属性后进度条将置灰 - -```html - -``` - -### 样式定制 - -可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 - -```html - - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| percentage | 进度百分比 | _number \| string_ | `0` | -| stroke-width `v2.2.1` | 进度条粗细，默认单位为`px` | _number \| string_ | `4px` | -| color | 进度条颜色 | _string_ | `#1989fa` | -| track-color `v2.2.9` | 轨道颜色 | _string_ | `#e5e5e5` | -| pivot-text | 进度文字内容 | _string_ | 百分比 | -| pivot-color | 进度文字背景色 | _string_ | 同进度条颜色 | -| text-color | 进度文字颜色 | _string_ | `white` | -| inactive | 是否置灰 | _boolean_ | `false` | -| show-pivot | 是否显示进度文字 | _boolean_ | `true` | diff --git a/src-next/progress/demo/index.vue b/src-next/progress/demo/index.vue deleted file mode 100644 index f07c9d46f..000000000 --- a/src-next/progress/demo/index.vue +++ /dev/null @@ -1,63 +0,0 @@ - - - - - diff --git a/src-next/progress/index.js b/src-next/progress/index.js deleted file mode 100644 index f12ca19a9..000000000 --- a/src-next/progress/index.js +++ /dev/null @@ -1,84 +0,0 @@ -import { createNamespace, isDef, addUnit } from '../utils'; - -const [createComponent, bem] = createNamespace('progress'); - -export default createComponent({ - props: { - color: String, - inactive: Boolean, - pivotText: String, - textColor: String, - pivotColor: String, - trackColor: String, - strokeWidth: [Number, String], - percentage: { - type: [Number, String], - required: true, - validator: (value) => value >= 0 && value <= 100, - }, - showPivot: { - type: Boolean, - default: true, - }, - }, - - data() { - return { - pivotWidth: 0, - progressWidth: 0, - }; - }, - - mounted() { - this.setWidth(); - }, - - watch: { - showPivot: 'setWidth', - pivotText: 'setWidth', - }, - - methods: { - setWidth() { - this.$nextTick(() => { - this.progressWidth = this.$el.offsetWidth; - this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0; - }); - }, - }, - - render() { - const { pivotText, percentage } = this; - const text = isDef(pivotText) ? pivotText : percentage + '%'; - const showPivot = this.showPivot && text; - const background = this.inactive ? '#cacaca' : this.color; - - const pivotStyle = { - color: this.textColor, - left: `${((this.progressWidth - this.pivotWidth) * percentage) / 100}px`, - background: this.pivotColor || background, - }; - - const portionStyle = { - background, - width: (this.progressWidth * percentage) / 100 + 'px', - }; - - const wrapperStyle = { - background: this.trackColor, - height: addUnit(this.strokeWidth), - }; - - return ( -
- - {showPivot && ( - - {text} - - )} - -
- ); - }, -}); diff --git a/src-next/progress/index.less b/src-next/progress/index.less deleted file mode 100644 index 984948680..000000000 --- a/src-next/progress/index.less +++ /dev/null @@ -1,32 +0,0 @@ -@import '../style/var'; - -.van-progress { - position: relative; - height: @progress-height; - background: @progress-background-color; - border-radius: @progress-height; - - &__portion { - position: absolute; - left: 0; - height: 100%; - background: @progress-color; - border-radius: inherit; - } - - &__pivot { - position: absolute; - top: 50%; - box-sizing: border-box; - min-width: 3.6em; - padding: @progress-pivot-padding; - color: @progress-pivot-text-color; - font-size: @progress-pivot-font-size; - line-height: @progress-pivot-line-height; - text-align: center; - word-break: keep-all; - background-color: @progress-pivot-background-color; - border-radius: 1em; - transform: translate(0, -50%); - } -} diff --git a/src-next/progress/test/__snapshots__/demo.spec.js.snap b/src-next/progress/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 66c2e29a9..000000000 --- a/src-next/progress/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
50%
-
-
-
50%
-
-
-
50%
-
-
-
橙色
-
红色
-
紫色
-
-
-`; diff --git a/src-next/progress/test/__snapshots__/index.spec.js.snap b/src-next/progress/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 47201dd08..000000000 --- a/src-next/progress/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,5 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`calc width 1`] = `
`; - -exports[`calc width 2`] = `
test
`; diff --git a/src-next/progress/test/demo.spec.js b/src-next/progress/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/progress/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/progress/test/index.spec.js b/src-next/progress/test/index.spec.js deleted file mode 100644 index 252abf346..000000000 --- a/src-next/progress/test/index.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -import Progress from '..'; -import { mount, later } from '../../../test'; - -test('calc width', async () => { - const wrapper = mount(Progress, { - propsData: { - showPivot: false, - percentage: 100, - }, - }); - await later(); - expect(wrapper).toMatchSnapshot(); - - wrapper.vm.showPivot = true; - wrapper.vm.pivotText = 'test'; - await later(); - expect(wrapper).toMatchSnapshot(); -}); - -test('track color prop', async () => { - const wrapper = mount(Progress, { - propsData: { - trackColor: 'green', - }, - }); - - expect(wrapper.element.style.background).toEqual('green'); -}); diff --git a/src-next/rate/README.md b/src-next/rate/README.md deleted file mode 100644 index 46396f819..000000000 --- a/src-next/rate/README.md +++ /dev/null @@ -1,123 +0,0 @@ -# Rate - -### Install - -```js -import Vue from 'vue'; -import { Rate } from 'vant'; - -Vue.use(Rate); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -export default { - data() { - return { - value: 3, - }; - }, -}; -``` - -### Custom Icon - -```html - -``` - -### Custom Style - -```html - -``` - -### Half Star - -```html - -``` - -```js -export default { - data() { - return { - value: 2.5, - }; - }, -}; -``` - -### Custom Count - -```html - -``` - -### Disabled - -```html - -``` - -### Readonly - -```html - -``` - -### Change Event - -```html - -``` - -```javascript -export default { - method: { - onChange(value) { - Toast('current value:' + value); - }, - }, -}; -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| v-model | Current rate | _number_ | - | -| count | Count | _number \| string_ | `5` | -| size | Icon size | _number \| string_ | `20px` | -| gutter | Icon gutter | _number \| string_ | `4px` | -| color | Selected color | _string_ | `#ee0a24` | -| void-color | Void color | _string_ | `#c8c9cc` | -| disabled-color | Disabled color | _string_ | `#c8c9cc` | -| icon | Selected icon | _string_ | `star` | -| void-icon | Void icon | _string_ | `star-o` | -| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | -| allow-half | Whether to allow half star | _boolean_ | `false` | -| readonly | Whether to be readonly | _boolean_ | `false` | -| disabled | Whether to disable rate | _boolean_ | `false` | -| touchable `v2.2.0` | Whether to allow select rate by touch gesture | _boolean_ | `true` | - -### Events - -| Event | Description | Parameters | -| ------ | --------------------------- | ------------ | -| change | Triggered when rate changed | current rate | diff --git a/src-next/rate/README.zh-CN.md b/src-next/rate/README.zh-CN.md deleted file mode 100644 index 869edec83..000000000 --- a/src-next/rate/README.zh-CN.md +++ /dev/null @@ -1,123 +0,0 @@ -# Rate 评分 - -### 引入 - -```js -import Vue from 'vue'; -import { Rate } from 'vant'; - -Vue.use(Rate); -``` - -## 代码演示 - -### 基础用法 - -```html - -``` - -```js -export default { - data() { - return { - value: 3, - }; - }, -}; -``` - -### 自定义图标 - -```html - -``` - -### 自定义样式 - -```html - -``` - -### 半星 - -```html - -``` - -```js -export default { - data() { - return { - value: 2.5, - }; - }, -}; -``` - -### 自定义数量 - -```html - -``` - -### 禁用状态 - -```html - -``` - -### 只读状态 - -```html - -``` - -### 监听 change 事件 - -```html - -``` - -```javascript -export default { - method: { - onChange(value) { - Toast('当前值：' + value); - }, - }, -}; -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| v-model | 当前分值 | _number_ | - | -| count | 图标总数 | _number \| string_ | `5` | -| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` | -| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` | -| color | 选中时的颜色 | _string_ | `#ee0a24` | -| void-color | 未选中时的颜色 | _string_ | `#c8c9cc` | -| disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` | -| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` | -| void-icon | 未选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star-o` | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | -| allow-half | 是否允许半选 | _boolean_ | `false` | -| readonly | 是否为只读状态  | _boolean_ | `false` | -| disabled | 是否禁用评分 | _boolean_ | `false` | -| touchable `v2.2.0` | 是否可以通过滑动手势选择评分 | _boolean_ | `true` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ------------------------ | -------- | -| change | 当前分值变化时触发的事件 | 当前分值 | diff --git a/src-next/rate/demo/index.vue b/src-next/rate/demo/index.vue deleted file mode 100644 index b66911d0b..000000000 --- a/src-next/rate/demo/index.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - - - diff --git a/src-next/rate/index.js b/src-next/rate/index.js deleted file mode 100644 index 8c366f581..000000000 --- a/src-next/rate/index.js +++ /dev/null @@ -1,221 +0,0 @@ -// Utils -import { createNamespace, addUnit } from '../utils'; -import { preventDefault } from '../utils/dom/event'; - -// Mixins -import { TouchMixin } from '../mixins/touch'; -import { FieldMixin } from '../mixins/field'; - -// Components -import Icon from '../icon'; - -const [createComponent, bem] = createNamespace('rate'); - -function getRateStatus(value, index, allowHalf) { - if (value >= index) { - return 'full'; - } - - if (value + 0.5 >= index && allowHalf) { - return 'half'; - } - - return 'void'; -} - -export default createComponent({ - mixins: [TouchMixin, FieldMixin], - - props: { - size: [Number, String], - color: String, - gutter: [Number, String], - readonly: Boolean, - disabled: Boolean, - allowHalf: Boolean, - voidColor: String, - iconPrefix: String, - disabledColor: String, - modelValue: { - type: Number, - default: 0, - }, - icon: { - type: String, - default: 'star', - }, - voidIcon: { - type: String, - default: 'star-o', - }, - count: { - type: [Number, String], - default: 5, - }, - touchable: { - type: Boolean, - default: true, - }, - }, - - created() { - this.itemRefs = []; - }, - - computed: { - list() { - const list = []; - for (let i = 1; i <= this.count; i++) { - list.push(getRateStatus(this.modelValue, i, this.allowHalf)); - } - - return list; - }, - - sizeWithUnit() { - return addUnit(this.size); - }, - - gutterWithUnit() { - return addUnit(this.gutter); - }, - }, - - mounted() { - this.bindTouchEvent(this.$el); - }, - - methods: { - select(index) { - if (!this.disabled && !this.readonly && index !== this.modelValue) { - this.$emit('update:modelValue', index); - this.$emit('change', index); - } - }, - - onTouchStart(event) { - if (this.readonly || this.disabled || !this.touchable) { - return; - } - - this.touchStart(event); - - const rects = this.itemRefs.map((item) => item.getBoundingClientRect()); - const ranges = []; - - rects.forEach((rect, index) => { - if (this.allowHalf) { - ranges.push( - { score: index + 0.5, left: rect.left }, - { score: index + 1, left: rect.left + rect.width / 2 } - ); - } else { - ranges.push({ score: index + 1, left: rect.left }); - } - }); - - this.ranges = ranges; - }, - - onTouchMove(event) { - if (this.readonly || this.disabled || !this.touchable) { - return; - } - - this.touchMove(event); - - if (this.direction === 'horizontal') { - preventDefault(event); - - const { clientX } = event.touches[0]; - this.select(this.getScoreByPosition(clientX)); - } - }, - - getScoreByPosition(x) { - for (let i = this.ranges.length - 1; i > 0; i--) { - if (x > this.ranges[i].left) { - return this.ranges[i].score; - } - } - - return this.allowHalf ? 0.5 : 1; - }, - - genStar(status, index) { - const { - icon, - color, - count, - voidIcon, - disabled, - voidColor, - disabledColor, - } = this; - const score = index + 1; - const isFull = status === 'full'; - const isVoid = status === 'void'; - - let style; - if (this.gutterWithUnit && score !== +count) { - style = { paddingRight: this.gutterWithUnit }; - } - - return ( -
{ - this.itemRefs[index] = val; - }} - role="radio" - style={style} - tabindex="0" - aria-setsize={count} - aria-posinset={score} - aria-checked={String(!isVoid)} - class={bem('item')} - > - { - this.select(score); - }} - /> - {this.allowHalf && ( - { - this.select(score - 0.5); - }} - /> - )} -
- ); - }, - }, - - render() { - return ( -
- {this.list.map((status, index) => this.genStar(status, index))} -
- ); - }, -}); diff --git a/src-next/rate/index.less b/src-next/rate/index.less deleted file mode 100644 index 27012144f..000000000 --- a/src-next/rate/index.less +++ /dev/null @@ -1,46 +0,0 @@ -@import '../style/var'; - -.van-rate { - display: inline-flex; - cursor: pointer; - user-select: none; - - &__item { - position: relative; - - &:not(:last-child) { - padding-right: @rate-icon-gutter; - } - } - - &__icon { - display: block; - width: 1em; - color: @rate-icon-void-color; - font-size: @rate-icon-size; - - &--half { - position: absolute; - top: 0; - left: 0; - width: 0.5em; - overflow: hidden; - } - - &--full { - color: @rate-icon-full-color; - } - - &--disabled { - color: @rate-icon-disabled-color; - } - } - - &--disabled { - cursor: not-allowed; - } - - &--readonly { - cursor: default; - } -} diff --git a/src-next/rate/test/__snapshots__/demo.spec.js.snap b/src-next/rate/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 7e13e68b1..000000000 --- a/src-next/rate/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,125 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
- - - - - -
-
-
-
- - - - - -
-
-
-
- - - - - -
-
-
-
- - - - - -
-
-
-
- - - - - - -
-
-
-
- - - - - -
-
-
-
- - - - - -
-
-
-
- - - - - -
-
-
-`; diff --git a/src-next/rate/test/__snapshots__/index.spec.js.snap b/src-next/rate/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 921034480..000000000 --- a/src-next/rate/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`gutter prop 1`] = ` -
- - - - - -
-`; - -exports[`size prop 1`] = ` -
- - - - - -
-`; diff --git a/src-next/rate/test/demo.spec.js b/src-next/rate/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/rate/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/rate/test/index.spec.js b/src-next/rate/test/index.spec.js deleted file mode 100644 index 3e2bd51fe..000000000 --- a/src-next/rate/test/index.spec.js +++ /dev/null @@ -1,154 +0,0 @@ -import Rate from '..'; -import { mount, triggerDrag } from '../../../test'; - -function mockGetBoundingClientRect(items) { - items.filter((icon, index) => { - icon.element.getBoundingClientRect = () => ({ - left: index * 25, - width: 25, - }); - return true; - }); -} - -test('change event', () => { - const onInput = jest.fn(); - const onChange = jest.fn(); - - const wrapper = mount(Rate, { - listeners: { - input: (value) => { - onInput(value); - wrapper.setProps({ value }); - }, - change: onChange, - }, - }); - const item4 = wrapper.findAll('.van-rate__icon').at(3); - - item4.trigger('click'); - item4.trigger('click'); - - expect(onInput).toHaveBeenCalledWith(4); - expect(onInput).toHaveBeenCalledTimes(1); - expect(onChange).toHaveBeenCalledWith(4); - expect(onChange).toHaveBeenCalledTimes(1); -}); - -test('allow half', () => { - const onInput = jest.fn(); - const onChange = jest.fn(); - - const wrapper = mount(Rate, { - propsData: { - allowHalf: true, - }, - listeners: { - input: onInput, - change: onChange, - }, - }); - const item4 = wrapper.findAll('.van-rate__icon--half').at(3); - - item4.trigger('click'); - expect(onInput).toHaveBeenCalledWith(3.5); - expect(onChange).toHaveBeenCalledWith(3.5); -}); - -test('disabled', () => { - const onInput = jest.fn(); - const onChange = jest.fn(); - - const wrapper = mount(Rate, { - propsData: { - disabled: true, - }, - listeners: { - input: onInput, - change: onChange, - }, - }); - const item4 = wrapper.findAll('.van-rate__item').at(3); - - triggerDrag(wrapper, 100, 0); - item4.trigger('click'); - - expect(onInput).toHaveBeenCalledTimes(0); - expect(onChange).toHaveBeenCalledTimes(0); -}); - -test('touchmove to select item', () => { - const onChange = jest.fn(); - const wrapper = mount(Rate, { - listeners: { - change: onChange, - }, - }); - - const icons = wrapper.findAll('.van-rate__item'); - - mockGetBoundingClientRect(icons); - triggerDrag(wrapper, 100, 0); - - expect(onChange).toHaveBeenNthCalledWith(1, 1); - expect(onChange).toHaveBeenNthCalledWith(2, 2); - expect(onChange).toHaveBeenNthCalledWith(3, 2); - expect(onChange).toHaveBeenNthCalledWith(4, 4); -}); - -test('touchmove to select half item', () => { - const onChange = jest.fn(); - const wrapper = mount(Rate, { - propsData: { - allowHalf: true, - }, - listeners: { - change: onChange, - }, - }); - - const icons = wrapper.findAll('.van-rate__item'); - - mockGetBoundingClientRect(icons); - triggerDrag(wrapper, 100, 0); - - expect(onChange).toHaveBeenNthCalledWith(1, 1); - expect(onChange).toHaveBeenNthCalledWith(2, 1.5); - expect(onChange).toHaveBeenNthCalledWith(3, 2); - expect(onChange).toHaveBeenNthCalledWith(4, 4); -}); - -test('gutter prop', () => { - const wrapper = mount(Rate, { - propsData: { - gutter: 10, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('size prop', () => { - const wrapper = mount(Rate, { - propsData: { - size: '2rem', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('untouchable', () => { - const onChange = jest.fn(); - const wrapper = mount(Rate, { - propsData: { - touchable: false, - }, - listeners: { - change: onChange, - }, - }); - - triggerDrag(wrapper, 100, 0); - expect(onChange).toHaveBeenCalledTimes(0); -}); diff --git a/src-next/row/index.js b/src-next/row/index.js deleted file mode 100644 index b111023df..000000000 --- a/src-next/row/index.js +++ /dev/null @@ -1,89 +0,0 @@ -import { createNamespace } from '../utils'; -import { ParentMixin } from '../mixins/relation'; - -const [createComponent, bem] = createNamespace('row'); - -export default createComponent({ - mixins: [ParentMixin('vanRow')], - - props: { - type: String, - align: String, - justify: String, - tag: { - type: String, - default: 'div', - }, - gutter: { - type: [Number, String], - default: 0, - }, - }, - - emits: ['click'], - - computed: { - spaces() { - const gutter = Number(this.gutter); - - if (!gutter) { - return; - } - - const spaces = []; - const groups = [[]]; - - let totalSpan = 0; - this.children.forEach((item, index) => { - totalSpan += Number(item.span); - - if (totalSpan > 24) { - groups.push([index]); - totalSpan -= 24; - } else { - groups[groups.length - 1].push(index); - } - }); - - groups.forEach((group) => { - const averagePadding = (gutter * (group.length - 1)) / group.length; - - group.forEach((item, index) => { - if (index === 0) { - spaces.push({ right: averagePadding }); - } else { - const left = gutter - spaces[item - 1].right; - const right = averagePadding - left; - spaces.push({ left, right }); - } - }); - }); - - return spaces; - }, - }, - - methods: { - onClick(event) { - this.$emit('click', event); - }, - }, - - render() { - const { align, justify } = this; - const flex = this.type === 'flex'; - - return ( - - {this.$slots.default?.()} - - ); - }, -}); diff --git a/src-next/row/index.less b/src-next/row/index.less deleted file mode 100644 index 3858f4d68..000000000 --- a/src-next/row/index.less +++ /dev/null @@ -1,41 +0,0 @@ -@import '../style/var'; - -.van-row { - &::after { - display: table; - clear: both; - content: ''; - } - - &--flex { - display: flex; - - &::after { - display: none; - } - } - - &--justify-center { - justify-content: center; - } - - &--justify-end { - justify-content: flex-end; - } - - &--justify-space-between { - justify-content: space-between; - } - - &--justify-space-around { - justify-content: space-around; - } - - &--align-center { - align-items: center; - } - - &--align-bottom { - align-items: flex-end; - } -} diff --git a/src-next/sidebar-item/index.js b/src-next/sidebar-item/index.js deleted file mode 100644 index 9b594b5a1..000000000 --- a/src-next/sidebar-item/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import { createNamespace } from '../utils'; -import { ChildrenMixin } from '../mixins/relation'; -import { route, routeProps } from '../utils/router'; -import Info from '../info'; - -const [createComponent, bem] = createNamespace('sidebar-item'); - -export default createComponent({ - mixins: [ChildrenMixin('vanSidebar')], - - emits: ['click'], - - props: { - ...routeProps, - dot: Boolean, - badge: [Number, String], - title: String, - disabled: Boolean, - }, - - computed: { - select() { - return this.index === +this.parent.modelValue; - }, - }, - - methods: { - onClick() { - if (this.disabled) { - return; - } - - this.$emit('click', this.index); - this.parent.$emit('update:modelValue', this.index); - this.parent.setIndex(this.index); - route(this.$router, this); - }, - }, - - render() { - return ( - -
- {this.title} - -
- - ); - }, -}); diff --git a/src-next/sidebar-item/index.less b/src-next/sidebar-item/index.less deleted file mode 100644 index 49b6cd2d9..000000000 --- a/src-next/sidebar-item/index.less +++ /dev/null @@ -1,59 +0,0 @@ -@import '../style/var'; - -.van-sidebar-item { - position: relative; - display: block; - box-sizing: border-box; - padding: @sidebar-padding; - overflow: hidden; - color: @sidebar-text-color; - font-size: @sidebar-font-size; - line-height: @sidebar-line-height; - word-wrap: break-word; - background-color: @sidebar-background-color; - cursor: pointer; - user-select: none; - - &:active { - background-color: @sidebar-active-color; - } - - &__text { - position: relative; - display: inline-block; - } - - &:not(:last-child)::after { - border-bottom-width: 1px; - } - - &--select { - color: @sidebar-selected-text-color; - font-weight: @sidebar-selected-font-weight; - - &, - &:active { - background-color: @sidebar-selected-background-color; - } - - &::before { - position: absolute; - top: 50%; - left: 0; - width: @sidebar-selected-border-width; - height: @sidebar-selected-border-height; - background-color: @sidebar-selected-border-color; - transform: translateY(-50%); - content: ''; - } - } - - &--disabled { - color: @sidebar-disabled-text-color; - cursor: not-allowed; - - &:active { - background-color: @sidebar-background-color; - } - } -} diff --git a/src-next/sidebar/README.md b/src-next/sidebar/README.md deleted file mode 100644 index 296140dc7..000000000 --- a/src-next/sidebar/README.md +++ /dev/null @@ -1,112 +0,0 @@ -# Sidebar - -### Install - -```js -import Vue from 'vue'; -import { Sidebar, SidebarItem } from 'vant'; - -Vue.use(Sidebar); -Vue.use(SidebarItem); -``` - -## Usage - -### Basic Usage - -```html - - - - - -``` - -```js -export default { - data() { - return { - activeKey: 0, - }; - }, -}; -``` - -### Show Badge - -```html - - - - - -``` - -### Disabled - -```html - - - - - -``` - -### Change Event - -```html - - - - - -``` - -```js -import { Notify } from 'vant'; - -export default { - data() { - return { - activeKey: 0, - }; - }, - methods: { - onChange(index) { - Notify({ type: 'primary', message: index }); - }, - }, -}; -``` - -## API - -### Sidebar Props - -| Attribute | Description | Type | Default | -| --------- | -------------------- | ------------------ | ------- | -| v-model | Index of chosen item | _number \| string_ | `0` | - -### Sidebar Events - -| Event | Description | Arguments | -| ------ | --------------------------- | ---------------------------- | -| change | Triggered when item changed | index: index of current item | - -### SidebarItem Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| title | Content | _string_ | `''` | -| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` | -| badge `v2.5.6` | Content of the badge | _number \| string_ | `''` | -| disabled `v2.2.0` | Whether to be disabled | _boolean_ | `false` | -| url | Link | _string_ | - | -| to `v2.0.4` | Target route of the link, same as to of vue-router | _string \| object_ | - | -| replace `v2.0.4` | If true, the navigation will not leave a history record | _boolean_ | `false` | - -### SidebarItem Events - -| Event | Description | Arguments | -| ----- | ------------------------- | ---------------------------- | -| click | Triggered when click item | index: index of current item | diff --git a/src-next/sidebar/README.zh-CN.md b/src-next/sidebar/README.zh-CN.md deleted file mode 100644 index 32a58d61d..000000000 --- a/src-next/sidebar/README.zh-CN.md +++ /dev/null @@ -1,121 +0,0 @@ -# Sidebar 侧边导航 - -### 引入 - -```js -import Vue from 'vue'; -import { Sidebar, SidebarItem } from 'vant'; - -Vue.use(Sidebar); -Vue.use(SidebarItem); -``` - -## 代码演示 - -### 基础用法 - -通过`v-model`绑定当前选中项的索引 - -```html - - - - - -``` - -```js -export default { - data() { - return { - activeKey: 0, - }; - }, -}; -``` - -### 徽标提示 - -设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标 - -```html - - - - - -``` - -### 禁用选项 - -通过`disabled`属性禁用选项 - -```html - - - - - -``` - -### 监听切换事件 - -设置`change`方法来监听切换导航项时的事件 - -```html - - - - - -``` - -```js -import { Notify } from 'vant'; - -export default { - data() { - return { - activeKey: 0, - }; - }, - methods: { - onChange(index) { - Notify({ type: 'primary', message: index }); - }, - }, -}; -``` - -## API - -### Sidebar Props - -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | ---------------- | ------------------ | ------ | -| v-model `v2.0.4` | 当前导航项的索引 | _number \| string_ | `0` | - -### Sidebar Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------------- | ----------------------- | -| change | 切换导航项时触发 | index: 当前导航项的索引 | - -### SidebarItem Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 内容 | _string_ | `''` | -| dot `v2.2.1` | 是否显示右上角小红点 | _boolean_ | `false` | -| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - | -| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - | -| disabled `v2.2.0` | 是否禁用该项 | _boolean_ | `false` | -| url | 点击后跳转的链接地址 | _string_ | - | -| to `v2.0.4` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | -| replace `v2.0.4` | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | - -### SidebarItem Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------- | ----------------------- | -| click | 点击时触发 | index: 当前导航项的索引 | diff --git a/src-next/sidebar/demo/index.vue b/src-next/sidebar/demo/index.vue deleted file mode 100644 index 5ab0d55f8..000000000 --- a/src-next/sidebar/demo/index.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - diff --git a/src-next/sidebar/index.js b/src-next/sidebar/index.js deleted file mode 100644 index 8043cc33f..000000000 --- a/src-next/sidebar/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import { createNamespace } from '../utils'; -import { ParentMixin } from '../mixins/relation'; - -const [createComponent, bem] = createNamespace('sidebar'); - -export default createComponent({ - mixins: [ParentMixin('vanSidebar')], - - emits: ['change', 'update:modelValue'], - - props: { - modelValue: { - type: [Number, String], - default: 0, - }, - }, - - data() { - return { - index: +this.modelValue, - }; - }, - - watch: { - modelValue() { - this.setIndex(+this.modelValue); - }, - }, - - methods: { - setIndex(index) { - if (index !== this.index) { - this.index = index; - this.$emit('change', index); - } - }, - }, - - render() { - return
{this.$slots.default?.()}
; - }, -}); diff --git a/src-next/sidebar/index.less b/src-next/sidebar/index.less deleted file mode 100644 index ff09323c9..000000000 --- a/src-next/sidebar/index.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '../style/var'; - -.van-sidebar { - width: @sidebar-width; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} diff --git a/src-next/sidebar/test/__snapshots__/demo.spec.js.snap b/src-next/sidebar/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 1a7caf7b3..000000000 --- a/src-next/sidebar/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` - -`; diff --git a/src-next/sidebar/test/demo.spec.js b/src-next/sidebar/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/sidebar/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/sidebar/test/index.spec.js b/src-next/sidebar/test/index.spec.js deleted file mode 100644 index a3e533410..000000000 --- a/src-next/sidebar/test/index.spec.js +++ /dev/null @@ -1,78 +0,0 @@ -import { mount } from '../../../test'; -import Sidebar from '..'; - -test('click event & change event', () => { - const onClick = jest.fn(); - const onChange = jest.fn(); - const wrapper = mount({ - template: ` - - Text - Text - - `, - methods: { - onClick, - onChange, - }, - }); - - wrapper.findAll('.van-sidebar-item').at(1).trigger('click'); - expect(onClick).toHaveBeenCalledWith(1); - expect(onChange).toHaveBeenCalledWith(1); - wrapper.vm.$destroy(); -}); - -test('v-model', () => { - const onChange = jest.fn(); - const wrapper = mount({ - template: ` - - Text - Text - - `, - data() { - return { - active: 0, - }; - }, - methods: { - onChange, - }, - }); - - wrapper.findAll('.van-sidebar-item').at(1).trigger('click'); - expect(wrapper.vm.active).toEqual(1); - expect(onChange).toHaveBeenCalledWith(1); -}); - -test('disabled prop', () => { - const wrapper = mount({ - template: ` - - Text - Text - - `, - data() { - return { - active: 0, - }; - }, - }); - - wrapper.findAll('.van-sidebar-item').at(1).trigger('click'); - expect(wrapper.vm.active).toEqual(0); -}); - -test('without parent', () => { - const consoleError = console.error; - try { - console.error = jest.fn(); - mount(Sidebar); - } catch (err) { - console.error = consoleError; - expect(err).toBeTruthy(); - } -}); diff --git a/src-next/skeleton/README.md b/src-next/skeleton/README.md deleted file mode 100644 index 3cf31e308..000000000 --- a/src-next/skeleton/README.md +++ /dev/null @@ -1,62 +0,0 @@ -# Skeleton - -### Install - -```js -import Vue from 'vue'; -import { Skeleton } from 'vant'; - -Vue.use(Skeleton); -``` - -## Usage - -### Basic Usage - -```html - -``` - -### Show Avatar - -```html - -``` - -### Show Children - -```html - -
Content
- -``` - -```js -export default { - data() { - return { - loading: true, - }; - }, - mounted() { - this.loading = false; - }, -}; -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| row | Row count | _number \| string_ | `0` | -| row-width | Row width, can be array | _number \| string \|
(number \| string)[]_ | `100%` | -| title | Whether to show title placeholder | _boolean_ | `false` | -| avatar | Whether to show avatar placeholder | _boolean_ | `false` | -| loading | Whether to show skeleton，pass `false` to show child component | _boolean_ | `true` | -| animate | Whether to enable animation | _boolean_ | `true` | -| round `v2.8.5` | Whether to show round title and row | _boolean_ | `false` | -| title-width | Title width | _number \| string_ | `40%` | -| avatar-size | Size of avatar placeholder | _number \| string_ | `32px` | -| avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` | diff --git a/src-next/skeleton/README.zh-CN.md b/src-next/skeleton/README.zh-CN.md deleted file mode 100644 index fc69a07ee..000000000 --- a/src-next/skeleton/README.zh-CN.md +++ /dev/null @@ -1,68 +0,0 @@ -# Skeleton 骨架屏 - -### 引入 - -```js -import Vue from 'vue'; -import { Skeleton } from 'vant'; - -Vue.use(Skeleton); -``` - -## 代码演示 - -### 基础用法 - -通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数 - -```html - -``` - -### 显示头像 - -通过`avatar`属性显示头像占位图 - -```html - -``` - -### 展示子组件 - -将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件 - -```html - -
实际内容
- -``` - -```js -export default { - data() { - return { - loading: true, - }; - }, - mounted() { - this.loading = false; - }, -}; -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| row | 段落占位图行数 | _number \| string_ | `0` | -| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \|
(number \| string)[]_ | `100%` | -| title | 是否显示标题占位图 | _boolean_ | `false` | -| avatar | 是否显示头像占位图 | _boolean_ | `false` | -| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` | -| animate | 是否开启动画 | _boolean_ | `true` | -| round `v2.8.5` | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` | -| title-width | 标题占位图宽度 | _number \| string_ | `40%` | -| avatar-size | 头像占位图大小 | _number \| string_ | `32px` | -| avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` | diff --git a/src-next/skeleton/demo/index.vue b/src-next/skeleton/demo/index.vue deleted file mode 100644 index 9dc9591d7..000000000 --- a/src-next/skeleton/demo/index.vue +++ /dev/null @@ -1,90 +0,0 @@ - - - - - diff --git a/src-next/skeleton/index.less b/src-next/skeleton/index.less deleted file mode 100644 index 95ab87c47..000000000 --- a/src-next/skeleton/index.less +++ /dev/null @@ -1,62 +0,0 @@ -@import '../style/var'; - -.van-skeleton { - display: flex; - padding: 0 @padding-md; - - &__avatar { - flex-shrink: 0; - margin-right: @padding-md; - background-color: @skeleton-avatar-background-color; - - &--round { - border-radius: @border-radius-max; - } - } - - &__content { - width: 100%; - } - - &__avatar + &__content { - padding-top: @padding-xs; - } - - &__row, - &__title { - height: @skeleton-row-height; - background-color: @skeleton-row-background-color; - } - - &__title { - margin: 0; - } - - &__row { - &:not(:first-child) { - margin-top: @skeleton-row-margin-top; - } - } - - &__title + &__row { - margin-top: 20px; - } - - &--animate { - animation: van-skeleton-blink @skeleton-animation-duration ease-in-out - infinite; - } - - &--round { - .van-skeleton__row, - .van-skeleton__title { - border-radius: @border-radius-max; - } - } -} - -@keyframes van-skeleton-blink { - 50% { - opacity: 0.6; - } -} diff --git a/src-next/skeleton/test/__snapshots__/demo.spec.js.snap b/src-next/skeleton/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 785a20ad3..000000000 --- a/src-next/skeleton/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-`; diff --git a/src-next/skeleton/test/__snapshots__/index.spec.js.snap b/src-next/skeleton/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 0ffcccc95..000000000 --- a/src-next/skeleton/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,38 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`avatar shape 1`] = ` -
-
-
-
-`; - -exports[`disable animate 1`] = ` -
-
-
-
-
-`; - -exports[`render chidren 1`] = `
Content
`; - -exports[`round prop 1`] = ` -
-
-
-

-
-
-`; - -exports[`row-width array 1`] = ` -
-
-
-
-
-
-
-
-`; diff --git a/src-next/skeleton/test/demo.spec.js b/src-next/skeleton/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/skeleton/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/skeleton/test/index.spec.js b/src-next/skeleton/test/index.spec.js deleted file mode 100644 index d46140c9d..000000000 --- a/src-next/skeleton/test/index.spec.js +++ /dev/null @@ -1,56 +0,0 @@ -import { mount } from '../../../test'; -import Skeleton from '..'; - -test('row-width array', () => { - const wrapper = mount(Skeleton, { - propsData: { - row: 4, - rowWidth: ['100%', 30, '5rem'], - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('render chidren', () => { - const wrapper = mount({ - template: ` - -
Content
- - `, - components: { Skeleton }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('avatar shape', () => { - const wrapper = mount(Skeleton, { - propsData: { - avatar: true, - avatarSize: 20, - avatarShape: 'square', - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('round prop', () => { - const wrapper = mount(Skeleton, { - propsData: { - title: true, - round: true, - avatar: true, - }, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('disable animate', () => { - const wrapper = mount(Skeleton, { - propsData: { - row: 1, - aniamte: false, - }, - }); - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/slider/README.md b/src-next/slider/README.md deleted file mode 100644 index 0a342c50d..000000000 --- a/src-next/slider/README.md +++ /dev/null @@ -1,123 +0,0 @@ -# Slider - -### Install - -```js -import Vue from 'vue'; -import { Slider } from 'vant'; - -Vue.use(Slider); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - value: 50, - }; - }, - methods: { - onChange(value) { - Toast('Current value：' + value); - }, - }, -}; -``` - -### Range - -```html - -``` - -### Disabled - -```html - -``` - -### Step size - -```html - -``` - -### Custom style - -```html - -``` - -### Custom button - -```html - - - - - -``` - -### Vertical - -```html -
- -
-``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| value | Current value | _number_ | `0` | -| max | Max value | _number \| string_ | `100` | -| min | Min value | _number \| string_ | `0` | -| step | Step size | _number \| string_ | `1` | -| bar-height | Height of bar | _number \| string_ | `2px` | -| button-size `v2.4.5` | Button size | _number \| string_ | `24px` | -| active-color | Active color of bar | _string_ | `#1989fa` | -| inactive-color | Inactive color of bar | _string_ | `#e5e5e5` | -| disabled | Whether to disable slider | _boolean_ | `false` | -| vertical | Whether to display slider vertically | _boolean_ | `false` | - -### Events - -| Event | Description | Arguments | -| ---------- | ------------------------------------ | ------------------- | -| input | Instant triggered when value changed | value: current rate | -| change | Triggered after value changed | value: current rate | -| drag-start | Triggered when start drag | - | -| drag-end | Triggered when end drag | - | - -### Slots - -| Name | Description | -| ------ | ------------- | -| button | Custom button | diff --git a/src-next/slider/README.zh-CN.md b/src-next/slider/README.zh-CN.md deleted file mode 100644 index 99c43e4eb..000000000 --- a/src-next/slider/README.zh-CN.md +++ /dev/null @@ -1,125 +0,0 @@ -# Slider 滑块 - -### 引入 - -```js -import Vue from 'vue'; -import { Slider } from 'vant'; - -Vue.use(Slider); -``` - -## 代码演示 - -### 基础用法 - -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - value: 50, - }; - }, - methods: { - onChange(value) { - Toast('当前值：' + value); - }, - }, -}; -``` - -### 指定选择范围 - -```html - -``` - -### 禁用 - -```html - -``` - -### 指定步长 - -```html - -``` - -### 自定义样式 - -```html - -``` - -### 自定义按钮 - -```html - - - - - -``` - -### 垂直方向 - -Slider 垂直展示时，高度为 100% 父元素高度 - -```html -
- -
-``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| value | 当前进度百分比 | _number_ | `0` | -| max | 最大值 | _number \| string_ | `100` | -| min | 最小值 | _number \| string_ | `0` | -| step | 步长 | _number \| string_ | `1` | -| bar-height | 进度条高度，默认单位为`px` | _number \| string_ | `2px` | -| button-size `v2.4.5` | 滑块按钮大小，默认单位为`px` | _number \| string_ | `24px` | -| active-color | 进度条激活态颜色 | _string_ | `#1989fa` | -| inactive-color | 进度条非激活态颜色 | _string_ | `#e5e5e5` | -| disabled | 是否禁用滑块 | _boolean_ | `false` | -| vertical | 是否垂直展示 | _boolean_ | `false` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ---------- | ------------------------ | --------------- | -| input | 进度变化时实时触发 | value: 当前进度 | -| change | 进度变化且结束拖动后触发 | value: 当前进度 | -| drag-start | 开始拖动时触发 | - | -| drag-end | 结束拖动时触发 | - | - -### Slots - -| 名称 | 说明 | -| ------ | -------------- | -| button | 自定义滑动按钮 | diff --git a/src-next/slider/demo/index.vue b/src-next/slider/demo/index.vue deleted file mode 100644 index a510eefc6..000000000 --- a/src-next/slider/demo/index.vue +++ /dev/null @@ -1,114 +0,0 @@ - - - - - diff --git a/src-next/slider/index.js b/src-next/slider/index.js deleted file mode 100644 index eca993618..000000000 --- a/src-next/slider/index.js +++ /dev/null @@ -1,197 +0,0 @@ -import { createNamespace, addUnit } from '../utils'; -import { preventDefault } from '../utils/dom/event'; -import { TouchMixin } from '../mixins/touch'; -import { FieldMixin } from '../mixins/field'; - -const [createComponent, bem] = createNamespace('slider'); - -export default createComponent({ - mixins: [TouchMixin, FieldMixin], - - props: { - disabled: Boolean, - vertical: Boolean, - barHeight: [Number, String], - buttonSize: [Number, String], - activeColor: String, - inactiveColor: String, - min: { - type: [Number, String], - default: 0, - }, - max: { - type: [Number, String], - default: 100, - }, - step: { - type: [Number, String], - default: 1, - }, - modelValue: { - type: Number, - default: 0, - }, - }, - - emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'], - - data() { - return { - dragStatus: '', - }; - }, - - computed: { - range() { - return this.max - this.min; - }, - - buttonStyle() { - if (this.buttonSize) { - const size = addUnit(this.buttonSize); - return { - width: size, - height: size, - }; - } - }, - }, - - created() { - // format initial value - this.updateValue(this.modelValue); - }, - - mounted() { - this.bindTouchEvent(this.$refs.wrapper); - }, - - methods: { - onTouchStart(event) { - if (this.disabled) { - return; - } - - this.touchStart(event); - this.startValue = this.format(this.modelValue); - this.dragStatus = 'start'; - }, - - onTouchMove(event) { - if (this.disabled) { - return; - } - - if (this.dragStatus === 'start') { - this.$emit('drag-start'); - } - - preventDefault(event, true); - this.touchMove(event); - this.dragStatus = 'draging'; - - const rect = this.$el.getBoundingClientRect(); - const delta = this.vertical ? this.deltaY : this.deltaX; - const total = this.vertical ? rect.height : rect.width; - const diff = (delta / total) * this.range; - - this.newValue = this.startValue + diff; - this.updateValue(this.newValue); - }, - - onTouchEnd() { - if (this.disabled) { - return; - } - - if (this.dragStatus === 'draging') { - this.updateValue(this.newValue, true); - this.$emit('drag-end'); - } - - this.dragStatus = ''; - }, - - onClick(event) { - event.stopPropagation(); - - if (this.disabled) return; - - const rect = this.$el.getBoundingClientRect(); - const delta = this.vertical - ? event.clientY - rect.top - : event.clientX - rect.left; - const total = this.vertical ? rect.height : rect.width; - const value = +this.min + (delta / total) * this.range; - - this.startValue = this.modelValue; - this.updateValue(value, true); - }, - - updateValue(value, end) { - value = this.format(value); - - if (value !== this.modelValue) { - this.$emit('update:modelValue', value); - } - - if (end && value !== this.startValue) { - this.$emit('change', value); - } - }, - - format(value) { - return ( - Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * - this.step - ); - }, - }, - - render() { - const { vertical } = this; - const mainAxis = vertical ? 'height' : 'width'; - const crossAxis = vertical ? 'width' : 'height'; - - const wrapperStyle = { - background: this.inactiveColor, - [crossAxis]: addUnit(this.barHeight), - }; - - const barStyle = { - [mainAxis]: `${((this.modelValue - this.min) * 100) / this.range}%`, - background: this.activeColor, - }; - - if (this.dragStatus) { - barStyle.transition = 'none'; - } - - return ( -
-
-
- {this.$slots.button ? ( - this.$slots.button() - ) : ( -
- )} -
-
-
- ); - }, -}); diff --git a/src-next/slider/index.less b/src-next/slider/index.less deleted file mode 100644 index 28d51adc8..000000000 --- a/src-next/slider/index.less +++ /dev/null @@ -1,75 +0,0 @@ -@import '../style/var'; - -.van-slider { - position: relative; - width: 100%; - height: @slider-bar-height; - background-color: @slider-inactive-background-color; - border-radius: @border-radius-max; - cursor: pointer; - - // use pseudo element to expand click area - &::before { - position: absolute; - top: -@padding-xs; - right: 0; - bottom: -@padding-xs; - left: 0; - content: ''; - } - - &__bar { - position: relative; - width: 100%; - height: 100%; - background-color: @slider-active-background-color; - border-radius: inherit; - transition: width @animation-duration-fast, height @animation-duration-fast; - } - - &__button { - width: @slider-button-width; - height: @slider-button-height; - background-color: @slider-button-background-color; - border-radius: @slider-button-border-radius; - box-shadow: @slider-button-box-shadow; - - &-wrapper { - position: absolute; - top: 50%; - right: 0; - transform: translate3d(50%, -50%, 0); - cursor: grab; - } - } - - &--disabled { - cursor: not-allowed; - opacity: @slider-disabled-opacity; - - .van-slider__button-wrapper { - cursor: not-allowed; - } - } - - &--vertical { - display: inline-block; - width: @slider-bar-height; - height: 100%; - - .van-slider__button-wrapper { - top: auto; - right: 50%; - bottom: 0; - transform: translate3d(50%, 50%, 0); - } - - // use pseudo element to expand click area - &::before { - top: 0; - right: -@padding-xs; - bottom: 0; - left: -@padding-xs; - } - } -} diff --git a/src-next/slider/test/__snapshots__/demo.spec.js.snap b/src-next/slider/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index e1a65f6e5..000000000 --- a/src-next/slider/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,71 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
50
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; diff --git a/src-next/slider/test/__snapshots__/index.spec.js.snap b/src-next/slider/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index e63f4f6d0..000000000 --- a/src-next/slider/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`bar-height prop 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`button-size prop 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`click bar 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`click bar 2`] = ` -
-
-
-
-
-
-
-`; - -exports[`click vertical 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`drag button 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`drag button 2`] = ` -
-
-
-
-
-
-
-`; - -exports[`drag button vertical 1`] = ` -
-
-
-
-
-
-
-`; diff --git a/src-next/slider/test/demo.spec.js b/src-next/slider/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/slider/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/slider/test/index.spec.js b/src-next/slider/test/index.spec.js deleted file mode 100644 index 53333b201..000000000 --- a/src-next/slider/test/index.spec.js +++ /dev/null @@ -1,166 +0,0 @@ -import Slider from '..'; -import { - mount, - trigger, - triggerDrag, - mockGetBoundingClientRect, -} from '../../../test'; - -function mockRect(vertical) { - return mockGetBoundingClientRect({ - width: vertical ? 0 : 100, - height: vertical ? 100 : 0, - top: vertical ? 0 : 100, - left: vertical ? 100 : 0, - }); -} - -test('drag button', () => { - const restoreMock = mockRect(); - - const wrapper = mount(Slider, { - propsData: { - value: 50, - disabled: true, - }, - }); - - wrapper.vm.$on('input', (value) => { - wrapper.setProps({ value }); - }); - - const button = wrapper.find('.van-slider__button'); - triggerDrag(button, 50, 0); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.emitted('drag-start')).toBeFalsy(); - expect(wrapper.emitted('drag-end')).toBeFalsy(); - - wrapper.setData({ disabled: false }); - trigger(button, 'touchstart', 0, 0); - trigger(button, 'touchend', 0, 0); - triggerDrag(button, 50, 0); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.emitted('drag-start')).toBeTruthy(); - expect(wrapper.emitted('drag-end')).toBeTruthy(); - - restoreMock(); -}); - -test('click bar', () => { - const restoreMock = mockRect(); - - const wrapper = mount(Slider, { - propsData: { - value: 50, - disabled: true, - }, - }); - - wrapper.vm.$on('input', (value) => { - wrapper.setProps({ value }); - }); - - trigger(wrapper, 'click', 100, 0); - expect(wrapper).toMatchSnapshot(); - - wrapper.setData({ disabled: false }); - trigger(wrapper, 'click', 100, 0); - expect(wrapper).toMatchSnapshot(); - - restoreMock(); -}); - -test('drag button vertical', () => { - const restoreMock = mockRect(true); - - const wrapper = mount(Slider, { - propsData: { - value: 50, - vertical: true, - }, - }); - - wrapper.vm.$on('input', (value) => { - wrapper.setProps({ value }); - }); - - const button = wrapper.find('.van-slider__button'); - triggerDrag(button, 0, 50); - expect(wrapper).toMatchSnapshot(); - - restoreMock(); -}); - -test('click vertical', () => { - const restoreMock = mockRect(true); - - const wrapper = mount(Slider, { - propsData: { - value: 50, - vertical: true, - }, - }); - - wrapper.vm.$on('input', (value) => { - wrapper.setProps({ value }); - }); - - trigger(wrapper, 'click', 0, 100); - expect(wrapper).toMatchSnapshot(); - - restoreMock(); -}); - -test('bar-height prop', () => { - const wrapper = mount(Slider, { - propsData: { - value: 50, - barHeight: 10, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('button-size prop', () => { - const wrapper = mount(Slider, { - propsData: { - value: 50, - buttonSize: 10, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('should not emit change event when value not changed', () => { - const wrapper = mount(Slider, { - propsData: { - value: 50, - }, - listeners: { - input(value) { - wrapper.setProps({ value }); - }, - }, - }); - - trigger(wrapper, 'click', 100, 0); - trigger(wrapper, 'click', 100, 0); - - expect(wrapper.emitted('change').length).toEqual(1); -}); - -test('should format initial value', (done) => { - mount(Slider, { - propsData: { - value: null, - }, - listeners: { - input(value) { - expect(value).toEqual(0); - done(); - }, - }, - }); -}); diff --git a/src-next/step/index.js b/src-next/step/index.js deleted file mode 100644 index 0e3390561..000000000 --- a/src-next/step/index.js +++ /dev/null @@ -1,94 +0,0 @@ -import { createNamespace } from '../utils'; -import { BORDER } from '../utils/constant'; -import { ChildrenMixin } from '../mixins/relation'; -import Icon from '../icon'; - -const [createComponent, bem] = createNamespace('step'); - -export default createComponent({ - mixins: [ChildrenMixin('vanSteps')], - - computed: { - status() { - if (this.index < this.parent.active) { - return 'finish'; - } - if (this.index === +this.parent.active) { - return 'process'; - } - }, - - active() { - return this.status === 'process'; - }, - - lineStyle() { - if (this.status === 'finish') { - return { background: this.parent.activeColor }; - } - return { background: this.parent.inactiveColor }; - }, - - titleStyle() { - if (this.active) { - return { color: this.parent.activeColor }; - } - if (!this.status) { - return { color: this.parent.inactiveColor }; - } - }, - }, - - methods: { - genCircle() { - const { activeIcon, activeColor, inactiveIcon } = this.parent; - - if (this.active) { - return this.$slots['active-icon'] ? ( - this.$slots['active-icon']() - ) : ( - - ); - } - - if (inactiveIcon || this.$slots['inactive-icon']) { - return this.$slots['inactive-icon'] ? ( - this.$slots['inactive-icon']() - ) : ( - - ); - } - - return ; - }, - - onClickStep() { - this.parent.$emit('click-step', this.index); - }, - }, - - render() { - const { status, active } = this; - const { direction } = this.parent; - - return ( -
-
- {this.$slots.default?.()} -
-
- {this.genCircle()} -
-
-
- ); - }, -}); diff --git a/src-next/step/index.less b/src-next/step/index.less deleted file mode 100644 index 8ecc8ca13..000000000 --- a/src-next/step/index.less +++ /dev/null @@ -1,151 +0,0 @@ -@import '../style/var'; - -.van-step { - position: relative; - flex: 1; - color: @step-text-color; - font-size: @step-font-size; - - &__circle { - display: block; - width: @step-circle-size; - height: @step-circle-size; - background-color: @step-circle-color; - border-radius: 50%; - } - - &__line { - position: absolute; - background-color: @step-line-color; - transition: background-color @animation-duration-base; - } - - &--horizontal { - float: left; - - &:first-child { - .van-step__title { - margin-left: 0; - transform: none; - } - } - - &:last-child { - position: absolute; - right: 1px; - width: auto; - - .van-step__title { - margin-left: 0; - transform: none; - } - - .van-step__circle-container { - right: -9px; - left: auto; - } - } - - .van-step__circle-container { - position: absolute; - top: 30px; - left: -@padding-xs; - z-index: 1; - padding: 0 @padding-xs; - background-color: @white; - transform: translateY(-50%); - } - - .van-step__title { - display: inline-block; - margin-left: 3px; - font-size: @step-horizontal-title-font-size; - transform: translateX(-50%); - - @media (max-width: 321px) { - font-size: @step-horizontal-title-font-size - 1px; - } - } - - .van-step__line { - top: 30px; - left: 0; - width: 100%; - height: 1px; - } - - .van-step__icon { - display: block; - font-size: @step-icon-size; - } - - .van-step--process { - color: @step-process-text-color; - } - } - - &--vertical { - display: block; - float: none; - padding: 10px 10px 10px 0; - line-height: 18px; - - &:not(:last-child)::after { - border-bottom-width: 1px; - } - - &:first-child { - &::before { - position: absolute; - top: 0; - left: -15px; - z-index: 1; - width: 1px; - height: 20px; - background-color: @white; - content: ''; - } - } - - .van-step__circle-container { - position: absolute; - top: 19px; - left: -15px; - z-index: 2; - font-size: @step-icon-size; - line-height: 1; - transform: translate(-50%, -50%); - } - - .van-step__line { - top: 16px; - left: -15px; - width: 1px; - height: 100%; - } - } - - &:last-child { - .van-step__line { - width: 0; - } - } - - &--finish { - color: @step-finish-text-color; - - .van-step__circle, - .van-step__line { - background-color: @step-finish-line-color; - } - } - - &__icon, - &__title { - transition: color @animation-duration-base; - - &--active { - color: @step-active-color; - } - } -} diff --git a/src-next/steps/README.md b/src-next/steps/README.md deleted file mode 100644 index a82b38f2f..000000000 --- a/src-next/steps/README.md +++ /dev/null @@ -1,90 +0,0 @@ -# Steps - -### Install - -```js -import Vue from 'vue'; -import { Step, Steps } from 'vant'; - -Vue.use(Step); -Vue.use(Steps); -``` - -## Usage - -### Basic Usage - -```html - - Step1 - Step2 - Step3 - Step4 - -``` - -```js -export default { - data() { - return { - active: 1, - }; - }, -}; -``` - -### Custom Style - -```html - - Step1 - Step2 - Step3 - Step4 - -``` - -### Vertical Steps - -```html - - -

【City】Status1

-

2016-07-12 12:40

- - -

【City】Status2

-

2016-07-11 10:00

- - -

【City】Status3

-

2016-07-10 09:30

- - -``` - -## API - -### Steps Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| active | Active step | _number \| string_ | `0` | -| direction | Can be set to `vertical` | _string_ | `horizontal` | -| active-color | Active step color | _string_ | `#07c160` | -| inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` | -| active-icon | Active icon name | _string_ | `checked` | -| inactive-icon | Inactive icon name | _string_ | - | - -### Step Slots - -| Name | Description | -| ------------- | -------------------- | -| active-icon | Custom active icon | -| inactive-icon | Custom inactive icon | - -### Steps Events - -| Event | Description | Arguments | -| --- | --- | --- | -| click-step `v2.5.9` | Triggered when a step's title or icon is clicked | _index: number_ | diff --git a/src-next/steps/README.zh-CN.md b/src-next/steps/README.zh-CN.md deleted file mode 100644 index d4610bc29..000000000 --- a/src-next/steps/README.zh-CN.md +++ /dev/null @@ -1,96 +0,0 @@ -# Steps 步骤条 - -### 引入 - -```js -import Vue from 'vue'; -import { Step, Steps } from 'vant'; - -Vue.use(Step); -Vue.use(Steps); -``` - -## 代码演示 - -### 基础用法 - -`active`属性表示当前步骤的索引，从 0 起计 - -```html - - 买家下单 - 商家接单 - 买家提货 - 交易完成 - -``` - -```js -export default { - data() { - return { - active: 1, - }; - }, -}; -``` - -### 自定义样式 - -可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色 - -```html - - 买家下单 - 商家接单 - 买家提货 - 交易完成 - -``` - -### 竖向步骤条 - -可以通过设置`direction`属性来改变步骤条的显示方向 - -```html - - -

【城市】物流状态1

-

2016-07-12 12:40

- - -

【城市】物流状态2

-

2016-07-11 10:00

- - -

快件已发货

-

2016-07-10 09:30

- - -``` - -## API - -### Steps Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| active | 当前步骤 | _number \| string_ | `0` | -| direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` | -| active-color | 激活状态颜色 | _string_ | `#07c160` | -| inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` | -| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` | -| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - | - -### Step Slots - -| 名称 | 说明 | -| ------------- | -------------------- | -| active-icon | 自定义激活状态图标 | -| inactive-icon | 自定义未激活状态图标 | - -### Steps Events - -| 事件名 | 说明 | 回调参数 | -| ------------------- | -------------------------- | --------------- | -| click-step `v2.5.9` | 点击步骤的标题或图标时触发 | _index: number_ | diff --git a/src-next/steps/demo/index.vue b/src-next/steps/demo/index.vue deleted file mode 100644 index 1d0a6236b..000000000 --- a/src-next/steps/demo/index.vue +++ /dev/null @@ -1,116 +0,0 @@ - - - - - diff --git a/src-next/steps/index.js b/src-next/steps/index.js deleted file mode 100644 index 3e17de6ce..000000000 --- a/src-next/steps/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import { createNamespace } from '../utils'; -import { ParentMixin } from '../mixins/relation'; - -const [createComponent, bem] = createNamespace('steps'); - -export default createComponent({ - mixins: [ParentMixin('vanSteps')], - - props: { - activeColor: String, - inactiveIcon: String, - inactiveColor: String, - active: { - type: [Number, String], - default: 0, - }, - direction: { - type: String, - default: 'horizontal', - }, - activeIcon: { - type: String, - default: 'checked', - }, - }, - - emits: ['click-step'], - - render() { - return ( -
-
{this.$slots.default?.()}
-
- ); - }, -}); diff --git a/src-next/steps/index.less b/src-next/steps/index.less deleted file mode 100644 index 51d94d716..000000000 --- a/src-next/steps/index.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '../style/var'; - -.van-steps { - overflow: hidden; - background-color: @steps-background-color; - - &--horizontal { - padding: 10px 10px 0; - - .van-steps__items { - position: relative; - display: flex; - margin: 0 0 10px; - padding-bottom: 22px; - } - } - - &--vertical { - padding: 0 0 0 @padding-xl; - } -} diff --git a/src-next/steps/test/__snapshots__/demo.spec.js.snap b/src-next/steps/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 98a80d91e..000000000 --- a/src-next/steps/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,96 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
-
买家下单
-
-
-
-
-
商家接单
-
-
-
-
-
-
买家提货
-
-
-
-
-
交易完成
-
-
-
-
-
-
-
-
-
-
-
买家下单
-
-
-
-
-
-
商家接单
-
-
-
-
-
-
买家提货
-
-
-
-
-
-
交易完成
-
-
-
-
-
-
-
-
-
-
-
-
-

【城市】物流状态1

-

2016-07-12 12:40

-
-
-
-
-
-
-
-

【城市】物流状态

-

2016-07-11 10:00

-
-
-
-
-
-
-

快件已发货

-

2016-07-10 09:30

-
-
-
-
-
-
-
-
-`; diff --git a/src-next/steps/test/__snapshots__/index.spec.js.snap b/src-next/steps/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 232fc1a04..000000000 --- a/src-next/steps/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`icon slot 1`] = ` -
-
-
-
- A -
-
Custim Inactive Icon
-
-
-
-
- B -
-
Custim Active Icon
-
-
-
-
- C -
-
Custim Inactive Icon
-
-
-
-
-`; diff --git a/src-next/steps/test/demo.spec.js b/src-next/steps/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/steps/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/steps/test/index.spec.js b/src-next/steps/test/index.spec.js deleted file mode 100644 index 29d694e04..000000000 --- a/src-next/steps/test/index.spec.js +++ /dev/null @@ -1,61 +0,0 @@ -import { mount } from '../../../test'; - -test('icon slot', () => { - const wrapper = mount({ - template: ` - - - - A - - - - B - - - - C - - - `, - }); - expect(wrapper).toMatchSnapshot(); -}); - -test('click-step event', () => { - const onClickStep = jest.fn(); - const wrapper = mount({ - template: ` - - A - B - C - - `, - methods: { - onClickStep, - }, - }); - - wrapper.find('.van-step').trigger('click'); - expect(onClickStep).toHaveBeenCalledTimes(0); - - wrapper.find('.van-step__title').trigger('click'); - expect(onClickStep).toHaveBeenCalledWith(0); - - wrapper.findAll('.van-step__circle-container').at(2).trigger('click'); - expect(onClickStep).toHaveBeenCalledTimes(2); - expect(onClickStep).toHaveBeenLastCalledWith(2); -}); - -test('inactive-color prop', () => { - const wrapper = mount({ - template: ` - - A - B - - `, - }); - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src-next/style/README.md b/src-next/style/README.md deleted file mode 100644 index 6bb0ca1b4..000000000 --- a/src-next/style/README.md +++ /dev/null @@ -1,79 +0,0 @@ -# Built-in Style - -### Intro - -Vant contains some common styles that can be used directly by the className. - -### Text ellipsis - -When the text content length exceeds the maximum container width, the excess text is automatically omitted. - -```html -
- This is a paragraph that displays up to one line of text, and the rest of the - text will be omitted. -
- -
- This is a paragraph that displays up to two lines of text, and the rest of the - text will be omitted. -
- -
- This is a paragraph that displays up to three lines of text, and the rest of - the text will be omitted. -
-``` - -### Hairline - -Add 1px border under the Retina screen for the element, based on a pseudo element. - -```html - -
- - -
- - -
- - -
- - -
- - -
-``` - -### Animation - -```html - - -
Fade
- - - - -
Slide Up
- - - - -
Slide Down
- - - - -
Slide Left
- - - - -
Slide Right
- -``` diff --git a/src-next/style/README.zh-CN.md b/src-next/style/README.zh-CN.md deleted file mode 100644 index cc42831cd..000000000 --- a/src-next/style/README.zh-CN.md +++ /dev/null @@ -1,79 +0,0 @@ -# 内置样式 - -### 介绍 - -Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。 - -### 文字省略 - -当文本内容长度超过容器最大宽度时，自动省略多余的文本。 - -```html - -
这是一段最多显示一行的文字，多余的内容会被省略
- - -
- 这是一段最多显示两行的文字，多余的内容会被省略 -
- - -
- 这是一段最多显示三行的文字，多余的内容会被省略 -
-``` - -### 1px 边框 - -为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。 - -```html - -
- - -
- - -
- - -
- - -
- - -
-``` - -### 动画 - -可以通过 `transition` 组件使用内置的动画 - -```html - - -
Fade
- - - - -
Slide Up
- - - - -
Slide Down
- - - - -
Slide Left
- - - - -
Slide Right
- -``` diff --git a/src-next/style/animation.less b/src-next/style/animation.less deleted file mode 100644 index db2485f8c..000000000 --- a/src-next/style/animation.less +++ /dev/null @@ -1,139 +0,0 @@ -@import './var'; - -@keyframes van-slide-up-enter { - from { - transform: translate3d(0, 100%, 0); - } -} - -@keyframes van-slide-up-leave { - to { - transform: translate3d(0, 100%, 0); - } -} - -@keyframes van-slide-down-enter { - from { - transform: translate3d(0, -100%, 0); - } -} - -@keyframes van-slide-down-leave { - to { - transform: translate3d(0, -100%, 0); - } -} - -@keyframes van-slide-left-enter { - from { - transform: translate3d(-100%, 0, 0); - } -} - -@keyframes van-slide-left-leave { - to { - transform: translate3d(-100%, 0, 0); - } -} - -@keyframes van-slide-right-enter { - from { - transform: translate3d(100%, 0, 0); - } -} - -@keyframes van-slide-right-leave { - to { - transform: translate3d(100%, 0, 0); - } -} - -@keyframes van-fade-in { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes van-fade-out { - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - -@keyframes van-rotate { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.van-fade { - &-enter-active { - animation: @animation-duration-base van-fade-in both - @animation-timing-function-enter; - } - - &-leave-active { - animation: @animation-duration-base van-fade-out both - @animation-timing-function-leave; - } -} - -.van-slide-up { - &-enter-active { - animation: van-slide-up-enter @animation-duration-base both - @animation-timing-function-enter; - } - - &-leave-active { - animation: van-slide-up-leave @animation-duration-base both - @animation-timing-function-leave; - } -} - -.van-slide-down { - &-enter-active { - animation: van-slide-down-enter @animation-duration-base both - @animation-timing-function-enter; - } - - &-leave-active { - animation: van-slide-down-leave @animation-duration-base both - @animation-timing-function-leave; - } -} - -.van-slide-left { - &-enter-active { - animation: van-slide-left-enter @animation-duration-base both - @animation-timing-function-enter; - } - - &-leave-active { - animation: van-slide-left-leave @animation-duration-base both - @animation-timing-function-leave; - } -} - -.van-slide-right { - &-enter-active { - animation: van-slide-right-enter @animation-duration-base both - @animation-timing-function-enter; - } - - &-leave-active { - animation: van-slide-right-leave @animation-duration-base both - @animation-timing-function-leave; - } -} diff --git a/src-next/style/base.less b/src-next/style/base.less deleted file mode 100644 index 086daec7f..000000000 --- a/src-next/style/base.less +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Entry of basic styles - */ - -@import './var'; -@import './normalize'; -@import './ellipsis'; -@import './clearfix'; -@import './hairline'; -@import './animation'; diff --git a/src-next/style/clearfix.less b/src-next/style/clearfix.less deleted file mode 100644 index 3780b50d2..000000000 --- a/src-next/style/clearfix.less +++ /dev/null @@ -1,5 +0,0 @@ -@import './mixins/clearfix'; - -.van-clearfix { - .clearfix(); -} diff --git a/src-next/style/demo/index.vue b/src-next/style/demo/index.vue deleted file mode 100644 index df01ad4a7..000000000 --- a/src-next/style/demo/index.vue +++ /dev/null @@ -1,110 +0,0 @@ - - - - - diff --git a/src-next/style/ellipsis.less b/src-next/style/ellipsis.less deleted file mode 100644 index 0f3f282ac..000000000 --- a/src-next/style/ellipsis.less +++ /dev/null @@ -1,13 +0,0 @@ -@import './mixins/ellipsis'; - -.van-ellipsis { - .ellipsis(); -} - -.van-multi-ellipsis--l2 { - .multi-ellipsis(2); -} - -.van-multi-ellipsis--l3 { - .multi-ellipsis(3); -} diff --git a/src-next/style/hairline.less b/src-next/style/hairline.less deleted file mode 100644 index 31d35d57f..000000000 --- a/src-next/style/hairline.less +++ /dev/null @@ -1,47 +0,0 @@ -@import './var'; -@import './mixins/hairline'; - -[class*='van-hairline'] { - &::after { - .hairline(); - } -} - -.van-hairline { - &, - &--top, - &--left, - &--right, - &--bottom, - &--surround, - &--top-bottom { - position: relative; - } - - &--top::after { - border-top-width: @border-width-base; - } - - &--left::after { - border-left-width: @border-width-base; - } - - &--right::after { - border-right-width: @border-width-base; - } - - &--bottom::after { - border-bottom-width: @border-width-base; - } - - &, - &-unset { - &--top-bottom::after { - border-width: @border-width-base 0; - } - } - - &--surround::after { - border-width: @border-width-base; - } -} diff --git a/src-next/style/mixins/clearfix.less b/src-next/style/mixins/clearfix.less deleted file mode 100644 index c9f0cb19c..000000000 --- a/src-next/style/mixins/clearfix.less +++ /dev/null @@ -1,7 +0,0 @@ -.clearfix() { - &::after { - display: table; - clear: both; - content: ''; - } -} diff --git a/src-next/style/mixins/ellipsis.less b/src-next/style/mixins/ellipsis.less deleted file mode 100644 index 44b97b728..000000000 --- a/src-next/style/mixins/ellipsis.less +++ /dev/null @@ -1,15 +0,0 @@ -.multi-ellipsis(@lines) { - display: -webkit-box; - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: @lines; - - /* autoprefixer: ignore next */ - -webkit-box-orient: vertical; -} - -.ellipsis() { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} diff --git a/src-next/style/mixins/hairline.less b/src-next/style/mixins/hairline.less deleted file mode 100644 index ead093b03..000000000 --- a/src-next/style/mixins/hairline.less +++ /dev/null @@ -1,39 +0,0 @@ -@import '../var'; - -.hairline-common() { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; -} - -.hairline(@color: @border-color) { - .hairline-common(); - - top: -50%; - right: -50%; - bottom: -50%; - left: -50%; - border: 0 solid @color; - transform: scale(0.5); -} - -.hairline-top(@color: @border-color, @left: 0, @right: 0) { - .hairline-common(); - - top: 0; - right: @right; - left: @left; - border-top: 1px solid @color; - transform: scaleY(0.5); -} - -.hairline-bottom(@color: @border-color, @left: 0, @right: 0) { - .hairline-common(); - - right: @right; - bottom: 0; - left: @left; - border-bottom: 1px solid @color; - transform: scaleY(0.5); -} diff --git a/src-next/style/normalize.less b/src-next/style/normalize.less deleted file mode 100644 index baf31f706..000000000 --- a/src-next/style/normalize.less +++ /dev/null @@ -1,38 +0,0 @@ -@import './var'; - -html { - -webkit-tap-highlight-color: transparent; -} - -body { - margin: 0; - font-family: @base-font-family; -} - -a { - text-decoration: none; -} - -input, -button, -textarea { - color: inherit; - font: inherit; -} - -a, -input, -button, -textarea, -[class*='van-'] { - &:focus { - outline: none; - } -} - -ol, -ul { - margin: 0; - padding: 0; - list-style: none; -} diff --git a/src-next/style/reset.less b/src-next/style/reset.less deleted file mode 100644 index c8256b58c..000000000 --- a/src-next/style/reset.less +++ /dev/null @@ -1,171 +0,0 @@ -@import './var'; - -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; - border: 0; -} - -html { - line-height: 1; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -ol, -ul { - list-style: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -caption, -th, -td { - font-weight: normal; - vertical-align: middle; -} - -q, -blockquote { - quotes: none; -} - -q::before, -q::after, -blockquote::before, -blockquote::after { - content: ''; - content: none; -} - -a img { - border: none; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section, -summary { - display: block; -} - -* { - box-sizing: content-box; -} - -body { - color: @text-color; - background-color: @background-color; -} - -a { - text-decoration: none; - background: transparent; -} - -button, -input[type='number'], -input[type='text'], -input[type='password'], -input[type='email'], -input[type='search'], -select, -textarea { - margin: 0; - font-family: inherit; - -webkit-appearance: none; -} diff --git a/src-next/style/var.less b/src-next/style/var.less deleted file mode 100644 index a0957a179..000000000 --- a/src-next/style/var.less +++ /dev/null @@ -1,839 +0,0 @@ -// Color Palette -@black: #000; -@white: #fff; -@gray-1: #f7f8fa; -@gray-2: #f2f3f5; -@gray-3: #ebedf0; -@gray-4: #dcdee0; -@gray-5: #c8c9cc; -@gray-6: #969799; -@gray-7: #646566; -@gray-8: #323233; -@red: #ee0a24; -@blue: #1989fa; -@orange: #ff976a; -@orange-dark: #ed6a0c; -@orange-light: #fffbe8; -@green: #07c160; - -// Gradient Colors -@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); -@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); - -// Component Colors -@text-color: @gray-8; -@active-color: @gray-2; -@active-opacity: 0.7; -@disabled-opacity: 0.5; -@background-color: @gray-1; -@background-color-light: #fafafa; -@text-link-color: #576b95; - -// Padding -@padding-base: 4px; -@padding-xs: @padding-base * 2; -@padding-sm: @padding-base * 3; -@padding-md: @padding-base * 4; -@padding-lg: @padding-base * 6; -@padding-xl: @padding-base * 8; - -// Font -@font-size-xs: 10px; -@font-size-sm: 12px; -@font-size-md: 14px; -@font-size-lg: 16px; -@font-weight-bold: 500; -@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', - Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', - 'Microsoft Yahei', sans-serif; -@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, - sans-serif; - -// Animation -@animation-duration-base: 0.3s; -@animation-duration-fast: 0.2s; -@animation-timing-function-enter: ease-out; -@animation-timing-function-leave: ease-in; - -// Border -@border-color: @gray-3; -@border-width-base: 1px; -@border-radius-sm: 2px; -@border-radius-md: 4px; -@border-radius-lg: 8px; -@border-radius-max: 999px; - -// ActionSheet -@action-sheet-max-height: 80%; -@action-sheet-header-height: 44px; -@action-sheet-header-font-size: @font-size-lg; -@action-sheet-description-color: @gray-6; -@action-sheet-description-font-size: @font-size-md; -@action-sheet-description-line-height: 20px; -@action-sheet-item-background: @white; -@action-sheet-item-font-size: @font-size-lg; -@action-sheet-item-line-height: 22px; -@action-sheet-item-text-color: @text-color; -@action-sheet-item-disabled-text-color: @gray-5; -@action-sheet-subname-color: @gray-6; -@action-sheet-subname-font-size: @font-size-sm; -@action-sheet-subname-line-height: 20px; -@action-sheet-close-icon-size: 22px; -@action-sheet-close-icon-color: @gray-5; -@action-sheet-close-icon-active-color: @gray-6; -@action-sheet-close-icon-padding: 0 @padding-md; -@action-sheet-cancel-padding-top: @padding-xs; -@action-sheet-cancel-padding-color: @background-color; - -// AddressEdit -@address-edit-padding: @padding-sm; -@address-edit-buttons-padding: @padding-xl @padding-base; -@address-edit-button-margin-bottom: @padding-sm; -@address-edit-detail-finish-color: @blue; -@address-edit-detail-finish-font-size: @font-size-sm; - -// AddressList -@address-list-padding: 12px 12px 100px; -@address-list-disabled-text-color: @gray-6; -@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md; -@address-list-disabled-text-font-size: @font-size-md; -@address-list-disabled-text-line-height: 20px; -@address-list-add-button-z-index: 999; -@address-list-item-padding: @padding-sm; -@address-list-item-text-color: @text-color; -@address-list-item-disabled-text-color: @gray-5; -@address-list-item-font-size: 13px; -@address-list-item-line-height: 18px; -@address-list-item-radio-icon-color: @red; -@address-list-edit-icon-size: 20px; - -// Button -@button-mini-height: 24px; -@button-mini-font-size: @font-size-xs; -@button-small-height: 32px; -@button-small-font-size: @font-size-sm; -@button-normal-font-size: @font-size-md; -@button-large-height: 50px; -@button-default-height: 44px; -@button-default-line-height: 1.2; -@button-default-font-size: @font-size-lg; -@button-default-color: @text-color; -@button-default-background-color: @white; -@button-default-border-color: @border-color; -@button-primary-color: @white; -@button-primary-background-color: @green; -@button-primary-border-color: @green; -@button-info-color: @white; -@button-info-background-color: @blue; -@button-info-border-color: @blue; -@button-danger-color: @white; -@button-danger-background-color: @red; -@button-danger-border-color: @red; -@button-warning-color: @white; -@button-warning-background-color: @orange; -@button-warning-border-color: @orange; -@button-border-width: @border-width-base; -@button-border-radius: @border-radius-sm; -@button-round-border-radius: @border-radius-max; -@button-plain-background-color: @white; -@button-disabled-opacity: @disabled-opacity; - -// Calendar -@calendar-background-color: @white; -@calendar-popup-height: 80%; -@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); -@calendar-header-title-height: 44px; -@calendar-header-title-font-size: @font-size-lg; -@calendar-header-subtitle-font-size: @font-size-md; -@calendar-weekdays-height: 30px; -@calendar-weekdays-font-size: @font-size-sm; -@calendar-month-title-font-size: @font-size-md; -@calendar-month-mark-color: fade(@gray-2, 80%); -@calendar-month-mark-font-size: 160px; -@calendar-day-height: 64px; -@calendar-day-font-size: @font-size-lg; -@calendar-range-edge-color: @white; -@calendar-range-edge-background-color: @red; -@calendar-range-middle-color: @red; -@calendar-range-middle-background-opacity: 0.1; -@calendar-selected-day-size: 54px; -@calendar-selected-day-color: @white; -@calendar-info-font-size: @font-size-xs; -@calendar-info-line-height: 14px; -@calendar-selected-day-background-color: @red; -@calendar-day-disabled-color: @gray-5; -@calendar-confirm-button-height: 36px; -@calendar-confirm-button-margin: 7px 0; - -// Card -@card-padding: @padding-xs @padding-md; -@card-font-size: @font-size-sm; -@card-text-color: @text-color; -@card-background-color: @background-color-light; -@card-thumb-size: 88px; -@card-thumb-border-radius: @border-radius-lg; -@card-title-line-height: 16px; -@card-desc-color: @gray-7; -@card-desc-line-height: 20px; -@card-price-color: @gray-8; -@card-origin-price-color: @gray-6; -@card-num-color: @gray-6; -@card-origin-price-font-size: @font-size-xs; -@card-price-font-size: @font-size-sm; -@card-price-integer-font-size: @font-size-lg; -@card-price-font-family: @price-integer-font-family; - -// Cell -@cell-font-size: @font-size-md; -@cell-line-height: 24px; -@cell-vertical-padding: 10px; -@cell-horizontal-padding: @padding-md; -@cell-text-color: @text-color; -@cell-background-color: @white; -@cell-border-color: @border-color; -@cell-active-color: @active-color; -@cell-required-color: @red; -@cell-label-color: @gray-6; -@cell-label-font-size: @font-size-sm; -@cell-label-line-height: 18px; -@cell-label-margin-top: @padding-base; -@cell-value-color: @gray-6; -@cell-icon-size: 16px; -@cell-right-icon-color: @gray-6; -@cell-large-vertical-padding: @padding-sm; -@cell-large-title-font-size: @font-size-lg; -@cell-large-label-font-size: @font-size-md; - -// CellGroup -@cell-group-background-color: @white; -@cell-group-title-color: @gray-6; -@cell-group-title-padding: @padding-md @padding-md @padding-xs; -@cell-group-title-font-size: @font-size-md; -@cell-group-title-line-height: 16px; - -// Checkbox -@checkbox-size: 20px; -@checkbox-border-color: @gray-5; -@checkbox-transition-duration: @animation-duration-fast; -@checkbox-label-margin: @padding-xs; -@checkbox-label-color: @text-color; -@checkbox-checked-icon-color: @blue; -@checkbox-disabled-icon-color: @gray-5; -@checkbox-disabled-label-color: @gray-5; -@checkbox-disabled-background-color: @border-color; - -// Circle -@circle-text-color: @text-color; -@circle-text-font-weight: @font-weight-bold; -@circle-text-font-size: @font-size-md; -@circle-text-line-height: 18px; - -// Collapse -@collapse-item-transition-duration: @animation-duration-base; -@collapse-item-content-padding: @padding-sm @padding-md; -@collapse-item-content-font-size: 14px; -@collapse-item-content-line-height: 1.5; -@collapse-item-content-text-color: @gray-6; -@collapse-item-content-background-color: @white; -@collapse-item-title-disabled-color: @gray-5; - -// ContactCard -@contact-card-padding: @padding-md; -@contact-card-add-icon-size: 40px; -@contact-card-add-icon-color: @blue; -@contact-card-value-line-height: 20px; - -// ContactEdit -@contact-edit-padding: @padding-md; -@contact-edit-fields-radius: @border-radius-md; -@contact-edit-buttons-padding: @padding-xl 0; -@contact-edit-button-margin-bottom: @padding-sm; -@contact-edit-button-font-size: 16px; -@contact-edit-field-label-width: 4em; - -// ContactList -@contact-list-edit-icon-size: 16px; -@contact-list-add-button-z-index: 999; -@contact-list-item-padding: @padding-md; - -// CountDown -@count-down-text-color: @text-color; -@count-down-font-size: @font-size-md; -@count-down-line-height: 20px; - -// Coupon -@coupon-margin: 0 @padding-sm @padding-sm; -@coupon-content-height: 84px; -@coupon-content-padding: 14px 0; -@coupon-background-color: @white; -@coupon-active-background-color: @active-color; -@coupon-border-radius: @border-radius-lg; -@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -@coupon-head-width: 96px; -@coupon-amount-color: @red; -@coupon-amount-font-size: 30px; -@coupon-currency-font-size: 40%; -@coupon-name-font-size: @font-size-md; -@coupon-disabled-text-color: @gray-6; -@coupon-description-padding: @padding-xs @padding-md; -@coupon-description-border-color: @border-color; - -// CouponCell -@coupon-cell-selected-text-color: @text-color; - -// CouponList -@coupon-list-background-color: @background-color; -@coupon-list-field-padding: 5px 0 5px @padding-md; -@coupon-list-exchange-button-height: 32px; -@coupon-list-close-button-height: 40px; -@coupon-list-empty-image-size: 200px; -@coupon-list-empty-tip-color: @gray-6; -@coupon-list-empty-tip-font-size: @font-size-md; -@coupon-list-empty-tip-line-height: 20px; - -// Dialog -@dialog-width: 320px; -@dialog-small-screen-width: 90%; -@dialog-font-size: @font-size-lg; -@dialog-transition: @animation-duration-base; -@dialog-border-radius: 16px; -@dialog-background-color: @white; -@dialog-header-font-weight: @font-weight-bold; -@dialog-header-line-height: 24px; -@dialog-header-padding-top: @padding-lg; -@dialog-header-isolated-padding: @padding-lg 0; -@dialog-message-padding: @padding-lg; -@dialog-message-font-size: @font-size-md; -@dialog-message-line-height: 20px; -@dialog-message-max-height: 60vh; -@dialog-has-title-message-text-color: @gray-7; -@dialog-has-title-message-padding-top: @padding-sm; -@dialog-confirm-button-text-color: @blue; - -// Divider -@divider-margin: @padding-md 0; -@divider-text-color: @gray-6; -@divider-font-size: @font-size-md; -@divider-line-height: 24px; -@divider-border-color: @border-color; -@divider-content-padding: @padding-md; -@divider-content-left-width: 10%; -@divider-content-right-width: 10%; - -// DropdownMenu -@dropdown-menu-height: 48px; -@dropdown-menu-background-color: @white; -@dropdown-menu-title-font-size: 15px; -@dropdown-menu-title-text-color: @text-color; -@dropdown-menu-title-active-text-color: @blue; -@dropdown-menu-title-disabled-text-color: @gray-6; -@dropdown-menu-title-padding: 0 @padding-xs; -@dropdown-menu-title-line-height: 22px; -@dropdown-menu-option-active-color: @blue; -@dropdown-menu-content-max-height: 80%; -@dropdown-item-z-index: 10; - -// Empty -@empty-padding: @padding-xl 0; -@empty-image-size: 160px; -@empty-description-margin-top: @padding-md; -@empty-description-padding: 0 60px; -@empty-description-color: @gray-6; -@empty-description-font-size: 14px; -@empty-description-line-height: 20px; -@empty-bottom-margin-top: 24px; - -// Field -@field-label-width: 6.2em; -@field-label-color: @gray-7; -@field-label-margin-right: @padding-sm; -@field-input-text-color: @text-color; -@field-input-error-text-color: @red; -@field-input-disabled-text-color: @gray-5; -@field-placeholder-text-color: @gray-5; -@field-icon-size: 16px; -@field-clear-icon-size: 16px; -@field-clear-icon-color: @gray-5; -@field-right-icon-color: @gray-6; -@field-error-message-color: @red; -@field-error-message-text-color: 12px; -@field-text-area-min-height: 60px; -@field-word-limit-color: @gray-7; -@field-word-limit-font-size: @font-size-sm; -@field-word-limit-line-height: 16px; -@field-disabled-text-color: @gray-5; - -// GridItem -@grid-item-content-padding: @padding-md @padding-xs; -@grid-item-content-background-color: @white; -@grid-item-content-active-color: @active-color; -@grid-item-icon-size: 28px; -@grid-item-text-color: @gray-7; -@grid-item-text-font-size: @font-size-sm; - -// GoodsAction -@goods-action-background-color: @white; -@goods-action-height: 50px; -@goods-action-icon-width: 48px; -@goods-action-icon-height: 100%; -@goods-action-icon-color: @text-color; -@goods-action-icon-size: 18px; -@goods-action-icon-font-size: @font-size-xs; -@goods-action-icon-active-color: @active-color; -@goods-action-icon-text-color: @gray-7; -@goods-action-button-height: 40px; -@goods-action-button-warning-color: @gradient-orange; -@goods-action-button-danger-color: @gradient-red; - -// IndexAnchor -@index-anchor-z-index: 1; -@index-anchor-padding: 0 @padding-md; -@index-anchor-text-color: @text-color; -@index-anchor-font-weight: @font-weight-bold; -@index-anchor-font-size: @font-size-md; -@index-anchor-line-height: 32px; -@index-anchor-background-color: transparent; -@index-anchor-sticky-text-color: @green; -@index-anchor-sticky-background-color: @white; - -// IndexBar -@index-bar-sidebar-z-index: 2; -@index-bar-index-font-size: @font-size-xs; -@index-bar-index-line-height: 14px; -@index-bar-index-active-color: @green; - -// Info -@info-size: 16px; -@info-color: @white; -@info-padding: 0 3px; -@info-font-size: @font-size-sm; -@info-font-weight: @font-weight-bold; -@info-border-width: @border-width-base; -@info-background-color: @red; -@info-dot-color: @red; -@info-dot-size: 8px; -@info-font-family: @price-integer-font-family; - -// Image -@image-placeholder-text-color: @gray-6; -@image-placeholder-font-size: @font-size-md; -@image-placeholder-background-color: @background-color; -@image-loading-icon-size: 22px; -@image-error-icon-size: 22px; - -// ImagePreview -@image-preview-index-text-color: @white; -@image-preview-index-font-size: @font-size-md; -@image-preview-index-line-height: 22px; -@image-preview-index-text-shadow: 0 1px 1px @gray-8; -@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); -@image-preview-close-icon-size: 22px; -@image-preview-close-icon-color: @gray-5; -@image-preview-close-icon-active-color: @gray-6; -@image-preview-close-icon-margin: @padding-md; -@image-preview-close-icon-z-index: 1; - -// List -@list-icon-margin-right: 5px; -@list-text-color: @gray-6; -@list-text-font-size: @font-size-md; -@list-text-line-height: 50px; - -// Loading -@loading-text-color: @gray-6; -@loading-text-font-size: @font-size-md; -@loading-spinner-color: @gray-5; -@loading-spinner-size: 30px; -@loading-spinner-animation-duration: 0.8s; - -// NavBar -@nav-bar-height: 46px; -@nav-bar-background-color: @white; -@nav-bar-arrow-size: 16px; -@nav-bar-icon-color: @blue; -@nav-bar-text-color: @blue; -@nav-bar-title-font-size: @font-size-lg; -@nav-bar-title-text-color: @text-color; -@nav-bar-z-index: 1; - -// NoticeBar -@notice-bar-height: 40px; -@notice-bar-padding: 0 @padding-md; -@notice-bar-wrapable-padding: @padding-xs @padding-md; -@notice-bar-text-color: @orange-dark; -@notice-bar-font-size: @font-size-md; -@notice-bar-line-height: 24px; -@notice-bar-background-color: @orange-light; -@notice-bar-icon-size: 16px; -@notice-bar-icon-min-width: 24px; - -// Notify -@notify-text-color: @white; -@notify-padding: @padding-xs @padding-md; -@notify-font-size: @font-size-md; -@notify-line-height: 20px; -@notify-primary-background-color: @blue; -@notify-success-background-color: @green; -@notify-danger-background-color: @red; -@notify-warning-background-color: @orange; - -// NumberKeyboard -@number-keyboard-background-color: @gray-2; -@number-keyboard-key-height: 56px; -@number-keyboard-key-font-size: 28px; -@number-keyboard-key-active-color: @gray-3; -@number-keyboard-delete-font-size: @font-size-lg; -@number-keyboard-title-color: @gray-7; -@number-keyboard-title-height: 30px; -@number-keyboard-title-font-size: @font-size-md; -@number-keyboard-close-padding: 0 @padding-md; -@number-keyboard-close-color: @text-link-color; -@number-keyboard-close-font-size: @font-size-md; -@number-keyboard-button-text-color: @white; -@number-keyboard-button-background-color: @blue; -@number-keyboard-cursor-color: @text-color; -@number-keyboard-cursor-width: 1px; -@number-keyboard-cursor-height: 40%; -@number-keyboard-cursor-animation-duration: 1s; -@number-keyboard-z-index: 100; - -// Overlay -@overlay-z-index: 1; -@overlay-background-color: rgba(0, 0, 0, 0.7); - -// Pagination -@pagination-height: 40px; -@pagination-font-size: @font-size-md; -@pagination-item-width: 36px; -@pagination-item-default-color: @blue; -@pagination-item-disabled-color: @gray-7; -@pagination-item-disabled-background-color: @background-color; -@pagination-background-color: @white; -@pagination-desc-color: @gray-7; -@pagination-disabled-opacity: @disabled-opacity; - -// Panel -@panel-background-color: @white; -@panel-header-value-color: @red; -@panel-footer-padding: @padding-xs @padding-md; - -// PasswordInput -@password-input-height: 50px; -@password-input-margin: 0 @padding-md; -@password-input-font-size: 20px; -@password-input-border-radius: 6px; -@password-input-background-color: @white; -@password-input-info-color: @gray-6; -@password-input-info-font-size: @font-size-md; -@password-input-error-info-color: @red; -@password-input-dot-size: 10px; -@password-input-dot-color: @black; - -// Picker -@picker-background-color: @white; -@picker-toolbar-height: 44px; -@picker-title-font-size: @font-size-lg; -@picker-title-line-height: 20px; -@picker-action-padding: 0 @padding-md; -@picker-action-font-size: @font-size-md; -@picker-confirm-action-color: @text-link-color; -@picker-cancel-action-color: @gray-6; -@picker-option-font-size: @font-size-lg; -@picker-option-text-color: @black; -@picker-option-disabled-opacity: 0.3; -@picker-loading-icon-color: @blue; -@picker-loading-mask-color: rgba(255, 255, 255, 0.9); - -// Popup -@popup-background-color: @white; -@popup-transition: transform @animation-duration-base; -@popup-round-border-radius: 20px; -@popup-close-icon-size: 22px; -@popup-close-icon-color: @gray-5; -@popup-close-icon-active-color: @gray-6; -@popup-close-icon-margin: 16px; -@popup-close-icon-z-index: 1; - -// Progress -@progress-height: 4px; -@progress-color: @blue; -@progress-background-color: @gray-3; -@progress-pivot-padding: 0 5px; -@progress-pivot-text-color: @white; -@progress-pivot-font-size: @font-size-xs; -@progress-pivot-line-height: 1.6; -@progress-pivot-background-color: @blue; - -// PullRefresh -@pull-refresh-head-height: 50px; -@pull-refresh-head-font-size: @font-size-md; -@pull-refresh-head-text-color: @gray-6; - -// Radio -@radio-size: 20px; -@radio-border-color: @gray-5; -@radio-transition-duration: @animation-duration-fast; -@radio-label-margin: @padding-xs; -@radio-label-color: @text-color; -@radio-checked-icon-color: @blue; -@radio-disabled-icon-color: @gray-5; -@radio-disabled-label-color: @gray-5; -@radio-disabled-background-color: @border-color; - -// Rate -@rate-icon-size: 20px; -@rate-icon-gutter: @padding-base; -@rate-icon-void-color: @gray-5; -@rate-icon-full-color: @red; -@rate-icon-disabled-color: @gray-5; - -// ShareSheet -@share-sheet-header-padding: @padding-sm @padding-md @padding-base; -@share-sheet-title-color: @text-color; -@share-sheet-title-font-size: @font-size-md; -@share-sheet-title-line-height: 20px; -@share-sheet-description-color: @gray-6; -@share-sheet-description-font-size: @font-size-sm; -@share-sheet-description-line-height: 16px; -@share-sheet-icon-size: 48px; -@share-sheet-option-name-color: @gray-7; -@share-sheet-option-name-font-size: @font-size-sm; -@share-sheet-option-description-color: @gray-5; -@share-sheet-option-description-font-size: @font-size-sm; -@share-sheet-cancel-button-font-size: @font-size-lg; -@share-sheet-cancel-button-height: 48px; -@share-sheet-cancel-button-background: @white; - -// Search -@search-padding: 10px @padding-sm; -@search-background-color: @white; -@search-content-background-color: @gray-1; -@search-input-height: 34px; -@search-label-padding: 0 5px; -@search-label-color: @text-color; -@search-label-font-size: @font-size-md; -@search-left-icon-color: @gray-6; -@search-action-padding: 0 @padding-xs; -@search-action-text-color: @text-color; -@search-action-font-size: @font-size-md; - -// Sidebar -@sidebar-width: 85px; - -// SidebarItem -@sidebar-font-size: @font-size-md; -@sidebar-line-height: 20px; -@sidebar-text-color: @text-color; -@sidebar-disabled-text-color: @gray-5; -@sidebar-padding: 20px @padding-sm; -@sidebar-active-color: @active-color; -@sidebar-background-color: @background-color; -@sidebar-selected-font-weight: @font-weight-bold; -@sidebar-selected-text-color: @text-color; -@sidebar-selected-border-width: 4px; -@sidebar-selected-border-height: 16px; -@sidebar-selected-border-color: @red; -@sidebar-selected-background-color: @white; - -// Skeleton -@skeleton-row-height: 16px; -@skeleton-row-background-color: @active-color; -@skeleton-row-margin-top: @padding-sm; -@skeleton-avatar-background-color: @active-color; -@skeleton-animation-duration: 1.2s; - -// Slider -@slider-active-background-color: @blue; -@slider-inactive-background-color: @gray-3; -@slider-disabled-opacity: @disabled-opacity; -@slider-bar-height: 2px; -@slider-button-width: 24px; -@slider-button-height: 24px; -@slider-button-border-radius: 50%; -@slider-button-background-color: @white; -@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); - -// Step -@step-text-color: @gray-6; -@step-active-color: @green; -@step-process-text-color: @text-color; -@step-font-size: @font-size-md; -@step-line-color: @border-color; -@step-finish-line-color: @green; -@step-finish-text-color: @text-color; -@step-icon-size: 12px; -@step-circle-size: 5px; -@step-circle-color: @gray-6; -@step-horizontal-title-font-size: @font-size-sm; - -// Steps -@steps-background-color: @white; - -// Sticky -@sticky-z-index: 99; - -// Stepper -@stepper-active-color: #e8e8e8; -@stepper-background-color: @active-color; -@stepper-button-icon-color: @text-color; -@stepper-button-disabled-color: @background-color; -@stepper-button-disabled-icon-color: @gray-5; -@stepper-button-round-theme-color: @red; -@stepper-input-width: 32px; -@stepper-input-height: 28px; -@stepper-input-font-size: @font-size-md; -@stepper-input-line-height: normal; -@stepper-input-text-color: @text-color; -@stepper-input-disabled-text-color: @gray-5; -@stepper-input-disabled-background-color: @active-color; -@stepper-border-radius: @border-radius-md; - -// SubmitBar -@submit-bar-height: 50px; -@submit-bar-z-index: 100; -@submit-bar-background-color: @white; -@submit-bar-button-width: 110px; -@submit-bar-price-color: @red; -@submit-bar-price-font-size: @font-size-md; -@submit-bar-currency-font-size: @font-size-md; -@submit-bar-text-color: @text-color; -@submit-bar-text-font-size: @font-size-md; -@submit-bar-tip-padding: @padding-xs @padding-sm; -@submit-bar-tip-font-size: @font-size-sm; -@submit-bar-tip-line-height: 1.5; -@submit-bar-tip-color: #f56723; -@submit-bar-tip-background-color: #fff7cc; -@submit-bar-tip-icon-size: 12px; -@submit-bar-button-height: 40px; -@submit-bar-padding: 0 @padding-md; -@submit-bar-price-integer-font-size: 20px; -@submit-bar-price-font-family: @price-integer-font-family; - -// Swipe -@swipe-indicator-size: 6px; -@swipe-indicator-margin: @padding-sm; -@swipe-indicator-active-opacity: 1; -@swipe-indicator-inactive-opacity: 0.3; -@swipe-indicator-active-background-color: @blue; -@swipe-indicator-inactive-background-color: @border-color; - -// Switch -@switch-size: 30px; -@switch-width: 2em; -@switch-height: 1em; -@switch-node-size: 1em; -@switch-node-z-index: 1; -@switch-node-background-color: @white; -@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), - 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); -@switch-background-color: @white; -@switch-on-background-color: @blue; -@switch-transition-duration: @animation-duration-base; -@switch-disabled-opacity: @disabled-opacity; -@switch-border: @border-width-base solid rgba(0, 0, 0, 0.1); - -// SwitchCell -@switch-cell-padding-top: @cell-vertical-padding - 1px; -@switch-cell-padding-bottom: @cell-vertical-padding - 1px; -@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px; -@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px; - -// Tabbar -@tabbar-height: 50px; -@tabbar-z-index: 1; -@tabbar-background-color: @white; - -// TabbarItem -@tabbar-item-font-size: @font-size-sm; -@tabbar-item-text-color: @gray-7; -@tabbar-item-active-color: @blue; -@tabbar-item-line-height: 1; -@tabbar-item-icon-size: 18px; -@tabbar-item-margin-bottom: 5px; - -// Tab -@tab-text-color: @gray-7; -@tab-active-text-color: @text-color; -@tab-disabled-text-color: @gray-5; -@tab-font-size: @font-size-md; - -// Tabs -@tabs-default-color: @red; -@tabs-line-height: 44px; -@tabs-card-height: 30px; -@tabs-nav-background-color: @white; -@tabs-bottom-bar-height: 3px; -@tabs-bottom-bar-color: @tabs-default-color; - -// Tag -@tag-padding: 0.2em 0.5em; -@tag-font-size: @font-size-xs; -@tag-medium-font-size: @font-size-sm; -@tag-large-font-size: @font-size-md; -@tag-text-color: @white; -@tag-border-radius: 0.2em; -@tag-round-border-radius: @border-radius-max; -@tag-danger-color: @red; -@tag-primary-color: @blue; -@tag-success-color: @green; -@tag-warning-color: @orange; -@tag-default-color: @gray-6; -@tag-plain-background-color: @white; - -// Toast -@toast-max-width: 70%; -@toast-font-size: @font-size-md; -@toast-text-color: @white; -@toast-loading-icon-color: @white; -@toast-line-height: 20px; -@toast-border-radius: @border-radius-lg; -@toast-background-color: fade(@text-color, 88%); -@toast-icon-size: 40px; -@toast-text-min-width: 96px; -@toast-text-padding: @padding-xs @padding-sm; -@toast-default-padding: @padding-md; -@toast-default-width: 88px; -@toast-default-min-height: 88px; -@toast-position-top-distance: 50px; -@toast-position-bottom-distance: 50px; - -// TreeSelect -@tree-select-font-size: @font-size-md; -@tree-select-nav-background-color: @background-color; -@tree-select-content-background-color: @white; -@tree-select-nav-item-padding: 14px @padding-sm; -@tree-select-item-height: 48px; -@tree-select-item-active-color: @red; -@tree-select-item-disabled-color: @gray-5; -@tree-select-item-selected-size: 16px; - -// Uploader -@uploader-size: 80px; -@uploader-icon-size: 24px; -@uploader-icon-color: @gray-4; -@uploader-text-color: @gray-6; -@uploader-text-font-size: @font-size-sm; -@uploader-upload-background-color: @gray-1; -@uploader-upload-active-color: @active-color; -@uploader-delete-color: @white; -@uploader-delete-icon-size: 14px; -@uploader-delete-background-color: rgba(0, 0, 0, 0.7); -@uploader-file-background-color: @background-color; -@uploader-file-icon-size: 20px; -@uploader-file-icon-color: @gray-7; -@uploader-file-name-padding: 0 @padding-base; -@uploader-file-name-margin-top: @padding-xs; -@uploader-file-name-font-size: @font-size-sm; -@uploader-file-name-text-color: @gray-7; -@uploader-mask-background-color: fade(@gray-8, 88%); -@uploader-mask-icon-size: 22px; -@uploader-mask-message-font-size: @font-size-sm; -@uploader-mask-message-line-height: 14px; -@uploader-loading-icon-size: 22px; -@uploader-loading-icon-color: @white; -@uploader-disabled-opacity: @disabled-opacity; - -// Sku -@sku-item-background-color: @background-color; -@sku-icon-gray-color: @gray-4; -@sku-upload-mask-color: rgba(50, 50, 51, 0.8); diff --git a/src-next/swipe-cell/README.md b/src-next/swipe-cell/README.md deleted file mode 100644 index 25a979899..000000000 --- a/src-next/swipe-cell/README.md +++ /dev/null @@ -1,139 +0,0 @@ -# SwipeCell - -### Install - -```js -import Vue from 'vue'; -import { SwipeCell } from 'vant'; - -Vue.use(SwipeCell); -``` - -## Usage - -### Basic Usage - -```html - - - - - -``` - -### Custom Content - -```html - - - - - - -``` - -### Before Close - -```html - - - - - -``` - -```js -export default { - methods: { - beforeClose({ position, instance }) { - switch (position) { - case 'left': - case 'cell': - case 'outside': - instance.close(); - break; - case 'right': - Dialog.confirm({ - message: 'Are you sure to delete?', - }).then(() => { - instance.close(); - }); - break; - } - }, - }, -}; -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| name `v2.0.4` | Identifier of SwipeCell | _number \| string_ | - | -| left-width | Width of the left swipe area | _number \| string_ | `auto` | -| right-width | Width of the right swipe area | _number \| string_ | `auto` | -| before-close `v2.3.0` | Callback function before close | _Function_ | - | -| disabled | Whether to disabled swipe | _boolean_ | `false` | -| stop-propagation `v2.1.0` | Whether to stop touchmove event propagation | _boolean_ | `false` | - -### Slots - -| Name | Description | -| ------- | ------------------------------- | -| default | custom content | -| left | content of left scrollable area | -| right | content of right scrollabe area | - -### Events - -| Event | Description | Arguments | -| --- | --- | --- | -| click | Triggered when clicked | Click positon (`left` `right` `cell` `outside`) | -| open | Triggered when opened | { position: 'left' \| 'right' , name: string } | -| close | Triggered when closed | { position: string , name: string } | - -### beforeClose Params - -| Attribute | Description | Type | -| --------- | ----------------------------------------------- | ----------- | -| name | Name | _string_ | -| position | Click positon (`left` `right` `cell` `outside`) | _string_ | -| instance | SwipeCell instance | _SwipeCell_ | - -### Methods - -Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods - -| Name | Description | Attribute | Return value | -| ----- | --------------- | ------------------------ | ------------ | -| open | open SwipeCell | position: `left | right` | - | -| close | close SwipeCell | - | - | diff --git a/src-next/swipe-cell/README.zh-CN.md b/src-next/swipe-cell/README.zh-CN.md deleted file mode 100644 index ccaf901ec..000000000 --- a/src-next/swipe-cell/README.zh-CN.md +++ /dev/null @@ -1,155 +0,0 @@ -# SwipeCell 滑动单元格 - -### 引入 - -```js -import Vue from 'vue'; -import { SwipeCell } from 'vant'; - -Vue.use(SwipeCell); -``` - -## 代码演示 - -### 基础用法 - -`SwipeCell`组件提供了`left`和`right`两个插槽，用于定义两侧滑动区域的内容 - -```html - - - - - -``` - -### 自定义内容 - -`SwipeCell`内容可以嵌套任意内容，比如嵌套一个商品卡片 - -```html - - - - - - -``` - -### 异步关闭 - -通过传入`before-close`回调函数，可以自定义两侧滑动内容关闭时的行为 - -```html - - - - - -``` - -```js -export default { - methods: { - // position 为关闭时点击的位置 - // instance 为对应的 SwipeCell 实例 - beforeClose({ position, instance }) { - switch (position) { - case 'left': - case 'cell': - case 'outside': - instance.close(); - break; - case 'right': - Dialog.confirm({ - message: '确定删除吗？', - }).then(() => { - instance.close(); - }); - break; - } - }, - }, -}; -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| name `v2.0.4` | 标识符，可以在事件参数中获取到 | _number \| string_ | - | -| left-width | 指定左侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` | -| right-width | 指定右侧滑动区域宽度，单位为`px` | _number \| string_ | `auto` | -| before-close `v2.3.0` | 关闭前的回调函数 | _Function_ | - | -| disabled | 是否禁用滑动 | _boolean_ | `false` | -| stop-propagation `v2.1.0` | 是否阻止滑动事件冒泡 | _boolean_ | `false` | - -### Slots - -| 名称 | 说明 | -| ------- | -------------- | -| default | 自定义显示内容 | -| left | 左侧滑动内容 | -| right | 右侧滑动内容 | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | ---------- | -------------------------------------------------- | -| click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) | -| open | 打开时触发 | { position: 'left' \| 'right' , name: string } | -| close | 关闭时触发 | { position: string , name: string } | - -### beforeClose 参数 - -beforeClose 的第一个参数为对象，对象中包含以下属性： - -| 参数名 | 说明 | 类型 | -| -------- | -------------------------------------------------- | ----------- | -| name | 标识符 | _string_ | -| position | 关闭时的点击位置 (`left` `right` `cell` `outside`) | _string_ | -| instance | SwipeCell 实例，用于调用实例方法 | _SwipeCell_ | - -### 方法 - -通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) - -| 方法名 | 说明 | 参数 | 返回值 | -| ------ | ---------------- | ------------------------ | ------ | -| open | 打开单元格侧边栏 | position: `left | right` | - | -| close | 收起单元格侧边栏 | - | - | - -## 常见问题 - -### 在桌面端无法操作组件？ - -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src-next/swipe-cell/demo/index.vue b/src-next/swipe-cell/demo/index.vue deleted file mode 100644 index d7ce0629f..000000000 --- a/src-next/swipe-cell/demo/index.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - - - diff --git a/src-next/swipe-cell/index.js b/src-next/swipe-cell/index.js deleted file mode 100644 index b7a31aab3..000000000 --- a/src-next/swipe-cell/index.js +++ /dev/null @@ -1,246 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { range } from '../utils/format/number'; -import { preventDefault } from '../utils/dom/event'; - -// Mixins -import { TouchMixin } from '../mixins/touch'; -import { ClickOutsideMixin } from '../mixins/click-outside'; - -const [createComponent, bem] = createNamespace('swipe-cell'); -const THRESHOLD = 0.15; - -export default createComponent({ - mixins: [ - TouchMixin, - ClickOutsideMixin({ - event: 'touchstart', - method: 'onClick', - }), - ], - - props: { - // @deprecated - // should be removed in next major version, use beforeClose instead - onClose: Function, - disabled: Boolean, - leftWidth: [Number, String], - rightWidth: [Number, String], - beforeClose: Function, - stopPropagation: Boolean, - name: { - type: [Number, String], - default: '', - }, - }, - - data() { - return { - offset: 0, - dragging: false, - }; - }, - - computed: { - computedLeftWidth() { - return +this.leftWidth || this.getWidthByRef('left'); - }, - - computedRightWidth() { - return +this.rightWidth || this.getWidthByRef('right'); - }, - }, - - mounted() { - this.bindTouchEvent(this.$el); - }, - - methods: { - getWidthByRef(ref) { - if (this.$refs[ref]) { - const rect = this.$refs[ref].getBoundingClientRect(); - return rect.width; - } - - return 0; - }, - - // @exposed-api - open(position) { - const offset = - position === 'left' ? this.computedLeftWidth : -this.computedRightWidth; - - this.opened = true; - this.offset = offset; - - this.$emit('open', { - position, - name: this.name, - // @deprecated - // should be removed in next major version - detail: this.name, - }); - }, - - // @exposed-api - close(position) { - this.offset = 0; - - if (this.opened) { - this.opened = false; - this.$emit('close', { - position, - name: this.name, - }); - } - }, - - onTouchStart(event) { - if (this.disabled) { - return; - } - - this.startOffset = this.offset; - this.touchStart(event); - }, - - onTouchMove(event) { - if (this.disabled) { - return; - } - - this.touchMove(event); - - if (this.direction === 'horizontal') { - this.dragging = true; - this.lockClick = true; - - const isPrevent = !this.opened || this.deltaX * this.startOffset < 0; - - if (isPrevent) { - preventDefault(event, this.stopPropagation); - } - - this.offset = range( - this.deltaX + this.startOffset, - -this.computedRightWidth, - this.computedLeftWidth - ); - } - }, - - onTouchEnd() { - if (this.disabled) { - return; - } - - if (this.dragging) { - this.toggle(this.offset > 0 ? 'left' : 'right'); - this.dragging = false; - - // compatible with desktop scenario - setTimeout(() => { - this.lockClick = false; - }, 0); - } - }, - - toggle(direction) { - const offset = Math.abs(this.offset); - const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD; - const { computedLeftWidth, computedRightWidth } = this; - - if ( - computedRightWidth && - direction === 'right' && - offset > computedRightWidth * threshold - ) { - this.open('right'); - } else if ( - computedLeftWidth && - direction === 'left' && - offset > computedLeftWidth * threshold - ) { - this.open('left'); - } else { - this.close(); - } - }, - - onClick(position = 'outside') { - this.$emit('click', position); - - if (this.opened && !this.lockClick) { - if (this.beforeClose) { - this.beforeClose({ - position, - name: this.name, - instance: this, - }); - } else if (this.onClose) { - this.onClose(position, this, { name: this.name }); - } else { - this.close(position); - } - } - }, - - getClickHandler(position, stop) { - return (event) => { - if (stop) { - event.stopPropagation(); - } - this.onClick(position); - }; - }, - - genLeftPart() { - const content = this.$slots.left?.(); - - if (content) { - return ( -
- {content} -
- ); - } - }, - - genRightPart() { - const content = this.$slots.right?.(); - - if (content) { - return ( -
- {content} -
- ); - } - }, - }, - - render() { - const wrapperStyle = { - transform: `translate3d(${this.offset}px, 0, 0)`, - transitionDuration: this.dragging ? '0s' : '.6s', - }; - - return ( -
-
- {this.genLeftPart()} - {this.$slots.default?.()} - {this.genRightPart()} -
-
- ); - }, -}); diff --git a/src-next/swipe-cell/index.less b/src-next/swipe-cell/index.less deleted file mode 100644 index 64a62c058..000000000 --- a/src-next/swipe-cell/index.less +++ /dev/null @@ -1,29 +0,0 @@ -@import '../style/var'; - -.van-swipe-cell { - position: relative; - overflow: hidden; - cursor: grab; - - &__wrapper { - transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); - transition-property: transform; - } - - &__left, - &__right { - position: absolute; - top: 0; - height: 100%; - } - - &__left { - left: 0; - transform: translate3d(-100%, 0, 0); - } - - &__right { - right: 0; - transform: translate3d(100%, 0, 0); - } -} diff --git a/src-next/swipe-cell/test/__snapshots__/demo.spec.js.snap b/src-next/swipe-cell/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 2e1757d61..000000000 --- a/src-next/swipe-cell/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,72 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
-
-
-
单元格
-
内容
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
商品标题
-
描述信息
-
-
-
-
¥2.00
-
-
x2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
单元格
-
内容
-
-
-
-
-
-
-
-`; diff --git a/src-next/swipe-cell/test/__snapshots__/index.spec.js.snap b/src-next/swipe-cell/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index def90a113..000000000 --- a/src-next/swipe-cell/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,63 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`auto calc width 1`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 1`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 2`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 3`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show left part 4`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`drag and show right part 1`] = ` -
-
-
Left
-
Right
-
-
-`; - -exports[`render one side 1`] = ` -
-
-
Left
-
-
-`; diff --git a/src-next/swipe-cell/test/demo.spec.js b/src-next/swipe-cell/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/swipe-cell/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/swipe-cell/test/index.spec.js b/src-next/swipe-cell/test/index.spec.js deleted file mode 100644 index 0f1d11693..000000000 --- a/src-next/swipe-cell/test/index.spec.js +++ /dev/null @@ -1,229 +0,0 @@ -import SwipeCell from '..'; -import { - mount, - triggerDrag, - later, - mockGetBoundingClientRect, -} from '../../../test'; - -const THRESHOLD = 0.15; -const defaultProps = { - propsData: { - leftWidth: 100, - rightWidth: 100, - }, - scopedSlots: { - left: () => 'Left', - right: () => 'Right', - }, -}; - -test('drag and show left part', () => { - const wrapper = mount(SwipeCell, defaultProps); - - triggerDrag(wrapper, 10, 0); - expect(wrapper).toMatchSnapshot(); - - triggerDrag(wrapper, 50, 0); - expect(wrapper).toMatchSnapshot(); - - triggerDrag(wrapper, 500, 0); - expect(wrapper).toMatchSnapshot(); - - triggerDrag(wrapper, 0, 100); - expect(wrapper).toMatchSnapshot(); -}); - -test('drag and show right part', () => { - const wrapper = mount(SwipeCell, defaultProps); - - triggerDrag(wrapper, -50, 0); - expect(wrapper).toMatchSnapshot(); -}); - -test('on-close prop', () => { - let position; - let instance; - - const wrapper = mount(SwipeCell, { - ...defaultProps, - propsData: { - ...defaultProps.propsData, - onClose(pos, ins) { - position = pos; - instance = ins; - }, - }, - }); - - wrapper.trigger('click'); - expect(position).toEqual(undefined); - - wrapper.vm.open('left'); - wrapper.trigger('click'); - expect(position).toEqual('cell'); - - wrapper.find('.van-swipe-cell__left').trigger('click'); - expect(position).toEqual('left'); - - wrapper.find('.van-swipe-cell__right').trigger('click'); - expect(position).toEqual('right'); - - instance.close(); - expect(instance.offset).toEqual(0); - - instance.open('left'); - wrapper.setData({ onClose: null }); - wrapper.trigger('click'); - expect(wrapper.vm.offset).toEqual(0); -}); - -test('before-close prop', () => { - let position; - let instance; - - const wrapper = mount(SwipeCell, { - ...defaultProps, - propsData: { - ...defaultProps.propsData, - beforeClose(params) { - ({ position } = params); - ({ instance } = params); - }, - }, - }); - - wrapper.trigger('click'); - expect(position).toEqual(undefined); - - wrapper.vm.open('left'); - wrapper.trigger('click'); - expect(position).toEqual('cell'); - - wrapper.find('.van-swipe-cell__left').trigger('click'); - expect(position).toEqual('left'); - - wrapper.find('.van-swipe-cell__right').trigger('click'); - expect(position).toEqual('right'); - - instance.close(); - expect(wrapper.vm.offset).toEqual(0); - - instance.open('left'); - wrapper.setData({ beforeClose: null }); - wrapper.trigger('click'); - expect(wrapper.vm.offset).toEqual(0); -}); - -test('name prop', (done) => { - const wrapper = mount(SwipeCell, { - ...defaultProps, - propsData: { - ...defaultProps.propsData, - name: 'test', - onClose(position, instance, detail) { - expect(detail.name).toEqual('test'); - done(); - }, - }, - }); - - wrapper.vm.open('left'); - wrapper.trigger('click'); -}); - -test('should reset after drag', () => { - const wrapper = mount(SwipeCell, defaultProps); - - triggerDrag(wrapper, defaultProps.leftWidth * THRESHOLD - 1, 0); - expect(wrapper.vm.offset).toEqual(0); -}); - -test('disabled prop', () => { - const wrapper = mount(SwipeCell, { - propsData: { - ...defaultProps.propsData, - disabled: true, - }, - }); - - triggerDrag(wrapper, 50, 0); - expect(wrapper.vm.offset).toEqual(0); -}); - -test('auto calc width', async () => { - const restoreMock = mockGetBoundingClientRect({ - width: 50, - }); - - const wrapper = mount(SwipeCell, { - scopedSlots: defaultProps.scopedSlots, - }); - - await later(); - triggerDrag(wrapper, 100, 0); - expect(wrapper).toMatchSnapshot(); - - restoreMock(); -}); - -test('render one side', async () => { - const restoreMock = mockGetBoundingClientRect({ - width: 50, - }); - - const wrapper = mount(SwipeCell, { - scopedSlots: { - left: defaultProps.scopedSlots.left, - }, - }); - - await later(); - triggerDrag(wrapper, 100, 0); - expect(wrapper).toMatchSnapshot(); - - restoreMock(); -}); - -test('trigger open event when open left side', () => { - const wrapper = mount(SwipeCell, defaultProps); - - triggerDrag(wrapper, 50, 0); - expect(wrapper.emitted('open')[0][0]).toEqual({ - name: '', - detail: '', - position: 'left', - }); -}); - -test('trigger open event when open right side', () => { - const wrapper = mount(SwipeCell, defaultProps); - - triggerDrag(wrapper, -50, 0); - expect(wrapper.emitted('open')[0][0]).toEqual({ - name: '', - detail: '', - position: 'right', - }); -}); - -test('trigger close event when closed', () => { - const wrapper = mount(SwipeCell, defaultProps); - - wrapper.vm.open('left'); - wrapper.vm.close(); - - expect(wrapper.emitted('close')[0][0]).toEqual({ - name: '', - position: undefined, - }); -}); - -test('should not trigger close event again when already closed', () => { - const wrapper = mount(SwipeCell, defaultProps); - - wrapper.vm.open('left'); - wrapper.vm.close(); - wrapper.vm.close(); - expect(wrapper.emitted('close').length).toEqual(1); -}); diff --git a/src-next/switch/README.md b/src-next/switch/README.md deleted file mode 100644 index 8b75c4411..000000000 --- a/src-next/switch/README.md +++ /dev/null @@ -1,110 +0,0 @@ -# Switch - -### Install - -```js -import Vue from 'vue'; -import { Switch } from 'vant'; - -Vue.use(Switch); -``` - -## Usage - -### Basic Usage - -```html - -``` - -```js -export default { - data() { - return { - checked: true, - }; - }, -}; -``` - -### Disabled - -```html - -``` - -### Loading - -```html - -``` - -### Custom Size - -```html - -``` - -### Custom Color - -```html - -``` - -### Async Control - -```html - -``` - -```js -export default { - data() { - return { - checked: true, - }; - }, - methods: { - onUpdateValue(checked) { - Dialog.confirm({ - title: 'Confirm', - message: 'Are you sure to toggle switch?', - }).then(() => { - this.checked = checked; - }); - }, - }, -}; -``` - -### Inside a Cell - -```html - - - -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| v-model | Check status of Switch | _ActiveValue \| InactiveValue_ | `false` | -| loading | Whether to show loading icon | _boolean_ | `false` | -| disabled | Whether to disable switch | _boolean_ | `false` | -| size `v2.2.11` | Size of switch | _number \| string_ | `30px` | -| active-color | Background color when active | _string_ | `#1989fa` | -| inactive-color | Background color when inactive | _string_ | `white` | -| active-value | Value when active | _any_ | `true` | -| inactive-value | Value when inactive | _any_ | `false` | - -### Events - -| Event | Description | Parameters | -| --------------- | ----------------------------------- | -------------- | -| change | Triggered when check status changed | _value: any_ | -| click `v2.2.11` | Triggered when clicked | _event: Event_ | diff --git a/src-next/switch/README.zh-CN.md b/src-next/switch/README.zh-CN.md deleted file mode 100644 index 134658066..000000000 --- a/src-next/switch/README.zh-CN.md +++ /dev/null @@ -1,122 +0,0 @@ -# Switch 开关 - -### 引入 - -```js -import Vue from 'vue'; -import { Switch } from 'vant'; - -Vue.use(Switch); -``` - -## 代码演示 - -### 基础用法 - -通过`v-model`绑定开关的选中状态，`true`表示开，`false`表示关 - -```html - -``` - -```js -export default { - data() { - return { - checked: true, - }; - }, -}; -``` - -### 禁用状态 - -通过`disabled`属性来禁用开关，禁用状态下开关不可点击 - -```html - -``` - -### 加载状态 - -通过`loading`属性设置开关为加载状态，加载状态下开关不可点击 - -```html - -``` - -### 自定义大小 - -通过`size`属性自定义开关的大小 - -```html - -``` - -### 自定义颜色 - -`active-color`属性表示打开时的背景色，`inactive-color`表示关闭时的背景色 - -```html - -``` - -### 异步控制 - -需要异步控制开关时，可以使用 `modelValue` 属性和 `update:model-value` 事件代替 `v-model`，并在事件回调函数中手动处理开关状态。 - -```html - -``` - -```js -export default { - data() { - return { - checked: true, - }; - }, - methods: { - onUpdateValue(checked) { - Dialog.confirm({ - title: '提醒', - message: '是否切换开关？', - }).then(() => { - this.checked = checked; - }); - }, - }, -}; -``` - -### 搭配单元格使用 - -```html - - - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| -------------- | ------------------------ | ------------------ | --------- | -| v-model | 开关选中状态 | _any_ | `false` | -| loading | 是否为加载状态 | _boolean_ | `false` | -| disabled | 是否为禁用状态 | _boolean_ | `false` | -| size `v2.2.11` | 开关尺寸，默认单位为`px` | _number \| string_ | `30px` | -| active-color | 打开时的背景色 | _string_ | `#1989fa` | -| inactive-color | 关闭时的背景色 | _string_ | `white` | -| active-value | 打开时对应的值 | _any_ | `true` | -| inactive-value | 关闭时对应的值 | _any_ | `false` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| --------------- | ------------------ | -------------- | -| change | 开关状态切换时触发 | _value: any_ | -| click `v2.2.11` | 点击时触发 | _event: Event_ | diff --git a/src-next/switch/demo/index.vue b/src-next/switch/demo/index.vue deleted file mode 100644 index 51d4ab39f..000000000 --- a/src-next/switch/demo/index.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - - - diff --git a/src-next/switch/index.js b/src-next/switch/index.js deleted file mode 100644 index 334e42fe7..000000000 --- a/src-next/switch/index.js +++ /dev/null @@ -1,71 +0,0 @@ -// Utils -import { createNamespace, addUnit } from '../utils'; -import { switchProps } from './shared'; - -// Mixins -import { FieldMixin } from '../mixins/field'; - -// Components -import Loading from '../loading'; - -const [createComponent, bem] = createNamespace('switch'); - -export default createComponent({ - mixins: [FieldMixin], - - props: switchProps, - - emits: ['click', 'change', 'update:modelValue'], - - computed: { - checked() { - return this.modelValue === this.activeValue; - }, - - style() { - return { - fontSize: addUnit(this.size), - backgroundColor: this.checked ? this.activeColor : this.inactiveColor, - }; - }, - }, - - methods: { - onClick(event) { - this.$emit('click', event); - - if (!this.disabled && !this.loading) { - const newValue = this.checked ? this.inactiveValue : this.activeValue; - this.$emit('update:modelValue', newValue); - this.$emit('change', newValue); - } - }, - - genLoading() { - if (this.loading) { - const color = this.checked ? this.activeColor : this.inactiveColor; - return ; - } - }, - }, - - render() { - const { checked, loading, disabled } = this; - - return ( -
-
{this.genLoading()}
-
- ); - }, -}); diff --git a/src-next/switch/index.less b/src-next/switch/index.less deleted file mode 100644 index 8baa7a43a..000000000 --- a/src-next/switch/index.less +++ /dev/null @@ -1,58 +0,0 @@ -@import '../style/var'; - -.van-switch { - position: relative; - display: inline-block; - box-sizing: content-box; - width: @switch-width; - height: @switch-height; - font-size: @switch-size; - background-color: @switch-background-color; - border: @switch-border; - border-radius: @switch-node-size; - cursor: pointer; - transition: background-color @switch-transition-duration; - - &__node { - position: absolute; - top: 0; - left: 0; - z-index: @switch-node-z-index; - width: @switch-node-size; - height: @switch-node-size; - background-color: @switch-node-background-color; - border-radius: 100%; - box-shadow: @switch-node-box-shadow; - transition: transform @switch-transition-duration - cubic-bezier(0.3, 1.05, 0.4, 1.05); - } - - &__loading { - top: 25%; - left: 25%; - width: 50%; - height: 50%; - line-height: 1; - } - - &--on { - background-color: @switch-on-background-color; - - .van-switch__node { - transform: translateX(@switch-width - @switch-node-size); - } - - .van-switch__loading { - color: @switch-on-background-color; - } - } - - &--disabled { - cursor: not-allowed; - opacity: @switch-disabled-opacity; - } - - &--loading { - cursor: default; - } -} diff --git a/src-next/switch/shared.ts b/src-next/switch/shared.ts deleted file mode 100644 index fd77d663b..000000000 --- a/src-next/switch/shared.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Common Switch Props - */ - -export type SharedSwitchProps = { - size?: string | number; - loading?: boolean; - disabled?: boolean; - modelValue?: any; - activeValue: any; - inactiveValue: any; - activeColor?: string; - inactiveColor?: string; -}; - -export const switchProps = { - size: [Number, String], - loading: Boolean, - disabled: Boolean, - modelValue: null as any, - activeColor: String, - inactiveColor: String, - activeValue: { - type: null as any, - default: true, - }, - inactiveValue: { - type: null as any, - default: false, - }, -}; diff --git a/src-next/switch/test/__snapshots__/demo.spec.js.snap b/src-next/switch/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index c05490ce5..000000000 --- a/src-next/switch/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
标题
-
-
-
-
-
-
-`; diff --git a/src-next/switch/test/__snapshots__/index.spec.js.snap b/src-next/switch/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 8a9a87679..000000000 --- a/src-next/switch/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inactive-color prop 1`] = ` -
-
-
-`; - -exports[`size prop 1`] = ` -
-
-
-`; diff --git a/src-next/switch/test/demo.spec.js b/src-next/switch/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/switch/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/switch/test/index.spec.js b/src-next/switch/test/index.spec.js deleted file mode 100644 index 07a177272..000000000 --- a/src-next/switch/test/index.spec.js +++ /dev/null @@ -1,91 +0,0 @@ -import Switch from '..'; -import { mount } from '../../../test'; - -test('emit event', () => { - const input = jest.fn(); - const change = jest.fn(); - const wrapper = mount(Switch, { - listeners: { - input, - change, - }, - }); - wrapper.trigger('click'); - - expect(input).toHaveBeenCalledWith(true); - expect(change).toHaveBeenCalledWith(true); -}); - -test('disabled', () => { - const input = jest.fn(); - const change = jest.fn(); - const wrapper = mount(Switch, { - listeners: { - input, - change, - }, - propsData: { - disabled: true, - }, - }); - wrapper.trigger('click'); - - expect(input).toHaveBeenCalledTimes(0); - expect(change).toHaveBeenCalledTimes(0); -}); - -test('active-value & inactive-value prop', () => { - const input = jest.fn(); - const change = jest.fn(); - const wrapper = mount(Switch, { - propsData: { - value: '1', - activeValue: '1', - inactiveValue: '2', - }, - listeners: { - input, - change, - }, - }); - - wrapper.trigger('click'); - - expect(input).toHaveBeenCalledWith('2'); - expect(change).toHaveBeenCalledWith('2'); -}); - -test('inactive-color prop', () => { - const wrapper = mount(Switch, { - propsData: { - value: '2', - inactiveValue: '2', - inactiveColor: 'black', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('size prop', () => { - const wrapper = mount(Switch, { - propsData: { - size: 20, - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('click event', () => { - const click = jest.fn(); - const wrapper = mount(Switch, { - listeners: { - click, - }, - }); - - wrapper.trigger('click'); - - expect(click).toHaveBeenCalledTimes(1); -}); diff --git a/src-next/tag/README.md b/src-next/tag/README.md deleted file mode 100644 index eb36c57e8..000000000 --- a/src-next/tag/README.md +++ /dev/null @@ -1,139 +0,0 @@ -# Tag - -### Install - -```js -import Vue from 'vue'; -import { Tag } from 'vant'; - -Vue.use(Tag); -``` - -## Usage - -### Basic Usage - -```html -Tag -Tag -Tag -Tag -Tag -``` - -### Round style - -```html -Tag -Tag -Tag -Tag -Tag -``` - -### Mark style - -```html -Tag -Tag -Tag -Tag -Tag -``` - -### Plain style - -```html -Tag -Tag -Tag -Tag -Tag -``` - -### Custom Color - -```html -Tag -Tag -Tag -Tag -Tag -``` - -### Custom Size - -```html -Tag -Tag -Tag -``` - -### Closeable - -```html - - Tag - - - Tag - -``` - -```js -export default { - data() { - return { - show: { - primary: true, - success: true, - }, - }; - }, - methods: { - close(type) { - this.show[type] = false; - }, - }, -}; -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| type | Type, can be set to `primary` `success` `danger` `warning` | _string_ | `default` | -| size | Size, can be set to `large` `medium` | _string_ | - | -| color | Custom color | _string_ | - | -| plain | Whether to be plain style | _boolean_ | `false` | -| round | Whether to be round style | _boolean_ | `false` | -| mark | Whether to be mark style | _boolean_ | `false` | -| text-color | Text color | _string_ | `white` | -| closeable `v2.2.9` | Whether to be closeable | _boolean_ | `false` | - -### Slots - -| Name | Description | -| ------- | ------------ | -| default | Default slot | - -### Events - -| Event | Description | Arguments | -| ----- | ------------------------------- | -------------- | -| click | Triggered when clicked | _event: Event_ | -| close | Triggered when click close icon | - | diff --git a/src-next/tag/README.zh-CN.md b/src-next/tag/README.zh-CN.md deleted file mode 100644 index 34b682c6f..000000000 --- a/src-next/tag/README.zh-CN.md +++ /dev/null @@ -1,149 +0,0 @@ -# Tag 标记 - -### 引入 - -```js -import Vue from 'vue'; -import { Tag } from 'vant'; - -Vue.use(Tag); -``` - -## 代码演示 - -### 基础用法 - -通过`type`属性控制标签颜色，默认为灰色 - -```html -标签 -标签 -标签 -标签 -标签 -``` - -### 圆角样式 - -通过`round`设置为圆角样式 - -```html -标签 -标签 -标签 -标签 -标签 -``` - -### 标记样式 - -通过`mark`设置为标记样式(半圆角) - -```html -标签 -标签 -标签 -标签 -标签 -``` - -### 空心样式 - -设置`plain`属性设置为空心样式 - -```html -标签 -标签 -标签 -标签 -标签 -``` - -### 自定义颜色 - -```html -标签 -标签 -标签 -标签 -标签 -``` - -### 标签大小 - -```html -标签 -标签 -标签 -``` - -### 可关闭标签 - -添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑 - -```html - - 标签 - - - 标签 - -``` - -```js -export default { - data() { - return { - show: { - primary: true, - success: true, - }, - }; - }, - methods: { - close(type) { - this.show[type] = false; - }, - }, -}; -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| type | 类型，可选值为`primary` `success` `danger` `warning` | _string_ | `default` | -| size | 大小, 可选值为`large` `medium` | _string_ | - | -| color | 标签颜色 | _string_ | - | -| plain | 是否为空心样式 | _boolean_ | `false` | -| round | 是否为圆角样式 | _boolean_ | `false` | -| mark | 是否为标记样式 | _boolean_ | `false` | -| text-color | 文本颜色，优先级高于`color`属性 | _string_ | `white` | -| closeable `v2.2.9` | 是否为可关闭标签 | _boolean_ | `false` | - -### Slots - -| 名称 | 说明 | -| ------- | ------------ | -| default | 标签显示内容 | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | -------------- | -| click | 点击时触发 | _event: Event_ | -| close | 关闭标签时触发 | - | diff --git a/src-next/tag/demo/index.vue b/src-next/tag/demo/index.vue deleted file mode 100644 index 0ea06aeba..000000000 --- a/src-next/tag/demo/index.vue +++ /dev/null @@ -1,126 +0,0 @@ - - - - - diff --git a/src-next/tag/index.less b/src-next/tag/index.less deleted file mode 100644 index b7ebdb053..000000000 --- a/src-next/tag/index.less +++ /dev/null @@ -1,90 +0,0 @@ -@import '../style/var'; - -.van-tag { - display: inline-flex; - align-items: center; - padding: @tag-padding; - color: @tag-text-color; - font-size: @tag-font-size; - line-height: normal; - border-radius: @tag-border-radius; - - &::after { - border-color: currentColor; - border-radius: @tag-border-radius * 2; - } - - &--default { - background-color: @tag-default-color; - - &.van-tag--plain { - color: @tag-default-color; - } - } - - &--danger { - background-color: @tag-danger-color; - - &.van-tag--plain { - color: @tag-danger-color; - } - } - - &--primary { - background-color: @tag-primary-color; - - &.van-tag--plain { - color: @tag-primary-color; - } - } - - &--success { - background-color: @tag-success-color; - - &.van-tag--plain { - color: @tag-success-color; - } - } - - &--warning { - background-color: @tag-warning-color; - - &.van-tag--plain { - color: @tag-warning-color; - } - } - - &--plain { - background-color: @tag-plain-background-color; - } - - &--mark { - padding-right: 0.7em; - - &, - &::after { - border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0; - } - } - - &--round { - &, - &::after { - border-radius: @tag-round-border-radius; - } - } - - &--medium { - font-size: @tag-medium-font-size; - } - - &--large { - font-size: @tag-large-font-size; - } - - &__close { - min-width: 1em; - margin-left: 2px; - cursor: pointer; - } -} diff --git a/src-next/tag/test/__snapshots__/demo.spec.js.snap b/src-next/tag/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index 622597aba..000000000 --- a/src-next/tag/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
-
标签 标签 标签
-
- 标签 - - 标签 -
-
-`; diff --git a/src-next/tag/test/demo.spec.js b/src-next/tag/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/tag/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/tag/test/index.spec.js b/src-next/tag/test/index.spec.js deleted file mode 100644 index 864947a4f..000000000 --- a/src-next/tag/test/index.spec.js +++ /dev/null @@ -1,54 +0,0 @@ -import Tag from '..'; -import { mount } from '../../../test'; - -test('click event', () => { - const click = jest.fn(); - const wrapper = mount(Tag, { - context: { - on: { - click, - }, - }, - }); - - wrapper.trigger('click'); - expect(click).toHaveBeenCalledTimes(1); -}); - -test('close event', () => { - const close = jest.fn(); - const wrapper = mount(Tag, { - propsData: { - closeable: true, - }, - context: { - on: { - close, - }, - }, - }); - - wrapper.find('.van-tag__close').trigger('click'); - expect(close).toHaveBeenCalledTimes(1); -}); - -test('should not trigger click event when close', () => { - const close = jest.fn(); - const click = jest.fn(); - - const wrapper = mount(Tag, { - propsData: { - closeable: true, - }, - context: { - on: { - close, - click, - }, - }, - }); - - wrapper.find('.van-tag__close').trigger('click'); - expect(close).toHaveBeenCalledTimes(1); - expect(click).toHaveBeenCalledTimes(0); -}); diff --git a/src-next/tree-select/README.md b/src-next/tree-select/README.md deleted file mode 100644 index e49f49298..000000000 --- a/src-next/tree-select/README.md +++ /dev/null @@ -1,170 +0,0 @@ -# TreeSelect - -### Install - -```js -import Vue from 'vue'; -import { TreeSelect } from 'vant'; - -Vue.use(TreeSelect); -``` - -## Usage - -### Radio Mode - -```html - -``` - -```js -export default { - data() { - return { - items, - activeId: 1, - activeIndex: 0, - }; - }, -}; -``` - -### Multiple Mode - -```html - -``` - -```js -export default { - data() { - return { - items, - activeIds: [1, 2], - activeIndex: 0, - }; - }, -}; -``` - -### Custom Content - -```html - - - -``` - -```js -export default { - data() { - return { - active: 0, - items: [{ text: 'Group 1' }, { text: 'Group 2' }], - }; - }, -}; -``` - -### Show Badge - -```html - -``` - -```js -export default { - data() { - return { - activeIndex: 0, - items: [ - { text: 'Group 1', children: [], dot: true }, - { text: 'Group 2', children: [], badge: 5 }, - ], - }; - }, -}; -``` - -## API - -### Props - -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| items | Required datasets for the component | _Item[]_ | `[]` | -| height | Height | _number \| string_ | `300` | -| main-active-index | The index of selected parent node | _number \| string_ | `0` | -| active-id | Id of selected item | _number \| string \|
(number \| string)[]_ | `0` | -| max `v2.2.0` | Maximum number of selected items | _number \| string_ | `Infinity` | -| selected-icon `v2.9.0` | Selected icon | _string_ | `success` | - -### Events - -| Event | Description | Arguments | -| --- | --- | --- | -| click-nav | triggered when parent node is selected | index: index of selected parent | -| click-item | triggered when item is selected | data: selected item | - -### Slots - -| Name | Description | -| ------- | -------------------- | -| content | Custom right content | - -### Data Structure of Item - -`items` should be an array contains specified tree objects. - -In every tree object, `text` property defines `id` stands for the unique key while the `children` contains sub-tree objects. - -```js -[ - { - // name of the parent node - text: 'Group 1', - // badge - badge: 3, - // Whether to show red dot - dot: true, - // ClassName of parent node - className: 'my-class', - // leaves of this parent node - children: [ - { - // name of the leaf node - text: 'Washington', - // id of the leaf node, component highlights leaf node by comparing the activeId with this. - id: 1, - // disable options - disabled: true, - }, - { - text: 'Baltimore', - id: 2, - }, - ], - }, -]; -``` diff --git a/src-next/tree-select/README.zh-CN.md b/src-next/tree-select/README.zh-CN.md deleted file mode 100644 index 5c1a51cda..000000000 --- a/src-next/tree-select/README.zh-CN.md +++ /dev/null @@ -1,180 +0,0 @@ -# TreeSelect 分类选择 - -### 引入 - -```js -import Vue from 'vue'; -import { TreeSelect } from 'vant'; - -Vue.use(TreeSelect); -``` - -## 代码演示 - -### 单选模式 - -`item`为分类显示所需的数据，数据格式见下方示例。`main-active-index`表示左侧高亮选项的索引，`active-id`表示右侧高亮选项的 id - -```html - -``` - -```js -export default { - data() { - return { - items, - activeId: 1, - activeIndex: 0, - }; - }, -}; -``` - -### 多选模式 - -`active-id`为数组格式时，可以选中多个右侧选项 - -```html - -``` - -```js -export default { - data() { - return { - items, - activeIds: [1, 2], - activeIndex: 0, - }; - }, -}; -``` - -### 自定义内容 - -通过`content`插槽可以自定义右侧区域的内容 - -```html - - - -``` - -```js -export default { - data() { - return { - active: 0, - items: [{ text: '分组 1' }, { text: '分组 2' }], - }; - }, -}; -``` - -### 徽标提示 - -设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 - -```html - -``` - -```js -export default { - data() { - return { - activeIndex: 0, - items: [ - { text: '浙江', children: [], dot: true }, - { text: '江苏', children: [], badge: 5 }, - ], - }; - }, -}; -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| items | 分类显示所需的数据 | _Item[]_ | `[]` | -| height | 高度，默认单位为`px` | _number \| string_ | `300` | -| main-active-index | 左侧选中项的索引 | _number \| string_ | `0` | -| active-id | 右侧选中项的 id，支持传入数组 | _number \| string \|
(number \| string)[]_ | `0` | -| max `v2.2.0` | 右侧项最大选中个数 | _number \| string_ | `Infinity` | -| selected-icon `v2.9.0` | 自定义右侧栏选中状态的图标 | _string_ | `success` | - -### Events - -| 事件名 | 说明 | 回调参数 | -| ---------- | -------------------- | ------------------------- | -| click-nav | 点击左侧导航时触发 | index：被点击的导航的索引 | -| click-item | 点击右侧选择项时触发 | data: 该点击项的数据 | - -### Slots - -| 名称 | 说明 | -| ------- | ------------------ | -| content | 自定义右侧区域内容 | - -### Item 数据结构 - -`items` 整体为一个数组，数组内包含一系列描述分类的对象，每个分类里，`text`表示当前分类的名称，`children`表示分类里的可选项。 - -```js -[ - { - // 导航名称 - text: '所有城市', - // 导航名称右上角徽标，2.5.6 版本开始支持 - badge: 3, - // 是否在导航名称右上角显示小红点 - dot: true, - // 导航节点额外类名 - className: 'my-class', - // 该导航下所有的可选项 - children: [ - { - // 名称 - text: '温州', - // id，作为匹配选中状态的标识符 - id: 1, - // 禁用选项 - disabled: true, - }, - { - text: '杭州', - id: 2, - }, - ], - }, -]; -``` diff --git a/src-next/tree-select/demo/data-en.ts b/src-next/tree-select/demo/data-en.ts deleted file mode 100644 index 57d93f4e0..000000000 --- a/src-next/tree-select/demo/data-en.ts +++ /dev/null @@ -1,65 +0,0 @@ -const group1 = [ - { - text: 'Delaware', - id: 1, - }, - { - text: 'Florida', - id: 2, - }, - { - text: 'Georqia', - id: 3, - disabled: true, - }, - { - text: 'Indiana', - id: 4, - }, -]; - -const group2 = [ - { - text: 'Alabama', - id: 5, - }, - { - text: 'Kansas', - id: 6, - }, - { - text: 'Louisiana', - id: 7, - }, - { - text: 'Texas', - id: 8, - }, -]; - -const group3 = [ - { - text: 'Alabama', - id: 9, - }, - { - text: 'Kansas', - id: 10, - }, -]; - -export const enUSData = [ - { - text: 'Group 1', - children: group1, - }, - { - text: 'Group 2', - children: group2, - }, - { - text: 'Group 3', - disabled: true, - children: group3, - }, -]; diff --git a/src-next/tree-select/demo/data-zh.ts b/src-next/tree-select/demo/data-zh.ts deleted file mode 100644 index 04096a180..000000000 --- a/src-next/tree-select/demo/data-zh.ts +++ /dev/null @@ -1,65 +0,0 @@ -const zhejiang = [ - { - text: '杭州', - id: 1, - }, - { - text: '温州', - id: 2, - }, - { - text: '宁波', - id: 3, - disabled: true, - }, - { - text: '义乌', - id: 4, - }, -]; - -const jiangsu = [ - { - text: '南京', - id: 5, - }, - { - text: '无锡', - id: 6, - }, - { - text: '徐州', - id: 7, - }, - { - text: '苏州', - id: 8, - }, -]; - -const fujian = [ - { - text: '泉州', - id: 9, - }, - { - text: '厦门', - id: 10, - }, -]; - -export const zhCNData = [ - { - text: '浙江', - children: zhejiang, - }, - { - text: '江苏', - children: jiangsu, - }, - { - text: '福建', - disabled: true, - children: fujian, - }, -]; diff --git a/src-next/tree-select/demo/index.vue b/src-next/tree-select/demo/index.vue deleted file mode 100644 index 5ba206521..000000000 --- a/src-next/tree-select/demo/index.vue +++ /dev/null @@ -1,107 +0,0 @@ - - - diff --git a/src-next/tree-select/index.less b/src-next/tree-select/index.less deleted file mode 100644 index 047d95414..000000000 --- a/src-next/tree-select/index.less +++ /dev/null @@ -1,51 +0,0 @@ -@import '../style/var'; - -.van-tree-select { - position: relative; - display: flex; - font-size: @tree-select-font-size; - user-select: none; - - &__nav { - flex: 1; - overflow-y: auto; - background-color: @tree-select-nav-background-color; - -webkit-overflow-scrolling: touch; - - &-item { - padding: @tree-select-nav-item-padding; - } - } - - &__content { - flex: 2; - overflow-y: auto; - background-color: @tree-select-content-background-color; - -webkit-overflow-scrolling: touch; - } - - &__item { - position: relative; - padding: 0 32px 0 @padding-md; - font-weight: @font-weight-bold; - line-height: @tree-select-item-height; - cursor: pointer; - - &--active { - color: @tree-select-item-active-color; - } - - &--disabled { - color: @tree-select-item-disabled-color; - cursor: not-allowed; - } - } - - &__selected { - position: absolute; - top: 50%; - right: @padding-md; - margin-top: -@padding-xs; - font-size: @tree-select-item-selected-size; - } -} diff --git a/src-next/tree-select/test/__snapshots__/demo.spec.js.snap b/src-next/tree-select/test/__snapshots__/demo.spec.js.snap deleted file mode 100644 index ef3181896..000000000 --- a/src-next/tree-select/test/__snapshots__/demo.spec.js.snap +++ /dev/null @@ -1,90 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders demo correctly 1`] = ` -
-
-
-
-
浙江 - -
- -
江苏 - -
- -
福建 - -
-
-
-
杭州 -
-
温州
-
宁波
-
义乌
-
-
-
-
-
-
-
浙江 - -
- -
江苏 - -
- -
福建 - -
-
-
-
杭州 -
-
温州 -
-
宁波
-
义乌
-
-
-
- -
-
-
-
浙江
-
- -
江苏
5
-
-
-
-
杭州 -
-
温州
-
宁波
-
义乌
-
-
-
-
-`; diff --git a/src-next/tree-select/test/__snapshots__/index.spec.js.snap b/src-next/tree-select/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index 245f661d1..000000000 --- a/src-next/tree-select/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`content slot 1`] = ` -
-
-
group1 - -
-
-
Custom Content
-
-`; - -exports[`empty list 1`] = ` -
-
-
-
-`; - -exports[`height prop 1`] = ` -
-
-
-
-`; - -exports[`nav info 1`] = ` -
-
-
group1
3
-
-
-
-
-`; - -exports[`selected-icon prop 1`] = ` -
city1 -
-`; diff --git a/src-next/tree-select/test/demo.spec.js b/src-next/tree-select/test/demo.spec.js deleted file mode 100644 index 5c70922b5..000000000 --- a/src-next/tree-select/test/demo.spec.js +++ /dev/null @@ -1,4 +0,0 @@ -import Demo from '../demo'; -import { snapshotDemo } from '../../../test/demo'; - -snapshotDemo(Demo); diff --git a/src-next/tree-select/test/index.spec.js b/src-next/tree-select/test/index.spec.js deleted file mode 100644 index 3b45a3936..000000000 --- a/src-next/tree-select/test/index.spec.js +++ /dev/null @@ -1,345 +0,0 @@ -import TreeSelect from '..'; -import { mount } from '../../../test'; - -test('empty list', () => { - expect(mount(TreeSelect)).toMatchSnapshot(); -}); - -const mockItem = { - text: 'city1', - id: 1, -}; - -const mockItem2 = { - text: 'city2', - id: 2, -}; - -const mockItems = [ - { - text: 'group1', - children: [mockItem], - }, - { - text: 'group2', - children: [mockItem], - }, -]; - -test('click-nav event', () => { - const onNavClick = jest.fn(); - const onClickNav = jest.fn(); - - const wrapper = mount(TreeSelect, { - propsData: { - items: mockItems, - }, - context: { - on: { - navclick: onNavClick, - 'click-nav': onClickNav, - }, - }, - }); - - const navItems = wrapper.findAll('.van-tree-select__nav-item'); - navItems.at(1).trigger('click'); - - expect(onNavClick).toHaveBeenCalledWith(1); - expect(onClickNav).toHaveBeenCalledWith(1); -}); - -test('click-item event', () => { - const onItemClick = jest.fn(); - const onClickItem = jest.fn(); - - const wrapper = mount(TreeSelect, { - propsData: { - items: mockItems, - }, - context: { - on: { - itemclick: onItemClick, - 'click-item': onClickItem, - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items.at(0).trigger('click'); - expect(onItemClick).toHaveBeenCalledWith(mockItem); - expect(onClickItem).toHaveBeenCalledWith(mockItem); -}); - -test('click disabled nav', () => { - const onClickNav = jest.fn(); - - const wrapper = mount(TreeSelect, { - propsData: { - items: [ - { - text: 'group1', - children: [mockItem], - disabled: true, - }, - ], - }, - context: { - on: { - 'click-nav': onClickNav, - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__nav-item'); - items.at(0).trigger('click'); - expect(onClickNav).toHaveBeenCalledTimes(0); -}); - -test('click disabled item', () => { - const onClickItem = jest.fn(); - const wrapper = mount(TreeSelect, { - propsData: { - items: [ - { - text: 'group1', - children: [ - { - ...mockItem, - disabled: true, - }, - ], - }, - ], - }, - context: { - on: { - 'click-item': onClickItem, - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items.at(0).trigger('click'); - expect(onClickItem).toHaveBeenCalledTimes(0); -}); - -test('content slot', () => { - const wrapper = mount(TreeSelect, { - propsData: { - items: [ - { - text: 'group1', - }, - ], - }, - scopedSlots: { - content: () => 'Custom Content', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('height prop', () => { - const wrapper = mount(TreeSelect, { - propsData: { - height: '100vh', - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('nav info', () => { - const wrapper = mount(TreeSelect, { - propsData: { - items: [ - { - text: 'group1', - info: 3, - }, - ], - }, - }); - - expect(wrapper).toMatchSnapshot(); -}); - -test('use sync modifier in main-active-index', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - mainActiveIndex: -1, - items: mockItems, - }; - }, - }); - - const navItems = wrapper.findAll('.van-tree-select__nav-item'); - navItems.at(0).trigger('click'); - - expect(wrapper.vm.mainActiveIndex).toEqual(0); -}); - -test('use sync modifier in active-id', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: mockItem.id, - mainActiveIndex: 0, - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items.at(1).trigger('click'); - - expect(wrapper.vm.activeId).toEqual(mockItem2.id); -}); - -test('multiple select', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: [], - mainActiveIndex: 0, - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items.at(0).trigger('click'); - items.at(1).trigger('click'); - expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]); - - items.at(0).trigger('click'); - items.at(1).trigger('click'); - expect(wrapper.vm.activeId).toEqual([]); -}); - -test('max prop', () => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: [], - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items.at(0).trigger('click'); - items.at(1).trigger('click'); - expect(wrapper.vm.activeId).toEqual([mockItem.id]); -}); - -test('className of nav', () => { - const wrapper = mount(TreeSelect, { - propsData: { - mainActiveIndex: 0, - items: [ - { - text: 'group1', - className: 'my-class', - children: [], - }, - ], - }, - }); - - const items = wrapper.findAll('.van-tree-select__nav-item'); - expect(items.at(0).element.classList.contains('my-class')).toBeTruthy(); -}); - -test('should sync value before trigger click-item event', (done) => { - const wrapper = mount({ - template: ` - - `, - data() { - return { - activeId: mockItem.id, - mainActiveIndex: 0, - items: [ - { - text: 'group1', - children: [mockItem, mockItem2], - }, - ], - }; - }, - methods: { - onClickItem() { - expect(wrapper.vm.activeId).toEqual(mockItem2.id); - done(); - }, - }, - }); - - const items = wrapper.findAll('.van-tree-select__item'); - items.at(1).trigger('click'); -}); - -test('selected-icon prop', () => { - const wrapper = mount(TreeSelect, { - propsData: { - items: mockItems, - activeId: 1, - mainActiveIndex: 0, - selectedIcon: 'foo', - }, - }); - - expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot(); -}); diff --git a/src-next/utils/constant.ts b/src-next/utils/constant.ts deleted file mode 100644 index eb6563daf..000000000 --- a/src-next/utils/constant.ts +++ /dev/null @@ -1,14 +0,0 @@ -// color -export const RED = '#ee0a24'; -export const BLUE = '#1989fa'; -export const GREEN = '#07c160'; -export const WHITE = '#fff'; - -// border -export const BORDER = 'van-hairline'; -export const BORDER_TOP = `${BORDER}--top`; -export const BORDER_LEFT = `${BORDER}--left`; -export const BORDER_BOTTOM = `${BORDER}--bottom`; -export const BORDER_SURROUND = `${BORDER}--surround`; -export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`; -export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`; diff --git a/src-next/utils/create/bem.ts b/src-next/utils/create/bem.ts deleted file mode 100644 index 7d599680c..000000000 --- a/src-next/utils/create/bem.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * bem helper - * b() // 'button' - * b('text') // 'button__text' - * b({ disabled }) // 'button button--disabled' - * b('text', { disabled }) // 'button__text button__text--disabled' - * b(['disabled', 'primary']) // 'button button--disabled button--primary' - */ - -export type Mod = string | { [key: string]: any }; -export type Mods = Mod | Mod[]; - -function gen(name: string, mods?: Mods): string { - if (!mods) { - return ''; - } - - if (typeof mods === 'string') { - return ` ${name}--${mods}`; - } - - if (Array.isArray(mods)) { - return mods.reduce((ret, item) => ret + gen(name, item), ''); - } - - return Object.keys(mods).reduce( - (ret, key) => ret + (mods[key] ? gen(name, key) : ''), - '' - ); -} - -export function createBEM(name: string) { - return function (el?: Mods, mods?: Mods): Mods { - if (el && typeof el !== 'string') { - mods = el; - el = ''; - } - - el = el ? `${name}__${el}` : name; - - return `${el}${gen(el, mods)}`; - }; -} - -export type BEM = ReturnType; diff --git a/src-next/utils/create/component.ts b/src-next/utils/create/component.ts deleted file mode 100644 index 90e316e3f..000000000 --- a/src-next/utils/create/component.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Create a basic component with common options - */ - -// function install(this: any, Vue: VueConstructor) { -// const { name } = this; -// Vue.component(name as string, this); -// Vue.component(camelize(`-${name}`), this); -// } - -export function createComponent(name: string) { - return function (sfc: any) { - sfc.name = name; - // sfc.install = install; - - return sfc; - }; -} diff --git a/src-next/utils/create/i18n.ts b/src-next/utils/create/i18n.ts deleted file mode 100644 index 37da6501d..000000000 --- a/src-next/utils/create/i18n.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { get, isFunction } from '..'; -import { camelize } from '../format/string'; -import locale from '../../locale'; - -export function createI18N(name: string) { - const prefix = camelize(name) + '.'; - - return function (path: string, ...args: any[]): string { - const messages = locale.messages(); - const message = get(messages, prefix + path) || get(messages, path); - - return isFunction(message) ? message(...args) : message; - }; -} - -export type Translate = ReturnType; diff --git a/src-next/utils/create/index.ts b/src-next/utils/create/index.ts deleted file mode 100644 index 8a7b40bcf..000000000 --- a/src-next/utils/create/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { createBEM, BEM } from './bem'; -import { createComponent } from './component'; -import { createI18N, Translate } from './i18n'; - -type CreateNamespaceReturn = [ - ReturnType, - BEM, - Translate -]; - -export function createNamespace(name: string): CreateNamespaceReturn { - name = 'van-' + name; - return [ - createComponent(name), - createBEM(name), - createI18N(name) - ]; -} diff --git a/src-next/utils/deep-assign.ts b/src-next/utils/deep-assign.ts deleted file mode 100644 index 6a175c57a..000000000 --- a/src-next/utils/deep-assign.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { isDef, isObject } from '.'; -import { ObjectIndex } from './types'; - -const { hasOwnProperty } = Object.prototype; - -function assignKey(to: ObjectIndex, from: ObjectIndex, key: string) { - const val = from[key]; - - if (!isDef(val)) { - return; - } - - if (!hasOwnProperty.call(to, key) || !isObject(val)) { - to[key] = val; - } else { - // eslint-disable-next-line @typescript-eslint/no-use-before-define - to[key] = deepAssign(Object(to[key]), from[key]); - } -} - -export function deepAssign(to: ObjectIndex, from: ObjectIndex): ObjectIndex { - Object.keys(from).forEach((key) => { - assignKey(to, from, key); - }); - - return to; -} diff --git a/src-next/utils/deep-clone.ts b/src-next/utils/deep-clone.ts deleted file mode 100644 index 254b8e6b1..000000000 --- a/src-next/utils/deep-clone.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { deepAssign } from './deep-assign'; - -export function deepClone(obj: object): object { - if (Array.isArray(obj)) { - return obj.map((item) => deepClone(item)); - } - - if (typeof obj === 'object') { - return deepAssign({}, obj); - } - - return obj; -} diff --git a/src-next/utils/dom/event.ts b/src-next/utils/dom/event.ts deleted file mode 100644 index 7bd55f859..000000000 --- a/src-next/utils/dom/event.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { inBrowser } from '..'; -import { EventHandler } from '../types'; - -// eslint-disable-next-line import/no-mutable-exports -export let supportsPassive = false; - -if (inBrowser) { - try { - const opts = {}; - Object.defineProperty(opts, 'passive', { - // eslint-disable-next-line getter-return - get() { - /* istanbul ignore next */ - supportsPassive = true; - }, - }); - window.addEventListener('test-passive', null as any, opts); - // eslint-disable-next-line no-empty - } catch (e) {} -} - -export function on( - target: EventTarget, - event: string, - handler: EventHandler, - passive = false -) { - if (inBrowser) { - target.addEventListener( - event, - handler, - supportsPassive ? { capture: false, passive } : false - ); - } -} - -export function off(target: EventTarget, event: string, handler: EventHandler) { - if (inBrowser) { - target.removeEventListener(event, handler); - } -} - -export function stopPropagation(event: Event) { - event.stopPropagation(); -} - -export function preventDefault(event: Event, isStopPropagation?: boolean) { - /* istanbul ignore else */ - if (typeof event.cancelable !== 'boolean' || event.cancelable) { - event.preventDefault(); - } - - if (isStopPropagation) { - stopPropagation(event); - } -} diff --git a/src-next/utils/dom/node.ts b/src-next/utils/dom/node.ts deleted file mode 100644 index 07756867a..000000000 --- a/src-next/utils/dom/node.ts +++ /dev/null @@ -1,7 +0,0 @@ -export function removeNode(el: Node) { - const parent = el.parentNode; - - if (parent) { - parent.removeChild(el); - } -} diff --git a/src-next/utils/dom/raf.ts b/src-next/utils/dom/raf.ts deleted file mode 100644 index ca7bc1b42..000000000 --- a/src-next/utils/dom/raf.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * requestAnimationFrame polyfill - */ - -import { inBrowser } from '..'; - -let prev = Date.now(); - -/* istanbul ignore next */ -function fallback(fn: FrameRequestCallback): number { - const curr = Date.now(); - const ms = Math.max(0, 16 - (curr - prev)); - const id = setTimeout(fn, ms); - prev = curr + ms; - return id; -} - -/* istanbul ignore next */ -const root = (inBrowser ? window : global) as Window; - -/* istanbul ignore next */ -const iRaf = root.requestAnimationFrame || fallback; - -/* istanbul ignore next */ -const iCancel = root.cancelAnimationFrame || root.clearTimeout; - -export function raf(fn: FrameRequestCallback): number { - return iRaf.call(root, fn); -} - -// double raf for animation -export function doubleRaf(fn: FrameRequestCallback): void { - raf(() => { - raf(fn); - }); -} - -export function cancelRaf(id: number) { - iCancel.call(root, id); -} diff --git a/src-next/utils/dom/reset-scroll.ts b/src-next/utils/dom/reset-scroll.ts deleted file mode 100644 index 8cdf18a40..000000000 --- a/src-next/utils/dom/reset-scroll.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Hack for iOS12 page scroll - * https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 - */ - -import { isIOS as checkIsIOS } from '../validate/system'; -import { getRootScrollTop, setRootScrollTop } from './scroll'; - -const isIOS = checkIsIOS(); - -/* istanbul ignore next */ -export function resetScroll() { - if (isIOS) { - setRootScrollTop(getRootScrollTop()); - } -} diff --git a/src-next/utils/dom/scroll.ts b/src-next/utils/dom/scroll.ts deleted file mode 100644 index aa3f7f571..000000000 --- a/src-next/utils/dom/scroll.ts +++ /dev/null @@ -1,90 +0,0 @@ -type ScrollElement = HTMLElement | Window; - -function isWindow(val: unknown): val is Window { - return val === window; -} - -// get nearest scroll element -// http://w3help.org/zh-cn/causes/SD9013 -// http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome -const overflowScrollReg = /scroll|auto/i; -export function getScroller(el: HTMLElement, root: ScrollElement = window) { - let node = el; - - while ( - node && - node.tagName !== 'HTML' && - node.nodeType === 1 && - node !== root - ) { - const { overflowY } = window.getComputedStyle(node); - - if (overflowScrollReg.test(overflowY)) { - if (node.tagName !== 'BODY') { - return node; - } - - // see: https://github.com/youzan/vant/issues/3823 - const { overflowY: htmlOverflowY } = window.getComputedStyle( - node.parentNode as Element - ); - - if (overflowScrollReg.test(htmlOverflowY)) { - return node; - } - } - node = node.parentNode as HTMLElement; - } - - return root; -} - -export function getScrollTop(el: ScrollElement): number { - return 'scrollTop' in el ? el.scrollTop : el.pageYOffset; -} - -export function setScrollTop(el: ScrollElement, value: number) { - if ('scrollTop' in el) { - el.scrollTop = value; - } else { - el.scrollTo(el.scrollX, value); - } -} - -export function getRootScrollTop(): number { - return ( - window.pageYOffset || - document.documentElement.scrollTop || - document.body.scrollTop || - 0 - ); -} - -export function setRootScrollTop(value: number) { - setScrollTop(window, value); - setScrollTop(document.body, value); -} - -// get distance from element top to page top or scroller top -export function getElementTop(el: ScrollElement, scroller?: HTMLElement) { - if (isWindow(el)) { - return 0; - } - - const scrollTop = scroller ? getScrollTop(scroller) : getRootScrollTop(); - return el.getBoundingClientRect().top + scrollTop; -} - -export function getVisibleHeight(el: ScrollElement) { - if (isWindow(el)) { - return el.innerHeight; - } - return el.getBoundingClientRect().height; -} - -export function getVisibleTop(el: ScrollElement) { - if (isWindow(el)) { - return 0; - } - return el.getBoundingClientRect().top; -} diff --git a/src-next/utils/dom/style.ts b/src-next/utils/dom/style.ts deleted file mode 100644 index e3fe897b1..000000000 --- a/src-next/utils/dom/style.ts +++ /dev/null @@ -1,11 +0,0 @@ -export function isHidden(el: HTMLElement) { - const style = window.getComputedStyle(el); - const hidden = style.display === 'none'; - - // offsetParent returns null in the following situations: - // 1. The element or its parent element has the display property set to none. - // 2. The element has the position property set to fixed - const parentHidden = el.offsetParent === null && style.position !== 'fixed'; - - return hidden || parentHidden; -} diff --git a/src-next/utils/format/number.ts b/src-next/utils/format/number.ts deleted file mode 100644 index 85ca889b5..000000000 --- a/src-next/utils/format/number.ts +++ /dev/null @@ -1,31 +0,0 @@ -export function range(num: number, min: number, max: number): number { - return Math.min(Math.max(num, min), max); -} - -function trimExtraChar(value: string, char: string, regExp: RegExp) { - const index = value.indexOf(char); - - if (index === -1) { - return value; - } - - if (char === '-' && index !== 0) { - return value.slice(0, index); - } - - return value.slice(0, index + 1) + value.slice(index).replace(regExp, ''); -} - -export function formatNumber(value: string, allowDot?: boolean) { - if (allowDot) { - value = trimExtraChar(value, '.', /\./g); - } else { - value = value.split('.')[0]; - } - - value = trimExtraChar(value, '-', /-/g); - - const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g; - - return value.replace(regExp, ''); -} diff --git a/src-next/utils/format/string.ts b/src-next/utils/format/string.ts deleted file mode 100644 index f801d910b..000000000 --- a/src-next/utils/format/string.ts +++ /dev/null @@ -1,15 +0,0 @@ -const camelizeRE = /-(\w)/g; - -export function camelize(str: string): string { - return str.replace(camelizeRE, (_, c) => c.toUpperCase()); -} - -export function padZero(num: number | string, targetLength = 2): string { - let str = num + ''; - - while (str.length < targetLength) { - str = '0' + str; - } - - return str; -} diff --git a/src-next/utils/format/unit.ts b/src-next/utils/format/unit.ts deleted file mode 100644 index b50167e7c..000000000 --- a/src-next/utils/format/unit.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { isDef } from '..'; -import { isNumeric } from '../validate/number'; - -export function addUnit(value?: string | number): string | undefined { - if (!isDef(value)) { - return undefined; - } - - value = String(value); - return isNumeric(value) ? `${value}px` : value; -} - -// cache -let rootFontSize: number; - -function getRootFontSize() { - if (!rootFontSize) { - const doc = document.documentElement; - const fontSize = - doc.style.fontSize || window.getComputedStyle(doc).fontSize; - - rootFontSize = parseFloat(fontSize); - } - - return rootFontSize; -} - -function convertRem(value: string) { - value = value.replace(/rem/g, ''); - return +value * getRootFontSize(); -} - -export function unitToPx(value: string | number): number { - if (typeof value === 'number') { - return value; - } - - if (value.indexOf('rem') !== -1) { - return convertRem(value); - } - - return parseFloat(value); -} diff --git a/src-next/utils/index.ts b/src-next/utils/index.ts deleted file mode 100644 index c88a00c4a..000000000 --- a/src-next/utils/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -export { addUnit } from './format/unit'; -export { createNamespace } from './create'; - -// eslint-disable-next-line @typescript-eslint/no-empty-function -export function noop() {} - -export const inBrowser = typeof window !== 'undefined' - -export function isDef(val: unknown): boolean { - return val !== undefined && val !== null; -} - -export function isFunction(val: unknown): val is Function { - return typeof val === 'function'; -} - -export function isObject(val: unknown): val is Record { - return val !== null && typeof val === 'object'; -} - -export function isPromise(val: unknown): val is Promise { - return isObject(val) && isFunction(val.then) && isFunction(val.catch); -} - -export function get(object: any, path: string): any { - const keys = path.split('.'); - let result = object; - - keys.forEach((key) => { - result = isDef(result[key]) ? result[key] : ''; - }); - - return result; -} diff --git a/src-next/utils/router.ts b/src-next/utils/router.ts deleted file mode 100644 index 7e822dc31..000000000 --- a/src-next/utils/router.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Vue Router support - */ - -import type { Router, RouteLocation } from 'vue-router'; - -export type RouteConfig = { - url?: string; - to?: RouteLocation; - replace?: boolean; -}; - -function isRedundantNavigation(err: Error) { - return ( - err.name === 'NavigationDuplicated' || - // compatible with vue-router@3.3 - (err.message && err.message.indexOf('redundant navigation') !== -1) - ); -} - -export function route(router: Router, config: RouteConfig) { - const { to, url, replace } = config; - if (to && router) { - const promise = router[replace ? 'replace' : 'push'](to); - - /* istanbul ignore else */ - if (promise && promise.catch) { - promise.catch((err) => { - if (err && !isRedundantNavigation(err)) { - throw err; - } - }); - } - } else if (url) { - replace ? location.replace(url) : (location.href = url); - } -} - -export type RouteProps = { - url?: string; - replace?: boolean; - to?: RouteLocation; -}; - -export const routeProps = { - url: String, - replace: Boolean, - to: [String, Object], -}; diff --git a/src-next/utils/test/bem.spec.js b/src-next/utils/test/bem.spec.js deleted file mode 100644 index d0e86466f..000000000 --- a/src-next/utils/test/bem.spec.js +++ /dev/null @@ -1,39 +0,0 @@ -import { createBEM } from '../create/bem'; - -test('bem', () => { - const bem = createBEM('button'); - - expect(bem()).toEqual('button'); - - expect(bem('text')).toEqual('button__text'); - - expect(bem({ disabled: false })).toEqual('button'); - - expect(bem({ disabled: true })).toEqual('button button--disabled'); - - expect(bem('text', { disabled: true })).toEqual( - 'button__text button__text--disabled' - ); - - expect(bem(['disabled', 'primary'])).toEqual( - 'button button--disabled button--primary' - ); - - expect(bem([])).toEqual('button'); - - expect(bem(null)).toEqual('button'); - - expect(bem([null])).toEqual('button'); - - expect(bem(['disabled', ''])).toEqual('button button--disabled'); - - expect(bem(['disabled', undefined])).toEqual('button button--disabled'); - - expect(bem('text', ['disabled', 'primary'])).toEqual( - 'button__text button__text--disabled button__text--primary' - ); - - expect(bem('text', [{ disabled: true }, 'primary'])).toEqual( - 'button__text button__text--disabled button__text--primary' - ); -}); diff --git a/src-next/utils/test/index.spec.js b/src-next/utils/test/index.spec.js deleted file mode 100644 index a9d6bea10..000000000 --- a/src-next/utils/test/index.spec.js +++ /dev/null @@ -1,142 +0,0 @@ -import { deepClone } from '../deep-clone'; -import { deepAssign } from '../deep-assign'; -import { isDef, get, noop } from '..'; -import { raf, cancelRaf } from '../dom/raf'; -import { later } from '../../../test'; -import { isEmail } from '../validate/email'; -import { isMobile } from '../validate/mobile'; -import { isNumeric } from '../validate/number'; -import { isAndroid } from '../validate/system'; -import { camelize } from '../format/string'; -import { formatNumber } from '../format/number'; -import { addUnit, unitToPx } from '../format/unit'; - -test('deepClone', () => { - const a = { foo: 0 }; - const b = { foo: 0, bar: 1 }; - const arr = [a, b]; - expect(deepClone(a)).toEqual(a); - expect(deepClone(b)).toEqual(b); - expect(deepClone(noop)).toEqual(noop); - expect(deepClone(arr)).toEqual(arr); - expect(deepClone(undefined)).toEqual(undefined); - expect(deepClone(1)).toEqual(1); -}); - -test('deepAssign', () => { - expect(deepAssign({}, { foo: null })).toEqual({}); - expect(deepAssign({}, { foo: undefined })).toEqual({}); - expect(deepAssign({ noop: null }, { noop })).toEqual({ noop }); - expect(deepAssign({ foo: 0 }, { bar: 1 })).toEqual({ foo: 0, bar: 1 }); - expect( - deepAssign({ foo: { bar: false } }, { foo: { bar: true, foo: false } }) - ).toEqual({ - foo: { - bar: true, - foo: false, - }, - }); -}); - -test('isDef', () => { - expect(isDef(null)).toBeFalsy(); - expect(isDef(undefined)).toBeFalsy(); - expect(isDef(1)).toBeTruthy(); - expect(isDef('1')).toBeTruthy(); - expect(isDef({})).toBeTruthy(); - expect(isDef(noop)).toBeTruthy(); -}); - -test('camelize', () => { - expect(camelize('ab')).toEqual('ab'); - expect(camelize('a-b')).toEqual('aB'); - expect(camelize('a-b-c-d')).toEqual('aBCD'); - expect(camelize('a-b-')).toEqual('aB-'); - expect(camelize('-a-b')).toEqual('AB'); - expect(camelize('-')).toEqual('-'); -}); - -test('get', () => { - expect(get({ a: 1 }, 'a')).toEqual(1); - expect(get({ a: { b: 2 } }, 'a.b')).toEqual(2); - expect(get({ a: { b: 2 } }, 'a.b.c')).toEqual(''); -}); - -test('isAndroid', () => { - expect(isAndroid()).toBeFalsy(); -}); - -test('raf', async () => { - const spy = jest.fn(); - raf(spy); - - await later(50); - expect(spy).toHaveBeenCalledTimes(1); - cancelRaf(1); -}); - -test('isEmail', () => { - expect(isEmail('abc@gmail.com')).toBeTruthy(); - expect(isEmail('abc@@gmail.com')).toBeFalsy(); - expect(isEmail('@gmail.com')).toBeFalsy(); - expect(isEmail('abc@')).toBeFalsy(); -}); - -test('isMobile', () => { - expect(isMobile('13000000000')).toBeTruthy(); - expect(isMobile('+8613000000000')).toBeTruthy(); - expect(isMobile('8613000000000')).toBeTruthy(); - expect(isMobile('1300000000')).toBeFalsy(); - expect(isMobile('abc')).toBeFalsy(); -}); - -test('isNumeric', () => { - expect(isNumeric('1')).toBeTruthy(); - expect(isNumeric('1.2')).toBeTruthy(); - expect(isNumeric('1..2')).toBeFalsy(); - expect(isNumeric('abc')).toBeFalsy(); - expect(isNumeric('1b2')).toBeFalsy(); -}); - -test('formatNumber', () => { - expect(formatNumber('abc')).toEqual(''); - expect(formatNumber('1.2')).toEqual('1'); - expect(formatNumber('abc1.2')).toEqual('1'); - expect(formatNumber('123.4.')).toEqual('123'); - - // with dot - expect(formatNumber('abc', true)).toEqual(''); - expect(formatNumber('1.2', true)).toEqual('1.2'); - expect(formatNumber('abc1.2', true)).toEqual('1.2'); - expect(formatNumber('123.4.', true)).toEqual('123.4'); - - // minus - expect(formatNumber('-1.2')).toEqual('-1'); - expect(formatNumber('-1.2', true)).toEqual('-1.2'); - expect(formatNumber('-1.2-', true)).toEqual('-1.2'); - expect(formatNumber('123-')).toEqual('123'); -}); - -test('addUnit', () => { - expect(addUnit(0)).toEqual('0px'); - expect(addUnit(10)).toEqual('10px'); - expect(addUnit('1%')).toEqual('1%'); - expect(addUnit('1px')).toEqual('1px'); - expect(addUnit('1vw')).toEqual('1vw'); - expect(addUnit('1vh')).toEqual('1vh'); - expect(addUnit('1rem')).toEqual('1rem'); -}); - -test('unitToPx', () => { - const originGetComputedStyle = window.getComputedStyle; - - window.getComputedStyle = () => ({ fontSize: '16px' }); - - expect(unitToPx(0)).toEqual(0); - expect(unitToPx(10)).toEqual(10); - expect(unitToPx('10px')).toEqual(10); - expect(unitToPx('0rem')).toEqual(0); - expect(unitToPx('10rem')).toEqual(160); - - window.getComputedStyle = originGetComputedStyle; -}); diff --git a/src-next/utils/types.ts b/src-next/utils/types.ts deleted file mode 100644 index 14821d4b6..000000000 --- a/src-next/utils/types.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { VNode, CreateElement, RenderContext } from 'vue'; -import { InjectOptions, PropsDefinition } from 'vue/types/options'; - -export type EventHandler = (event: Event) => void; - -export type ObjectIndex = Record; - -export type ScopedSlot = ( - props?: Props -) => VNode[] | VNode | undefined; - -export type DefaultSlots = { - default?: ScopedSlot; -}; - -export type ScopedSlots = DefaultSlots & { - [key: string]: ScopedSlot | undefined; -}; - -export type ModelOptions = { - prop?: string; - event?: string; -}; - -export type DefaultProps = ObjectIndex; - -export type FunctionComponent< - Props = DefaultProps, - PropDefs = PropsDefinition -> = { - ( - h: CreateElement, - props: Props, - slots: ScopedSlots, - context: RenderContext - ): VNode | undefined; - props?: PropDefs; - model?: ModelOptions; - inject?: InjectOptions; -}; diff --git a/src-next/utils/validate/date.ts b/src-next/utils/validate/date.ts deleted file mode 100644 index d06fd6696..000000000 --- a/src-next/utils/validate/date.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { isNaN } from './number'; - -export function isDate(val: Date): val is Date { - return ( - Object.prototype.toString.call(val) === '[object Date]' && - !isNaN(val.getTime()) - ); -} diff --git a/src-next/utils/validate/email.ts b/src-next/utils/validate/email.ts deleted file mode 100644 index d5e3c21b8..000000000 --- a/src-next/utils/validate/email.ts +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-disable */ -export function isEmail(value: string): boolean { - const reg = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i; - return reg.test(value); -} diff --git a/src-next/utils/validate/mobile.ts b/src-next/utils/validate/mobile.ts deleted file mode 100644 index b32401981..000000000 --- a/src-next/utils/validate/mobile.ts +++ /dev/null @@ -1,6 +0,0 @@ -export function isMobile(value: string): boolean { - value = value.replace(/[^-|\d]/g, ''); - return ( - /^((\+86)|(86))?(1)\d{10}$/.test(value) || /^0[0-9-]{10,13}$/.test(value) - ); -} diff --git a/src-next/utils/validate/number.ts b/src-next/utils/validate/number.ts deleted file mode 100644 index 8d77e0eee..000000000 --- a/src-next/utils/validate/number.ts +++ /dev/null @@ -1,12 +0,0 @@ -export function isNumeric(val: string): boolean { - return /^\d+(\.\d+)?$/.test(val); -} - -export function isNaN(val: number): val is typeof NaN { - if (Number.isNaN) { - return Number.isNaN(val); - } - - // eslint-disable-next-line no-self-compare - return val !== val; -} diff --git a/src-next/utils/validate/system.ts b/src-next/utils/validate/system.ts deleted file mode 100644 index d91f2f131..000000000 --- a/src-next/utils/validate/system.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { isServer } from '..'; - -export function isAndroid(): boolean { - /* istanbul ignore next */ - return isServer ? false : /android/.test(navigator.userAgent.toLowerCase()); -} - -export function isIOS(): boolean { - /* istanbul ignore next */ - return isServer - ? false - : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()); -} diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue index 758420870..ed6f85807 100644 --- a/src/action-sheet/demo/index.vue +++ b/src/action-sheet/demo/index.vue @@ -23,13 +23,13 @@ - +
{{ t('content') }}
 diff --git a/src-next/action-sheet/index.js b/src/action-sheet/index.js similarity index 100% rename from src-next/action-sheet/index.js rename to src/action-sheet/index.js diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx deleted file mode 100644 index 77808b419..000000000 --- a/src/action-sheet/index.tsx +++ /dev/null @@ -1,193 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { emit, inherit } from '../utils/functional'; - -// Mixins -import { popupMixinProps } from '../mixins/popup'; - -// Components -import Icon from '../icon'; -import Popup from '../popup'; -import Loading from '../loading'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; -import { PopupMixinProps } from '../mixins/popup/type'; - -export type ActionSheetItem = { - name: string; - color?: string; - subname?: string; - loading?: boolean; - disabled?: boolean; - className?: string; - callback?: (item: ActionSheetItem) => void; -}; - -export type ActionSheetProps = PopupMixinProps & { - round: boolean; - title?: string; - actions?: ActionSheetItem[]; - duration: number | string; - closeIcon: string; - cancelText?: string; - description?: string; - closeOnPopstate?: boolean; - closeOnClickAction?: boolean; - safeAreaInsetBottom?: boolean; -}; - -const [createComponent, bem] = createNamespace('action-sheet'); - -function ActionSheet( - h: CreateElement, - props: ActionSheetProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const { title, cancelText } = props; - - function onCancel() { - emit(ctx, 'input', false); - emit(ctx, 'cancel'); - } - - function Header() { - if (title) { - return ( -
- {title} - -
- ); - } - } - - function Content() { - if (slots.default) { - return
{slots.default()}
; - } - } - - function Option(item: ActionSheetItem, index: number) { - const { disabled, loading, callback } = item; - - function onClickOption(event: MouseEvent) { - event.stopPropagation(); - - if (disabled || loading) { - return; - } - - if (callback) { - callback(item); - } - - emit(ctx, 'select', item, index); - - if (props.closeOnClickAction) { - emit(ctx, 'input', false); - } - } - - function OptionContent() { - if (loading) { - return ; - } - - return [ - {item.name}, - item.subname &&
{item.subname}
, - ]; - } - - return ( - - ); - } - - function CancelText() { - if (cancelText) { - return [ -
, - , - ]; - } - } - - const Description = props.description && ( -
{props.description}
- ); - - return ( - - {Header()} - {Description} - {props.actions && props.actions.map(Option)} - {Content()} - {CancelText()} - - ); -} - -ActionSheet.props = { - ...popupMixinProps, - title: String, - actions: Array, - duration: [Number, String], - cancelText: String, - description: String, - getContainer: [String, Function], - closeOnPopstate: Boolean, - closeOnClickAction: Boolean, - round: { - type: Boolean, - default: true, - }, - closeIcon: { - type: String, - default: 'cross', - }, - safeAreaInsetBottom: { - type: Boolean, - default: true, - }, - overlay: { - type: Boolean, - default: true, - }, - closeOnClickOverlay: { - type: Boolean, - default: true, - }, -}; - -export default createComponent(ActionSheet); diff --git a/src-next/button/index.js b/src/button/index.js similarity index 100% rename from src-next/button/index.js rename to src/button/index.js diff --git a/src/button/index.tsx b/src/button/index.tsx deleted file mode 100644 index 6b3c6e5c2..000000000 --- a/src/button/index.tsx +++ /dev/null @@ -1,191 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { emit, inherit } from '../utils/functional'; -import { BORDER_SURROUND, WHITE } from '../utils/constant'; -import { routeProps, RouteProps, functionalRoute } from '../utils/router'; - -// Components -import Icon from '../icon'; -import Loading, { LoadingType } from '../loading'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type ButtonType = 'default' | 'primary' | 'info' | 'warning' | 'danger'; - -export type ButtonSize = 'large' | 'normal' | 'small' | 'mini'; - -export type ButtonProps = RouteProps & { - tag: keyof HTMLElementTagNameMap | string; - type: ButtonType; - size: ButtonSize; - text?: string; - icon?: string; - color?: string; - block?: boolean; - plain?: boolean; - round?: boolean; - square?: boolean; - loading?: boolean; - hairline?: boolean; - disabled?: boolean; - nativeType?: string; - iconPrefix?: string; - loadingSize: string; - loadingType?: LoadingType; - loadingText?: string; -}; - -export type ButtonEvents = { - onClick?(event: Event): void; -}; - -const [createComponent, bem] = createNamespace('button'); - -function Button( - h: CreateElement, - props: ButtonProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const { - tag, - icon, - type, - color, - plain, - disabled, - loading, - hairline, - loadingText, - } = props; - - const style: Record = {}; - - if (color) { - style.color = plain ? color : WHITE; - - if (!plain) { - // Use background instead of backgroundColor to make linear-gradient work - style.background = color; - } - - // hide border when color is linear-gradient - if (color.indexOf('gradient') !== -1) { - style.border = 0; - } else { - style.borderColor = color; - } - } - - function onClick(event: Event) { - if (!loading && !disabled) { - emit(ctx, 'click', event); - functionalRoute(ctx); - } - } - - function onTouchstart(event: TouchEvent) { - emit(ctx, 'touchstart', event); - } - - const classes = [ - bem([ - type, - props.size, - { - plain, - loading, - disabled, - hairline, - block: props.block, - round: props.round, - square: props.square, - }, - ]), - { [BORDER_SURROUND]: hairline }, - ]; - - function Content() { - const content = []; - - if (loading) { - content.push( - - ); - } else if (icon) { - content.push( - - ); - } - - let text; - if (loading) { - text = loadingText; - } else { - text = slots.default ? slots.default() : props.text; - } - - if (text) { - content.push({text}); - } - - return content; - } - - return ( - -
{Content()}
- - ); -} - -Button.props = { - ...routeProps, - text: String, - icon: String, - color: String, - block: Boolean, - plain: Boolean, - round: Boolean, - square: Boolean, - loading: Boolean, - hairline: Boolean, - disabled: Boolean, - iconPrefix: String, - nativeType: String, - loadingText: String, - loadingType: String, - tag: { - type: String, - default: 'button', - }, - type: { - type: String, - default: 'default', - }, - size: { - type: String, - default: 'normal', - }, - loadingSize: { - type: String, - default: '20px', - }, -}; - -export default createComponent(Button); diff --git a/src-next/cell-group/index.js b/src/cell-group/index.js similarity index 100% rename from src-next/cell-group/index.js rename to src/cell-group/index.js diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx deleted file mode 100644 index d7e99b8c6..000000000 --- a/src/cell-group/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { inherit } from '../utils/functional'; -import { BORDER_TOP_BOTTOM } from '../utils/constant'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots, ScopedSlot } from '../utils/types'; - -export type CellGroupProps = { - title?: string; - border: boolean; -}; - -export type CellGroupSlots = DefaultSlots & { - title?: ScopedSlot; -}; - -const [createComponent, bem] = createNamespace('cell-group'); - -function CellGroup( - h: CreateElement, - props: CellGroupProps, - slots: CellGroupSlots, - ctx: RenderContext -) { - const Group = ( -
- {slots.default?.()} -
- ); - - if (props.title || slots.title) { - return ( -
-
- {slots.title ? slots.title() : props.title} -
- {Group} -
- ); - } - - return Group; -} - -CellGroup.props = { - title: String, - border: { - type: Boolean, - default: true, - }, -}; - -export default createComponent(CellGroup); diff --git a/src-next/cell/index.js b/src/cell/index.js similarity index 100% rename from src-next/cell/index.js rename to src/cell/index.js diff --git a/src/cell/index.tsx b/src/cell/index.tsx deleted file mode 100644 index c1a741ea2..000000000 --- a/src/cell/index.tsx +++ /dev/null @@ -1,150 +0,0 @@ -// Utils -import { createNamespace, isDef } from '../utils'; -import { emit, inherit } from '../utils/functional'; -import { routeProps, RouteProps, functionalRoute } from '../utils/router'; -import { cellProps, SharedCellProps } from './shared'; - -// Components -import Icon from '../icon'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { ScopedSlot, DefaultSlots } from '../utils/types'; -import { Mods } from '../utils/create/bem'; - -export type CellProps = RouteProps & SharedCellProps; - -export type CellSlots = DefaultSlots & { - icon?: ScopedSlot; - title?: ScopedSlot; - label?: ScopedSlot; - extra?: ScopedSlot; - 'right-icon'?: ScopedSlot; -}; - -export type CellEvents = { - onClick?(event: Event): void; -}; - -const [createComponent, bem] = createNamespace('cell'); - -function Cell( - h: CreateElement, - props: CellProps, - slots: CellSlots, - ctx: RenderContext -) { - const { icon, size, title, label, value, isLink } = props; - const showTitle = slots.title || isDef(title); - - function Label() { - const showLabel = slots.label || isDef(label); - - if (showLabel) { - return ( -
- {slots.label ? slots.label() : label} -
- ); - } - } - - function Title() { - if (showTitle) { - return ( -
- {slots.title ? slots.title() : {title}} - {Label()} -
- ); - } - } - - function Value() { - const showValue = slots.default || isDef(value); - - if (showValue) { - return ( -
- {slots.default ? slots.default() : {value}} -
- ); - } - } - - function LeftIcon() { - if (slots.icon) { - return slots.icon(); - } - - if (icon) { - return ( - - ); - } - } - - function RightIcon() { - const rightIconSlot = slots['right-icon']; - - if (rightIconSlot) { - return rightIconSlot(); - } - - if (isLink) { - const { arrowDirection } = props; - - return ( - - ); - } - } - - function onClick(event: Event) { - emit(ctx, 'click', event); - functionalRoute(ctx); - } - - const clickable = isLink || props.clickable; - - const classes: Mods = { - clickable, - center: props.center, - required: props.required, - borderless: !props.border, - }; - - if (size) { - classes[size] = size; - } - - return ( -
- {LeftIcon()} - {Title()} - {Value()} - {RightIcon()} - {slots.extra?.()} -
- ); -} - -Cell.props = { - ...cellProps, - ...routeProps, -}; - -export default createComponent(Cell); diff --git a/src/circle/README.md b/src/circle/README.md index 4c8e6d67e..6b2ae7a1d 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -14,7 +14,7 @@ Vue.use(Circle); ### Basic Usage ```html - + ``` ```js @@ -36,7 +36,7 @@ export default { ```html + ``` ```js @@ -40,7 +45,7 @@ export default { ```html + ``` ## API @@ -114,7 +124,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| v-model | 当前进度 | _number_ | - | +| v-model:currentRate | 当前进度 | _number_ | - | | rate | 目标进度 | _number \| string_ | `100` | | size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` | | color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue index 55899e03f..975e86e26 100644 --- a/src/circle/demo/index.vue +++ b/src/circle/demo/index.vue @@ -2,7 +2,7 @@ this.startRate; this.duration = Math.abs( @@ -141,7 +143,7 @@ export default createComponent({ cancelRaf(this.rafId); this.rafId = raf(this.animate); } else { - this.$emit('input', this.endRate); + this.$emit('update:currentRate', this.endRate); } }, immediate: true, @@ -154,7 +156,7 @@ export default createComponent({ const progress = Math.min((now - this.startTime) / this.duration, 1); const rate = progress * (this.endRate - this.startRate) + this.startRate; - this.$emit('input', format(parseFloat(rate.toFixed(1)))); + this.$emit('update:currentRate', format(parseFloat(rate.toFixed(1)))); if (this.increase ? rate < this.endRate : rate > this.endRate) { this.rafId = raf(this.animate); @@ -175,8 +177,9 @@ export default createComponent({ stroke={this.gradient ? `url(#${this.uid})` : this.color} /> - {this.slots() || - (this.text &&
{this.text}
)} + {this.$slots.default + ? this.$slots.default() + : this.text &&
{this.text}
}
); }, diff --git a/src/col/index.js b/src/col/index.js index 056d47c32..36db2b39c 100644 --- a/src/col/index.js +++ b/src/col/index.js @@ -15,6 +15,8 @@ export default createComponent({ }, }, + emits: ['click'], + computed: { style() { const { index } = this; @@ -44,7 +46,7 @@ export default createComponent({ class={bem({ [span]: span, [`offset-${offset}`]: offset })} onClick={this.onClick} > - {this.slots()} + {this.$slots.default?.()} ); }, diff --git a/src/count-down/index.js b/src/count-down/index.js index c13d36779..b6eb9dd1d 100644 --- a/src/count-down/index.js +++ b/src/count-down/index.js @@ -21,6 +21,8 @@ export default createComponent({ }, }, + emits: ['change', 'finish'], + data() { return { remain: 0, @@ -40,7 +42,9 @@ export default createComponent({ watch: { time: { immediate: true, - handler: 'reset', + handler() { + this.reset(); + }, }, }, @@ -153,7 +157,9 @@ export default createComponent({ render() { return (
- {this.slots('default', this.timeData) || this.formattedTime} + {this.$slots.default + ? this.$slots.default(this.timeData) + : this.formattedTime}
); }, diff --git a/src/dialog/index.js b/src/dialog/index.js index 474273ab8..48f4f9d5a 100644 --- a/src/dialog/index.js +++ b/src/dialog/index.js @@ -1,6 +1,6 @@ -import Vue from 'vue'; +// import Vue from 'vue'; import VanDialog from './Dialog'; -import { isServer } from '../utils'; +import { inBrowser } from '../utils'; let instance; @@ -28,7 +28,7 @@ function initInstance() { function Dialog(options) { /* istanbul ignore if */ - if (isServer) { + if (!inBrowser) { return Promise.resolve(); } diff --git a/src-next/divider/index.js b/src/divider/index.js similarity index 100% rename from src-next/divider/index.js rename to src/divider/index.js diff --git a/src/divider/index.tsx b/src/divider/index.tsx deleted file mode 100644 index ba400221e..000000000 --- a/src/divider/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { inherit } from '../utils/functional'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type DividerProps = { - dashed?: boolean; - hairline: boolean; - borderColor?: string; - contentPosition: 'left' | 'center' | 'right'; -}; - -const [createComponent, bem] = createNamespace('divider'); - -function Divider( - h: CreateElement, - props: DividerProps, - slots: DefaultSlots, - ctx: RenderContext -) { - return ( - - ); -} - -Divider.props = { - dashed: Boolean, - hairline: { - type: Boolean, - default: true, - }, - contentPosition: { - type: String, - default: 'center', - }, -}; - -export default createComponent(Divider); diff --git a/src-next/empty/Network.js b/src/empty/Network.js similarity index 100% rename from src-next/empty/Network.js rename to src/empty/Network.js diff --git a/src/empty/Network.tsx b/src/empty/Network.tsx deleted file mode 100644 index a6cedf812..000000000 --- a/src/empty/Network.tsx +++ /dev/null @@ -1,125 +0,0 @@ -export default { - render() { - const genStop = (color: string, offset: number, opacity?: number) => ( - - ); - - return ( - - - - {genStop('#FFF', 0, 0.5)} - {genStop('#F2F3F5', 100)} - - - {genStop('#F2F3F5', 0, 0.3)} - {genStop('#F2F3F5', 100)} - - - {genStop('#EBEDF0', 0)} - {genStop('#DCDEE0', 100, 0)} - - - {genStop('#EAEDF0', 0)} - {genStop('#DCDEE0', 100)} - - - {genStop('#EAEDF0', 0)} - {genStop('#DCDEE0', 100)} - - - {genStop('#EAEDF0', 0)} - {genStop('#DCDEE0', 100)} - - - {genStop('#EAEDF0', 0)} - {genStop('#DCDEE0', 100)} - - - {genStop('#EBEDF0', 0)} - {genStop('#FFF', 100, 0)} - - - - - - - - - - - - - - - - - - - - - - - - - ); - }, -}; diff --git a/src/empty/index.js b/src/empty/index.js index ef3e307a0..a59d4de40 100644 --- a/src/empty/index.js +++ b/src/empty/index.js @@ -16,7 +16,7 @@ export default createComponent({ methods: { genImageContent() { - const slots = this.slots('image'); + const slots = this.$slots.image?.(); if (slots) { return slots; @@ -40,7 +40,9 @@ export default createComponent({ }, genDescription() { - const description = this.slots('description') || this.description; + const description = this.$slots.description + ? this.slot.description() + : this.description; if (description) { return

{description}

; @@ -48,7 +50,7 @@ export default createComponent({ }, genBottom() { - const slot = this.slots(); + const slot = this.$slots.default?.(); if (slot) { return
{slot}
; diff --git a/src/grid-item/index.js b/src/grid-item/index.js index ca44c7da7..c003d9dbb 100644 --- a/src/grid-item/index.js +++ b/src/grid-item/index.js @@ -1,5 +1,5 @@ // Utils -import { createNamespace, addUnit, isDef } from '../utils'; +import { createNamespace, addUnit } from '../utils'; import { BORDER } from '../utils/constant'; import { route, routeProps } from '../utils/router'; @@ -21,10 +21,11 @@ export default createComponent({ text: String, icon: String, iconPrefix: String, - info: [Number, String], badge: [Number, String], }, + emits: ['click'], + computed: { style() { const { square, gutter, columnNum } = this.parent; @@ -70,14 +71,11 @@ export default createComponent({ }, genIcon() { - const iconSlot = this.slots('icon'); - const info = isDef(this.badge) ? this.badge : this.info; - - if (iconSlot) { + if (this.$slots.icon) { return (
- {iconSlot} - + {this.$slots.icon()} +
); } @@ -87,7 +85,7 @@ export default createComponent({ - {this.slots()} + {this.$slots.default?.()}
); }, diff --git a/src-next/hooks/use-click-outside.ts b/src/hooks/use-click-outside.ts similarity index 100% rename from src-next/hooks/use-click-outside.ts rename to src/hooks/use-click-outside.ts diff --git a/src-next/hooks/use-global-event.ts b/src/hooks/use-global-event.ts similarity index 100% rename from src-next/hooks/use-global-event.ts rename to src/hooks/use-global-event.ts diff --git a/src-next/hooks/use-lock-scroll.ts b/src/hooks/use-lock-scroll.ts similarity index 100% rename from src-next/hooks/use-lock-scroll.ts rename to src/hooks/use-lock-scroll.ts diff --git a/src-next/hooks/use-touch.ts b/src/hooks/use-touch.ts similarity index 100% rename from src-next/hooks/use-touch.ts rename to src/hooks/use-touch.ts diff --git a/src-next/icon/index.js b/src/icon/index.js similarity index 100% rename from src-next/icon/index.js rename to src/icon/index.js diff --git a/src/icon/index.tsx b/src/icon/index.tsx deleted file mode 100644 index ba8ccd29f..000000000 --- a/src/icon/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -// Utils -import { createNamespace, addUnit, isDef } from '../utils'; -import { inherit } from '../utils/functional'; - -// Components -import Info from '../info'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type IconProps = { - dot?: boolean; - tag: keyof HTMLElementTagNameMap | string; - name?: string; - size?: string | number; - info?: string | number; - badge?: string | number; - color?: string; - classPrefix: string; -}; - -export type IconEvents = { - onClick?(event: Event): void; -}; - -const [createComponent, bem] = createNamespace('icon'); - -function isImage(name?: string): boolean { - return name ? name.indexOf('/') !== -1 : false; -} - -// compatible with legacy usage, should be removed in next major version -const LEGACY_MAP: Record = { - medel: 'medal', - 'medel-o': 'medal-o', -}; - -function correctName(name?: string) { - return (name && LEGACY_MAP[name]) || name; -} - -function Icon( - h: CreateElement, - props: IconProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const name = correctName(props.name); - const imageIcon = isImage(name); - - return ( - - {slots.default && slots.default()} - {imageIcon && } - - - ); -} - -Icon.props = { - dot: Boolean, - name: String, - size: [Number, String], - // @deprecated - // should be removed in next major version - info: [Number, String], - badge: [Number, String], - color: String, - tag: { - type: String, - default: 'i', - }, - classPrefix: { - type: String, - default: bem(), - }, -}; - -export default createComponent(Icon); diff --git a/src/image-preview/index.js b/src/image-preview/index.js index fed894b97..eae0c340b 100644 --- a/src/image-preview/index.js +++ b/src/image-preview/index.js @@ -1,6 +1,6 @@ -import Vue from 'vue'; +// import Vue from 'vue'; import VueImagePreview from './ImagePreview'; -import { isServer } from '../utils'; +import { inBrowser } from '../utils'; let instance; @@ -46,7 +46,7 @@ const initInstance = () => { const ImagePreview = (images, startPosition = 0) => { /* istanbul ignore if */ - if (isServer) { + if (!inBrowser) { return; } diff --git a/src/image/index.js b/src/image/index.js index 0b16ebb83..8903c1ce6 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -31,6 +31,8 @@ export default createComponent({ }, }, + emits: ['load', 'error', 'click'], + data() { return { loading: true, @@ -116,7 +118,9 @@ export default createComponent({ if (this.loading && this.showLoading) { return (
- {this.slots('loading') || ( + {this.$slots.loading ? ( + this.$slots.loading() + ) : ( )}
@@ -126,7 +130,9 @@ export default createComponent({ if (this.error && this.showError) { return (
- {this.slots('error') || ( + {this.$slots.error ? ( + this.$slots.error() + ) : ( )}
@@ -153,14 +159,16 @@ export default createComponent({ return ; } - return ( - - ); + if (this.src) { + return ( + + ); + } }, }, @@ -173,7 +181,7 @@ export default createComponent({ > {this.genImage()} {this.genPlaceholder()} - {this.slots()} + {this.$slots.default?.()}
); }, diff --git a/src-next/info/index.js b/src/info/index.js similarity index 100% rename from src-next/info/index.js rename to src/info/index.js diff --git a/src/info/index.tsx b/src/info/index.tsx deleted file mode 100644 index 192c0b26d..000000000 --- a/src/info/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// Utils -import { createNamespace, isDef } from '../utils'; -import { inherit } from '../utils/functional'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type InfoProps = { - dot?: boolean; - info?: string | number; - badge?: string | number; -}; - -const [createComponent, bem] = createNamespace('info'); - -function Info( - h: CreateElement, - props: InfoProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const { dot, info } = props; - const showInfo = isDef(info) && info !== ''; - - if (!dot && !showInfo) { - return; - } - - return ( -
- {dot ? '' : props.info} -
- ); -} - -Info.props = { - dot: Boolean, - info: [Number, String], -}; - -export default createComponent(Info); diff --git a/src-next/loading/index.js b/src/loading/index.js similarity index 100% rename from src-next/loading/index.js rename to src/loading/index.js diff --git a/src/loading/index.tsx b/src/loading/index.tsx deleted file mode 100644 index a13371607..000000000 --- a/src/loading/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -// Utils -import { createNamespace, addUnit } from '../utils'; -import { inherit } from '../utils/functional'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type LoadingType = 'circular' | 'spinner'; - -export type LoadingProps = { - type: LoadingType; - size?: string | number; - color: string; - vertical?: boolean; - textSize?: string | number; -}; - -const [createComponent, bem] = createNamespace('loading'); - -function LoadingIcon(h: CreateElement, props: LoadingProps) { - if (props.type === 'spinner') { - const Spin = []; - for (let i = 0; i < 12; i++) { - Spin.push(); - } - return Spin; - } - - return ( - - - - ); -} - -function LoadingText( - h: CreateElement, - props: LoadingProps, - slots: DefaultSlots -) { - if (slots.default) { - const style = props.textSize && { - fontSize: addUnit(props.textSize), - }; - - return ( - - {slots.default()} - - ); - } -} - -function Loading( - h: CreateElement, - props: LoadingProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const { color, size, type } = props; - - const style: { [key: string]: string } = { color }; - if (size) { - const iconSize = addUnit(size) as string; - style.width = iconSize; - style.height = iconSize; - } - - return ( -
- - {LoadingIcon(h, props)} - - {LoadingText(h, props, slots)} -
- ); -} - -Loading.props = { - color: String, - size: [Number, String], - vertical: Boolean, - textSize: [Number, String], - type: { - type: String, - default: 'circular', - }, -}; - -export default createComponent(Loading); diff --git a/src/locale/index.ts b/src/locale/index.ts index 3c8bdc257..fa9391281 100644 --- a/src/locale/index.ts +++ b/src/locale/index.ts @@ -1,34 +1,25 @@ -import Vue from 'vue'; +import { ref } from 'vue'; import { deepAssign } from '../utils/deep-assign'; import defaultMessages from './lang/zh-CN'; -declare module 'vue' { - interface VueConstructor { - util: { - defineReactive(obj: object, key: string, value: any): void; - }; - } -} +type Messages = Record>; -const proto = Vue.prototype; -const { defineReactive } = Vue.util; - -defineReactive(proto, '$vantLang', 'zh-CN'); -defineReactive(proto, '$vantMessages', { +const lang = ref('zh-CN'); +const messages = ref({ 'zh-CN': defaultMessages, }); export default { messages() { - return proto.$vantMessages[proto.$vantLang]; + return messages.value[lang.value]; }, - use(lang: string, messages?: object) { - proto.$vantLang = lang; - this.add({ [lang]: messages }); + use(newLang: string, newMessages?: object) { + lang.value = newLang; + this.add({ [newLang]: newMessages }); }, - add(messages = {}) { - deepAssign(proto.$vantMessages, messages); + add(newMessages = {}) { + deepAssign(messages.value, newMessages); }, }; diff --git a/src/mixins/bind-event.js b/src/mixins/bind-event.js deleted file mode 100644 index a184f5afa..000000000 --- a/src/mixins/bind-event.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Bind event when mounted or activated - */ -import { on, off } from '../utils/dom/event'; - -let uid = 0; - -export function BindEventMixin(handler) { - const key = `binded_${uid++}`; - - function bind() { - if (!this[key]) { - handler.call(this, on, true); - this[key] = true; - } - } - - function unbind() { - if (this[key]) { - handler.call(this, off, false); - this[key] = false; - } - } - - return { - mounted: bind, - activated: bind, - deactivated: unbind, - beforeDestroy: unbind, - }; -} diff --git a/src-next/mixins/bind-event.ts b/src/mixins/bind-event.ts similarity index 100% rename from src-next/mixins/bind-event.ts rename to src/mixins/bind-event.ts diff --git a/src/mixins/popup/context.ts b/src/mixins/popup/context.ts index 6ab98f914..25b501a28 100644 --- a/src/mixins/popup/context.ts +++ b/src/mixins/popup/context.ts @@ -1,9 +1,6 @@ -import { OverlayConfig } from './overlay'; - export type StackItem = { vm: any; overlay: any; - config: OverlayConfig; }; export const context = { diff --git a/src/mixins/popup/index.js b/src/mixins/popup/index.js index c2c97d40b..0b0c7a43d 100644 --- a/src/mixins/popup/index.js +++ b/src/mixins/popup/index.js @@ -1,11 +1,5 @@ // Context import { context } from './context'; -import { - openOverlay, - closeOverlay, - updateOverlay, - removeOverlay, -} from './overlay'; // Utils import { on, off, preventDefault } from '../../utils/dom/event'; @@ -14,18 +8,19 @@ import { getScroller } from '../../utils/dom/scroll'; // Mixins import { TouchMixin } from '../touch'; -import { PortalMixin } from '../portal'; import { CloseOnPopstateMixin } from '../close-on-popstate'; export const popupMixinProps = { // whether to show popup - value: Boolean, + show: Boolean, // whether to show overlay overlay: Boolean, // overlay custom style overlayStyle: Object, // overlay custom class name overlayClass: String, + // teleport + getContainer: [String, Function], // whether to close popup when click overlay closeOnClickOverlay: Boolean, // z-index @@ -44,23 +39,13 @@ export const popupMixinProps = { export function PopupMixin(options = {}) { return { - mixins: [ - TouchMixin, - CloseOnPopstateMixin, - PortalMixin({ - afterPortal() { - if (this.overlay) { - updateOverlay(); - } - }, - }), - ], + mixins: [TouchMixin, CloseOnPopstateMixin], props: popupMixinProps, data() { return { - inited: this.value, + inited: this.show, }; }, @@ -71,9 +56,9 @@ export function PopupMixin(options = {}) { }, watch: { - value(val) { + show(val) { const type = val ? 'open' : 'close'; - this.inited = this.inited || this.value; + this.inited = this.inited || this.show; this[type](); if (!options.skipToggleEvent) { @@ -85,7 +70,7 @@ export function PopupMixin(options = {}) { }, mounted() { - if (this.value) { + if (this.show) { this.open(); } }, @@ -93,23 +78,22 @@ export function PopupMixin(options = {}) { /* istanbul ignore next */ activated() { if (this.shouldReopen) { - this.$emit('input', true); + this.$emit('update:show', true); this.shouldReopen = false; } }, beforeDestroy() { this.removeLock(); - removeOverlay(this); if (this.getContainer) { - removeNode(this.$el); + removeNode(this.$refs.root); } }, /* istanbul ignore next */ deactivated() { - if (this.value) { + if (this.show) { this.close(); this.shouldReopen = true; } @@ -161,16 +145,15 @@ export function PopupMixin(options = {}) { return; } - closeOverlay(this); this.opened = false; this.removeLock(); - this.$emit('input', false); + this.$emit('update:show', false); }, onTouchMove(event) { this.touchMove(event); const direction = this.deltaY > 0 ? '10' : '01'; - const el = getScroller(event.target, this.$el); + const el = getScroller(event.target, this.$refs.root); const { scrollHeight, offsetHeight, scrollTop } = el; let status = '11'; @@ -191,29 +174,32 @@ export function PopupMixin(options = {}) { } }, + onClickOverlay() { + this.$emit('click-overlay'); + + if (this.closeOnClickOverlay) { + // TODO + // if (this.onClickOverlay) { + // this.onClickOverlay(); + // } else { + // this.close(); + // } + this.close(); + } + }, + renderOverlay() { - if (this.$isServer || !this.value) { + if (this.$isServer || !this.show) { return; } this.$nextTick(() => { this.updateZIndex(this.overlay ? 1 : 0); - - if (this.overlay) { - openOverlay(this, { - zIndex: context.zIndex++, - duration: this.duration, - className: this.overlayClass, - customStyle: this.overlayStyle, - }); - } else { - closeOverlay(this); - } }); }, updateZIndex(value = 0) { - this.$el.style.zIndex = ++context.zIndex + value; + this.$refs.root.style.zIndex = ++context.zIndex + value; }, }, }; diff --git a/src/mixins/popup/overlay.ts b/src/mixins/popup/overlay.ts deleted file mode 100644 index 1d5d86f6a..000000000 --- a/src/mixins/popup/overlay.ts +++ /dev/null @@ -1,77 +0,0 @@ -import Overlay from '../../overlay'; -import { context } from './context'; -import { mount } from '../../utils/functional'; -import { removeNode } from '../../utils/dom/node'; - -export type OverlayConfig = { - zIndex?: number; - className?: string; - customStyle?: string | object[] | object; -}; - -const defaultConfig: OverlayConfig = { - className: '', - customStyle: {}, -}; - -function mountOverlay(vm: any) { - return mount(Overlay, { - on: { - // close popup when overlay clicked & closeOnClickOverlay is true - click() { - vm.$emit('click-overlay'); - - if (vm.closeOnClickOverlay) { - if (vm.onClickOverlay) { - vm.onClickOverlay(); - } else { - vm.close(); - } - } - }, - }, - }); -} - -export function updateOverlay(vm: any): void { - const item = context.find(vm); - - if (item) { - const el = vm.$el; - const { config, overlay } = item; - - if (el && el.parentNode) { - el.parentNode.insertBefore(overlay.$el, el); - } - - Object.assign(overlay, defaultConfig, config, { - show: true, - }); - } -} - -export function openOverlay(vm: any, config: OverlayConfig): void { - const item = context.find(vm); - if (item) { - item.config = config; - } else { - const overlay = mountOverlay(vm); - context.stack.push({ vm, config, overlay }); - } - - updateOverlay(vm); -} - -export function closeOverlay(vm: any): void { - const item = context.find(vm); - if (item) { - item.overlay.show = false; - } -} - -export function removeOverlay(vm: any) { - const item = context.find(vm); - if (item) { - removeNode(item.overlay.$el); - } -} diff --git a/src/mixins/portal.js b/src/mixins/portal.js deleted file mode 100644 index 3ed88ef2d..000000000 --- a/src/mixins/portal.js +++ /dev/null @@ -1,47 +0,0 @@ -function getElement(selector) { - if (typeof selector === 'string') { - return document.querySelector(selector); - } - - return selector(); -} - -export function PortalMixin({ ref, afterPortal }) { - return { - props: { - getContainer: [String, Function], - }, - - watch: { - getContainer: 'portal', - }, - - mounted() { - if (this.getContainer) { - this.portal(); - } - }, - - methods: { - portal() { - const { getContainer } = this; - const el = ref ? this.$refs[ref] : this.$el; - - let container; - if (getContainer) { - container = getElement(getContainer); - } else if (this.$parent) { - container = this.$parent.$el; - } - - if (container && container !== el.parentNode) { - container.appendChild(el); - } - - if (afterPortal) { - afterPortal.call(this); - } - }, - }, - }; -} diff --git a/src/mixins/relation.js b/src/mixins/relation.js index f6d503616..0e65df6b3 100644 --- a/src/mixins/relation.js +++ b/src/mixins/relation.js @@ -1,24 +1,16 @@ -import { sortChildren } from '../utils/vnodes'; - export function ChildrenMixin(parent, options = {}) { const indexKey = options.indexKey || 'index'; return { inject: { - [parent]: { + // TODO: disableBindRelation + parent: { + from: parent, default: null, }, }, computed: { - parent() { - if (this.disableBindRelation) { - return null; - } - - return this[parent]; - }, - [indexKey]() { this.bindRelation(); @@ -30,14 +22,6 @@ export function ChildrenMixin(parent, options = {}) { }, }, - watch: { - disableBindRelation(val) { - if (!val) { - this.bindRelation(); - } - }, - }, - mounted() { this.bindRelation(); }, @@ -58,8 +42,6 @@ export function ChildrenMixin(parent, options = {}) { const children = [...this.parent.children, this]; - sortChildren(children, this.parent); - this.parent.children = children; }, }, diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js index ab3ec7045..76b73d12f 100644 --- a/src/nav-bar/index.js +++ b/src/nav-bar/index.js @@ -22,6 +22,8 @@ export default createComponent({ }, }, + emits: ['click-left', 'click-right'], + data() { return { height: null, @@ -36,7 +38,7 @@ export default createComponent({ methods: { genLeft() { - const leftSlot = this.slots('left'); + const leftSlot = this.$slots.left?.(); if (leftSlot) { return leftSlot; @@ -49,7 +51,7 @@ export default createComponent({ }, genRight() { - const rightSlot = this.slots('right'); + const rightSlot = this.$slots.right?.(); if (rightSlot) { return rightSlot; @@ -71,7 +73,7 @@ export default createComponent({ {this.genLeft()}
- {this.slots('title') || this.title} + {this.$slots.title ? this.$slots.title() : this.title}
{this.genRight()} diff --git a/src-next/overlay/index.js b/src/overlay/index.js similarity index 100% rename from src-next/overlay/index.js rename to src/overlay/index.js diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx deleted file mode 100644 index 070d47942..000000000 --- a/src/overlay/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -// Utils -import { createNamespace, isDef, noop } from '../utils'; -import { inherit } from '../utils/functional'; -import { preventDefault } from '../utils/dom/event'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type OverlayProps = { - show?: boolean; - zIndex?: number | string; - duration: number | string | null; - className?: any; - lockScroll?: boolean; - customStyle?: object; -}; - -export type OverlayEvents = { - click(event: Event): void; -}; - -const [createComponent, bem] = createNamespace('overlay'); - -function preventTouchMove(event: TouchEvent) { - preventDefault(event, true); -} - -function Overlay( - h: CreateElement, - props: OverlayProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const style: { [key: string]: any } = { - zIndex: props.zIndex, - ...props.customStyle, - }; - - if (isDef(props.duration)) { - style.animationDuration = `${props.duration}s`; - } - - return ( - -
- {slots.default?.()} -
- - ); -} - -Overlay.props = { - show: Boolean, - zIndex: [Number, String], - duration: [Number, String], - className: null as any, - customStyle: Object, - lockScroll: { - type: Boolean, - default: true, - }, -}; - -export default createComponent(Overlay); diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue index ddeecf243..d579d6819 100644 --- a/src/pagination/demo/index.vue +++ b/src/pagination/demo/index.vue @@ -23,8 +23,8 @@ () => { @@ -143,7 +145,9 @@ export default createComponent({ ))} {simple && (
  • - {this.slots('pageDesc') || `${value}/${this.count}`} + {this.$slots.pageDesc + ? this.$slots.pageDesc() + : `${value}/${this.count}`}
    • )}
  • Show Popup -Content +Content ``` ```js @@ -39,21 +39,21 @@ export default { Use `position` prop to set popup display position ```html - + ``` ### Close Icon ```html + ``` ### Get Container @@ -81,13 +81,13 @@ Use `get-container` prop to specify mount location ```html - + - + - + ``` ```js @@ -108,7 +108,7 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| v-model (value) | Whether to show popup | _boolean_ | `false` | +| v-model:show | Whether to show popup | _boolean_ | `false` | | overlay | Whether to show overlay | _boolean_ | `true` | | position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` | | overlay-class | Custom overlay class | _string_ | - | diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 1ec9776c1..017d8628f 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -17,11 +17,11 @@ Vue.use(Popup); ### 基础用法 -通过`v-model`控制弹出层是否展示 +通过 `v-model:show` 控制弹出层是否展示 ```html 展示弹出层 -内容 +内容 ``` ```js @@ -45,7 +45,7 @@ export default { 通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right` ```html - + ``` ### 关闭图标 @@ -54,14 +54,14 @@ export default { ```html + ``` ### 指定挂载位置 @@ -91,13 +91,13 @@ export default { ```html - + - + - + ``` ```js @@ -119,7 +119,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| v-model (value) | 是否显示弹出层 | _boolean_ | `false` | +| v-model:show | 是否显示弹出层 | _boolean_ | `false` | | overlay | 是否显示遮罩层 | _boolean_ | `true` | | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` | | overlay-class | 自定义遮罩层类名 | _string_ | - | diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue index 3364f2301..c3260d820 100644 --- a/src/popup/demo/index.vue +++ b/src/popup/demo/index.vue @@ -2,7 +2,7 @@ - + {{ t('content') }} @@ -13,19 +13,23 @@ - + @@ -45,20 +49,20 @@ /> diff --git a/src/popup/index.js b/src/popup/index.js index 000db4b1f..c77cea282 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -1,12 +1,16 @@ -import { createNamespace, isDef } from '../utils'; +import { Teleport, Transition } from 'vue'; +import { createNamespace, isDef, isFunction } from '../utils'; import { PopupMixin } from '../mixins/popup'; import Icon from '../icon'; +import Overlay from '../overlay'; const [createComponent, bem] = createNamespace('popup'); export default createComponent({ mixins: [PopupMixin()], + inheritAttrs: false, + props: { round: Boolean, duration: [Number, String], @@ -35,6 +39,16 @@ export default createComponent({ }, }, + emits: [ + 'open', + 'close', + 'click', + 'opened', + 'closed', + 'update:show', + 'click-overlay', + ], + beforeCreate() { const createEmitter = (eventName) => (event) => this.$emit(eventName, event); @@ -44,52 +58,80 @@ export default createComponent({ this.onClosed = createEmitter('closed'); }, + methods: { + genOverlay() { + if (this.overlay) { + return ; + } + }, + + genPopup() { + const { round, position, duration } = this; + const isCenter = position === 'center'; + + const transitionName = + this.transition || + (isCenter ? 'van-fade' : `van-popup-slide-${position}`); + + const style = {}; + if (isDef(duration)) { + const key = isCenter ? 'animationDuration' : 'transitionDuration'; + style[key] = `${duration}s`; + } + + return ( + + {this.shouldRender ? ( +
    + {this.$slots.default?.()} + {this.closeable && ( + + )} +
    + ) : null} +     + ); + }, + }, + render() { - if (!this.shouldRender) { - return; - } - - const { round, position, duration } = this; - const isCenter = position === 'center'; - - const transitionName = - this.transition || - (isCenter ? 'van-fade' : `van-popup-slide-${position}`); - - const style = {}; - if (isDef(duration)) { - const key = isCenter ? 'animationDuration' : 'transitionDuration'; - style[key] = `${duration}s`; + const { getContainer } = this; + if (getContainer) { + const to = isFunction(getContainer) ? getContainer() : getContainer; + return ( + + {this.genOverlay()} + {this.genPopup()} + + ); } return ( - -
    - {this.slots()} - {this.closeable && ( - - )} -
    -     + <> + {this.genOverlay()} + {this.genPopup()} + ); }, }); diff --git a/src/popup/index.less b/src/popup/index.less index 9a9234ab7..88eec745b 100644 --- a/src/popup/index.less +++ b/src/popup/index.less @@ -82,22 +82,22 @@ transition-timing-function: ease-in; } - &-slide-top-enter, + &-slide-top-enter-from, &-slide-top-leave-active { transform: translate3d(0, -100%, 0); } - &-slide-right-enter, + &-slide-right-enter-from, &-slide-right-leave-active { transform: translate3d(100%, -50%, 0); } - &-slide-bottom-enter, + &-slide-bottom-enter-from, &-slide-bottom-leave-active { transform: translate3d(0, 100%, 0); } - &-slide-left-enter, + &-slide-left-enter-from, &-slide-left-leave-active { transform: translate3d(-100%, -50%, 0); } diff --git a/src/rate/index.js b/src/rate/index.js index cdef5b880..8c366f581 100644 --- a/src/rate/index.js +++ b/src/rate/index.js @@ -36,7 +36,7 @@ export default createComponent({ voidColor: String, iconPrefix: String, disabledColor: String, - value: { + modelValue: { type: Number, default: 0, }, @@ -58,11 +58,15 @@ export default createComponent({ }, }, + created() { + this.itemRefs = []; + }, + computed: { list() { const list = []; for (let i = 1; i <= this.count; i++) { - list.push(getRateStatus(this.value, i, this.allowHalf)); + list.push(getRateStatus(this.modelValue, i, this.allowHalf)); } return list; @@ -83,8 +87,8 @@ export default createComponent({ methods: { select(index) { - if (!this.disabled && !this.readonly && index !== this.value) { - this.$emit('input', index); + if (!this.disabled && !this.readonly && index !== this.modelValue) { + this.$emit('update:modelValue', index); this.$emit('change', index); } }, @@ -96,9 +100,7 @@ export default createComponent({ this.touchStart(event); - const rects = this.$refs.items.map((item) => - item.getBoundingClientRect() - ); + const rects = this.itemRefs.map((item) => item.getBoundingClientRect()); const ranges = []; rects.forEach((rect, index) => { @@ -161,9 +163,10 @@ export default createComponent({ return (
    { + this.itemRefs[index] = val; + }} role="radio" style={style} tabindex="0" diff --git a/src/row/index.js b/src/row/index.js index b875976e4..b111023df 100644 --- a/src/row/index.js +++ b/src/row/index.js @@ -20,6 +20,8 @@ export default createComponent({ }, }, + emits: ['click'], + computed: { spaces() { const gutter = Number(this.gutter); @@ -80,7 +82,7 @@ export default createComponent({ })} onClick={this.onClick} > - {this.slots()} + {this.$slots.default?.()} ); }, diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js index 41a64767b..9b594b5a1 100644 --- a/src/sidebar-item/index.js +++ b/src/sidebar-item/index.js @@ -1,4 +1,4 @@ -import { createNamespace, isDef } from '../utils'; +import { createNamespace } from '../utils'; import { ChildrenMixin } from '../mixins/relation'; import { route, routeProps } from '../utils/router'; import Info from '../info'; @@ -8,10 +8,11 @@ const [createComponent, bem] = createNamespace('sidebar-item'); export default createComponent({ mixins: [ChildrenMixin('vanSidebar')], + emits: ['click'], + props: { ...routeProps, dot: Boolean, - info: [Number, String], badge: [Number, String], title: String, disabled: Boolean, @@ -19,7 +20,7 @@ export default createComponent({ computed: { select() { - return this.index === +this.parent.activeKey; + return this.index === +this.parent.modelValue; }, }, @@ -30,7 +31,7 @@ export default createComponent({ } this.$emit('click', this.index); - this.parent.$emit('input', this.index); + this.parent.$emit('update:modelValue', this.index); this.parent.setIndex(this.index); route(this.$router, this); }, @@ -44,11 +45,7 @@ export default createComponent({ >
    {this.title} - +
    ); diff --git a/src/sidebar/index.js b/src/sidebar/index.js index 2485dac6e..8043cc33f 100644 --- a/src/sidebar/index.js +++ b/src/sidebar/index.js @@ -6,12 +6,10 @@ const [createComponent, bem] = createNamespace('sidebar'); export default createComponent({ mixins: [ParentMixin('vanSidebar')], - model: { - prop: 'activeKey', - }, + emits: ['change', 'update:modelValue'], props: { - activeKey: { + modelValue: { type: [Number, String], default: 0, }, @@ -19,13 +17,13 @@ export default createComponent({ data() { return { - index: +this.activeKey, + index: +this.modelValue, }; }, watch: { - activeKey() { - this.setIndex(+this.activeKey); + modelValue() { + this.setIndex(+this.modelValue); }, }, @@ -39,6 +37,6 @@ export default createComponent({ }, render() { - return
    {this.slots()}
    ; + return
    {this.$slots.default?.()}
    ; }, }); diff --git a/src-next/skeleton/index.js b/src/skeleton/index.js similarity index 100% rename from src-next/skeleton/index.js rename to src/skeleton/index.js diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx deleted file mode 100644 index fa68231d8..000000000 --- a/src/skeleton/index.tsx +++ /dev/null @@ -1,129 +0,0 @@ -// Utils -import { createNamespace, addUnit } from '../utils'; -import { inherit } from '../utils/functional'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type SkeletonProps = { - row: number | string; - title?: boolean; - round?: boolean; - avatar?: boolean; - loading: boolean; - animate: boolean; - avatarSize: string; - avatarShape: 'square' | 'round'; - titleWidth: number | string; - rowWidth: number | string | (number | string)[]; -}; - -const [createComponent, bem] = createNamespace('skeleton'); -const DEFAULT_ROW_WIDTH = '100%'; -const DEFAULT_LAST_ROW_WIDTH = '60%'; - -function Skeleton( - h: CreateElement, - props: SkeletonProps, - slots: DefaultSlots, - ctx: RenderContext -) { - if (!props.loading) { - return slots.default && slots.default(); - } - - function Title() { - if (props.title) { - return ( -

    - ); - } - } - - function Rows() { - const Rows = []; - const { rowWidth } = props; - - function getRowWidth(index: number) { - if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1) { - return DEFAULT_LAST_ROW_WIDTH; - } - - if (Array.isArray(rowWidth)) { - return rowWidth[index]; - } - - return rowWidth; - } - - for (let i = 0; i < props.row; i++) { - Rows.push( -
    - ); - } - - return Rows; - } - - function Avatar() { - if (props.avatar) { - const size = addUnit(props.avatarSize); - return ( -
    - ); - } - } - - return ( -
    - {Avatar()} -
    - {Title()} - {Rows()} -
    -
    - ); -} - -Skeleton.props = { - title: Boolean, - round: Boolean, - avatar: Boolean, - row: { - type: [Number, String], - default: 0, - }, - loading: { - type: Boolean, - default: true, - }, - animate: { - type: Boolean, - default: true, - }, - avatarSize: { - type: String, - default: '32px', - }, - avatarShape: { - type: String, - default: 'round', - }, - titleWidth: { - type: [Number, String], - default: '40%', - }, - rowWidth: { - type: [Number, String, Array], - default: DEFAULT_ROW_WIDTH, - }, -}; - -export default createComponent(Skeleton); diff --git a/src/slider/index.js b/src/slider/index.js index d04f19605..eca993618 100644 --- a/src/slider/index.js +++ b/src/slider/index.js @@ -27,12 +27,14 @@ export default createComponent({ type: [Number, String], default: 1, }, - value: { + modelValue: { type: Number, default: 0, }, }, + emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'], + data() { return { dragStatus: '', @@ -57,7 +59,7 @@ export default createComponent({ created() { // format initial value - this.updateValue(this.value); + this.updateValue(this.modelValue); }, mounted() { @@ -71,7 +73,7 @@ export default createComponent({ } this.touchStart(event); - this.startValue = this.format(this.value); + this.startValue = this.format(this.modelValue); this.dragStatus = 'start'; }, @@ -122,15 +124,15 @@ export default createComponent({ const total = this.vertical ? rect.height : rect.width; const value = +this.min + (delta / total) * this.range; - this.startValue = this.value; + this.startValue = this.modelValue; this.updateValue(value, true); }, updateValue(value, end) { value = this.format(value); - if (value !== this.value) { - this.$emit('input', value); + if (value !== this.modelValue) { + this.$emit('update:modelValue', value); } if (end && value !== this.startValue) { @@ -157,7 +159,7 @@ export default createComponent({ }; const barStyle = { - [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`, + [mainAxis]: `${((this.modelValue - this.min) * 100) / this.range}%`, background: this.activeColor, }; @@ -177,12 +179,14 @@ export default createComponent({ role="slider" tabindex={this.disabled ? -1 : 0} aria-valuemin={this.min} - aria-valuenow={this.value} + aria-valuenow={this.modelValue} aria-valuemax={this.max} aria-orientation={this.vertical ? 'vertical' : 'horizontal'} class={bem('button-wrapper')} > - {this.slots('button') || ( + {this.$slots.button ? ( + this.$slots.button() + ) : (
    )}
    diff --git a/src/step/index.js b/src/step/index.js index 80a6d757a..0e3390561 100644 --- a/src/step/index.js +++ b/src/step/index.js @@ -44,22 +44,22 @@ export default createComponent({ const { activeIcon, activeColor, inactiveIcon } = this.parent; if (this.active) { - return ( - this.slots('active-icon') || ( - - ) + return this.$slots['active-icon'] ? ( + this.$slots['active-icon']() + ) : ( + ); } - const inactiveIconSlot = this.slots('inactive-icon'); - - if (inactiveIcon || inactiveIconSlot) { - return ( - inactiveIconSlot || + if (inactiveIcon || this.$slots['inactive-icon']) { + return this.$slots['inactive-icon'] ? ( + this.$slots['inactive-icon']() + ) : ( + ); } @@ -82,7 +82,7 @@ export default createComponent({ style={this.titleStyle} onClick={this.onClickStep} > - {this.slots()} + {this.$slots.default?.()}
    {this.genCircle()} diff --git a/src/steps/index.js b/src/steps/index.js index 730fa96eb..3e17de6ce 100644 --- a/src/steps/index.js +++ b/src/steps/index.js @@ -24,10 +24,12 @@ export default createComponent({ }, }, + emits: ['click-step'], + render() { return (
    -
    {this.slots()}
    +
    {this.$slots.default?.()}
    ); }, diff --git a/src/swipe-cell/index.js b/src/swipe-cell/index.js index ede8c0169..b7a31aab3 100644 --- a/src/swipe-cell/index.js +++ b/src/swipe-cell/index.js @@ -195,7 +195,7 @@ export default createComponent({ }, genLeftPart() { - const content = this.slots('left'); + const content = this.$slots.left?.(); if (content) { return ( @@ -211,7 +211,7 @@ export default createComponent({ }, genRightPart() { - const content = this.slots('right'); + const content = this.$slots.right?.(); if (content) { return ( @@ -237,7 +237,7 @@ export default createComponent({
    {this.genLeftPart()} - {this.slots()} + {this.$slots.default?.()} {this.genRightPart()}
    diff --git a/src/switch/README.md b/src/switch/README.md index 7c88719c0..8b75c4411 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -54,7 +54,7 @@ export default { ### Async Control ```html - + ``` ```js @@ -65,7 +65,7 @@ export default { }; }, methods: { - onInput(checked) { + onUpdateValue(checked) { Dialog.confirm({ title: 'Confirm', message: 'Are you sure to toggle switch?', diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md index 1173a06ec..134658066 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -63,10 +63,10 @@ export default { ### 异步控制 -需要异步控制开关时，可以使用`value`属性和`input`事件代替`v-model`，并在`input`事件回调函数中手动处理开关状态 +需要异步控制开关时，可以使用 `modelValue` 属性和 `update:model-value` 事件代替 `v-model`，并在事件回调函数中手动处理开关状态。 ```html - + ``` ```js @@ -77,7 +77,7 @@ export default { }; }, methods: { - onInput(checked) { + onUpdateValue(checked) { Dialog.confirm({ title: '提醒', message: '是否切换开关？', diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue index 686676ab9..51d4ab39f 100644 --- a/src/switch/demo/index.vue +++ b/src/switch/demo/index.vue @@ -25,12 +25,14 @@ - + - + diff --git a/src/switch/index.js b/src/switch/index.js index a705ef5dd..334e42fe7 100644 --- a/src/switch/index.js +++ b/src/switch/index.js @@ -15,9 +15,11 @@ export default createComponent({ props: switchProps, + emits: ['click', 'change', 'update:modelValue'], + computed: { checked() { - return this.value === this.activeValue; + return this.modelValue === this.activeValue; }, style() { @@ -34,7 +36,7 @@ export default createComponent({ if (!this.disabled && !this.loading) { const newValue = this.checked ? this.inactiveValue : this.activeValue; - this.$emit('input', newValue); + this.$emit('update:modelValue', newValue); this.$emit('change', newValue); } }, diff --git a/src/switch/shared.ts b/src/switch/shared.ts index 0b4c269d0..fd77d663b 100644 --- a/src/switch/shared.ts +++ b/src/switch/shared.ts @@ -4,9 +4,9 @@ export type SharedSwitchProps = { size?: string | number; - value?: any; loading?: boolean; disabled?: boolean; + modelValue?: any; activeValue: any; inactiveValue: any; activeColor?: string; @@ -15,9 +15,9 @@ export type SharedSwitchProps = { export const switchProps = { size: [Number, String], - value: null as any, loading: Boolean, disabled: Boolean, + modelValue: null as any, activeColor: String, inactiveColor: String, activeValue: { diff --git a/src-next/tag/index.js b/src/tag/index.js similarity index 100% rename from src-next/tag/index.js rename to src/tag/index.js diff --git a/src/tag/index.tsx b/src/tag/index.tsx deleted file mode 100644 index 7c0dcd604..000000000 --- a/src/tag/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -// Utils -import { createNamespace } from '../utils'; -import { inherit, emit } from '../utils/functional'; -import { BORDER_SURROUND } from '../utils/constant'; - -// Components -import Icon from '../icon'; - -// Types -import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; - -export type TagType = 'default' | 'primary' | 'success' | 'danger'; - -export type TagSize = 'large' | 'medium'; - -export type TagProps = { - type: TagType; - size?: TagSize; - mark?: boolean; - color?: string; - plain?: boolean; - round?: boolean; - textColor?: string; - closeable?: boolean; -}; - -const [createComponent, bem] = createNamespace('tag'); - -function Tag( - h: CreateElement, - props: TagProps, - slots: DefaultSlots, - ctx: RenderContext -) { - const { type, mark, plain, color, round, size } = props; - - const key = plain ? 'color' : 'backgroundColor'; - const style = { [key]: color }; - - if (props.textColor) { - style.color = props.textColor; - } - - const classes: { [key: string]: any } = { mark, plain, round }; - if (size) { - classes[size] = size; - } - - const CloseIcon = props.closeable && ( - { - event.stopPropagation(); - emit(ctx, 'close'); - }} - /> - ); - - return ( - - - {slots.default?.()} - {CloseIcon} - - - ); -} - -Tag.props = { - size: String, - mark: Boolean, - color: String, - plain: Boolean, - round: Boolean, - textColor: String, - closeable: Boolean, - type: { - type: String, - default: 'default', - }, -}; - -export default createComponent(Tag); diff --git a/src/tree-select/README.md b/src/tree-select/README.md index b4d311a0c..e49f49298 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -15,9 +15,9 @@ Vue.use(TreeSelect); ```html ``` @@ -37,9 +37,9 @@ export default { ```html ``` @@ -58,7 +58,7 @@ export default { ### Custom Content ```html - +