30 | {
38 | this.$emit('click', event)
39 | }}
40 | />
41 |
42 | )
43 | },
44 | })
45 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/popup/context.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | export interface PopupableVue extends Vue {
4 | closeOnClickMask: boolean
5 | close (): void
6 | }
7 |
8 | type stackItem = {
9 | vm: PopupableVue
10 | config: {
11 | className: string
12 | customStyle: object
13 | }
14 | target: Element | Node
15 | }
16 |
17 | interface ModalInstance extends Vue {
18 | visible: boolean
19 | style?: object
20 | }
21 |
22 | const PopupContext = {
23 | zIndex: 2000,
24 | stack: [] as stackItem[],
25 | lockCount: 0,
26 | modal: {} as ModalInstance,
27 |
28 | get top (): stackItem {
29 | return this.stack[this.stack.length - 1]
30 | },
31 | }
32 |
33 | export default PopupContext
34 |
--------------------------------------------------------------------------------
/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/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
6 |
7 | test('default toggle mixin', () => {
8 | const wrapper = mount({
9 | mixins: [Tggleable],
10 | render: h => h('div'),
11 | }) as Wrapper
12 |
13 | expect(wrapper.props().value).toBeUndefined()
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/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 = 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/we-vue/src/mixins/touchable/__test__/touchable.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount, Wrapper } from '@vue/test-utils'
2 | import Touchable from '@/mixins/touchable'
3 |
4 | describe('touchable mixin', () => {
5 | type InstanceTouchable = InstanceType
6 |
7 | test('default toggle mixin', () => {
8 | const wrapper = mount({
9 | mixins: [Touchable],
10 | render: h => h('div'),
11 | }) as Wrapper
12 |
13 | expect(wrapper.vm.direction).toBe('')
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/packages/we-vue/src/mixins/validatable/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | export default Vue.extend({
4 | name: 'validatable',
5 |
6 | props: {
7 | value: {
8 | required: false,
9 | },
10 | },
11 |
12 | data () {
13 | return {
14 | lazyValue: this.value,
15 | valid: false,
16 | }
17 | },
18 | })
19 |
--------------------------------------------------------------------------------
/packages/we-vue/src/plugins/index.ts:
--------------------------------------------------------------------------------
1 | import Lazyload from './lazyload'
2 |
3 | export {
4 | Lazyload,
5 | }
6 |
--------------------------------------------------------------------------------
/packages/we-vue/src/plugins/lazyload/__test__/lazyload.spec.ts:
--------------------------------------------------------------------------------
1 | import { Lazyload } from '@/plugins'
2 |
3 | describe('lazyload', () => {
4 | test('lazyload type', () => {
5 | expect(typeof Lazyload).toBe('object')
6 | })
7 | })
8 |
--------------------------------------------------------------------------------
/packages/we-vue/src/plugins/lazyload/index.ts:
--------------------------------------------------------------------------------
1 | import Lazyload from 'vue-lazyload'
2 |
3 | export default Lazyload
4 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/badge.scss:
--------------------------------------------------------------------------------
1 | .weui-badge {
2 | display: inline-block;
3 | min-width: 8px;
4 | padding: 0.15em 0.4em;
5 | color: #fff;
6 | font-size: 12px;
7 | line-height: 1.2;
8 | text-align: center;
9 | vertical-align: middle;
10 | background-color: #f43530;
11 | border-radius: 18px;
12 |
13 | &_dot {
14 | min-width: 0;
15 | padding: 0.4em;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/fn.scss:
--------------------------------------------------------------------------------
1 | // mixin
2 | @import "./mixin/mobile";
3 | @import "./mixin/setOnepx";
4 | @import "./mixin/setArrow";
5 | @import "./mixin/text";
6 | // variable
7 | @import "./variable/global";
8 | @import "./variable/color";
9 | @import "./variable/weui-cell";
10 | @import "./variable/weui-button";
11 | @import "./variable/weui-msg";
12 | @import "./variable/weui-grid";
13 | @import "./variable/weui-progress";
14 | @import "./variable/weui-dialog";
15 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/mixin/mobile.scss:
--------------------------------------------------------------------------------
1 | @mixin setTapColor($c: rgba(0, 0, 0, 0)) {
2 | -webkit-tap-highlight-color: $c;
3 | }
4 |
--------------------------------------------------------------------------------
/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/we-vue/src/scss/base/mixin/setOnepx.scss:
--------------------------------------------------------------------------------
1 | @mixin setTopLine($c: #c7c7c7) {
2 | position: absolute;
3 | top: 0;
4 | right: 0;
5 | left: 0;
6 | height: 1px;
7 | color: $c;
8 | border-top: 1px solid $c;
9 | transform: scaleY(0.5);
10 | transform-origin: 0 0;
11 | content: "";
12 | }
13 |
14 | @mixin setBottomLine($c: #c7c7c7) {
15 | position: absolute;
16 | right: 0;
17 | bottom: 0;
18 | left: 0;
19 | height: 1px;
20 | color: $c;
21 | border-bottom: 1px solid $c;
22 | transform: scaleY(0.5);
23 | transform-origin: 0 100%;
24 | content: "";
25 | }
26 |
27 | @mixin setLeftLine($c: #c7c7c7) {
28 | position: absolute;
29 | top: 0;
30 | bottom: 0;
31 | left: 0;
32 | width: 1px;
33 | color: $c;
34 | border-left: 1px solid $c;
35 | transform: scaleX(0.5);
36 | transform-origin: 0 0;
37 | content: "";
38 | }
39 |
40 | @mixin setRightLine($c: #c7c7c7) {
41 | position: absolute;
42 | top: 0;
43 | right: 0;
44 | bottom: 0;
45 | width: 1px;
46 | color: $c;
47 | border-right: 1px solid $c;
48 | transform: scaleX(0.5);
49 | transform-origin: 100% 0;
50 | content: "";
51 | }
52 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/mixin/text.scss:
--------------------------------------------------------------------------------
1 | @mixin ellipsis($w: auto) {
2 | width: $w;
3 | overflow: hidden;
4 | white-space: nowrap;
5 | text-overflow: ellipsis;
6 | word-wrap: normal;
7 | }
8 |
9 | @mixin ellipsisLn($line) {
10 | display: -webkit-box;
11 | overflow: hidden;
12 | text-overflow: ellipsis;
13 | -webkit-box-orient: vertical;
14 | -webkit-line-clamp: $line;
15 | }
16 |
17 | @mixin text_wrap() {
18 | word-wrap: break-word;
19 | word-break: break-all;
20 | }
21 |
22 | @mixin hyphens() {
23 | word-wrap: break-word;
24 | -webkit-hyphens: auto;
25 | hyphens: auto;
26 | }
27 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/reset.scss:
--------------------------------------------------------------------------------
1 | @import "fn";
2 |
3 | html {
4 | -ms-text-size-adjust: 100%;
5 | -webkit-text-size-adjust: 100%;
6 | }
7 |
8 | body {
9 | font-family: $weui-font-default;
10 | line-height: 1.6;
11 | }
12 |
13 | * {
14 | margin: 0;
15 | padding: 0;
16 | }
17 |
18 | a img {
19 | border: 0;
20 | }
21 |
22 | a {
23 | text-decoration: none;
24 |
25 | @include setTapColor();
26 | }
27 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/color.scss:
--------------------------------------------------------------------------------
1 | // color
2 | $weui-color-primary: #1aad19;
3 | $weui-color-warn: #e64340;
4 |
5 | // link
6 | $weui-link-color-default: #586c94;
7 |
8 | // background
9 | $weui-bg-color-default: #efeff4;
10 | $weui-bg-color-active: #ececec;
11 |
12 | // line
13 | $weui-line-color-light: #e5e5e5;
14 | $weui-line-color-dark: #bcbab6;
15 |
16 | // text
17 | $weui-text-color-title: #000;
18 | $weui-text-color-tips: #b2b2b2;
19 | $weui-text-color-warn: $weui-color-warn;
20 | $weui-text-color-gray: #999;
21 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/global.scss:
--------------------------------------------------------------------------------
1 | // font
2 | $weui-font-en: -apple-system-font, "Helvetica Neue";
3 | $weui-font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
4 | $weui-font-sans: sans-serif;
5 | $weui-font-default: $weui-font-en, $weui-font-sans;
6 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/weui-cell.scss:
--------------------------------------------------------------------------------
1 | $weui-cell-bg: #fff;
2 | $weui-cell-border-color: #e5e5e5;
3 | $weui-cell-gap-v: 10px;
4 | $weui-cell-gap-h: 15px;
5 | $weui-cell-inner-gap-h: 0.35em;
6 | $weui-cell-height: 45px;
7 | $weui-cell-font-size: 17px;
8 | $weui-cell-tips-font-size: 14px;
9 | $weui-cell-label-width: 105px;
10 |
11 | $weui-cell-line-height: ($weui-cell-height - 2 * $weui-cell-gap-v) / $weui-cell-font-size; // 高度减去上下padding的行高
12 | $weui-cells-margin-top: (20px / $weui-cell-font-size) + em;
13 |
14 | // weui switch
15 | $weui-switch-height: 32px;
16 |
17 | // weui uploader
18 | $weui-uploader-border-color: #d9d9d9;
19 | $weui-uploader-active-border-color: #999;
20 | $weui-uploader-file-spacing: 9px;
21 | $weui-uploader-size: 79px;
22 | $weui-uploader-border-width: 1px;
23 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/weui-dialog.scss:
--------------------------------------------------------------------------------
1 | $weui-dialog-background-color: #fff;
2 | $weui-dialog-line-color: #d5d5d6;
3 | $weui-dialog-link-color: #3cc51f;
4 | $weui-dialog-link-active-bc: #eee;
5 | $weui-dialog-gap-width: 1.6em;
6 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/weui-grid.scss:
--------------------------------------------------------------------------------
1 | $weui-grid-border-color: #d9d9d9;
2 | $weui-grid-font-size: 14px;
3 | $weui-grid-icon-size: 28px;
4 | $weui-grid-column-count: 3;
5 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/weui-msg.scss:
--------------------------------------------------------------------------------
1 | $weui-msg-padding-top: 36px;
2 | $weui-msg-icon-gap: 30px;
3 | $weui-msg-title-gap: 5px;
4 | $weui-msg-text-gap: 25px;
5 | $weui-msg-opr-gap: 25px;
6 | $weui-msg-extra-area-gap: 15px;
7 | $weui-msg-extra-area-of-min-height: 438px;
8 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/base/variable/weui-progress.scss:
--------------------------------------------------------------------------------
1 | $weui-progress-bg: #ebebeb;
2 | $weui-progress-color: #09bb07;
3 | $weui-progress-height: 3px;
4 | $weui-progress-close-bg: #ef4f4f;
5 | $weui-progress-active-bg: #c13e3e;
6 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/cell-swipe-button.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-swiped-btn {
4 | display: block;
5 | padding: $weui-cell-gap-v 1em;
6 | color: inherit;
7 | line-height: $weui-cell-line-height;
8 | }
9 |
10 | .weui-swiped-btn_default {
11 | background-color: #c7c7cc;
12 | }
13 |
14 | .weui-swiped-btn_warn {
15 | background-color: #ff3b30;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/cell-swipe.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 | @import "./cell";
3 |
4 | .weui-cell_swiped {
5 | display: block !important;
6 | padding: 0 !important;
7 |
8 | > .weui-cell__bd {
9 | position: relative;
10 | z-index: 1;
11 | background-color: #fff;
12 | }
13 |
14 | > .weui-cell__ft {
15 | position: absolute;
16 | top: 0;
17 | right: 0;
18 | bottom: 0;
19 | display: flex;
20 | color: #fff;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/checklist.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 | .weui-cells_checkbox {
13 | .weui-cell__hd {
14 | padding-right: $weui-cell-inner-gap-h;
15 | }
16 |
17 | .weui-icon-checked {
18 | &::before {
19 | display: block;
20 | color: #c9c9c9;
21 | font-size: 23px;
22 | content: "\EA01";
23 | }
24 |
25 | &.checked {
26 | color: yellow;
27 | }
28 |
29 | &.checked::before {
30 | color: currentColor; // 为了实现自定义颜色
31 | content: "\EA06";
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/circle.scss:
--------------------------------------------------------------------------------
1 | .wv-circle {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/datetime-picker.scss:
--------------------------------------------------------------------------------
1 | @import "./picker";
2 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/flex.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-flex {
4 | display: flex;
5 | }
6 |
7 | .weui-flex__item {
8 | flex: 1;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/footer.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-footer {
4 | color: $weui-text-color-gray;
5 | font-size: 14px;
6 | text-align: center;
7 |
8 | a {
9 | color: $weui-link-color-default;
10 | }
11 | }
12 |
13 | .weui-footer_fixed-bottom {
14 | position: fixed;
15 | right: 0;
16 | bottom: 0.52em;
17 | left: 0;
18 | }
19 |
20 | .weui-footer__links {
21 | font-size: 0;
22 | }
23 |
24 | .weui-footer__link {
25 | position: relative;
26 | display: inline-block;
27 | margin: 0 0.62em;
28 | font-size: 14px;
29 | vertical-align: top;
30 |
31 | &::before {
32 | @include setLeftLine();
33 |
34 | top: 0.36em;
35 | bottom: 0.36em;
36 | left: -0.65em;
37 | }
38 |
39 | &:first-child {
40 | &::before {
41 | display: none;
42 | }
43 | }
44 | }
45 |
46 | .weui-footer__text {
47 | padding: 0 0.34em;
48 | font-size: 12px;
49 | }
50 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/grid.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-grids {
4 | position: relative;
5 | overflow: hidden;
6 |
7 | &::before {
8 | @include setTopLine($weui-grid-border-color);
9 | }
10 |
11 | &::after {
12 | @include setLeftLine($weui-grid-border-color);
13 | }
14 | }
15 |
16 | .weui-grid {
17 | position: relative;
18 | float: left;
19 | box-sizing: border-box;
20 | width: 100% / $weui-grid-column-count;
21 | padding: 20px 10px;
22 |
23 | &::before {
24 | @include setRightLine($weui-grid-border-color);
25 | }
26 |
27 | &::after {
28 | @include setBottomLine($weui-grid-border-color);
29 | }
30 |
31 | &:active {
32 | background-color: $weui-bg-color-active;
33 | }
34 | }
35 |
36 | .weui-grid__icon {
37 | width: $weui-grid-icon-size;
38 | height: $weui-grid-icon-size;
39 | margin: 0 auto;
40 |
41 | img {
42 | display: block;
43 | width: 100%;
44 | height: 100%;
45 | }
46 |
47 | & + .weui-grid__label {
48 | margin-top: 5px;
49 | }
50 | }
51 |
52 | .weui-grid__label {
53 | display: block;
54 | overflow: hidden;
55 | color: $weui-text-color-title;
56 | font-size: $weui-grid-font-size;
57 | white-space: nowrap;
58 | text-align: center;
59 | text-overflow: ellipsis;
60 | }
61 |
--------------------------------------------------------------------------------
/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/we-vue/src/scss/header.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | $headerHeight: 50px;
4 |
5 | .wv-header {
6 | position: relative;
7 | z-index: 500;
8 | display: flex;
9 | align-items: center;
10 | box-sizing: border-box;
11 | width: 100%;
12 | height: $headerHeight;
13 | margin: 0;
14 | padding: 0 10px;
15 | color: white;
16 | line-height: 1;
17 | white-space: nowrap;
18 |
19 | .left {
20 | display: block;
21 | float: left;
22 | overflow: hidden;
23 | font-weight: 100;
24 | font-size: 35px;
25 | line-height: 35px;
26 | }
27 |
28 | .wv-header-title {
29 | flex: 1;
30 | font-size: 23px;
31 | text-align: center;
32 | }
33 |
34 | &.is-fixed {
35 | position: fixed;
36 | top: 0;
37 | left: 0;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/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/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/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/scss/panel.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-panel {
4 | position: relative;
5 | margin-top: 10px;
6 | overflow: hidden;
7 | background-color: #fff;
8 |
9 | &:first-child {
10 | margin-top: 0;
11 | }
12 |
13 | &::before {
14 | @include setTopLine($weui-line-color-light);
15 | }
16 |
17 | &::after {
18 | @include setBottomLine($weui-line-color-light);
19 | }
20 | }
21 |
22 | .weui-panel__hd {
23 | position: relative;
24 | padding: 14px 15px 10px;
25 | color: $weui-text-color-gray;
26 | font-size: 13px;
27 |
28 | &::after {
29 | @include setBottomLine($weui-line-color-light);
30 |
31 | left: 15px;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/popup.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .wv {
4 | &-modal {
5 | position: fixed;
6 | top: 0;
7 | left: 0;
8 | width: 100%;
9 | height: 100%;
10 | }
11 |
12 | &-overflow-hidden {
13 | overflow: hidden !important;
14 | }
15 |
16 | &-popup {
17 | position: fixed;
18 | bottom: 0;
19 | left: 0;
20 | width: 100%;
21 | background-color: white;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/progress.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-progress {
4 | display: flex;
5 | align-items: center;
6 |
7 | &__bar {
8 | //background-color: $weui-progress-bg;
9 | //height: $weui-progress-height;
10 | flex: 1;
11 | }
12 |
13 | &__inner-bar {
14 | width: 0;
15 | height: 100%;
16 | //background-color: $weui-progress-color;
17 | }
18 |
19 | &__opr {
20 | display: block;
21 | margin-left: 15px;
22 | font-size: 0;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/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/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/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/we-vue/src/scss/tabbar.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-tabbar {
4 | position: absolute;
5 | bottom: 0;
6 | z-index: 500;
7 | display: flex;
8 | width: 100%;
9 | background-color: #f7f7fa;
10 |
11 | &::before {
12 | @include setTopLine(#c0bfc4);
13 | }
14 | }
15 |
16 | .weui-tabbar__item {
17 | display: block;
18 | flex: 1;
19 | padding: 5px 0 0;
20 | color: $weui-text-color-gray;
21 | font-size: 0;
22 | text-align: center;
23 |
24 | @include setTapColor();
25 |
26 | &.weui-bar__item_on {
27 | .weui-tabbar__icon,
28 | .weui-tabbar__icon > i,
29 | .weui-tabbar__label {
30 | color: #09bb07;
31 | }
32 | }
33 | }
34 |
35 | .weui-tabbar__icon {
36 | display: inline-block;
37 | width: 27px;
38 | height: 27px;
39 |
40 | &i,
41 | > i {
42 | color: $weui-text-color-gray;
43 | font-size: 24px;
44 | }
45 |
46 | img {
47 | width: 100%;
48 | height: 100%;
49 | }
50 | }
51 |
52 | .weui-tabbar__label {
53 | color: $weui-text-color-gray;
54 | font-size: 10px;
55 | line-height: 1.8;
56 | text-align: center;
57 | }
58 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/textarea.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-textarea {
4 | display: block;
5 | width: 100%;
6 | color: inherit;
7 | font-size: 1em;
8 | line-height: inherit;
9 | border: 0;
10 | outline: 0;
11 | resize: none;
12 | }
13 |
14 | .weui-textarea-counter {
15 | color: $weui-text-color-tips;
16 | text-align: right;
17 |
18 | .weui-cell_warn & {
19 | color: $weui-text-color-warn;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/we-vue/src/scss/top-tips.scss:
--------------------------------------------------------------------------------
1 | @import "./base/fn";
2 |
3 | .weui-toptips {
4 | position: fixed;
5 | top: 0;
6 | right: 0;
7 | left: 0;
8 | z-index: 5000;
9 | display: block;
10 | padding: 5px;
11 | color: #fff;
12 | font-size: 14px;
13 | text-align: center;
14 | transform: translateZ(0);
15 |
16 | @include text_wrap();
17 |
18 | &_warn {
19 | background-color: $weui-color-warn;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/we-vue/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VNode } from 'vue'
2 |
3 | declare global {
4 | namespace JSX {
5 | // tslint:disable no-empty-interface
6 | interface Element extends VNode {}
7 | // tslint:disable no-empty-interface
8 | interface ElementClass extends Vue {}
9 | interface IntrinsicElements {
10 | [elem: string]: any
11 | }
12 | // TODO: 仅为关闭 TSX 中的部分类型检查，有更好方案时去掉这个
13 | type LibraryManagedAttributes = {[name: string]: any}
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/we-vue/src/utils/event.ts:
--------------------------------------------------------------------------------
1 | import { isServer } from './'
2 |
3 | type EventHandler = (event: Event) => void
4 |
5 | export let supportsPassive = false
6 |
7 | if (!isServer) {
8 | try {
9 | const opts = {}
10 | Object.defineProperty(opts, 'passive', {
11 | get () {
12 | /* istanbul ignore next */
13 | supportsPassive = true
14 | },
15 | })
16 | window.addEventListener('test-passive', null as any, opts)
17 | } catch (e) {}
18 | }
19 |
20 | export function on (target: Element | Window | Document, event: string, handler: EventHandler, passive = false) {
21 | !isServer &&
22 | target.addEventListener(
23 | event,
24 | handler,
25 | supportsPassive ? { capture: false, passive } : false
26 | )
27 | }
28 |
29 | export function off (target: Element | Window | Document, event: string, handler: EventHandler) {
30 | !isServer && target.removeEventListener(event, handler)
31 | }
32 |
--------------------------------------------------------------------------------
/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/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/utils/raf.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * requestAnimationFrame polyfill
3 | */
4 |
5 | let prev = Date.now()
6 |
7 | /* istanbul ignore next */
8 | function fallback (fn: FrameRequestCallback): number {
9 | const curr = Date.now()
10 | const ms = Math.max(0, 16 - (curr - prev))
11 | const id = setTimeout(fn, ms)
12 | prev = curr + ms
13 | return id
14 | }
15 |
16 | /* istanbul ignore next */
17 | // const root: Global | Window = isServer ? global : window
18 | const root = 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/utils/touches.ts:
--------------------------------------------------------------------------------
1 | function getTouch (event: TouchEvent): Touch {
2 | return event.changedTouches[0] || event.touches[0]
3 | }
4 |
5 | export { getTouch }
6 |
--------------------------------------------------------------------------------
/packages/we-vue/test/unit/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/we-vue/test/unit/setup.ts:
--------------------------------------------------------------------------------
1 | // polyfill 是必要的，否则使用 async 函数会报错
2 | // 也可以考虑对于测试使用 transform-runtime
3 | import '@babel/polyfill'
4 | import Vue from 'vue'
5 | import { config } from '@vue/test-utils'
6 |
7 | Vue.config.silent = true
8 |
9 | // IMPORTANT: DO NOT use vue-test-utils transitionStub
10 | ;(config.stubs as any).transition = false
11 | ;(config.stubs as any)['transition-group'] = false
12 |
--------------------------------------------------------------------------------
/packages/we-vue/tsconfig.dist.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "target": "esnext",
5 | "module": "esnext",
6 | "outDir": "./lib-temp",
7 | "sourceMap": false,
8 | "inlineSourceMap": true,
9 | "inlineSources": true
10 | },
11 | "exclude": [
12 | "node_modules",
13 | "**/*.spec.ts",
14 | "**/*.spec.js"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/packages/we-vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": [
4 | "src"
5 | ],
6 | "compilerOptions": {
7 | "baseUrl": ".",
8 | "paths": {
9 | "@/test/*": ["test/*"],
10 | "@/*": ["src/*"]
11 | },
12 | "types": [
13 | "jest",
14 | "faker",
15 | "dom-inputevent"
16 | ]
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/we-vue/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 |
19 | "use-default-type-parameter": true,
20 |
21 | /* typestrict overrides */
22 |
23 | // Handled by tsc
24 | "no-unused-variable": false,
25 |
26 | // Useless with vue
27 | "no-invalid-this": false,
28 |
29 | // Retarded
30 | "restrict-plus-operands": false,
31 |
32 | // Fails with no-unused-variable for some reason
33 | "no-useless-cast": false,
34 |
35 | "no-floating-promises": false,
36 | "promise-must-complete": false
37 | },
38 | "rulesDirectory": []
39 | }
40 |
--------------------------------------------------------------------------------
/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
9 | version: string
10 | }
11 |
12 | /* eslint-disable-next-line */
13 | export type WeVueComponents = Component & { $_we_vue_subcomponents?: Record }
14 |
15 | export interface WeVueUseOptions {
16 | directives?: Record
17 | components?: Record
18 | plugins?: Record>
19 | }
20 |
21 | export interface WeVueObject extends Vue {
22 | // TODO
23 | }
24 |
25 | declare module 'vue/types/vue' {
26 | export interface Vue {
27 | $wevue: WeVueObject
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/we-vue/types/test/lib.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | import WvVue, {
4 | WvBadge,
5 | WvButton,
6 | directives,
7 | } from 'we-vue/lib'
8 |
9 | WvVue.install(Vue, {
10 | components: {
11 | WvBadge,
12 | WvButton,
13 | },
14 | directives,
15 | })
16 |
--------------------------------------------------------------------------------
/packages/we-vue/types/test/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "es2015"
7 | ],
8 | "module": "commonjs",
9 | "strict": true,
10 | "noEmit": true,
11 | "baseUrl": ".",
12 | "paths": {
13 | "we-vue": ["../../"]
14 | }
15 | },
16 | "files": [
17 | "../index.d.ts",
18 | "../lib.d.ts",
19 | "lib.ts"
20 | ],
21 | "compileOnSave": false
22 | }
23 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "lib": [
6 | "esnext",
7 | "dom",
8 | "dom.iterable",
9 | "scripthost"
10 | ],
11 | "allowJs": true,
12 | "sourceMap": true,
13 | "outDir": "./dist",
14 | "downlevelIteration": true,
15 | "strict": true,
16 | "jsx": "preserve",
17 | "noUnusedLocals": true,
18 | "noImplicitReturns": true,
19 | "moduleResolution": "node",
20 | "esModuleInterop": true,
21 | "allowSyntheticDefaultImports": true,
22 | "importHelpers": true,
23 | "declaration": false,
24 | "experimentalDecorators": true,
25 | "emitDecoratorMetadata": true,
26 | "types": [
27 | "jest"
28 | ]
29 | },
30 | "exclude": [
31 | "node_modules"
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------