3 |
4 |
7 |
8 |
9 |
10 |
20 |
--------------------------------------------------------------------------------
/packages/docs/README.md:
--------------------------------------------------------------------------------
1 | # docs
2 |
3 | > My brilliant Nuxt.js project
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | $ yarn install
10 |
11 | # serve with hot reload at localhost:3000
12 | $ yarn run dev
13 |
14 | # build for production and launch server
15 | $ yarn run build
16 | $ yarn start
17 |
18 | # generate static project
19 | $ yarn run generate
20 | ```
21 |
22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
23 |
--------------------------------------------------------------------------------
/packages/docs/store/index.ts:
--------------------------------------------------------------------------------
1 | // import { Store } from 'vuex'
2 |
3 | type Theme = 'light' | 'dark'
4 |
5 | export const state = () => ({
6 | locales: ['en', 'zh-cn'],
7 | locale: 'en',
8 | theme: 'light',
9 | })
10 |
11 | export const mutations = {
12 | SET_LANG(state, locale: string): void {
13 | if (state.locales.includes(locale)) {
14 | state.locale = locale
15 | }
16 | },
17 |
18 | SET_THEME(state, theme: Theme): void {
19 | state.theme = theme
20 | },
21 | }
22 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WTopTips/__test__/__snapshots__/WTopTips.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`top-tips component create 1`] = ``;
4 |
5 | exports[`top-tips component should render message correctlly 1`] = `
6 | test
8 |
3 |
5 |
6 |
7 |
14 |
15 |
28 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/toggleable/__test__/toggleable.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount, Wrapper } from '@vue/test-utils'
2 | import Tggleable from '@/mixins/toggleable'
3 |
4 | describe('toggleable mixin', () => {
5 | type ToggleableInstance = InstanceType{{ error.statusCode }}
4 |
5 |
6 |
16 | `;
17 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/input.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 | @import "./cell";
3 |
4 | .weui-input {
5 | width: 100%;
6 | height: $weui-cell-line-height + em;
7 | color: inherit;
8 | font-size: inherit;
9 | line-height: $weui-cell-line-height;
10 | background-color: transparent;
11 | border: 0;
12 | outline: 0;
13 | -webkit-appearance: none;
14 |
15 | // hides the spin-button
16 | &::-webkit-outer-spin-button,
17 | &::-webkit-inner-spin-button {
18 | margin: 0;
19 | -webkit-appearance: none;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WPanel/__test__/__snapshots__/WPanel.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`panel create 1`] = `
4 |
7 |
8 |
9 |
10 |
15 |
11 |
12 |
13 |
14 |
5 |
6 |
7 |
8 | `;
9 |
10 | exports[`panel render with title 1`] = `
11 |
12 |
16 | `;
17 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WProgress/__test__/__snapshots__/WProgress.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`progress create 1`] = `
4 | test-title
13 |
14 |
15 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/.idea/runConfigurations/we_vue.xml:
--------------------------------------------------------------------------------
1 |
5 |
7 | `;
8 |
9 | exports[`loadmore text 1`] = `
10 |
11 |
13 | `;
14 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/routable/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | export default Vue.extend({
4 | name: 'routable',
5 |
6 | props: {
7 | href: String,
8 | replace: Boolean,
9 | to: [String, Object],
10 | },
11 |
12 | methods: {
13 | routeLink () {
14 | const { to, href, $router, replace } = this as any
15 | if (to && $router) {
16 | $router[replace ? 'replace' : 'push'](to)
17 | } else if (href) {
18 | replace ? location.replace(href) : location.href = href
19 | }
20 | },
21 | },
22 | })
23 |
--------------------------------------------------------------------------------
/packages/we-vue/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import { getTouch } from './touches'
3 |
4 | const isServer: boolean = Vue.prototype.$isServer
5 |
6 | /**
7 | * whether the value is defined
8 | * @param v
9 | */
10 | function isDef (v: any): boolean {
11 | return v !== undefined && v !== null
12 | }
13 |
14 | /**
15 | * whether the value is a type of object
16 | * @param v
17 | */
18 | function isObj (v: any): boolean {
19 | const type = typeof v
20 | return v !== null && (type === 'object' || type === 'function')
21 | }
22 |
23 | export { isServer, getTouch, isDef, isObj }
24 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/find-parent/__test__/find-parent.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount, Wrapper } from '@vue/test-utils'
2 | import FindParentMixin from '@/mixins/find-parent'
3 |
4 | describe('mixins/find-parent', () => {
5 | type MockWrapper = Wrapper
3 |
6 |
7 |
8 |
33 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WSwipeCellButton/WSwipeCellButton.ts:
--------------------------------------------------------------------------------
1 | import '@/scss/cell-swipe-button.scss'
2 |
3 | import Vue from 'vue'
4 | import { VNode } from 'vue/types/vnode'
5 |
6 | export default Vue.extend({
7 | name: 'w-cell-swipe-button',
8 |
9 | props: {
10 | type: {
11 | type: String,
12 | default: 'default',
13 | },
14 | },
15 |
16 | render (h): VNode {
17 | const classes = [
18 | 'weui-swiped-btn',
19 | 'weui-swiped-btn_' + this.type,
20 | ]
21 |
22 | return h('div', {
23 | class: classes,
24 | }, [
25 | this.$slots.default,
26 | ])
27 | },
28 | })
29 |
--------------------------------------------------------------------------------
/packages/we-vue/src/index.ts:
--------------------------------------------------------------------------------
1 | // Styles
2 | import './scss/index.scss'
3 |
4 | import * as components from './components'
5 | import * as directives from './directives'
6 | import * as plugins from './plugins'
7 |
8 | import { install } from './install'
9 |
10 | export default class WeVue {
11 | static version = __WE_VUE_VERSION__
12 |
13 | // @ts-ignore
14 | static install = (Vue, args) => {
15 | install.call(WeVue, Vue, {
16 | components,
17 | directives,
18 | plugins,
19 | ...args,
20 | })
21 | }
22 | }
23 |
24 | if (typeof window !== 'undefined' && window.Vue) {
25 | window.Vue.use(WeVue)
26 | }
27 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/radio.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 | @import "./icon";
3 |
4 | .weui-check__label {
5 | @include setTapColor();
6 |
7 | &:active {
8 | background-color: #ececec;
9 | }
10 | }
11 |
12 | // method2 accessbility
13 | .weui-cells_radio {
14 | .weui-cell__ft {
15 | padding-left: $weui-cell-inner-gap-h;
16 |
17 | .weui-icon-checked {
18 | &::before {
19 | display: block;
20 | color: #09bb07;
21 | font-size: 16px;
22 | content: "\EA08";
23 | }
24 | }
25 | }
26 | }
27 |
28 | .weui-check__label-disabled {
29 | background-color: rgba(0, 0, 0, 0.1);
30 | }
31 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WSwipeCell/__test__/__snapshots__/WSwipeCell.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`cell-swipe create 1`] = `
4 |
5 |
13 | `;
14 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WMediaBox/__test__/__snapshots__/WMediaBox.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`media-box create 1`] = `
4 |
6 |
8 |
9 |
12 | test
10 | test
11 |
5 | ![]()
6 |
11 | `;
12 |
13 | exports[`media-box create 2`] = `
14 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
18 | `;
19 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WFooter/__test__/__snapshots__/WFooter.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`footer create 1`] = `
4 |
7 | `;
8 |
9 | exports[`footer render with links 1`] = `
10 |
17 | `;
18 |
19 | exports[`footer text 1`] = `
20 |
23 | `;
24 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WHeader/__test__/__snapshots__/WHeader.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`header create 1`] = `
4 |
14 | {
15 | this.title &&
16 |
20 | }
21 |
28 | )
29 | },
30 | })
31 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WBadge/WBadge.tsx:
--------------------------------------------------------------------------------
1 | import '@/scss/badge.scss'
2 | import Vue, { VNode } from 'vue'
3 |
4 | export default Vue.extend({
5 | name: 'w-badge',
6 |
7 | functional: true,
8 |
9 | props: {
10 | color: String,
11 | isDot: Boolean,
12 | },
13 |
14 | render (h, context): VNode {
15 | const style = {
16 | backgroundColor: context.props.color,
17 | }
18 |
19 | return (
20 |
28 | { !context.props.isDot && context.children }
29 |
30 | )
31 | },
32 | })
33 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v3/badge.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Badge
3 | keywords: 'we-vue, badge'
4 | description: ''
5 | demo_url: //demo.wevue.org/badge
6 | ---
7 |
8 | Badge
9 |
10 | 小徽章。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Badge } from 'we-vue'
16 |
17 | Vue.use(Badge)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 基本使用
23 |
24 | ```html
25 |
22 | {this.$slots.default}
23 |
24 |
25 | {this.$slots.ft}
26 |
27 |
17 | {
18 | context.props.title &&
19 |
24 | }
25 |
29 | )
30 | },
31 | })
32 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WSearchBar/__test__/__snapshots__/WSearchBar.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`search create 1`] = `
4 |
26 | {context.children}
27 |
28 |
5 |
13 |
14 |
15 | `;
16 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WLoadmore/__test__/WLoadmore.spec.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | import Loadmore from '../'
3 |
4 | describe('loadmore', () => {
5 | test('create', () => {
6 | const wrapper = shallowMount(Loadmore, {
7 | propsData: {},
8 | })
9 |
10 | expect(wrapper.name()).toBe('w-loadmore')
11 | expect(wrapper.classes()).toContain('weui-loadmore')
12 | expect(wrapper.html()).toMatchSnapshot()
13 | })
14 |
15 | test('text', () => {
16 | const wrapper = shallowMount(Loadmore, {
17 | propsData: {
18 | text: 'test',
19 | },
20 | })
21 |
22 | expect(wrapper.find('.weui-loadmore__tips').text()).toBe('test')
23 | expect(wrapper.html()).toMatchSnapshot()
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/packages/demo/tests/e2e/support/index.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 |
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v2/badge.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Badge
3 | keywords: 'we-vue, badge'
4 | description: ''
5 | demo_url: //demo.wevue.org/badge
6 | ---
7 |
8 | Badge
9 |
10 | 小徽章，支持不同颜色，包含小红点状态。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Badge } from 'we-vue'
16 |
17 | Vue.use(Badge)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 基本使用
23 |
24 | ```html
25 |
5 |
9 | `;
10 |
11 | exports[`textarea show counter 1`] = `
12 |
6 |
8 | 0/100
7 |
13 |
17 | `;
18 |
19 | exports[`textarea show counter 2`] = `
20 |
14 |
16 | 0/100
15 |
21 |
22 |
23 | `;
24 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WActionsheet/__test__/__snapshots__/WActionsheet.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`actionsheet create 1`] = `
4 |
5 |
6 |
12 |
13 | `;
14 |
15 | exports[`actionsheet create 2`] = `
16 |
22 | `;
23 |
--------------------------------------------------------------------------------
/packages/demo/src/views/icons.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
15 |
16 |
17 |
18 |
19 |
39 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v3/icon.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Icon
3 | keywords: 'we-vue, icon'
4 | description: ''
5 | demo_url: //demo.wevue.org/icon
6 | ---
7 |
8 | Icon
9 |
10 | 图标。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Icon } from 'we-vue'
16 |
17 | Vue.use(Icon)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 大图标
23 |
24 | ```html
25 |
3 |
4 |
11 |
12 |
13 |
20 |
21 |
22 |
28 |
29 |
30 |
31 |
41 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v2/icon.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Icon
3 | keywords: 'we-vue, icon'
4 | description: ''
5 | demo_url: //demo.wevue.org/icon
6 | ---
7 |
8 | Icon
9 |
10 | 图标。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Icon } from 'we-vue'
16 |
17 | Vue.use(Icon)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 大图标
23 |
24 | ```html
25 |
5 |
6 |
11 | `;
12 |
13 | exports[`cell handle click 1`] = `
14 |
7 |
8 |
9 |
10 |
15 |
16 |
21 | `;
22 |
23 | exports[`cell is-link 1`] = `
24 |
17 |
18 |
19 |
20 |
25 |
26 |
31 | `;
32 |
--------------------------------------------------------------------------------
/packages/we-vue/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { Component, DirectiveOptions, PluginFunction } from 'vue'
2 |
3 | import './lib'
4 |
5 | declare const WeVue: WeVue
6 | export default WeVue
7 | export interface WeVue {
8 | install: PluginFunction
27 |
28 |
29 |
30 |
3 |
12 |
13 |
14 |
24 |
25 |
42 |
--------------------------------------------------------------------------------
/packages/demo/src/views/top-tips.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | switch 支持左右滑动和点击进行开关操作
5 |
6 |
7 |
8 |
11 |
3 | 显示提示 (3S)
7 | 关闭提示
11 |
12 |
13 |
14 |
38 |
39 |
44 |
--------------------------------------------------------------------------------
/packages/demo/src/views/radio.vue:
--------------------------------------------------------------------------------
1 |
2 | { this.onClick() }}
33 | >
34 | {this.$slots.icon}
35 |
38 |
39 | )
40 | },
41 | })
42 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WCircle/__test__/__snapshots__/WCircle.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`circle create 1`] = `
4 |
12 | `;
13 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WTabbar/__test__/WTabbar.spec.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | import Tabbar from '../'
3 |
4 | describe('tabbar', () => {
5 | test('create', () => {
6 | const wrapper = shallowMount(Tabbar, {
7 | propsData: {},
8 | })
9 |
10 | expect(wrapper.name()).toBe('w-tabbar')
11 | expect(wrapper.classes()).toContain('weui-tabbar')
12 |
13 | expect(wrapper.html()).toMatchSnapshot()
14 | })
15 |
16 | test('fixed tabbar', () => {
17 | // is not fixed by default
18 | let wrapper = shallowMount(Tabbar, {
19 | propsData: {},
20 | })
21 |
22 | expect(wrapper.element.style.position).toBe('absolute')
23 |
24 | wrapper = shallowMount(Tabbar, {
25 | propsData: {
26 | fixed: true,
27 | },
28 | })
29 |
30 | expect(wrapper.element.style.position).toBe('fixed')
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/packages/docs/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ HEAD }}
5 |
17 |
18 |
24 |
25 |
26 | {{ APP }}
27 |
28 |
29 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # WE-VUE 贡献指南
2 |
3 | 首先，欢迎你使用 WE-VUE！
4 |
5 | WE-VUE 使用 Vue.js 将 weui.css 这一套微信官方视觉样式封装成了简单易用的组件，适合微信等移动端开发。
6 |
7 | WE-VUE 仍然在不断地丰富和完善中，它的进步需要大家的支持和参与，非常欢迎具有开源、分享精神的各路大佬贡献代码或提出宝贵建议，主了保证代码质量并方便维护，请在开始之前请阅读以下内容。
8 |
9 | ## Issue 规范
10 |
11 | - issue 仅用于提交 Bug 或 Feature，其它内容可能会被直接关闭。
12 |
13 | - 在提交 issue 之前，请搜索相关内容是否已被提出。
14 |
15 | - 请说明 WE-VUE 的版本号，并提供操作系统和浏览器信息。
16 |
17 | - 尽可能详细、明确地说明问题，为此可粘贴截图或相关代码片段，以便重现所提到的问题。
18 |
19 | ## Pull Request 规范
20 |
21 | - fork。
22 |
23 | - 本项目使用的严格的代码风格规范检查，以保证统一的风格和代码质量，请确保提交的代码遵守这些规范并能通过 Eslint 检查.
24 |
25 | - 如果是修复 Bug，请在 PR 中给出描述信息。
26 |
27 | - 对于新增功能，请附上说明，能加上相关的单元测试及文档更好。
28 |
29 | ## 代码规范
30 |
31 | - [JavaScript Standard Style](https://standardjs.com/)
32 | - [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)
33 |
34 | 对于 eslint-plugin-vue 所检查的规则，请参阅其文档，同时也建议阅读 Vue.js 的[官方风格指南](https://cn.vuejs.org/v2/style-guide/)。
35 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v3/progress.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Progress
3 | keywords: 'we-vue, progress'
4 | description: ''
5 | demo_url: //demo.wevue.org/progress
6 | ---
7 |
8 | Progress
9 |
10 | 进度条。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Progress } from 'we-vue'
16 |
17 | Vue.use(Progress)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 默认
23 |
24 | ```html
25 |
6 | * ```
7 | */
8 |
9 | import { VNodeDirective } from 'vue/types/vnode'
10 |
11 | interface ClickOutsideDirective extends VNodeDirective{
12 | value?: (e: Event) => void
13 | }
14 |
15 | export default {
16 | inserted (el: HTMLElement, binding: ClickOutsideDirective) {
17 | el._clickOutside = (e: Event) => {
18 | if (!el.contains(e.target as HTMLElement)) {
19 | binding.value!(e)
20 | }
21 | }
22 | document.body.addEventListener('click', el._clickOutside, true)
23 | },
24 |
25 | unbind (el: HTMLElement) {
26 | /* istanbul ignore next */
27 | if (!el._clickOutside) {
28 | return
29 | }
30 |
31 | document.body.removeEventListener('click', el._clickOutside, true)
32 | delete el._clickOutside
33 | },
34 | }
35 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v3/switch.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Switch
3 | keywords: 'we-vue, switch'
4 | description: ''
5 | demo_url: //demo.wevue.org/switch
6 | ---
7 |
8 | Switch
9 |
10 | 开关。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Switch } from 'we-vue'
16 |
17 | Vue.use(Switch)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 默认
23 |
24 | ```html
25 | ,
15 | },
16 |
17 | render () {
18 | const footerLinks = this.links.map(item => (
19 | window
19 |
20 | /* istanbul ignore next */
21 | const iRaf = root.requestAnimationFrame || root.webkitRequestAnimationFrame || fallback
22 |
23 | /* istanbul ignore next */
24 | const iCancel = root.cancelAnimationFrame || root.webkitCancelAnimationFrame || root.clearTimeout
25 |
26 | export function raf (fn: FrameRequestCallback): number {
27 | return iRaf.call(root, fn)
28 | }
29 |
30 | export function cancel (id: number) {
31 | iCancel.call(root, id)
32 | }
33 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/mixin/setArrow.scss:
--------------------------------------------------------------------------------
1 | @mixin setArrow($direction, $arrowsize, $borderColor, $borderWidth) {
2 | display: inline-block;
3 | width: $arrowsize;
4 | height: $arrowsize;
5 | border-color: $borderColor;
6 | border-style: solid;
7 | border-width: $borderWidth $borderWidth 0 0;
8 |
9 | @if $direction == up {
10 | transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
11 | }
12 |
13 | @else if $direction == right {
14 | position: relative;
15 | top: -2px;
16 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
17 | }
18 |
19 | @else if $direction == down {
20 | position: relative;
21 | top: -3px;
22 | transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
23 | }
24 |
25 | @else if $direction == left {
26 | position: relative;
27 | top: -2px;
28 | transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/docs/add-frontmatter.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const fs = require('fs-extra')
3 | const matter = require('gray-matter')
4 | const prependFile = require('prepend-file')
5 | const changeCase = require('change-case')
6 |
7 | const list = fs.readdirSync(path.resolve(__dirname, 'markdown/v3'))
8 |
9 | const posts = list.filter(item => item.endsWith('.md')).map(item => item.replace('.md', ''))
10 |
11 | posts.forEach(post => {
12 | const title = changeCase.pascalCase(post.replace(/-/g, ' '))
13 |
14 | const frontmatterData = {
15 | title,
16 | keywords: `we-vue, ${post}`,
17 | description: '',
18 | demo_url: `//demo.wevue.org/${post}`,
19 | // categories: ['2_WE-VUE 组件', '1_基础组件'],
20 | // sort: 1,
21 | }
22 |
23 | const mdContent = matter.stringify('', frontmatterData)
24 |
25 | prependFile(`markdown/v3/${post}.md`, mdContent, error => {
26 | console.log(error)
27 | })
28 |
29 | console.log(post, title)
30 | })
31 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v3/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Index
3 | keywords: 'we-vue, index'
4 | description: ''
5 | demo_url: //demo.wevue.org/
6 | ---
7 |
8 | 文档
9 |
10 | 欢迎使用 we-vue！
11 |
12 | :::danger
13 | 右侧示例仅针对最新版本，其中部分涉及滑动、拖拽操作的示例请在触屏设备上预览，或使用浏览器模拟触屏设置进行查看。
14 | :::
15 |
16 | ## 安装
17 |
18 | ```bash
19 | // npm
20 | $ npm install we-vue --save
21 |
22 | // yarn
23 | $ yarn add we-vue
24 | ```
25 |
26 | ## 关于事件绑定
27 |
28 | 在 Vue 2.x 中，为自定义组件绑定原生事件必须使用 `.native` 修饰符：
29 |
30 | ```html
31 | Click Me
32 | ```
33 |
34 | 从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：
35 |
36 | ```html
37 | Click Me
38 | ```
39 |
40 | 对于其他组件，还是需要添加 .native 修饰符。
41 |
42 | ## 特别声明
43 |
44 | 本项目参考了以下项目，部分代码移植于这些开源项目，但尚未及一一标注。在此对这些项目表示感谢。
45 |
46 | - [Vuetify](https://github.com/vuetifyjs/vuetify)
47 | - [Vant](https://github.com/youzan/vant)
48 | - [Mint-UI](http://mint-ui.github.io/#!/zh-cn)
49 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/swipe.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | $wv-swipe-indicator: 6px;
4 |
5 | .wv-swipe {
6 | position: relative;
7 | overflow: hidden;
8 | user-select: none;
9 |
10 | &__wrapper {
11 | height: 100%;
12 | }
13 |
14 | &__indicators {
15 | position: absolute;
16 | bottom: 10px;
17 | left: 50%;
18 | height: $wv-swipe-indicator;
19 | transform: translate3d(-50%, 0, 0);
20 |
21 | > i {
22 | display: inline-block;
23 | width: $wv-swipe-indicator;
24 | height: $wv-swipe-indicator;
25 | vertical-align: top;
26 | background-color: gray;
27 | border-radius: 100%;
28 |
29 | &:not(:last-child) {
30 | margin-right: $wv-swipe-indicator;
31 | }
32 | }
33 |
34 | .wv-swipe__indicator {
35 | &--active {
36 | background-color: white;
37 | }
38 | }
39 | }
40 | }
41 |
42 | .wv-swipe-item {
43 | float: left;
44 | height: 100%;
45 | }
46 |
--------------------------------------------------------------------------------
/packages/demo/src/views/slider.vue:
--------------------------------------------------------------------------------
1 |
2 | ,
21 | },
22 |
23 | computed: {
24 | style (): object {
25 | const margin = `-${Number(this.gutter) / 2}px`
26 |
27 | return this.gutter ? { marginLeft: margin, marginRight: margin } : {}
28 | },
29 | },
30 |
31 | render (h): VNode {
32 | return h('div', {
33 | class: 'weui-flex',
34 | style: this.style,
35 | }, [
36 | this.$slots.default,
37 | ])
38 | },
39 | })
40 |
--------------------------------------------------------------------------------
/packages/demo/src/views/circle.vue:
--------------------------------------------------------------------------------
1 |
2 | = VueConstructor>
5 |
6 | export function factory (prop?: T, event?: string): Toggleable
7 | export function factory (prop = 'value', event = 'input') {
8 | return Vue.extend({
9 | name: 'toggleable',
10 |
11 | props: {
12 | [prop]: { required: false },
13 | },
14 |
15 | data () {
16 | return {
17 | isActive: !!this[prop],
18 | }
19 | },
20 |
21 | watch: {
22 | [prop] (val) {
23 | this.isActive = !!val
24 | },
25 | isActive (val) {
26 | !!val !== this[prop] && this.$emit(event, val)
27 | },
28 | },
29 | })
30 | }
31 |
32 | /* eslint-disable-next-line no-redeclare */
33 | const Toggleable = factory()
34 |
35 | export default Toggleable
36 |
--------------------------------------------------------------------------------
/packages/demo/tests/e2e/plugins/index.js:
--------------------------------------------------------------------------------
1 | // https://docs.cypress.io/guides/guides/plugins-guide.html
2 |
3 | // if you need a custom webpack configuration you can uncomment the following import
4 | // and then use the `file:preprocessor` event
5 | // as explained in the cypress docs
6 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
7 |
8 | /* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
9 | // const webpack = require('@cypress/webpack-preprocessor')
10 |
11 | module.exports = (on, config) => {
12 | // on('file:preprocessor', webpack({
13 | // webpackOptions: require('@vue/cli-service/webpack.config'),
14 | // watchOptions: {}
15 | // }))
16 |
17 | return Object.assign({}, config, {
18 | fixturesFolder: 'tests/e2e/fixtures',
19 | integrationFolder: 'tests/e2e/specs',
20 | screenshotsFolder: 'tests/e2e/screenshots',
21 | videosFolder: 'tests/e2e/videos',
22 | supportFile: 'tests/e2e/support/index.js',
23 | })
24 | }
25 |
--------------------------------------------------------------------------------
/packages/docs/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "error",
3 | "extends": "typestrict",
4 | "linterOptions": {
5 | "exclude": [
6 | "**/*.spec.js",
7 | "**/node_modules/**/*"
8 | ]
9 | },
10 | "jsRules": {},
11 | "rules": {
12 | // IMPOTRANT: enforces use of T[] if T is a simple type (primitive or type reference).
13 | "array-type": [true, "array-simple"],
14 | "use-type-alias": true,
15 | "no-inferrable-types": true,
16 | "unified-signatures": true,
17 | "no-undefined-argument": true,
18 | "use-default-type-parameter": true,
19 |
20 | /* typestrict overrides */
21 |
22 | // Handled by tsc
23 | "no-unused-variable": false,
24 |
25 | // Useless with vue
26 | "no-invalid-this": false,
27 |
28 | // Retarded
29 | "restrict-plus-operands": false,
30 |
31 | // Fails with no-unused-variable for some reason
32 | "no-useless-cast": false,
33 |
34 | "no-floating-promises": false
35 | },
36 | "rulesDirectory": []
37 | }
38 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v2/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Index
3 | keywords: 'we-vue, index'
4 | description: ''
5 | demo_url: //demo.wevue.org/
6 | ---
7 |
8 | 文档
9 |
10 |
11 | 欢迎使用 we-vue！
12 |
13 | :::danger
14 | 右侧示例仅针对最新版本，其中部分涉及滑动、拖拽操作的示例请在触屏设备上预览，或使用浏览器模拟触屏设置进行查看。
15 | :::
16 |
17 | ## 安装
18 |
19 | ```bash
20 | // npm
21 | $ npm install we-vue --save
22 |
23 | // yarn
24 | $ yarn add we-vue
25 | ```
26 |
27 | ## 关于事件绑定
28 |
29 | 在 Vue 2.x 中，为自定义组件绑定原生事件必须使用 `.native` 修饰符：
30 |
31 | ```html
32 | Click Me
33 | ```
34 |
35 | 从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：
36 |
37 | ```html
38 | Click Me
39 | ```
40 |
41 | 对于其他组件，还是需要添加 .native 修饰符。
42 |
43 | ## 特别声明
44 |
45 | we-vue 参考了饿了么前端团队 [Mint-UI](http://mint-ui.github.io/#!/zh-cn) 项目的大量代码，可以说 we-vue 在一定程度上可以算是换上了 weui 皮肤的 Mint-UI，此前本人也就版权等问题联系相关作者，并得到回复“Mint-UI 使用 MIT 开源协议，可自由使用，但请注明版权”。由于代码作了很多调整，未及一一详细注明，为此在这里特别声明。感谢饿了么团队的优秀成果，以及他们所提供了 cooking-cli 脚手架工具为项目开发带来的便利。
46 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/index.scss:
--------------------------------------------------------------------------------
1 | /* base */
2 | @import "./base";
3 |
4 | /* common components */
5 | @import "./actionsheet";
6 | @import "./badge";
7 | @import "./button";
8 | @import "./cell-swipe-button";
9 | @import "./cell-swipe";
10 | @import "./cell";
11 | @import "./checklist";
12 | @import "./circle";
13 | @import "./datetime-picker";
14 | @import "./dialog";
15 | @import "./flex";
16 | @import "./footer";
17 | @import "./form-preview";
18 | @import "./grid";
19 | @import "./group";
20 | @import "./header";
21 | @import "./icon";
22 | @import "./input";
23 | @import "./loadmore";
24 | @import "./media-box";
25 | @import "./number-spinner";
26 | @import "./panel";
27 | @import "./picker";
28 | @import "./popup";
29 | @import "./progress";
30 | @import "./radio";
31 | @import "./search-bar";
32 | @import "./slider";
33 | @import "./spinner";
34 | @import "./swipe";
35 | @import "./switch";
36 | @import "./tabbar";
37 | @import "./tabs";
38 | @import "./textarea";
39 | @import "./toast";
40 | @import "./top-tips";
41 |
--------------------------------------------------------------------------------
/packages/we-vue/src/utils/mixins.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len, import/export, no-use-before-define */
2 | import Vue, { VueConstructor } from 'vue'
3 |
4 | export default function mixins (...args: T): ExtractVue extends infer V ? V extends Vue ? VueConstructor : never : never
5 | export default function mixins (...args: VueConstructor[]): VueConstructor
6 | export default function mixins (...args: VueConstructor[]): VueConstructor {
7 | return Vue.extend({ mixins: args })
8 | }
9 |
10 | /**
11 | * Returns the instance type from a VueConstructor
12 | * Useful for adding types when using mixins().extend()
13 | */
14 | export type ExtractVue = T extends Array
15 | ? UnionToIntersection ? V : never>
16 | : T extends VueConstructor ? V : never
17 |
18 | type UnionToIntersection =
19 | (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
20 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/loadmore.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-loadmore {
4 | width: 65%;
5 | margin: 1.5em auto;
6 | font-size: 14px;
7 | line-height: 1.6em;
8 | text-align: center;
9 | }
10 |
11 | .weui-loadmore__tips {
12 | display: inline-block;
13 | vertical-align: middle;
14 | }
15 |
16 | .weui-loadmore_line {
17 | margin-top: 2.4em;
18 | border-top: 1px solid $weui-line-color-light;
19 |
20 | .weui-loadmore__tips {
21 | position: relative;
22 | top: -0.9em;
23 | padding: 0 0.55em;
24 | color: $weui-text-color-gray;
25 | background-color: #fff;
26 | }
27 | }
28 |
29 | .weui-loadmore_dot {
30 | .weui-loadmore__tips {
31 | padding: 0 0.16em;
32 |
33 | &::before {
34 | position: relative;
35 | top: -0.16em;
36 | display: inline-block;
37 | width: 4px;
38 | height: 4px;
39 | vertical-align: 0;
40 | background-color: $weui-line-color-light;
41 | border-radius: 50%;
42 | content: "";
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WMediaBox/__test__/WMediaBox.spec.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | import MediaBox from '../'
3 |
4 | describe('media-box', () => {
5 | test('create', () => {
6 | let wrapper = shallowMount(MediaBox, {
7 | propsData: {},
8 | })
9 |
10 | expect(wrapper.name()).toBe('w-media-box')
11 | expect(wrapper.html()).toMatchSnapshot()
12 |
13 | wrapper = shallowMount(MediaBox, {
14 | propsData: {
15 | type: 'text',
16 | },
17 | })
18 |
19 | expect(wrapper.name()).toBe('w-media-box')
20 | expect(wrapper.html()).toMatchSnapshot()
21 | })
22 |
23 | test('handle click', () => {
24 | const routeLinkSpy = jest.fn()
25 | const wrapper = shallowMount(MediaBox, {
26 | propsData: {},
27 | methods: {
28 | routeLink: routeLinkSpy,
29 | },
30 | })
31 |
32 | wrapper.trigger('click')
33 | expect(wrapper.emitted().click).toBeTruthy()
34 | expect(routeLinkSpy).toHaveBeenCalled()
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/slider.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-slider {
4 | padding: 15px 18px;
5 | user-select: none;
6 | }
7 |
8 | .weui-slider__inner {
9 | position: relative;
10 | height: 2px;
11 | background-color: #e9e9e9;
12 | }
13 |
14 | .weui-slider__track {
15 | width: 0;
16 | height: 2px;
17 | background-color: $weui-color-primary;
18 | }
19 |
20 | .weui-slider__handler {
21 | position: absolute;
22 | top: 50%;
23 | left: 0;
24 | width: 28px;
25 | height: 28px;
26 | margin-top: -14px;
27 | margin-left: -14px;
28 | background-color: #fff;
29 | border-radius: 50%;
30 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
31 | }
32 |
33 | .weui-slider-box {
34 | display: flex;
35 | align-items: center;
36 |
37 | .weui-slider {
38 | flex: 1;
39 | }
40 | }
41 |
42 | .weui-slider-box__value {
43 | min-width: 24px;
44 | margin-left: 0.5em;
45 | color: #888;
46 | font-size: 14px;
47 | text-align: center;
48 | }
49 |
50 | .wv-slider--disabled {
51 | opacity: 0.5;
52 | }
53 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/popup/Modal.tsx:
--------------------------------------------------------------------------------
1 | import Vue, { VNode } from 'vue'
2 | import { PropValidator } from 'vue/types/options'
3 |
4 | interface options extends Vue {
5 | style?: object
6 | }
7 |
8 | export default Vue.extend().extend({
9 | name: 'w-modal',
10 |
11 | props: {
12 | visible: Boolean,
13 | zIndex: Number,
14 | className: String,
15 | customStyle: Object as PropValidator
29 | { this.type === 'default' &&
32 | )
33 | },
34 | })
35 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v2/switch.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Switch
3 | keywords: 'we-vue, switch'
4 | description: ''
5 | demo_url: //demo.wevue.org/switch
6 | ---
7 |
8 | Switch
9 |
10 | 开关。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Switch } from 'we-vue'
16 |
17 | Vue.use(Switch)
18 | ```
19 |
20 | ## 例子
21 |
22 | ### 默认
23 |
24 | ```html
25 | {
21 | this.onClick()
22 | }}>
23 | {
24 | this.$slots.icon &&
25 |
37 | )
38 | },
39 | })
40 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WSwipeCellButton/__test__/WSwipeCellButton.spec.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | import SwipeCellButton from '../'
3 |
4 | describe('cell-swipe-button', () => {
5 | test('create', () => {
6 | let wrapper = shallowMount(SwipeCellButton, {
7 | propsData: {},
8 | })
9 |
10 | expect(wrapper.name()).toBe('w-cell-swipe-button')
11 | expect(wrapper.classes()).toContain('weui-swiped-btn')
12 |
13 | expect(wrapper.html()).toMatchSnapshot()
14 |
15 | // create with type
16 | wrapper = shallowMount(SwipeCellButton, {
17 | propsData: {
18 | type: 'test',
19 | },
20 | })
21 |
22 | expect(wrapper.classes()).toContain('weui-swiped-btn_test')
23 |
24 | wrapper = shallowMount(SwipeCellButton, {
25 | slots: {
26 | default: 'test',
27 | },
28 | })
29 |
30 | expect(wrapper.text()).toBe('test')
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/packages/we-vue/src/assets/iconfont/iconfont.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {font-family: "iconfont";
3 | src: url('iconfont.eot?t=1500577729042'); /* IE9*/
4 | src: url('iconfont.eot?t=1500577729042#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 | url('iconfont.woff?t=1500577729042') format('woff'), /* chrome, firefox */
6 | url('iconfont.ttf?t=1500577729042') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 | url('iconfont.svg?t=1500577729042#iconfont') format('svg'); /* iOS 4.1- */
8 | }
9 |
10 | .iconfont {
11 | font-family:"iconfont" !important;
12 | font-size:16px;
13 | font-style:normal;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | .icon-spinner9:before { content: "\e7e9"; }
19 |
20 | .icon-spinner-1:before { content: "\e722"; }
21 |
22 | .icon-spinner1:before { content: "\e806"; }
23 |
24 | .icon-spinner2:before { content: "\e63f"; }
25 |
26 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WFooter/WFooter.tsx:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import '@/scss/footer.scss'
3 | import WFooterLink from './WFooterLink'
4 | import { PropValidator } from 'vue/types/options'
5 |
6 | export default Vue.extend({
7 | name: 'w-footer',
8 |
9 | props: {
10 | text: String,
11 | links: {
12 | type: Array,
13 | default: () => [],
14 | } as PropValidator
26 | {this.$slots.icon}
27 |
28 | }
29 | {
30 | this.$slots.label &&
31 | 32 | {this.$slots.label} 33 |
34 | } 35 | { this.$slots.default } 36 |
3 |
23 |
24 |
25 |
36 |
37 |
50 |
--------------------------------------------------------------------------------
/packages/demo/tests/e2e/support/commands.js:
--------------------------------------------------------------------------------
1 | // ***********************************************
2 | // This example commands.js shows you how to
3 | // create various custom commands and overwrite
4 | // existing commands.
5 | //
6 | // For more comprehensive examples of custom
7 | // commands please read more here:
8 | // https://on.cypress.io/custom-commands
9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v2/toast.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Toast
3 | keywords: 'we-vue, toast'
4 | description: ''
5 | demo_url: //demo.wevue.org/toast
6 | ---
7 |
8 | Toast
9 |
10 | 弹出提示。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Toast } from 'we-vue'
16 | ```
17 |
18 | ## 例子
19 |
20 | ### 基本示例
21 |
22 | ```js
23 | Toast.success('操作成功');
24 | Toast.fail('操作失败');
25 | ```
26 |
27 | ### 设置显示时长
28 |
29 | ```js
30 | Toast.fail({
31 | duration: 1000,
32 | message: '操作失败'
33 | })
34 | ```
35 |
36 | ### 纯文本提示
37 |
38 | ```js
39 | Toast.text({
40 | duration: 1000,
41 | message: '操作失败'
42 | })
43 | ```
44 |
45 | ### 加载提示
46 |
47 | ```js
48 | Toast.loading('laoding')
49 | ```
50 |
51 | ## API
52 |
53 | | 参数 | 类型 | 说明 | 可选值 | 默认值 |
54 | | :----: | :-----: | :----: | :--: | :---: |
55 | | icon | String | 图标类型 | | 'success-no-circle' |
56 | | message | String | 提示文字 | | |
57 | | duration | Number | 提示时间（毫秒） | | |
58 |
--------------------------------------------------------------------------------
/packages/docs/markdown/v3/toast.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Toast
3 | keywords: 'we-vue, toast'
4 | description: ''
5 | demo_url: //demo.wevue.org/toast
6 | ---
7 |
8 | Toast
9 |
10 | 弹出提示。
11 |
12 | ## 引入
13 |
14 | ```js
15 | import { Toast } from 'we-vue'
16 | ```
17 |
18 | ## 例子
19 |
20 | ### 基本示例
21 |
22 | ```js
23 | Toast.success('操作成功');
24 | Toast.fail('操作失败');
25 | ```
26 |
27 | ### 设置显示时长
28 |
29 | ```js
30 | Toast.fail({
31 | duration: 1000,
32 | message: '操作失败'
33 | })
34 | ```
35 |
36 | ### 纯文本提示
37 |
38 | ```js
39 | Toast.text({
40 | duration: 1000,
41 | message: '操作失败'
42 | })
43 | ```
44 |
45 | ### 加载提示
46 |
47 | ```js
48 | Toast.loading('laoding')
49 | ```
50 |
51 | ## API
52 |
53 | | 参数 | 类型 | 说明 | 可选值 | 默认值 |
54 | | :----: | :-----: | :----: | :--: | :---: |
55 | | icon | String | 图标类型 | | 'success-no-circle' |
56 | | message | String | 提示文字 | | |
57 | | duration | Number | 提示时间（毫秒） | | |
58 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WFlex/WFlex.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import '@/scss/flex.scss'
3 | import { PropValidator } from 'vue/types/options'
4 | import { VNode } from 'vue/types/vnode'
5 |
6 | export default Vue.extend({
7 | name: 'w-flex',
8 |
9 | provide (): object {
10 | return { flexComponent: this }
11 | },
12 |
13 | props: {
14 | gutter: {
15 | type: [Number, String],
16 | default: 0,
17 | validator: (val: number | string) => {
18 | return Number(val) >= 0
19 | },
20 | } as PropValidator禁用
4 | 自定义最大最小值
10 | 禁用点击操作
18 |
3 | 12 %
8 |
9 | 12 %
15 |
16 | {{ sliderValue }}%
25 |
26 |
27 |
28 |
37 |
38 |
49 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WFlex/__test__/WFlex.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount, shallowMount } from '@vue/test-utils'
2 | import Flex from '../'
3 |
4 | describe('flex', () => {
5 | test('create', () => {
6 | const wrapper = mount(Flex, {
7 | propsData: {},
8 | })
9 |
10 | expect(wrapper.name()).toBe('w-flex')
11 | expect(wrapper.classes()).toContain('weui-flex')
12 |
13 | expect(wrapper.html()).toMatchSnapshot()
14 | })
15 |
16 | test('style should be computed correctly', () => {
17 | const wrapper = shallowMount(Flex, {
18 | propsData: {
19 | },
20 | })
21 |
22 | expect(wrapper.vm.style).toEqual({})
23 |
24 | const gutterValue = 10
25 |
26 | wrapper.setProps({
27 | gutter: gutterValue,
28 | })
29 |
30 | expect(wrapper.vm.style).toEqual({
31 | marginLeft: `-${gutterValue / 2}px`,
32 | marginRight: `-${gutterValue / 2}px`,
33 | })
34 |
35 | expect(wrapper.html()).toMatchSnapshot()
36 | })
37 | })
38 |
--------------------------------------------------------------------------------
/packages/we-vue/src/install.ts:
--------------------------------------------------------------------------------
1 | import { VueConstructor } from 'vue'
2 | import { WeVueUseOptions } from 'types'
3 |
4 | export function install (Vue: VueConstructor, args: WeVueUseOptions = {}) {
5 | if ((install as any).installed) return
6 | (install as any).installed = true
7 |
8 | const components = args.components || {}
9 | const directives = args.directives || {}
10 | const plugins = args.plugins || {}
11 |
12 | for (const name in directives) {
13 | const directive = directives[name]
14 | Vue.directive(name, directive)
15 | }
16 |
17 | for (const name in plugins) {
18 | const plugin = plugins[name]
19 | Vue.use(plugin)
20 | }
21 |
22 | ;(function registerComponents (components: any) {
23 | if (components) {
24 | for (const key in components) {
25 | const component = components[key]
26 | Vue.component(key, component as typeof Vue)
27 | }
28 | return true
29 | }
30 | return false
31 | })(components)
32 | }
33 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/group.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-cells {
4 |
5 | // onepx
6 | position: relative;
7 | margin-top: $weui-cells-margin-top;
8 | overflow: hidden; // 因为每个 cell 的 border 使用 before 元素 left 搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
9 | font-size: $weui-cell-font-size; // cell 中间有效高度23px，跟客户端默认图标尺寸一致
10 | line-height: $weui-cell-line-height;
11 | background-color: $weui-cell-bg;
12 |
13 | &::before {
14 | @include setTopLine($weui-cell-border-color);
15 |
16 | z-index: 2;
17 | }
18 |
19 | &::after {
20 | @include setBottomLine($weui-cell-border-color);
21 |
22 | z-index: 2;
23 | }
24 | }
25 |
26 | .weui-cells__title {
27 | margin-top: 0.77em; // 15px - 行高
28 | margin-bottom: 0.3em; // 8px - 行高
29 | padding-right: $weui-cell-gap-h;
30 | padding-left: $weui-cell-gap-h;
31 | color: $weui-text-color-gray;
32 | font-size: $weui-cell-tips-font-size;
33 |
34 | & + .weui-cells {
35 | margin-top: 0;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/packages/demo/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
14 |
15 |
16 |
48 |
--------------------------------------------------------------------------------
/packages/we-vue/src/components/WIcon/__test__/WIcon.spec.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | import Icon from '../'
3 |
4 | describe('icon', () => {
5 | test('create', () => {
6 | const wrapper = shallowMount(Icon, {
7 | propsData: {
8 | type: 'info',
9 | },
10 | })
11 |
12 | expect(wrapper.name()).toBe('w-icon')
13 |
14 | expect(wrapper.html()).toMatchSnapshot()
15 |
16 | // is not 'large' by default
17 | expect(wrapper.vm.large).toBeFalsy()
18 | })
19 |
20 | test('element class should be computed correctly', () => {
21 | const wrapper = shallowMount(Icon, {
22 | propsData: {
23 | type: 'info',
24 | large: true,
25 | },
26 | })
27 |
28 | // large size icon should has class 'weui-icon_msg'
29 | expect(wrapper.classes()).toContain('weui-icon_msg')
30 |
31 | const iconClassType = `weui-icon-${wrapper.vm.type}`
32 | expect(wrapper.classes()).toContain(iconClassType)
33 | })
34 | })
35 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/toggleable/index.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VueConstructor } from 'vue'
2 |
3 | /* eslint-disable-next-line no-use-before-define */
4 | export type Toggleable
7 | ![]()
12 |
13 |