empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
5
.babelrc
5
.babelrc
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"presets": ["es2015"],
|
||||
"plugins": ["transform-runtime"],
|
||||
"comments": false
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
root = true
|
||||
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"plugins": [ "html" ],
|
||||
"rules": {
|
||||
"indent": ["error", 4, { "SwitchCase": 1 }],
|
||||
"quotes": ["error", "single"],
|
||||
"semi": ["error", "always"],
|
||||
"no-console": ["error"]
|
||||
}
|
||||
}
|
||||
1
.gitattributes
vendored
1
.gitattributes
vendored
|
|
@ -1 +0,0 @@
|
|||
src/styles/**/* linguist-vendored=false
|
||||
25
.github/ISSUE_TEMPLATE.md
vendored
25
.github/ISSUE_TEMPLATE.md
vendored
|
|
@ -1,25 +0,0 @@
|
|||
<!--
|
||||
issue 仅用于提交 bug 或 feature 及 文档错误，其余疑问恕不作答。提问前请先阅读 https://github.com/iview/iview/issues/79 和相关文档后，考虑是否开启issue。
|
||||
-->
|
||||
<!--
|
||||
我们十分感谢有价值的 issue 贡献者，所以请填写以下内容。如果提问不符要求、在文档中已有解答、已有相同 issue，我们将直接 close，感谢理解。
|
||||
-->
|
||||
|
||||
### iView 版本号
|
||||
<!-- 0.9.10 -->
|
||||
|
||||
### 操作系统/浏览器 版本号
|
||||
<!-- macOS/Chrome 54 -->
|
||||
|
||||
### Vue 版本号
|
||||
<!-- 1.0.26 -->
|
||||
|
||||
### 能够复现问题的在线示例
|
||||
<!-- 使用下面的在线链接快速创建示例 -->
|
||||
<!-- https://codepen.io/anon/pen/NbEbja -->
|
||||
|
||||
### 复现步骤
|
||||
|
||||
### 问题现象，以及你期望的结果是怎样的?
|
||||
|
||||
### 你估计可能的原因是什么（选填）？
|
||||
20
.gitignore
vendored
20
.gitignore
vendored
|
|
@ -1,20 +0,0 @@
|
|||
*.iml
|
||||
.idea
|
||||
.ipr
|
||||
.iws
|
||||
*.diff
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
node_modules/
|
||||
node_modules2/
|
||||
.project
|
||||
.settings
|
||||
npm-debug.log
|
||||
.*proj
|
||||
.svn/
|
||||
*.swp
|
||||
*.swo
|
||||
*.log
|
||||
test/dist/
|
||||
dist/
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.*
|
||||
*.md
|
||||
*.yml
|
||||
build/
|
||||
node_modules/
|
||||
test/
|
||||
gulpfile.js
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "4"
|
||||
script:
|
||||
- npm run test
|
||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 iview
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
83
README.md
83
README.md
|
|
@ -1,83 +0,0 @@
|
|||
<p align="center">
|
||||
<a href="https://www.iviewui.com">
|
||||
<img width="200" src="https://raw.githubusercontent.com/iview/iview/master/assets/logo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# iView [](https://travis-ci.org/iview/iview) [](https://www.npmjs.org/package/iview) [](https://npmjs.org/package/iview) [](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
|
||||
### A high quality UI Components Library with Vue.js
|
||||
|
||||
> iView works only with Vue 1.0 currently. We have been in developing. English document is coming soon. Please pay attention to the iView.
|
||||
|
||||
## Docs
|
||||
|
||||
### [中文文档](https://www.iviewui.com)
|
||||
### English (Coming soon)
|
||||
|
||||
## Overview
|
||||
|
||||
### [组件概览（Component Overview）](https://www.iviewui.com/overview)
|
||||
|
||||
## Features
|
||||
|
||||
- High quality and rich functions
|
||||
- Friendly APIs,free and flexible
|
||||
- Great Documentation
|
||||
- It is quite beautiful
|
||||
- Using .vue file development mode
|
||||
- Based on npm + webpack + babel, using ES2015
|
||||
|
||||
## Programming
|
||||
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
### Install vue-webpack project in the first place
|
||||
|
||||
Use [iview-project](https://github.com/iview/iview-project)(Recommended) Or [vue-cli](https://github.com/vuejs/vue-cli)
|
||||
|
||||
### Install iView
|
||||
|
||||
using npm
|
||||
```
|
||||
npm install iview --save
|
||||
```
|
||||
Or using script tag for global use
|
||||
```
|
||||
<script type="text/javascript" src="iview.min.js"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<template>
|
||||
<Slider :value.sync="value" range></Slider>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [20, 50]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Use css
|
||||
```js
|
||||
import 'iview/dist/styles/iview.css';
|
||||
```
|
||||
|
||||
## Browser Support
|
||||
|
||||
Normal browsers and Internet Explorer 9+.
|
||||
|
||||
## Links
|
||||
|
||||
- [TalkingData](https://github.com/TalkingData)
|
||||
- [Vue](https://github.com/vuejs/vue)
|
||||
- [Webpack](https://github.com/webpack/webpack)
|
||||
- [ionicons](https://github.com/driftyco/ionicons)
|
||||
- [Ant Design](https://github.com/ant-design/ant-design)
|
||||
BIN
assets/iview.png
BIN
assets/iview.png
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB |
BIN
assets/logo.png
BIN
assets/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
assets/pay.png
BIN
assets/pay.png
Binary file not shown.
|
Before Width: | Height: | Size: 158 KiB |
|
|
@ -1,25 +0,0 @@
|
|||
var gulp = require('gulp');
|
||||
var cleanCSS = require('gulp-clean-css');
|
||||
var less = require('gulp-less');
|
||||
var rename = require('gulp-rename');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
// 编译less
|
||||
gulp.task('css', function () {
|
||||
gulp.src('../src/styles/index.less')
|
||||
.pipe(less())
|
||||
.pipe(autoprefixer({
|
||||
browsers: ['last 2 versions', 'ie > 8']
|
||||
}))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(rename('iview.css'))
|
||||
.pipe(gulp.dest('../dist/styles'));
|
||||
});
|
||||
|
||||
// 拷贝字体文件
|
||||
gulp.task('fonts', function () {
|
||||
gulp.src('../src/styles/common/iconfont/fonts/*.*')
|
||||
.pipe(gulp.dest('../dist/styles/fonts'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['css', 'fonts']);
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/**
|
||||
* 本地预览
|
||||
*/
|
||||
|
||||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
// 入口
|
||||
entry: {
|
||||
main: './test/main',
|
||||
vendors: ['vue', 'vue-router']
|
||||
},
|
||||
// 输出
|
||||
output: {
|
||||
path: path.join(__dirname, '../test/dist'),
|
||||
publicPath: '/test/dist/',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[name].chunk.js'
|
||||
},
|
||||
// 加载器
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.vue$/, loader: 'vue' },
|
||||
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
|
||||
{ test: /\.css$/, loader: 'style!css!autoprefixer'},
|
||||
{ test: /\.less$/, loader: 'style!css!less' },
|
||||
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
|
||||
{ test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'},
|
||||
{ test: /\.(html|tpl)$/, loader: 'html-loader' }
|
||||
]
|
||||
},
|
||||
vue: {
|
||||
loaders: {
|
||||
css: ExtractTextPlugin.extract(
|
||||
"style-loader",
|
||||
"css-loader?sourceMap",
|
||||
{
|
||||
publicPath: "/test/dist/"
|
||||
}
|
||||
),
|
||||
less: ExtractTextPlugin.extract(
|
||||
'vue-style-loader',
|
||||
'css-loader!less-loader'
|
||||
),
|
||||
js: 'babel'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
// require时省略的扩展名，如：require('module') 不需要module.js
|
||||
extensions: ['', '.js', '.vue'],
|
||||
alias: {
|
||||
iview: '../../src/index'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }), // 提取CSS
|
||||
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), // 提取第三方库
|
||||
]
|
||||
};
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
main: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'iview.js',
|
||||
library: 'iview',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
externals: {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.vue']
|
||||
},
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
}, {
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
exclude: /node_modules/
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
loader: 'style!css!autoprefixer'
|
||||
}, {
|
||||
test: /\.less$/,
|
||||
loader: 'style!css!less'
|
||||
}, {
|
||||
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
|
||||
loader: 'url?limit=8192'
|
||||
}, {
|
||||
test: /\.(html|tpl)$/,
|
||||
loader: 'vue-html'
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"development"'
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
main: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'iview.min.js',
|
||||
library: 'iview',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
externals: {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.vue']
|
||||
},
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
}, {
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
exclude: /node_modules/
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
loader: 'style!css!autoprefixer'
|
||||
}, {
|
||||
test: /\.less$/,
|
||||
loader: 'style!css!less'
|
||||
}, {
|
||||
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
|
||||
loader: 'url?limit=8192'
|
||||
}, {
|
||||
test: /\.(html|tpl)$/,
|
||||
loader: 'vue-html'
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin()
|
||||
]
|
||||
}
|
||||
81
package.json
81
package.json
|
|
@ -1,81 +0,0 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "1.0.2",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
"keywords": [
|
||||
"iview",
|
||||
"vue",
|
||||
"vue.js",
|
||||
"component",
|
||||
"components",
|
||||
"ui",
|
||||
"framework"
|
||||
],
|
||||
"main": "dist/iview.js",
|
||||
"files": [
|
||||
"dist",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
|
||||
"dist:style": "gulp --gulpfile build/build-style.js",
|
||||
"dist:dev": "webpack --config build/webpack.dist.dev.config.js",
|
||||
"dist:prod": "webpack --config build/webpack.dist.prod.config.js",
|
||||
"dist": "npm run dist:style && npm run dist:dev && npm run dist:prod",
|
||||
"lint": "eslint --fix --ext .js,.vue src",
|
||||
"test": "npm run dist && npm run lint",
|
||||
"prepublish": "npm run dist"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iview/iview"
|
||||
},
|
||||
"author": "Aresn",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/iview/iview/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"async-validator": "^1.6.7",
|
||||
"core-js": "^2.4.1",
|
||||
"deepmerge": "^1.3.1",
|
||||
"popper.js": "^0.6.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^1.0.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer-loader": "^2.0.0",
|
||||
"babel": "^6.3.13",
|
||||
"babel-core": "^6.11.4",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-plugin-transform-runtime": "^6.12.0",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-runtime": "^6.11.6",
|
||||
"css-loader": "^0.23.1",
|
||||
"eslint": "^3.12.2",
|
||||
"eslint-plugin-html": "^1.7.0",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.8.5",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-clean-css": "^2.0.13",
|
||||
"gulp-less": "^3.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"html-loader": "^0.3.0",
|
||||
"less": "^2.7.1",
|
||||
"less-loader": "^2.2.3",
|
||||
"style-loader": "^0.13.1",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "^1.0.26",
|
||||
"vue-hot-reload-api": "^1.3.3",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^8.5.3",
|
||||
"vue-router": "^0.7.13",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"webpack": "^1.13.1",
|
||||
"webpack-dev-server": "^1.16.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div :class="classes" :style="styles">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const prefixCls = 'ivu-affix';
|
||||
|
||||
function getScroll(target, top) {
|
||||
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||
|
||||
let ret = target[prop];
|
||||
|
||||
if (typeof ret !== 'number') {
|
||||
ret = window.document.documentElement[method];
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getOffset(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
const scrollTop = getScroll(window, true);
|
||||
const scrollLeft = getScroll(window);
|
||||
|
||||
const docEl = window.document.body;
|
||||
const clientTop = docEl.clientTop || 0;
|
||||
const clientLeft = docEl.clientLeft || 0;
|
||||
|
||||
return {
|
||||
top: rect.top + scrollTop - clientTop,
|
||||
left: rect.left + scrollLeft - clientLeft
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
offsetTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
affix: false,
|
||||
styles: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
offsetType () {
|
||||
let type = 'top';
|
||||
if (this.offsetBottom >= 0) {
|
||||
type = 'bottom';
|
||||
}
|
||||
|
||||
return type;
|
||||
},
|
||||
classes () {
|
||||
return [
|
||||
{
|
||||
[`${prefixCls}`]: this.affix
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
window.addEventListener('scroll', this.handleScroll, false);
|
||||
window.addEventListener('resize', this.handleScroll, false);
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('scroll', this.handleScroll, false);
|
||||
window.removeEventListener('resize', this.handleScroll, false);
|
||||
},
|
||||
methods: {
|
||||
handleScroll () {
|
||||
const affix = this.affix;
|
||||
const scrollTop = getScroll(window, true);
|
||||
const elOffset = getOffset(this.$el);
|
||||
const windowHeight = window.innerHeight;
|
||||
const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
|
||||
|
||||
// Fixed Top
|
||||
if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
|
||||
this.affix = true;
|
||||
this.styles = {
|
||||
top: `${this.offsetTop}px`,
|
||||
left: `${elOffset.left}px`,
|
||||
width: `${this.$el.offsetWidth}px`
|
||||
};
|
||||
|
||||
this.$emit('on-change', true);
|
||||
} else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
|
||||
this.affix = false;
|
||||
this.styles = null;
|
||||
|
||||
this.$emit('on-change', false);
|
||||
}
|
||||
|
||||
// Fixed Bottom
|
||||
if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
|
||||
this.affix = true;
|
||||
this.styles = {
|
||||
bottom: `${this.offsetBottom}px`,
|
||||
left: `${elOffset.left}px`,
|
||||
width: `${this.$el.offsetWidth}px`
|
||||
};
|
||||
|
||||
this.$emit('on-change', true);
|
||||
} else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
|
||||
this.affix = false;
|
||||
this.styles = null;
|
||||
|
||||
this.$emit('on-change', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Affix from './affix.vue';
|
||||
export default Affix;
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<template>
|
||||
<div v-if="!closed" :class="wrapClasses" transition="fade">
|
||||
<span :class="iconClasses" v-if="showIcon">
|
||||
<slot name="icon">
|
||||
<Icon :type="iconType"></Icon>
|
||||
</slot>
|
||||
</span>
|
||||
<span :class="messageClasses"><slot></slot></span>
|
||||
<span :class="descClasses" v-el:desc><slot name="desc"></slot></span>
|
||||
<a :class="closeClasses" v-if="closable" @click="close">
|
||||
<slot name="close">
|
||||
<Icon type="ios-close-empty"></Icon>
|
||||
</slot>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-alert';
|
||||
|
||||
export default {
|
||||
components: { Icon },
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['success', 'info', 'warning', 'error']);
|
||||
},
|
||||
default: 'info'
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
banner: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
closed: false,
|
||||
desc: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-${this.type}`,
|
||||
{
|
||||
[`${prefixCls}-with-icon`]: this.showIcon,
|
||||
[`${prefixCls}-with-desc`]: this.desc,
|
||||
[`${prefixCls}-with-banner`]: this.banner
|
||||
}
|
||||
];
|
||||
},
|
||||
messageClasses () {
|
||||
return `${prefixCls}-message`;
|
||||
},
|
||||
descClasses () {
|
||||
return `${prefixCls}-desc`;
|
||||
},
|
||||
closeClasses () {
|
||||
return `${prefixCls}-close`;
|
||||
},
|
||||
iconClasses () {
|
||||
return `${prefixCls}-icon`;
|
||||
},
|
||||
iconType () {
|
||||
let type = '';
|
||||
|
||||
switch (this.type) {
|
||||
case 'success':
|
||||
type = 'checkmark-circled';
|
||||
break;
|
||||
case 'info':
|
||||
type = 'information-circled';
|
||||
break;
|
||||
case 'warning':
|
||||
type = 'android-alert';
|
||||
break;
|
||||
case 'error':
|
||||
type = 'close-circled';
|
||||
break;
|
||||
}
|
||||
|
||||
return type;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close (e) {
|
||||
this.closed = true;
|
||||
this.$emit('on-close', e);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.desc = this.$els.desc.innerHTML != '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Alert from './alert.vue';
|
||||
export default Alert;
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="styles" @click="back">
|
||||
<slot>
|
||||
<div :class="innerClasses">
|
||||
<i class="ivu-icon ivu-icon-chevron-up"></i>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { scrollTop } from '../../utils/assist';
|
||||
const prefixCls = 'ivu-back-top';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 400
|
||||
},
|
||||
bottom: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
right: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
backTop: false
|
||||
};
|
||||
},
|
||||
ready () {
|
||||
window.addEventListener('scroll', this.handleScroll, false);
|
||||
window.addEventListener('resize', this.handleScroll, false);
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('scroll', this.handleScroll, false);
|
||||
window.removeEventListener('resize', this.handleScroll, false);
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-show`]: this.backTop
|
||||
}
|
||||
];
|
||||
},
|
||||
styles () {
|
||||
return {
|
||||
bottom: `${this.bottom}px`,
|
||||
right: `${this.right}px`
|
||||
};
|
||||
},
|
||||
innerClasses () {
|
||||
return `${prefixCls}-inner`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll () {
|
||||
this.backTop = window.pageYOffset >= this.height;
|
||||
},
|
||||
back () {
|
||||
scrollTop(window, document.body.scrollTop, 0, this.duration);
|
||||
this.$emit('on-click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import BackTop from './back-top.vue';
|
||||
export default BackTop;
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<span v-if="dot" :class="classes" v-el:badge>
|
||||
<slot></slot>
|
||||
<sup :class="dotClasses" v-show="badge"></sup>
|
||||
</span>
|
||||
<span v-else :class="classes" v-el:badge>
|
||||
<slot></slot>
|
||||
<sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-badge';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
count: [Number, String],
|
||||
dot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
overflowCount: {
|
||||
type: [Number, String],
|
||||
default: 99
|
||||
},
|
||||
class: String
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
},
|
||||
dotClasses () {
|
||||
return `${prefixCls}-dot`;
|
||||
},
|
||||
countClasses () {
|
||||
return [
|
||||
`${prefixCls}-count`,
|
||||
{
|
||||
[`${this.class}`]: !!this.class,
|
||||
[`${prefixCls}-count-alone`]: this.alone
|
||||
}
|
||||
];
|
||||
},
|
||||
finalCount () {
|
||||
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
|
||||
},
|
||||
badge () {
|
||||
let status = false;
|
||||
|
||||
if (this.count) {
|
||||
status = !(parseInt(this.count) === 0);
|
||||
}
|
||||
|
||||
if (this.dot) {
|
||||
status = true;
|
||||
if (this.count) {
|
||||
if (parseInt(this.count) === 0) {
|
||||
status = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return status;
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
alone: false
|
||||
};
|
||||
},
|
||||
compiled () {
|
||||
const child_length = this.$els.badge.children.length;
|
||||
if (child_length === 1) {
|
||||
this.alone = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Badge from './badge.vue';
|
||||
export default Badge;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import Notification from './notification.vue';
|
||||
import Vue from 'vue';
|
||||
import { camelcaseToHyphen } from '../../../utils/assist';
|
||||
|
||||
Notification.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<notification${props}></notification>`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const notification = new Vue({
|
||||
el: div,
|
||||
data: _props,
|
||||
components: { Notification }
|
||||
}).$children[0];
|
||||
|
||||
return {
|
||||
notice (noticeProps) {
|
||||
notification.add(noticeProps);
|
||||
},
|
||||
remove (key) {
|
||||
notification.close(key);
|
||||
},
|
||||
component: notification,
|
||||
destroy () {
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style" :transition="transitionName">
|
||||
<div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1.5
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
right: '50%'
|
||||
};
|
||||
}
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
key: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
onClose: {
|
||||
type: Function
|
||||
},
|
||||
transitionName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
withDesc: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseClass () {
|
||||
return `${this.prefixCls}-notice`;
|
||||
},
|
||||
classes () {
|
||||
return [
|
||||
this.baseClass,
|
||||
{
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${this.baseClass}-closable`]: this.closable,
|
||||
[`${this.baseClass}-with-desc`]: this.withDesc
|
||||
}
|
||||
];
|
||||
},
|
||||
contentClasses () {
|
||||
return `${this.baseClass}-content`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearCloseTimer () {
|
||||
if (this.closeTimer) {
|
||||
clearTimeout(this.closeTimer);
|
||||
this.closeTimer = null;
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.clearCloseTimer();
|
||||
this.onClose();
|
||||
this.$parent.close(this.key);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.clearCloseTimer();
|
||||
|
||||
if (this.duration !== 0) {
|
||||
this.closeTimer = setTimeout(() => {
|
||||
this.close();
|
||||
}, this.duration * 1000);
|
||||
}
|
||||
|
||||
// check if with desc in Notice component
|
||||
if (this.prefixCls === 'ivu-notice') {
|
||||
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearCloseTimer();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="style">
|
||||
<Notice v-for="notice in notices"
|
||||
:prefix-cls="prefixCls"
|
||||
:style="notice.style"
|
||||
:content="notice.content"
|
||||
:duration="notice.duration"
|
||||
:closable="notice.closable"
|
||||
:key="notice.key"
|
||||
:transition-name="notice.transitionName"
|
||||
:on-close="notice.onClose">
|
||||
</Notice>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Notice from './notice.vue';
|
||||
|
||||
const prefixCls = 'ivu-notification';
|
||||
let seed = 0;
|
||||
const now = Date.now();
|
||||
|
||||
function getUuid () {
|
||||
return 'ivuNotification_' + now + '_' + (seed++);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { Notice },
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: prefixCls
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
top: '65px',
|
||||
left: '50%'
|
||||
};
|
||||
}
|
||||
},
|
||||
content: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
notices: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}`,
|
||||
{
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add (notice) {
|
||||
const key = notice.key || getUuid();
|
||||
|
||||
let _notice = Object.assign({
|
||||
style: {
|
||||
right: '50%'
|
||||
},
|
||||
content: '',
|
||||
duration: 1.5,
|
||||
closable: false,
|
||||
key: key
|
||||
}, notice);
|
||||
|
||||
this.notices.push(_notice);
|
||||
},
|
||||
close (key) {
|
||||
const notices = this.notices;
|
||||
|
||||
for (let i = 0; i < notices.length; i++) {
|
||||
if (notices[i].key === key) {
|
||||
this.notices.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
/**
|
||||
* https://github.com/freeze-component/vue-popper
|
||||
* */
|
||||
import Popper from 'popper.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
boundariesPadding: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
reference: Object,
|
||||
popper: Object,
|
||||
offset: {
|
||||
default: 0
|
||||
},
|
||||
value: Boolean,
|
||||
transition: String,
|
||||
options: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
gpuAcceleration: false,
|
||||
boundariesElement: 'body'
|
||||
};
|
||||
}
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.visible = val;
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
visible(val) {
|
||||
if (val) {
|
||||
this.updatePopper();
|
||||
} else {
|
||||
this.destroyPopper();
|
||||
this.$emit('on-popper-hide');
|
||||
}
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createPopper() {
|
||||
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const options = this.options;
|
||||
const popper = this.popper || this.$els.popper;
|
||||
const reference = this.reference || this.$els.reference;
|
||||
|
||||
if (!popper || !reference) return;
|
||||
|
||||
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
|
||||
this.popperJS.destroy();
|
||||
}
|
||||
|
||||
options.placement = this.placement;
|
||||
options.offset = this.offset;
|
||||
|
||||
this.popperJS = new Popper(reference, popper, options);
|
||||
this.popperJS.onCreate(popper => {
|
||||
this.resetTransformOrigin(popper);
|
||||
this.$nextTick(this.updatePopper);
|
||||
this.$emit('created', this);
|
||||
});
|
||||
},
|
||||
updatePopper() {
|
||||
this.popperJS ? this.popperJS.update() : this.createPopper();
|
||||
},
|
||||
doDestroy() {
|
||||
if (this.visible) return;
|
||||
this.popperJS.destroy();
|
||||
this.popperJS = null;
|
||||
},
|
||||
destroyPopper() {
|
||||
if (this.popperJS) {
|
||||
this.resetTransformOrigin(this.popperJS);
|
||||
}
|
||||
},
|
||||
resetTransformOrigin(popper) {
|
||||
let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
|
||||
let placement = popper._popper.getAttribute('x-placement').split('-')[0];
|
||||
let origin = placementMap[placement];
|
||||
popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.popperJS) {
|
||||
this.popperJS.destroy();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<span>
|
||||
<a v-if="href" :href="href" :class="linkClasses">
|
||||
<slot></slot>
|
||||
</a>
|
||||
<span v-else :class="linkClasses">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<span :class="separatorClasses">
|
||||
<slot name="separator">{{{ separator }}}</slot>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-breadcrumb-item';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
href: {
|
||||
type: String
|
||||
},
|
||||
separator: {
|
||||
type: String,
|
||||
default: '/'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
linkClasses () {
|
||||
return `${prefixCls}-link`;
|
||||
},
|
||||
separatorClasses () {
|
||||
return `${prefixCls}-separator`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-breadcrumb';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
separator: {
|
||||
type: String,
|
||||
default: '/'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateChildren();
|
||||
},
|
||||
methods: {
|
||||
updateChildren () {
|
||||
this.$children.forEach((child) => {
|
||||
child.separator = this.separator;
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
separator () {
|
||||
this.updateChildren();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Breadcrumb from './breadcrumb.vue';
|
||||
import BreadcrumbItem from './breadcrumb-item.vue';
|
||||
|
||||
Breadcrumb.Item = BreadcrumbItem;
|
||||
export default Breadcrumb;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-btn-group';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
shape: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['circle', 'circle-outline']);
|
||||
}
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-${this.shape}`]: !!this.shape,
|
||||
[`${prefixCls}-vertical`]: this.vertical
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<template>
|
||||
<button :type="htmlType" :class="classes" :disabled="disabled">
|
||||
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
||||
<Icon :type="icon" v-if="icon && !loading"></Icon>
|
||||
<span v-if="showSlot" v-el:slot><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-btn';
|
||||
|
||||
export default {
|
||||
components: { Icon },
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
|
||||
}
|
||||
},
|
||||
shape: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['circle', 'circle-outline']);
|
||||
}
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
htmlType: {
|
||||
default: 'button',
|
||||
validator (value) {
|
||||
return oneOf(value, ['button', 'submit', 'reset']);
|
||||
}
|
||||
},
|
||||
icon: String,
|
||||
long: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showSlot: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-${this.type}`]: !!this.type,
|
||||
[`${prefixCls}-long`]: this.long,
|
||||
[`${prefixCls}-${this.shape}`]: !!this.shape,
|
||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-loading`]: this.loading != null && this.loading,
|
||||
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.showSlot = this.$els.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Button from './button.vue';
|
||||
import ButtonGroup from './button-group.vue';
|
||||
|
||||
Button.Group = ButtonGroup;
|
||||
export default Button;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="headClasses" v-if="showHead" v-el:head><slot name="title"></slot></div>
|
||||
<div :class="extraClasses" v-if="showExtra" v-el:extra><slot name="extra"></slot></div>
|
||||
<div :class="bodyClasses"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-card';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shadow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showHead: true,
|
||||
showExtra: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-bordered`]: this.bordered && !this.shadow,
|
||||
[`${prefixCls}-dis-hover`]: this.disHover || this.shadow,
|
||||
[`${prefixCls}-shadow`]: this.shadow
|
||||
}
|
||||
];
|
||||
},
|
||||
headClasses () {
|
||||
return `${prefixCls}-head`;
|
||||
},
|
||||
extraClasses () {
|
||||
return `${prefixCls}-extra`;
|
||||
},
|
||||
bodyClasses () {
|
||||
return `${prefixCls}-body`;
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.showHead = this.$els.head.innerHTML != '';
|
||||
this.showExtra = this.$els.extra.innerHTML != '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Card from './card.vue';
|
||||
export default Card;
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-carousel-item';
|
||||
|
||||
export default {
|
||||
componentName: 'carousel-item',
|
||||
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
width: 0,
|
||||
height: 'auto',
|
||||
left: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles () {
|
||||
return {
|
||||
width: `${this.width}px`,
|
||||
height: `${this.height}`,
|
||||
left: `${this.left}px`
|
||||
};
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.$parent.slotChange();
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$parent.slotChange();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,245 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<button :class="arrowClasses" class="left" @click="arrowEvent(-1)">
|
||||
<Icon type="chevron-left"></Icon>
|
||||
</button>
|
||||
<div :class="[prefixCls + '-list']">
|
||||
<div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<button :class="arrowClasses" class="right" @click="arrowEvent(1)">
|
||||
<Icon type="chevron-right"></Icon>
|
||||
</button>
|
||||
<ul :class="dotsClasses">
|
||||
<template v-for="n in slides.length">
|
||||
<li :class="[n === currentIndex ? prefixCls + '-active' : '']"
|
||||
@click="dotsEvent('click', n)"
|
||||
@mouseover="dotsEvent('hover', n)">
|
||||
<button></button>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon/icon.vue';
|
||||
import { getStyle, oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-carousel';
|
||||
|
||||
export default {
|
||||
name: 'Carousel',
|
||||
components: { Icon },
|
||||
props: {
|
||||
arrow: {
|
||||
type: String,
|
||||
default: 'hover',
|
||||
validator (value) {
|
||||
return oneOf(value, ['hover', 'always', 'never']);
|
||||
}
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoplaySpeed: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
},
|
||||
easing: {
|
||||
type: String,
|
||||
default: 'ease'
|
||||
},
|
||||
dots: {
|
||||
type: String,
|
||||
default: 'inside',
|
||||
validator (value) {
|
||||
return oneOf(value, ['inside', 'outside', 'none']);
|
||||
}
|
||||
},
|
||||
trigger: {
|
||||
type: String,
|
||||
default: 'click',
|
||||
validator (value) {
|
||||
return oneOf(value, ['click', 'hover']);
|
||||
}
|
||||
},
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 'auto',
|
||||
validator (value) {
|
||||
return value === 'auto' || Object.prototype.toString.call(value) === '[object Number]';
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
listWidth: 0,
|
||||
trackWidth: 0,
|
||||
trackOffset: 0,
|
||||
slides: [],
|
||||
slideInstances: [],
|
||||
timer: null,
|
||||
ready: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`
|
||||
];
|
||||
},
|
||||
trackStyles () {
|
||||
return {
|
||||
width: `${this.trackWidth}px`,
|
||||
transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
|
||||
transition: `transform 500ms ${this.easing}`
|
||||
};
|
||||
},
|
||||
arrowClasses () {
|
||||
return [
|
||||
`${prefixCls}-arrow`,
|
||||
`${prefixCls}-arrow-${this.arrow}`
|
||||
];
|
||||
},
|
||||
dotsClasses () {
|
||||
return [
|
||||
`${prefixCls}-dots`,
|
||||
`${prefixCls}-dots-${this.dots}`
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// find option component
|
||||
findChild (cb) {
|
||||
const find = function (child) {
|
||||
const name = child.$options.componentName;
|
||||
|
||||
if (name) {
|
||||
cb(child);
|
||||
} else if (child.$children.length) {
|
||||
child.$children.forEach((innerChild) => {
|
||||
find(innerChild, cb);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (this.slideInstances.length || !this.$children) {
|
||||
this.slideInstances.forEach((child) => {
|
||||
find(child);
|
||||
});
|
||||
} else {
|
||||
this.$children.forEach((child) => {
|
||||
find(child);
|
||||
});
|
||||
}
|
||||
},
|
||||
updateSlides (init ) {
|
||||
let slides = [];
|
||||
let index = 1;
|
||||
|
||||
this.findChild((child) => {
|
||||
slides.push({
|
||||
$el: child.$el
|
||||
});
|
||||
child.index = index++;
|
||||
|
||||
if (init) {
|
||||
this.slideInstances.push(child);
|
||||
}
|
||||
});
|
||||
|
||||
this.slides = slides;
|
||||
|
||||
this.updatePos();
|
||||
},
|
||||
updatePos () {
|
||||
this.findChild((child) => {
|
||||
child.width = this.listWidth;
|
||||
child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
||||
});
|
||||
|
||||
this.trackWidth = (this.slides.length || 0) * this.listWidth;
|
||||
},
|
||||
// use when slot changed
|
||||
slotChange () {
|
||||
this.$nextTick(() => {
|
||||
this.slides = [];
|
||||
this.slideInstances = [];
|
||||
|
||||
this.updateSlides(true, true);
|
||||
this.updatePos();
|
||||
this.updateOffset();
|
||||
});
|
||||
},
|
||||
handleResize () {
|
||||
this.listWidth = parseInt(getStyle(this.$el, 'width'));
|
||||
this.updatePos();
|
||||
this.updateOffset();
|
||||
},
|
||||
add (offset) {
|
||||
let index = this.currentIndex;
|
||||
index += offset;
|
||||
while (index < 0) index += this.slides.length;
|
||||
index = index % this.slides.length;
|
||||
this.currentIndex = index;
|
||||
},
|
||||
arrowEvent (offset) {
|
||||
this.setAutoplay();
|
||||
this.add(offset);
|
||||
},
|
||||
dotsEvent (event, n) {
|
||||
if (event === this.trigger && this.currentIndex !== n) {
|
||||
this.currentIndex = n;
|
||||
// Reset autoplay timer when trigger be activated
|
||||
this.setAutoplay();
|
||||
}
|
||||
},
|
||||
setAutoplay () {
|
||||
window.clearInterval(this.timer);
|
||||
if (this.autoplay) {
|
||||
this.timer = window.setInterval(() => {
|
||||
this.add(1);
|
||||
}, this.autoplaySpeed);
|
||||
}
|
||||
},
|
||||
updateOffset () {
|
||||
this.$nextTick(() => {
|
||||
this.trackOffset = this.currentIndex * this.listWidth;
|
||||
});
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateSlides(true);
|
||||
},
|
||||
watch: {
|
||||
autoplay () {
|
||||
this.setAutoplay();
|
||||
},
|
||||
autoplaySpeed () {
|
||||
this.setAutoplay();
|
||||
},
|
||||
currentIndex (val, oldVal) {
|
||||
this.$emit('on-change', oldVal, val);
|
||||
this.updateOffset();
|
||||
},
|
||||
height () {
|
||||
this.updatePos();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.handleResize();
|
||||
this.setAutoplay();
|
||||
window.addEventListener('resize', this.handleResize, false);
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.handleResize, false);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Carousel from './carousel.vue';
|
||||
import CarouselItem from './carousel-item.vue';
|
||||
|
||||
Carousel.Item = CarouselItem;
|
||||
export default Carousel;
|
||||
|
|
@ -1,210 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" v-clickoutside="handleClose">
|
||||
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
||||
<slot>
|
||||
<i-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:value.sync="displayRender"
|
||||
:size="size"
|
||||
:placeholder="placeholder"></i-input>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
</slot>
|
||||
</div>
|
||||
<Dropdown v-show="visible" transition="slide-up">
|
||||
<div>
|
||||
<Caspanel
|
||||
v-ref:caspanel
|
||||
:prefix-cls="prefixCls"
|
||||
:data.sync="data"
|
||||
:disabled="disabled"
|
||||
:change-on-select="changeOnSelect"
|
||||
:trigger="trigger"></Caspanel>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iInput from '../input/input.vue';
|
||||
import Dropdown from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import Caspanel from './caspanel.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-cascader';
|
||||
|
||||
export default {
|
||||
components: { iInput, Dropdown, Icon, Caspanel },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
trigger: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['click', 'hover']);
|
||||
},
|
||||
default: 'click'
|
||||
},
|
||||
changeOnSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
renderFormat: {
|
||||
type: Function,
|
||||
default (label) {
|
||||
return label.join(' / ');
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
visible: false,
|
||||
selected: [],
|
||||
tmpSelected: [],
|
||||
updatingValue: false // to fix set value in changeOnSelect type
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-show-clear`]: this.showCloseIcon,
|
||||
[`${prefixCls}-visible`]: this.visible,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
showCloseIcon () {
|
||||
return this.value && this.value.length && this.clearable;
|
||||
},
|
||||
displayRender () {
|
||||
let label = [];
|
||||
for (let i = 0; i < this.selected.length; i++) {
|
||||
label.push(this.selected[i].label);
|
||||
}
|
||||
|
||||
return this.renderFormat(label, this.selected);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearSelect () {
|
||||
const oldVal = JSON.stringify(this.value);
|
||||
this.value = this.selected = this.tmpSelected = [];
|
||||
this.handleClose();
|
||||
this.emitValue(this.value, oldVal);
|
||||
this.$broadcast('on-clear');
|
||||
},
|
||||
handleClose () {
|
||||
this.visible = false;
|
||||
},
|
||||
toggleOpen () {
|
||||
if (this.disabled) return false;
|
||||
if (this.visible) {
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.onFocus();
|
||||
}
|
||||
},
|
||||
onFocus () {
|
||||
this.visible = true;
|
||||
if (!this.value.length) {
|
||||
this.$broadcast('on-clear');
|
||||
}
|
||||
},
|
||||
updateResult (result) {
|
||||
this.tmpSelected = result;
|
||||
},
|
||||
updateSelected (init = false) {
|
||||
if (!this.changeOnSelect || init) {
|
||||
this.$broadcast('on-find-selected', this.value);
|
||||
}
|
||||
},
|
||||
emitValue (val, oldVal) {
|
||||
if (JSON.stringify(val) !== oldVal) {
|
||||
this.$emit('on-change', this.value, JSON.parse(JSON.stringify(this.selected)));
|
||||
this.$dispatch('on-form-change', this.value, JSON.parse(JSON.stringify(this.selected)));
|
||||
}
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateSelected(true);
|
||||
},
|
||||
events: {
|
||||
// lastValue: is click the final val
|
||||
// fromInit: is this emit from update value
|
||||
'on-result-change' (lastValue, changeOnSelect, fromInit) {
|
||||
if (lastValue || changeOnSelect) {
|
||||
const oldVal = JSON.stringify(this.value);
|
||||
this.selected = this.tmpSelected;
|
||||
|
||||
let newVal = [];
|
||||
this.selected.forEach((item) => {
|
||||
newVal.push(item.value);
|
||||
});
|
||||
|
||||
if (!fromInit) {
|
||||
this.updatingValue = true;
|
||||
this.value = newVal;
|
||||
this.emitValue(this.value, oldVal);
|
||||
}
|
||||
}
|
||||
if (lastValue && !fromInit) {
|
||||
this.handleClose();
|
||||
}
|
||||
},
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
if (this.value.length) {
|
||||
this.updateSelected();
|
||||
}
|
||||
}
|
||||
},
|
||||
value () {
|
||||
if (this.updatingValue) {
|
||||
this.updatingValue = false;
|
||||
return;
|
||||
}
|
||||
this.updateSelected(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Object,
|
||||
prefixCls: String,
|
||||
tmpItem: Object
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}-menu-item`,
|
||||
{
|
||||
[`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value,
|
||||
[`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<template>
|
||||
<ul v-if="data && data.length" :class="[prefixCls + '-menu']">
|
||||
<Casitem
|
||||
v-for="item in data"
|
||||
:prefix-cls="prefixCls"
|
||||
:data.sync="item"
|
||||
:tmp-item="tmpItem"
|
||||
@click.stop="handleClickItem(item)"
|
||||
@mouseenter.stop="handleHoverItem(item)"></Casitem>
|
||||
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
|
||||
</template>
|
||||
<script>
|
||||
import Casitem from './casitem.vue';
|
||||
|
||||
export default {
|
||||
name: 'Caspanel',
|
||||
components: { Casitem },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
sublist: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: Boolean,
|
||||
changeOnSelect: Boolean,
|
||||
trigger: String,
|
||||
prefixCls: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tmpItem: {},
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClickItem (item) {
|
||||
if (this.trigger !== 'click' && item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleHoverItem (item) {
|
||||
if (this.trigger !== 'hover' || !item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleTriggerItem (item, fromInit = false) {
|
||||
if (item.disabled) return;
|
||||
|
||||
// return value back recursion
|
||||
const backItem = this.getBaseItem(item);
|
||||
this.tmpItem = backItem;
|
||||
this.emitUpdate([backItem]);
|
||||
|
||||
if (item.children && item.children.length){
|
||||
this.sublist = item.children;
|
||||
this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
|
||||
} else {
|
||||
this.sublist = [];
|
||||
this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
|
||||
}
|
||||
},
|
||||
updateResult (item) {
|
||||
this.result = [this.tmpItem].concat(item);
|
||||
this.emitUpdate(this.result);
|
||||
},
|
||||
getBaseItem (item) {
|
||||
let backItem = Object.assign({}, item);
|
||||
if (backItem.children) {
|
||||
delete backItem.children;
|
||||
}
|
||||
|
||||
return backItem;
|
||||
},
|
||||
emitUpdate (result) {
|
||||
if (this.$parent.$options.name === 'Caspanel') {
|
||||
this.$parent.updateResult(result);
|
||||
} else {
|
||||
this.$parent.$parent.updateResult(result);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.sublist = [];
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-find-selected' (val) {
|
||||
let value = [...val];
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
for (let j = 0; j < this.data.length; j++) {
|
||||
if (value[i] === this.data[j].value) {
|
||||
this.handleTriggerItem(this.data[j], true);
|
||||
value.splice(0, 1);
|
||||
this.$nextTick(() => {
|
||||
this.$broadcast('on-find-selected', value);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'on-clear' () {
|
||||
this.sublist = [];
|
||||
this.tmpItem = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Cascader from './cascader.vue';
|
||||
export default Cascader;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-checkbox-group';
|
||||
|
||||
export default {
|
||||
name: 'checkboxGroup',
|
||||
props: {
|
||||
model: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateModel(true);
|
||||
},
|
||||
methods: {
|
||||
updateModel (update) {
|
||||
const model = this.model;
|
||||
|
||||
this.$children.forEach((child) => {
|
||||
child.model = model;
|
||||
|
||||
if (update) {
|
||||
child.selected = model.indexOf(child.value) >= 0;
|
||||
child.group = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
change (data) {
|
||||
this.model = data;
|
||||
this.$emit('on-change', data);
|
||||
this.$dispatch('on-form-change', data);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
model () {
|
||||
this.updateModel(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<template>
|
||||
<label :class="wrapClasses">
|
||||
<span :class="checkboxClasses">
|
||||
<span :class="innerClasses"></span>
|
||||
<input
|
||||
v-if="group"
|
||||
type="checkbox"
|
||||
:class="inputClasses"
|
||||
:disabled="disabled"
|
||||
:value="value"
|
||||
v-model="model"
|
||||
@change="change">
|
||||
<input
|
||||
v-if="!group"
|
||||
type="checkbox"
|
||||
:class="inputClasses"
|
||||
:disabled="disabled"
|
||||
v-model="checked"
|
||||
@change="change">
|
||||
</span>
|
||||
<slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-checkbox';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean]
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
model: [],
|
||||
selected: false,
|
||||
group: false,
|
||||
showSlot: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-group-item`]: this.group,
|
||||
[`${prefixCls}-wrapper-checked`]: this.selected,
|
||||
[`${prefixCls}-wrapper-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
checkboxClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-checked`]: this.selected,
|
||||
[`${prefixCls}-disabled`]: this.disabled,
|
||||
[`${prefixCls}-indeterminate`]: this.indeterminate
|
||||
}
|
||||
];
|
||||
},
|
||||
innerClasses () {
|
||||
return `${prefixCls}-inner`;
|
||||
},
|
||||
inputClasses () {
|
||||
return `${prefixCls}-input`;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
|
||||
if (!this.group) {
|
||||
this.updateModel();
|
||||
if (this.$els.slot && this.$els.slot.innerHTML === '') {
|
||||
this.showSlot = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (event) {
|
||||
if (this.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.selected = event.target.checked;
|
||||
|
||||
if (this.group) {
|
||||
this.$parent.change(this.model);
|
||||
} else {
|
||||
this.$emit('on-change', this.checked);
|
||||
this.$dispatch('on-form-change', this.checked);
|
||||
}
|
||||
},
|
||||
updateModel () {
|
||||
this.selected = this.checked;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checked () {
|
||||
this.updateModel();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Checkbox from './checkbox.vue';
|
||||
import CheckboxGroup from './checkbox-group.vue';
|
||||
|
||||
Checkbox.Group = CheckboxGroup;
|
||||
export default Checkbox;
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<div :style="circleSize" :class="wrapClasses">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
|
||||
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
|
||||
</svg>
|
||||
<div :class="innerClasses">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-chart-circle';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 120
|
||||
},
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
strokeColor: {
|
||||
type: String,
|
||||
default: '#2db7f5'
|
||||
},
|
||||
strokeLinecap: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['square', 'round']);
|
||||
},
|
||||
default: 'round'
|
||||
},
|
||||
trailWidth: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
trailColor: {
|
||||
type: String,
|
||||
default: '#eaeef2'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
circleSize () {
|
||||
return {
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`
|
||||
};
|
||||
},
|
||||
radius () {
|
||||
return 50 - this.strokeWidth / 2;
|
||||
},
|
||||
pathString () {
|
||||
return `M 50,50 m 0,-${this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
|
||||
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
|
||||
},
|
||||
len () {
|
||||
return Math.PI * 2 * this.radius;
|
||||
},
|
||||
pathStyle () {
|
||||
return {
|
||||
'stroke-dasharray': `${this.len}px ${this.len}px`,
|
||||
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
|
||||
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
|
||||
};
|
||||
},
|
||||
wrapClasses () {
|
||||
return `${prefixCls}`;
|
||||
},
|
||||
innerClasses () {
|
||||
return `${prefixCls}-inner`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Circle from './circle.vue';
|
||||
export default Circle;
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-collapse';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeKey: {
|
||||
type: [Array, String]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.setActive();
|
||||
},
|
||||
methods: {
|
||||
setActive () {
|
||||
const activeKey = this.getActiveKey();
|
||||
|
||||
this.$children.forEach((child, index) => {
|
||||
const key = child.key || index.toString();
|
||||
let isActive = false;
|
||||
|
||||
if (self.accordion) {
|
||||
isActive = activeKey === key;
|
||||
} else {
|
||||
isActive = activeKey.indexOf(key) > -1;
|
||||
}
|
||||
|
||||
child.isActive = isActive;
|
||||
child.index = index;
|
||||
});
|
||||
},
|
||||
getActiveKey () {
|
||||
let activeKey = this.activeKey || [];
|
||||
const accordion = this.accordion;
|
||||
|
||||
if (!Array.isArray(activeKey)) {
|
||||
activeKey = [activeKey];
|
||||
}
|
||||
|
||||
if (accordion && activeKey.length > 1) {
|
||||
activeKey = [activeKey[0]];
|
||||
}
|
||||
|
||||
for (let i = 0; i < activeKey.length; i++) {
|
||||
activeKey[i] = activeKey[i].toString();
|
||||
}
|
||||
|
||||
return activeKey;
|
||||
},
|
||||
toggle (data) {
|
||||
const key = data.key.toString();
|
||||
let newActiveKey = [];
|
||||
|
||||
if (this.accordion) {
|
||||
if (!data.isActive) {
|
||||
newActiveKey.push(key);
|
||||
}
|
||||
} else {
|
||||
let activeKey = this.getActiveKey();
|
||||
const keyIndex = activeKey.indexOf(key);
|
||||
|
||||
if (data.isActive) {
|
||||
if (keyIndex > -1) {
|
||||
activeKey.splice(keyIndex, 1);
|
||||
}
|
||||
} else {
|
||||
if (keyIndex < 0) {
|
||||
activeKey.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
newActiveKey = activeKey;
|
||||
}
|
||||
|
||||
this.activeKey = newActiveKey;
|
||||
this.$emit('on-change', newActiveKey);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeKey () {
|
||||
this.setActive();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Collapse from './collapse.vue';
|
||||
import Panel from './panel.vue';
|
||||
|
||||
Collapse.Panel = Panel;
|
||||
export default Collapse;
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<div :class="itemClasses">
|
||||
<div :class="headerClasses" @click="toggle">
|
||||
<Icon type="arrow-right-b"></Icon>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div :class="concentClasses" v-show="isActive">
|
||||
<div :class="boxClasses"><slot name="content"></slot></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon/icon.vue';
|
||||
const prefixCls = 'ivu-collapse';
|
||||
|
||||
export default {
|
||||
components: { Icon },
|
||||
props: {
|
||||
key: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
index: 0, // use index for default when key is null
|
||||
isActive: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
itemClasses () {
|
||||
return [
|
||||
`${prefixCls}-item`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.isActive
|
||||
}
|
||||
];
|
||||
},
|
||||
headerClasses () {
|
||||
return `${prefixCls}-header`;
|
||||
},
|
||||
concentClasses () {
|
||||
return `${prefixCls}-content`;
|
||||
},
|
||||
boxClasses () {
|
||||
return `${prefixCls}-content-box`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.$parent.toggle({
|
||||
key: this.key || this.index,
|
||||
isActive: this.isActive
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-confirm']">
|
||||
<span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
|
||||
<template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
|
||||
<template v-else>{{ t('i.datepicker.selectTime') }}</template>
|
||||
</span>
|
||||
<i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
|
||||
<i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iButton from '../../button/button.vue';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
components: { iButton },
|
||||
props: {
|
||||
showTime: false,
|
||||
isTime: false,
|
||||
timeDisabled: false
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
timeClasses () {
|
||||
return {
|
||||
[`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear () {
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handleSuccess () {
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handleToggleTime () {
|
||||
if (this.timeDisabled) return;
|
||||
this.$emit('on-pick-toggle-time');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="classes"
|
||||
@click="handleClick"
|
||||
@mousemove="handleMouseMove">
|
||||
<div :class="[prefixCls + '-header']">
|
||||
<span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
|
||||
</div>
|
||||
<span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
const clearHours = function (time) {
|
||||
const cloneDate = new Date(time);
|
||||
cloneDate.setHours(0, 0, 0, 0);
|
||||
return cloneDate.getTime();
|
||||
};
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
month: {},
|
||||
selectionMode: {
|
||||
default: 'day'
|
||||
},
|
||||
disabledDate: {},
|
||||
minDate: {},
|
||||
maxDate: {},
|
||||
rangeState: {
|
||||
default () {
|
||||
return {
|
||||
endDate: null,
|
||||
selecting: false
|
||||
};
|
||||
}
|
||||
},
|
||||
value: ''
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
readCells: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'rangeState.endDate' (newVal) {
|
||||
this.markRange(newVal);
|
||||
},
|
||||
minDate(newVal, oldVal) {
|
||||
if (newVal && !oldVal) {
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(newVal);
|
||||
} else if (!newVal) {
|
||||
this.rangeState.selecting = false;
|
||||
this.markRange(newVal);
|
||||
} else {
|
||||
this.markRange();
|
||||
}
|
||||
},
|
||||
maxDate(newVal, oldVal) {
|
||||
if (newVal && !oldVal) {
|
||||
this.rangeState.selecting = false;
|
||||
this.markRange(newVal);
|
||||
// this.$emit('on-pick', {
|
||||
// minDate: this.minDate,
|
||||
// maxDate: this.maxDate
|
||||
// });
|
||||
}
|
||||
},
|
||||
cells: {
|
||||
handler (cells) {
|
||||
this.readCells = cells;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`
|
||||
];
|
||||
},
|
||||
cells () {
|
||||
const date = new Date(this.year, this.month, 1);
|
||||
let day = getFirstDayOfMonth(date); // day of first day
|
||||
day = (day === 0 ? 7 : day);
|
||||
const today = clearHours(new Date()); // timestamp of today
|
||||
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day
|
||||
const minDay = clearHours(new Date(this.minDate));
|
||||
const maxDay = clearHours(new Date(this.maxDate));
|
||||
|
||||
const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
|
||||
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
|
||||
|
||||
const disabledDate = this.disabledDate;
|
||||
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
type: '',
|
||||
selected: false,
|
||||
disabled: false,
|
||||
range: false,
|
||||
start: false,
|
||||
end: false
|
||||
};
|
||||
if (day !== 7) {
|
||||
for (let i = 0; i < day; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.type = 'prev-month';
|
||||
cell.text = dateCountOfLastMonth - (day - 1) + i;
|
||||
|
||||
let prevMonth = this.month - 1;
|
||||
let prevYear = this.year;
|
||||
if (this.month === 0) {
|
||||
prevMonth = 11;
|
||||
prevYear -= 1;
|
||||
}
|
||||
const time = clearHours(new Date(prevYear, prevMonth, cell.text));
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
|
||||
cells.push(cell);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 1; i <= dateCountOfMonth; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
const time = clearHours(new Date(this.year, this.month, i));
|
||||
cell.type = time === today ? 'today' : 'normal';
|
||||
cell.text = i;
|
||||
cell.selected = time === selectDay;
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
|
||||
cell.range = time >= minDay && time <= maxDay;
|
||||
cell.start = this.minDate && time === minDay;
|
||||
cell.end = this.maxDate && time === maxDay;
|
||||
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
const nextMonthCount = 42 - cells.length;
|
||||
for (let i = 1; i <= nextMonthCount; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.type = 'next-month';
|
||||
cell.text = i;
|
||||
|
||||
let nextMonth = this.month + 1;
|
||||
let nextYear = this.year;
|
||||
if (this.month === 11) {
|
||||
nextMonth = 0;
|
||||
nextYear += 1;
|
||||
}
|
||||
const time = clearHours(new Date(nextYear, nextMonth, cell.text));
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDateOfCell (cell) {
|
||||
let year = this.year;
|
||||
let month = this.month;
|
||||
let day = cell.text;
|
||||
|
||||
const date = this.date;
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
const seconds = date.getSeconds();
|
||||
|
||||
if (cell.type === 'prev-month') {
|
||||
if (month === 0) {
|
||||
month = 11;
|
||||
year--;
|
||||
} else {
|
||||
month--;
|
||||
}
|
||||
} else if (cell.type === 'next-month') {
|
||||
if (month === 11) {
|
||||
month = 0;
|
||||
year++;
|
||||
} else {
|
||||
month++;
|
||||
}
|
||||
}
|
||||
|
||||
return new Date(year, month, day, hours, minutes, seconds);
|
||||
},
|
||||
handleClick (event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
if (cell.disabled) return;
|
||||
|
||||
const newDate = this.getDateOfCell(cell);
|
||||
|
||||
if (this.selectionMode === 'range') {
|
||||
if (this.minDate && this.maxDate) {
|
||||
const minDate = new Date(newDate.getTime());
|
||||
const maxDate = null;
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(this.minDate);
|
||||
|
||||
this.$emit('on-pick', {minDate, maxDate}, false);
|
||||
} else if (this.minDate && !this.maxDate) {
|
||||
if (newDate >= this.minDate) {
|
||||
const maxDate = new Date(newDate.getTime());
|
||||
this.rangeState.selecting = false;
|
||||
|
||||
this.$emit('on-pick', {minDate: this.minDate, maxDate});
|
||||
} else {
|
||||
const minDate = new Date(newDate.getTime());
|
||||
|
||||
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
|
||||
}
|
||||
} else if (!this.minDate) {
|
||||
const minDate = new Date(newDate.getTime());
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(this.minDate);
|
||||
|
||||
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
|
||||
}
|
||||
} else {
|
||||
this.$emit('on-pick', newDate);
|
||||
}
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
handleMouseMove (event) {
|
||||
if (!this.rangeState.selecting) return;
|
||||
|
||||
this.$emit('on-changerange', {
|
||||
minDate: this.minDate,
|
||||
maxDate: this.maxDate,
|
||||
rangeState: this.rangeState
|
||||
});
|
||||
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
// if (cell.disabled) return; // todo 待确定
|
||||
this.rangeState.endDate = this.getDateOfCell(cell);
|
||||
}
|
||||
},
|
||||
markRange (maxDate) {
|
||||
const minDate = this.minDate;
|
||||
if (!maxDate) maxDate = this.maxDate;
|
||||
|
||||
const minDay = clearHours(new Date(minDate));
|
||||
const maxDay = clearHours(new Date(maxDate));
|
||||
|
||||
this.cells.forEach(cell => {
|
||||
if (cell.type === 'today' || cell.type === 'normal') {
|
||||
const time = clearHours(new Date(this.year, this.month, cell.text));
|
||||
cell.range = time >= minDay && time <= maxDay;
|
||||
cell.start = minDate && time === minDay;
|
||||
cell.end = maxDate && time === maxDay;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled,
|
||||
[`${prefixCls}-cell-today`]: cell.type === 'today',
|
||||
[`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month',
|
||||
[`${prefixCls}-cell-next-month`]: cell.type === 'next-month',
|
||||
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" @click="handleClick">
|
||||
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
props: {
|
||||
date: {},
|
||||
month: {
|
||||
type: Number
|
||||
},
|
||||
disabledDate: {},
|
||||
selectionMode: {
|
||||
default: 'month'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-month`
|
||||
];
|
||||
},
|
||||
cells () {
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
selected: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.text = i + 1;
|
||||
|
||||
const date = new Date(this.date);
|
||||
date.setMonth(i);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'month';
|
||||
|
||||
cell.selected = Number(this.month) === i;
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
handleClick (event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const index = parseInt(event.target.getAttribute('index'));
|
||||
const cell = this.cells[index];
|
||||
if (cell.disabled) return;
|
||||
|
||||
this.$emit('on-pick', index);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
tCell (cell) {
|
||||
return this.t(`i.datepicker.months.m${cell}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls+ '-list']" v-el:hours>
|
||||
<ul :class="[prefixCls + '-ul']" @click="handleClickHours">
|
||||
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="[prefixCls+ '-list']" v-el:minutes>
|
||||
<ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
|
||||
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
|
||||
<ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
|
||||
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Options from '../time-mixins';
|
||||
import { deepCopy, scrollTop, firstUpperCase } from '../../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-time-picker-cells';
|
||||
|
||||
export default {
|
||||
mixins: [Options],
|
||||
props: {
|
||||
hours: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
minutes: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
seconds: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
compiled: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
hoursList () {
|
||||
let hours = [];
|
||||
const hour_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
const hour = deepCopy(hour_tmpl);
|
||||
hour.text = i;
|
||||
|
||||
if (this.disabledHours.length && this.disabledHours.indexOf(i) > -1) {
|
||||
hour.disabled = true;
|
||||
if (this.hideDisabledOptions) hour.hide = true;
|
||||
}
|
||||
if (this.hours === i) hour.selected = true;
|
||||
hours.push(hour);
|
||||
}
|
||||
|
||||
return hours;
|
||||
},
|
||||
minutesList () {
|
||||
let minutes = [];
|
||||
const minute_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const minute = deepCopy(minute_tmpl);
|
||||
minute.text = i;
|
||||
|
||||
if (this.disabledMinutes.length && this.disabledMinutes.indexOf(i) > -1) {
|
||||
minute.disabled = true;
|
||||
if (this.hideDisabledOptions) minute.hide = true;
|
||||
}
|
||||
if (this.minutes === i) minute.selected = true;
|
||||
minutes.push(minute);
|
||||
}
|
||||
|
||||
return minutes;
|
||||
},
|
||||
secondsList () {
|
||||
let seconds = [];
|
||||
const second_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const second = deepCopy(second_tmpl);
|
||||
second.text = i;
|
||||
|
||||
if (this.disabledSeconds.length && this.disabledSeconds.indexOf(i) > -1) {
|
||||
second.disabled = true;
|
||||
if (this.hideDisabledOptions) second.hide = true;
|
||||
}
|
||||
if (this.seconds === i) second.selected = true;
|
||||
seconds.push(second);
|
||||
}
|
||||
|
||||
return seconds;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
handleClickHours (event) {
|
||||
this.handleClick('hours', event);
|
||||
},
|
||||
handleClickMinutes (event) {
|
||||
this.handleClick('minutes', event);
|
||||
},
|
||||
handleClickSeconds (event) {
|
||||
this.handleClick('seconds', event);
|
||||
},
|
||||
handleClick (type, event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'LI') {
|
||||
const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
|
||||
if (cell.disabled) return;
|
||||
const data = {};
|
||||
data[type] = cell.text;
|
||||
this.$emit('on-change', data);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
scroll (type, index) {
|
||||
const from = this.$els[type].scrollTop;
|
||||
const to = 24 * this.getScrollIndex(type, index);
|
||||
scrollTop(this.$els[type], from, to, 500);
|
||||
},
|
||||
getScrollIndex (type, index) {
|
||||
const Type = firstUpperCase(type);
|
||||
const disabled = this[`disabled${Type}`];
|
||||
if (disabled.length && this.hideDisabledOptions) {
|
||||
let _count = 0;
|
||||
disabled.forEach(item => item <= index ? _count++ : '');
|
||||
index -= _count;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
updateScroll () {
|
||||
const times = ['hours', 'minutes', 'seconds'];
|
||||
this.$nextTick(() => {
|
||||
times.forEach(type => {
|
||||
this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
|
||||
});
|
||||
});
|
||||
},
|
||||
formatTime (text) {
|
||||
return text < 10 ? '0' + text : text;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hours (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('hours', val);
|
||||
},
|
||||
minutes (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('minutes', val);
|
||||
},
|
||||
seconds (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('seconds', val);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateScroll();
|
||||
this.$nextTick(() => this.compiled = true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" @click="handleClick">
|
||||
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
disabledDate: {},
|
||||
selectionMode: {
|
||||
default: 'year'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-year`
|
||||
];
|
||||
},
|
||||
startYear() {
|
||||
return Math.floor(this.year / 10) * 10;
|
||||
},
|
||||
cells () {
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
selected: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.text = this.startYear + i;
|
||||
|
||||
const date = new Date(this.date);
|
||||
date.setFullYear(cell.text);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';
|
||||
|
||||
cell.selected = Number(this.year) === cell.text;
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
nextTenYear() {
|
||||
this.$emit('on-pick', Number(this.year) + 10, false);
|
||||
},
|
||||
prevTenYear() {
|
||||
this.$emit('on-pick', Number(this.year) - 10, false);
|
||||
},
|
||||
handleClick (event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
if (cell.disabled) return;
|
||||
|
||||
this.$emit('on-pick', cell.text);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import DatePicker from './picker/date-picker';
|
||||
|
||||
export default DatePicker;
|
||||
|
|
@ -1,421 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
|
||||
<div
|
||||
:class="[prefixCls + '-shortcut']"
|
||||
v-for="shortcut in shortcuts"
|
||||
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth"
|
||||
v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker('left')">{{ leftYearLabel }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker('left')"
|
||||
v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('left')"
|
||||
v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
|
||||
</div>
|
||||
<date-table
|
||||
v-show="leftCurrentView === 'date'"
|
||||
:year="leftYear"
|
||||
:month="leftMonth"
|
||||
:date="date"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:range-state="rangeState"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-changerange="handleChangeRange"
|
||||
@on-pick="handleRangePick"
|
||||
@on-pick-click="handlePickClick"></date-table>
|
||||
<year-table
|
||||
v-ref:left-year-table
|
||||
v-show="leftCurrentView === 'year'"
|
||||
:year="leftTableYear"
|
||||
:date="leftTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleLeftYearPick"
|
||||
@on-pick-click="handlePickClick"></year-table>
|
||||
<month-table
|
||||
v-ref:left-month-table
|
||||
v-show="leftCurrentView === 'month'"
|
||||
:month="leftMonth"
|
||||
:date="leftTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleLeftMonthPick"
|
||||
@on-pick-click="handlePickClick"></month-table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear('right')"
|
||||
v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker('right')">{{ rightYearLabel }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker('right')"
|
||||
v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth"
|
||||
v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||
</div>
|
||||
<date-table
|
||||
v-show="rightCurrentView === 'date'"
|
||||
:year="rightYear"
|
||||
:month="rightMonth"
|
||||
:date="rightDate"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:range-state="rangeState"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-changerange="handleChangeRange"
|
||||
@on-pick="handleRangePick"
|
||||
@on-pick-click="handlePickClick"></date-table>
|
||||
<year-table
|
||||
v-ref:right-year-table
|
||||
v-show="rightCurrentView === 'year'"
|
||||
:year="rightTableYear"
|
||||
:date="rightTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleRightYearPick"
|
||||
@on-pick-click="handlePickClick"></year-table>
|
||||
<month-table
|
||||
v-ref:right-month-table
|
||||
v-show="rightCurrentView === 'month'"
|
||||
:month="rightMonth"
|
||||
:date="rightTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleRightMonthPick"
|
||||
@on-pick-click="handlePickClick"></month-table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']" v-show="isTime">
|
||||
<time-picker
|
||||
v-ref:time-picker
|
||||
v-show="isTime"
|
||||
@on-pick="handleTimePick"
|
||||
@on-pick-click="handlePickClick"></time-picker>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
:show-time="showTime"
|
||||
:is-time="isTime"
|
||||
:time-disabled="timeDisabled"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../../icon/icon.vue';
|
||||
import DateTable from '../base/date-table.vue';
|
||||
import YearTable from '../base/year-table.vue';
|
||||
import MonthTable from '../base/month-table.vue';
|
||||
import TimePicker from './time-range.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
shortcuts: [],
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
minDate: '',
|
||||
maxDate: '',
|
||||
confirm: false,
|
||||
rangeState: {
|
||||
endDate: null,
|
||||
selecting: false
|
||||
},
|
||||
showTime: false,
|
||||
disabledDate: '',
|
||||
leftCurrentView: 'date',
|
||||
rightCurrentView: 'date',
|
||||
selectionMode: 'range',
|
||||
leftTableYear: null,
|
||||
rightTableYear: null,
|
||||
isTime: false,
|
||||
format: 'yyyy-MM-dd'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${datePrefixCls}-with-range`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
];
|
||||
},
|
||||
leftYear () {
|
||||
return this.date.getFullYear();
|
||||
},
|
||||
leftTableDate () {
|
||||
if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
|
||||
return new Date(this.leftTableYear);
|
||||
} else {
|
||||
return this.date;
|
||||
}
|
||||
},
|
||||
leftYearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
if (this.leftCurrentView === 'year') {
|
||||
const year = this.leftTableYear;
|
||||
if (!year) return '';
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
} else {
|
||||
const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
|
||||
if (!year) return '';
|
||||
return `${year}${tYear}`;
|
||||
}
|
||||
},
|
||||
leftMonth () {
|
||||
return this.date.getMonth();
|
||||
},
|
||||
leftMonthLabel () {
|
||||
const month = this.leftMonth + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
},
|
||||
rightYear () {
|
||||
return this.rightDate.getFullYear();
|
||||
},
|
||||
rightTableDate () {
|
||||
if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
|
||||
return new Date(this.rightTableYear);
|
||||
} else {
|
||||
return this.date;
|
||||
}
|
||||
},
|
||||
rightYearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
if (this.rightCurrentView === 'year') {
|
||||
const year = this.rightTableYear;
|
||||
if (!year) return '';
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
} else {
|
||||
const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
|
||||
if (!year) return '';
|
||||
return `${year}${tYear}`;
|
||||
}
|
||||
},
|
||||
rightMonth () {
|
||||
return this.rightDate.getMonth();
|
||||
},
|
||||
rightMonthLabel () {
|
||||
const month = this.rightMonth + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
},
|
||||
rightDate () {
|
||||
const newDate = new Date(this.date);
|
||||
const month = newDate.getMonth();
|
||||
newDate.setDate(1);
|
||||
|
||||
if (month === 11) {
|
||||
newDate.setFullYear(newDate.getFullYear() + 1);
|
||||
newDate.setMonth(0);
|
||||
} else {
|
||||
newDate.setMonth(month + 1);
|
||||
}
|
||||
return newDate;
|
||||
},
|
||||
timeDisabled () {
|
||||
return !(this.minDate && this.maxDate);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
if (!newVal) {
|
||||
this.minDate = null;
|
||||
this.maxDate = null;
|
||||
} else if (Array.isArray(newVal)) {
|
||||
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
|
||||
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
|
||||
if (this.minDate) this.date = new Date(this.minDate);
|
||||
}
|
||||
if (this.showTime) this.$refs.timePicker.value = newVal;
|
||||
},
|
||||
minDate (val) {
|
||||
if (this.showTime) this.$refs.timePicker.date = val;
|
||||
},
|
||||
maxDate (val) {
|
||||
if (this.showTime) this.$refs.timePicker.dateEnd = val;
|
||||
},
|
||||
format (val) {
|
||||
if (this.showTime) this.$refs.timePicker.format = val;
|
||||
},
|
||||
isTime (val) {
|
||||
if (val) this.$refs.timePicker.updateScroll();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetDate () {
|
||||
this.date = new Date(this.date);
|
||||
this.leftTableYear = this.date.getFullYear();
|
||||
this.rightTableYear = this.rightDate.getFullYear();
|
||||
},
|
||||
handleClear() {
|
||||
this.minDate = null;
|
||||
this.maxDate = null;
|
||||
this.date = new Date();
|
||||
this.handleConfirm();
|
||||
if (this.showTime) this.$refs.timePicker.handleClear();
|
||||
},
|
||||
resetView(reset = false) {
|
||||
this.leftCurrentView = 'date';
|
||||
this.rightCurrentView = 'date';
|
||||
|
||||
this.leftTableYear = this.leftYear;
|
||||
this.rightTableYear = this.rightYear;
|
||||
|
||||
if (reset) this.isTime = false;
|
||||
},
|
||||
prevYear (direction) {
|
||||
if (this[`${direction}CurrentView`] === 'year') {
|
||||
this.$refs[`${direction}YearTable`].prevTenYear();
|
||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
||||
this[`${direction}TableYear`]--;
|
||||
} else {
|
||||
const date = this.date;
|
||||
date.setFullYear(date.getFullYear() - 1);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
nextYear (direction) {
|
||||
if (this[`${direction}CurrentView`] === 'year') {
|
||||
this.$refs[`${direction}YearTable`].nextTenYear();
|
||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
||||
this[`${direction}TableYear`]--;
|
||||
} else {
|
||||
const date = this.date;
|
||||
date.setFullYear(date.getFullYear() + 1);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
prevMonth () {
|
||||
this.date = prevMonth(this.date);
|
||||
},
|
||||
nextMonth () {
|
||||
this.date = nextMonth(this.date);
|
||||
},
|
||||
handleLeftYearPick (year, close = true) {
|
||||
this.handleYearPick(year, close, 'left');
|
||||
},
|
||||
handleRightYearPick (year, close = true) {
|
||||
this.handleYearPick(year, close, 'right');
|
||||
},
|
||||
handleYearPick (year, close, direction) {
|
||||
this[`${direction}TableYear`] = year;
|
||||
if (!close) return;
|
||||
|
||||
this[`${direction}CurrentView`] = 'month';
|
||||
},
|
||||
handleLeftMonthPick (month) {
|
||||
this.handleMonthPick(month, 'left');
|
||||
},
|
||||
handleRightMonthPick (month) {
|
||||
this.handleMonthPick(month, 'right');
|
||||
},
|
||||
handleMonthPick (month, direction) {
|
||||
let year = this[`${direction}TableYear`];
|
||||
if (direction === 'right') {
|
||||
if (month === 0) {
|
||||
month = 11;
|
||||
year--;
|
||||
} else {
|
||||
month--;
|
||||
}
|
||||
}
|
||||
|
||||
this.date.setYear(year);
|
||||
this.date.setMonth(month);
|
||||
this[`${direction}CurrentView`] = 'date';
|
||||
this.resetDate();
|
||||
},
|
||||
showYearPicker (direction) {
|
||||
this[`${direction}CurrentView`] = 'year';
|
||||
this[`${direction}TableYear`] = this[`${direction}Year`];
|
||||
},
|
||||
showMonthPicker (direction) {
|
||||
this[`${direction}CurrentView`] = 'month';
|
||||
},
|
||||
handleConfirm(visible) {
|
||||
this.$emit('on-pick', [this.minDate, this.maxDate], visible);
|
||||
},
|
||||
handleRangePick (val, close = true) {
|
||||
if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
|
||||
|
||||
this.minDate = val.minDate;
|
||||
this.maxDate = val.maxDate;
|
||||
|
||||
if (!close) return;
|
||||
// if (!this.showTime) {
|
||||
// this.handleConfirm(false);
|
||||
// }
|
||||
this.handleConfirm(false);
|
||||
},
|
||||
handleChangeRange (val) {
|
||||
this.minDate = val.minDate;
|
||||
this.maxDate = val.maxDate;
|
||||
this.rangeState = val.rangeState;
|
||||
},
|
||||
handleToggleTime () {
|
||||
this.isTime = !this.isTime;
|
||||
},
|
||||
handleTimePick (date) {
|
||||
this.minDate = date[0];
|
||||
this.maxDate = date[1];
|
||||
this.handleConfirm(false);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.showTime) {
|
||||
// todo 这里也到不了
|
||||
this.$refs.timePicker.date = this.minDate;
|
||||
this.$refs.timePicker.dateEnd = this.maxDate;
|
||||
this.$refs.timePicker.value = this.value;
|
||||
this.$refs.timePicker.format = this.format;
|
||||
this.$refs.timePicker.showDate = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
|
||||
<div
|
||||
:class="[prefixCls + '-shortcut']"
|
||||
v-for="shortcut in shortcuts"
|
||||
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker">{{ yearLabel }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker"
|
||||
v-show="currentView === 'date'">{{ monthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear"><Icon type="ios-arrow-right"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<date-table
|
||||
v-show="currentView === 'date'"
|
||||
:year="year"
|
||||
:month="month"
|
||||
:date="date"
|
||||
:value="value"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleDatePick"
|
||||
@on-pick-click="handlePickClick"></date-table>
|
||||
<year-table
|
||||
v-ref:year-table
|
||||
v-show="currentView === 'year'"
|
||||
:year="year"
|
||||
:date="date"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleYearPick"
|
||||
@on-pick-click="handlePickClick"></year-table>
|
||||
<month-table
|
||||
v-ref:month-table
|
||||
v-show="currentView === 'month'"
|
||||
:month="month"
|
||||
:date="date"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleMonthPick"
|
||||
@on-pick-click="handlePickClick"></month-table>
|
||||
<time-picker
|
||||
v-ref:time-picker
|
||||
show-date
|
||||
v-show="currentView === 'time'"
|
||||
@on-pick="handleTimePick"
|
||||
@on-pick-click="handlePickClick"></time-picker>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
:show-time="showTime"
|
||||
:is-time="isTime"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../../icon/icon.vue';
|
||||
import DateTable from '../base/date-table.vue';
|
||||
import YearTable from '../base/year-table.vue';
|
||||
import MonthTable from '../base/month-table.vue';
|
||||
import TimePicker from './time.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
shortcuts: [],
|
||||
currentView: 'date',
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
showTime: false,
|
||||
selectionMode: 'day',
|
||||
disabledDate: '',
|
||||
year: null,
|
||||
month: null,
|
||||
confirm: false,
|
||||
isTime: false,
|
||||
format: 'yyyy-MM-dd'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
];
|
||||
},
|
||||
yearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const year = this.year;
|
||||
if (!year) return '';
|
||||
if (this.currentView === 'year') {
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
}
|
||||
return `${year}${tYear}`;
|
||||
},
|
||||
monthLabel () {
|
||||
const month = this.month + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
newVal = new Date(newVal);
|
||||
if (!isNaN(newVal)) {
|
||||
this.date = newVal;
|
||||
this.year = newVal.getFullYear();
|
||||
this.month = newVal.getMonth();
|
||||
}
|
||||
if (this.showTime) this.$refs.timePicker.value = newVal;
|
||||
},
|
||||
date (val) {
|
||||
if (this.showTime) this.$refs.timePicker.date = val;
|
||||
},
|
||||
format (val) {
|
||||
if (this.showTime) this.$refs.timePicker.format = val;
|
||||
},
|
||||
currentView (val) {
|
||||
if (val === 'time') this.$refs.timePicker.updateScroll();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetDate () {
|
||||
this.date = new Date(this.date);
|
||||
},
|
||||
handleClear () {
|
||||
this.date = new Date();
|
||||
this.$emit('on-pick', '');
|
||||
if (this.showTime) this.$refs.timePicker.handleClear();
|
||||
},
|
||||
resetView (reset = false) {
|
||||
if (this.currentView !== 'time' || reset) {
|
||||
if (this.selectionMode === 'month') {
|
||||
this.currentView = 'month';
|
||||
} else if (this.selectionMode === 'year') {
|
||||
this.currentView = 'year';
|
||||
} else {
|
||||
this.currentView = 'date';
|
||||
}
|
||||
}
|
||||
|
||||
this.year = this.date.getFullYear();
|
||||
this.month = this.date.getMonth();
|
||||
if (reset) this.isTime = false;
|
||||
},
|
||||
prevYear () {
|
||||
if (this.currentView === 'year') {
|
||||
this.$refs.yearTable.prevTenYear();
|
||||
} else {
|
||||
this.year--;
|
||||
this.date.setFullYear(this.year);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
nextYear () {
|
||||
if (this.currentView === 'year') {
|
||||
this.$refs.yearTable.nextTenYear();
|
||||
} else {
|
||||
this.year++;
|
||||
this.date.setFullYear(this.year);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
prevMonth () {
|
||||
this.month--;
|
||||
if (this.month < 0) {
|
||||
this.month = 11;
|
||||
this.year--;
|
||||
}
|
||||
},
|
||||
nextMonth () {
|
||||
this.month++;
|
||||
if (this.month > 11) {
|
||||
this.month = 0;
|
||||
this.year++;
|
||||
}
|
||||
},
|
||||
showYearPicker () {
|
||||
this.currentView = 'year';
|
||||
},
|
||||
showMonthPicker () {
|
||||
this.currentView = 'month';
|
||||
},
|
||||
handleToggleTime () {
|
||||
if (this.currentView === 'date') {
|
||||
this.currentView = 'time';
|
||||
this.isTime = true;
|
||||
} else if (this.currentView === 'time') {
|
||||
this.currentView = 'date';
|
||||
this.isTime = false;
|
||||
}
|
||||
},
|
||||
handleYearPick(year, close = true) {
|
||||
this.year = year;
|
||||
if (!close) return;
|
||||
|
||||
this.date.setFullYear(year);
|
||||
if (this.selectionMode === 'year') {
|
||||
this.$emit('on-pick', new Date(year, 0, 1));
|
||||
} else {
|
||||
this.currentView = 'month';
|
||||
}
|
||||
|
||||
this.resetDate();
|
||||
},
|
||||
handleMonthPick (month) {
|
||||
this.month = month;
|
||||
const selectionMode = this.selectionMode;
|
||||
if (selectionMode !== 'month') {
|
||||
this.date.setMonth(month);
|
||||
this.currentView = 'date';
|
||||
this.resetDate();
|
||||
} else {
|
||||
this.date.setMonth(month);
|
||||
this.year && this.date.setFullYear(this.year);
|
||||
this.resetDate();
|
||||
const value = new Date(this.date.getFullYear(), month, 1);
|
||||
this.$emit('on-pick', value);
|
||||
}
|
||||
},
|
||||
handleDatePick (value) {
|
||||
if (this.selectionMode === 'day') {
|
||||
this.$emit('on-pick', new Date(value.getTime()));
|
||||
this.date.setFullYear(value.getFullYear());
|
||||
this.date.setMonth(value.getMonth());
|
||||
this.date.setDate(value.getDate());
|
||||
}
|
||||
|
||||
this.resetDate();
|
||||
},
|
||||
handleTimePick (date) {
|
||||
this.handleDatePick(date);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.selectionMode === 'month') {
|
||||
this.currentView = 'month';
|
||||
}
|
||||
|
||||
if (this.date && !this.year) {
|
||||
this.year = this.date.getFullYear();
|
||||
this.month = this.date.getMonth();
|
||||
}
|
||||
if (this.showTime) {
|
||||
// todo 这里可能有问题，并不能进入到这里，但不影响正常使用
|
||||
this.$refs.timePicker.date = this.date;
|
||||
this.$refs.timePicker.value = this.value;
|
||||
this.$refs.timePicker.format = this.format;
|
||||
this.$refs.timePicker.showDate = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
iconBtnCls (direction, type = '') {
|
||||
return [
|
||||
`${prefixCls}-icon-btn`,
|
||||
`${datePrefixCls}-${direction}-btn`,
|
||||
`${datePrefixCls}-${direction}-btn-arrow${type}`,
|
||||
];
|
||||
},
|
||||
handleShortcutClick (shortcut) {
|
||||
if (shortcut.value) this.$emit('on-pick', shortcut.value());
|
||||
if (shortcut.onClick) shortcut.onClick(this);
|
||||
},
|
||||
handlePickClear () {
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handlePickSuccess () {
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handlePickClick () {
|
||||
this.$emit('on-pick-click');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ visibleDate }}</template>
|
||||
<template v-else>{{ t('i.datepicker.startTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
v-ref:time-spinner
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
:seconds="seconds"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleStartChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ visibleDateEnd }}</template>
|
||||
<template v-else>{{ t('i.datepicker.endTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
v-ref:time-spinner-end
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hoursEnd"
|
||||
:minutes="minutesEnd"
|
||||
:seconds="secondsEnd"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleEndChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeSpinner from '../base/time-spinner.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate, toDate, formatDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
format: 'HH:mm:ss',
|
||||
showDate: false,
|
||||
date: initTimeDate(),
|
||||
dateEnd: initTimeDate(),
|
||||
value: '',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
hoursEnd: '',
|
||||
minutesEnd: '',
|
||||
secondsEnd: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false,
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${timePrefixCls}-with-range`,
|
||||
{
|
||||
[`${timePrefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
visibleDate () {
|
||||
const date = this.date || initTimeDate();
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const month = date.getMonth() + 1;
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
},
|
||||
visibleDateEnd () {
|
||||
const date = this.dateEnd || initTimeDate();
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const month = date.getMonth() + 1;
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
if (Array.isArray(newVal)) {
|
||||
const valStart = newVal[0] ? toDate(newVal[0]) : false;
|
||||
const valEnd = newVal[1] ? toDate(newVal[1]) : false;
|
||||
|
||||
if (valStart && valEnd) {
|
||||
this.handleChange(
|
||||
{
|
||||
hours: valStart.getHours(),
|
||||
minutes: valStart.getMinutes(),
|
||||
seconds: valStart.getSeconds()
|
||||
},
|
||||
{
|
||||
hours: valEnd.getHours(),
|
||||
minutes: valEnd.getMinutes(),
|
||||
seconds: valEnd.getSeconds()
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.dateEnd = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
this.hoursEnd = '';
|
||||
this.minutesEnd = '';
|
||||
this.secondsEnd = '';
|
||||
},
|
||||
handleChange (date, dateEnd, emit = true) {
|
||||
const oldDateEnd = new Date(this.dateEnd);
|
||||
|
||||
if (date.hours !== undefined) {
|
||||
this.date.setHours(date.hours);
|
||||
this.hours = this.date.getHours();
|
||||
}
|
||||
if (date.minutes !== undefined) {
|
||||
this.date.setMinutes(date.minutes);
|
||||
this.minutes = this.date.getMinutes();
|
||||
}
|
||||
if (date.seconds !== undefined) {
|
||||
this.date.setSeconds(date.seconds);
|
||||
this.seconds = this.date.getSeconds();
|
||||
}
|
||||
if (dateEnd.hours !== undefined) {
|
||||
this.dateEnd.setHours(dateEnd.hours);
|
||||
this.hoursEnd = this.dateEnd.getHours();
|
||||
}
|
||||
if (dateEnd.minutes !== undefined) {
|
||||
this.dateEnd.setMinutes(dateEnd.minutes);
|
||||
this.minutesEnd = this.dateEnd.getMinutes();
|
||||
}
|
||||
if (dateEnd.seconds !== undefined) {
|
||||
this.dateEnd.setSeconds(dateEnd.seconds);
|
||||
this.secondsEnd = this.dateEnd.getSeconds();
|
||||
}
|
||||
// judge endTime > startTime?
|
||||
if (this.dateEnd < this.date) {
|
||||
this.$nextTick(() => {
|
||||
this.dateEnd = new Date(this.date);
|
||||
this.hoursEnd = this.dateEnd.getHours();
|
||||
this.minutesEnd = this.dateEnd.getMinutes();
|
||||
this.secondsEnd = this.dateEnd.getSeconds();
|
||||
|
||||
const format = 'yyyy-MM-dd HH:mm:ss';
|
||||
if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
}
|
||||
},
|
||||
handleStartChange (date) {
|
||||
this.handleChange(date, {});
|
||||
},
|
||||
handleEndChange (date) {
|
||||
this.handleChange({}, date);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
this.$refs.timeSpinnerEnd.updateScroll();
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-body-wrapper']">
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<time-spinner
|
||||
v-ref:time-spinner
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
:seconds="seconds"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeSpinner from '../base/time-spinner.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
showDate: false,
|
||||
format: 'HH:mm:ss',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false,
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
visibleDate () {
|
||||
const date = this.date;
|
||||
const month = date.getMonth() + 1;
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
newVal = new Date(newVal);
|
||||
if (!isNaN(newVal)) {
|
||||
this.date = newVal;
|
||||
this.handleChange({
|
||||
hours: newVal.getHours(),
|
||||
minutes: newVal.getMinutes(),
|
||||
seconds: newVal.getSeconds()
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
},
|
||||
handleChange (date, emit = true) {
|
||||
if (date.hours !== undefined) {
|
||||
this.date.setHours(date.hours);
|
||||
this.hours = this.date.getHours();
|
||||
}
|
||||
if (date.minutes !== undefined) {
|
||||
this.date.setMinutes(date.minutes);
|
||||
this.minutes = this.date.getMinutes();
|
||||
}
|
||||
if (date.seconds !== undefined) {
|
||||
this.date.setSeconds(date.seconds);
|
||||
this.seconds = this.date.getSeconds();
|
||||
}
|
||||
if (emit) this.$emit('on-pick', this.date, true);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,496 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
v-clickoutside="handleClose">
|
||||
<div v-el:reference :class="[prefixCls + '-rel']">
|
||||
<slot>
|
||||
<i-input
|
||||
:class="[prefixCls + '-editor']"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:placeholder="placeholder"
|
||||
:value="visualValue"
|
||||
@on-change="handleInputChange"
|
||||
@on-focus="handleFocus"
|
||||
@on-click="handleIconClick"
|
||||
@mouseenter="handleInputMouseenter"
|
||||
@mouseleave="handleInputMouseleave"
|
||||
:icon="iconType"></i-input>
|
||||
</slot>
|
||||
</div>
|
||||
<Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
|
||||
<div v-el:picker></div>
|
||||
</Drop>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import iInput from '../../components/input/input.vue';
|
||||
import Drop from '../../components/select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { formatDate, parseDate } from './util';
|
||||
|
||||
const prefixCls = 'ivu-date-picker';
|
||||
|
||||
const DEFAULT_FORMATS = {
|
||||
date: 'yyyy-MM-dd',
|
||||
month: 'yyyy-MM',
|
||||
year: 'yyyy',
|
||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||
time: 'HH:mm:ss',
|
||||
timerange: 'HH:mm:ss',
|
||||
daterange: 'yyyy-MM-dd',
|
||||
datetimerange: 'yyyy-MM-dd HH:mm:ss'
|
||||
};
|
||||
|
||||
const RANGE_SEPARATOR = ' - ';
|
||||
|
||||
const DATE_FORMATTER = function(value, format) {
|
||||
return formatDate(value, format);
|
||||
};
|
||||
const DATE_PARSER = function(text, format) {
|
||||
return parseDate(text, format);
|
||||
};
|
||||
const RANGE_FORMATTER = function(value, format) {
|
||||
if (Array.isArray(value) && value.length === 2) {
|
||||
const start = value[0];
|
||||
const end = value[1];
|
||||
|
||||
if (start && end) {
|
||||
return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
const RANGE_PARSER = function(text, format) {
|
||||
const array = text.split(RANGE_SEPARATOR);
|
||||
if (array.length === 2) {
|
||||
const range1 = array[0];
|
||||
const range2 = array[1];
|
||||
|
||||
return [parseDate(range1, format), parseDate(range2, format)];
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const TYPE_VALUE_RESOLVER_MAP = {
|
||||
default: {
|
||||
formatter(value) {
|
||||
if (!value) return '';
|
||||
return '' + value;
|
||||
},
|
||||
parser(text) {
|
||||
if (text === undefined || text === '') return null;
|
||||
return text;
|
||||
}
|
||||
},
|
||||
date: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
datetime: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
daterange: {
|
||||
formatter: RANGE_FORMATTER,
|
||||
parser: RANGE_PARSER
|
||||
},
|
||||
datetimerange: {
|
||||
formatter: RANGE_FORMATTER,
|
||||
parser: RANGE_PARSER
|
||||
},
|
||||
timerange: {
|
||||
formatter: RANGE_FORMATTER,
|
||||
parser: RANGE_PARSER
|
||||
},
|
||||
time: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
month: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
year: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
number: {
|
||||
formatter(value) {
|
||||
if (!value) return '';
|
||||
return '' + value;
|
||||
},
|
||||
parser(text) {
|
||||
let result = Number(text);
|
||||
|
||||
if (!isNaN(text)) {
|
||||
return result;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { iInput, Drop },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
confirm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
|
||||
},
|
||||
default: 'bottom-start'
|
||||
},
|
||||
options: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
showClose: false,
|
||||
visible: false,
|
||||
picker: null,
|
||||
internalValue: '',
|
||||
disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
opened () {
|
||||
return this.open === null ? this.visible : this.open;
|
||||
},
|
||||
iconType () {
|
||||
let icon = 'ios-calendar-outline';
|
||||
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
|
||||
if (this.showClose) icon = 'ios-close';
|
||||
return icon;
|
||||
},
|
||||
transition () {
|
||||
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
|
||||
return 'slide-up';
|
||||
} else {
|
||||
return 'slide-down';
|
||||
}
|
||||
},
|
||||
selectionMode() {
|
||||
if (this.type === 'month') {
|
||||
return 'month';
|
||||
} else if (this.type === 'year') {
|
||||
return 'year';
|
||||
}
|
||||
|
||||
return 'day';
|
||||
},
|
||||
visualValue: {
|
||||
get () {
|
||||
const value = this.internalValue;
|
||||
if (!value) return;
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[this.type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
const format = DEFAULT_FORMATS[this.type];
|
||||
|
||||
return formatter(value, this.format || format);
|
||||
},
|
||||
|
||||
set (value) {
|
||||
if (value) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
|
||||
if (parsedValue) {
|
||||
if (this.picker) this.picker.value = parsedValue;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (this.picker) this.picker.value = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
if (this.open !== null) return;
|
||||
if (!this.disableClickOutSide) this.visible = false;
|
||||
this.disableClickOutSide = false;
|
||||
},
|
||||
handleFocus () {
|
||||
if (this.readonly) return;
|
||||
this.visible = true;
|
||||
},
|
||||
handleInputChange (event) {
|
||||
const oldValue = this.visualValue;
|
||||
const value = event.target.value;
|
||||
|
||||
let correctValue = '';
|
||||
let correctDate = '';
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
|
||||
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
|
||||
const parsedValue = parser(value, format);
|
||||
|
||||
if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
|
||||
if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatter(parsedValue, format);
|
||||
}
|
||||
// todo 判断disabledDate
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parser(correctValue, format);
|
||||
} else if (type === 'time') {
|
||||
const parsedDate = parseDate(value, format);
|
||||
|
||||
if (parsedDate instanceof Date) {
|
||||
if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
|
||||
const hours = parsedDate.getHours();
|
||||
const minutes = parsedDate.getMinutes();
|
||||
const seconds = parsedDate.getSeconds();
|
||||
|
||||
if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
|
||||
(this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
|
||||
(this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parseDate(correctValue, format);
|
||||
} else {
|
||||
const parsedDate = parseDate(value, format);
|
||||
|
||||
if (parsedDate instanceof Date) {
|
||||
const options = this.options || false;
|
||||
if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parseDate(correctValue, format);
|
||||
}
|
||||
|
||||
this.visualValue = correctValue;
|
||||
event.target.value = correctValue;
|
||||
this.internalValue = correctDate;
|
||||
|
||||
if (correctValue !== oldValue) this.emitChange(correctDate);
|
||||
},
|
||||
handleInputMouseenter () {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.visualValue && this.clearable) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
handleInputMouseleave () {
|
||||
this.showClose = false;
|
||||
},
|
||||
handleIconClick () {
|
||||
if (this.showClose) {
|
||||
this.handleClear();
|
||||
} else {
|
||||
this.handleFocus();
|
||||
}
|
||||
},
|
||||
handleClear () {
|
||||
this.visible = false;
|
||||
this.internalValue = '';
|
||||
this.value = '';
|
||||
this.$emit('on-clear');
|
||||
this.$dispatch('on-form-change', '');
|
||||
},
|
||||
showPicker () {
|
||||
if (!this.picker) {
|
||||
const type = this.type;
|
||||
|
||||
this.picker = new Vue(this.panel).$mount(this.$els.picker);
|
||||
if (type === 'datetime' || type === 'datetimerange') {
|
||||
this.confirm = true;
|
||||
this.picker.showTime = true;
|
||||
}
|
||||
this.picker.value = this.internalValue;
|
||||
this.picker.confirm = this.confirm;
|
||||
this.picker.selectionMode = this.selectionMode;
|
||||
if (this.format) this.picker.format = this.format;
|
||||
|
||||
// TimePicker
|
||||
if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
|
||||
if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
|
||||
if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
|
||||
if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
|
||||
|
||||
const options = this.options;
|
||||
for (const option in options) {
|
||||
this.picker[option] = options[option];
|
||||
}
|
||||
|
||||
this.picker.$on('on-pick', (date, visible = false) => {
|
||||
if (!this.confirm) this.visible = visible;
|
||||
this.value = date;
|
||||
this.picker.value = date;
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
this.emitChange(date);
|
||||
});
|
||||
|
||||
this.picker.$on('on-pick-clear', () => {
|
||||
this.handleClear();
|
||||
});
|
||||
this.picker.$on('on-pick-success', () => {
|
||||
this.visible = false;
|
||||
this.$emit('on-ok');
|
||||
});
|
||||
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
|
||||
}
|
||||
if (this.internalValue instanceof Date) {
|
||||
this.picker.date = new Date(this.internalValue.getTime());
|
||||
} else {
|
||||
this.picker.value = this.internalValue;
|
||||
}
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
},
|
||||
emitChange (date) {
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
|
||||
let newDate = formatter(date, format);
|
||||
if (type === 'daterange' || type === 'timerange') {
|
||||
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
|
||||
}
|
||||
|
||||
this.$emit('on-change', newDate);
|
||||
this.$dispatch('on-form-change', newDate);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.showPicker();
|
||||
this.$refs.drop.update();
|
||||
if (this.open === null) this.$emit('on-open-change', true);
|
||||
} else {
|
||||
if (this.picker) this.picker.resetView && this.picker.resetView(true);
|
||||
this.$refs.drop.destroy();
|
||||
if (this.open === null) this.$emit('on-open-change', false);
|
||||
}
|
||||
},
|
||||
internalValue(val) {
|
||||
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
|
||||
this.picker.handleClear();
|
||||
}
|
||||
},
|
||||
value: {
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
if (val && type === 'time' && !(val instanceof Date)) {
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (val && type === 'timerange' && Array.isArray(val) && val.length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
|
||||
val = val.join(RANGE_SEPARATOR);
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
}
|
||||
|
||||
this.internalValue = val;
|
||||
}
|
||||
},
|
||||
open (val) {
|
||||
if (val === true) {
|
||||
this.visible = val;
|
||||
this.$emit('on-open-change', true);
|
||||
} else if (val === false) {
|
||||
this.$emit('on-open-change', false);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.picker) {
|
||||
this.picker.$destroy();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.open !== null) this.visible = this.open;
|
||||
},
|
||||
events: {
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import Picker from '../picker.vue';
|
||||
import DatePanel from '../panel/date.vue';
|
||||
import DateRangePanel from '../panel/date-range.vue';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'daterange' || type === 'datetimerange') {
|
||||
return DateRangePanel;
|
||||
}
|
||||
return DatePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker],
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange']);
|
||||
},
|
||||
default: 'date'
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
created () {
|
||||
if (!this.value) {
|
||||
if (this.type === 'daterange' || this.type === 'datetimerange') {
|
||||
this.value = ['',''];
|
||||
} else {
|
||||
this.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
this.panel = getPanel(this.type);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import Picker from '../picker.vue';
|
||||
import TimePanel from '../panel/time.vue';
|
||||
import TimeRangePanel from '../panel/time-range.vue';
|
||||
import Options from '../time-mixins';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'timerange') {
|
||||
return TimeRangePanel;
|
||||
}
|
||||
return TimePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker, Options],
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['time', 'timerange']);
|
||||
},
|
||||
default: 'time'
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
created () {
|
||||
if (!this.value) {
|
||||
if (this.type === 'timerange') {
|
||||
this.value = ['',''];
|
||||
} else {
|
||||
this.value = '';
|
||||
}
|
||||
}
|
||||
this.panel = getPanel(this.type);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
export default {
|
||||
props: {
|
||||
disabledHours: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabledMinutes: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabledSeconds: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
hideDisabledOptions: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
import dateUtil from '../../utils/date';
|
||||
|
||||
export const toDate = function(date) {
|
||||
date = new Date(date);
|
||||
if (isNaN(date.getTime())) return null;
|
||||
return date;
|
||||
};
|
||||
|
||||
export const formatDate = function(date, format) {
|
||||
date = toDate(date);
|
||||
if (!date) return '';
|
||||
return dateUtil.format(date, format || 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
export const parseDate = function(string, format) {
|
||||
return dateUtil.parse(string, format || 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
export const getDayCountOfMonth = function(year, month) {
|
||||
if (month === 3 || month === 5 || month === 8 || month === 10) {
|
||||
return 30;
|
||||
}
|
||||
|
||||
if (month === 1) {
|
||||
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
|
||||
return 29;
|
||||
} else {
|
||||
return 28;
|
||||
}
|
||||
}
|
||||
|
||||
return 31;
|
||||
};
|
||||
|
||||
export const getFirstDayOfMonth = function(date) {
|
||||
const temp = new Date(date.getTime());
|
||||
temp.setDate(1);
|
||||
return temp.getDay();
|
||||
};
|
||||
|
||||
export const prevMonth = function(src) {
|
||||
const year = src.getFullYear();
|
||||
const month = src.getMonth();
|
||||
const date = src.getDate();
|
||||
|
||||
const newYear = month === 0 ? year - 1 : year;
|
||||
const newMonth = month === 0 ? 11 : month - 1;
|
||||
|
||||
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
|
||||
if (newMonthDayCount < date) {
|
||||
src.setDate(newMonthDayCount);
|
||||
}
|
||||
|
||||
src.setMonth(newMonth);
|
||||
src.setFullYear(newYear);
|
||||
|
||||
return new Date(src.getTime());
|
||||
};
|
||||
|
||||
export const nextMonth = function(src) {
|
||||
const year = src.getFullYear();
|
||||
const month = src.getMonth();
|
||||
const date = src.getDate();
|
||||
|
||||
const newYear = month === 11 ? year + 1 : year;
|
||||
const newMonth = month === 11 ? 0 : month + 1;
|
||||
|
||||
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
|
||||
if (newMonthDayCount < date) {
|
||||
src.setDate(newMonthDayCount);
|
||||
}
|
||||
|
||||
src.setMonth(newMonth);
|
||||
src.setFullYear(newYear);
|
||||
|
||||
return new Date(src.getTime());
|
||||
};
|
||||
|
||||
export const initTimeDate = function () {
|
||||
const date = new Date();
|
||||
date.setHours(0);
|
||||
date.setMinutes(0);
|
||||
date.setSeconds(0);
|
||||
return date;
|
||||
};
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes" @click="handleClick"><slot></slot></li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-dropdown-item';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number]
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
divided: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: this.disabled,
|
||||
[`${prefixCls}-selected`]: this.selected,
|
||||
[`${prefixCls}-divided`]: this.divided
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
const $parent = this.$parent.$parent;
|
||||
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
|
||||
|
||||
if (this.disabled) {
|
||||
this.$nextTick(() => {
|
||||
$parent.visible = true;
|
||||
});
|
||||
} else if (hasChildren) {
|
||||
this.$parent.$emit('on-haschild-click');
|
||||
} else {
|
||||
if ($parent && $parent.$options.name === 'Dropdown') {
|
||||
$parent.$emit('on-hover-click');
|
||||
}
|
||||
}
|
||||
$parent.$emit('on-click', this.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<template>
|
||||
<ul class="ivu-dropdown-menu"><slot></slot></ul>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
v-clickoutside="handleClose"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
|
||||
<Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-dropdown';
|
||||
|
||||
export default {
|
||||
name: 'Dropdown',
|
||||
directives: { clickoutside },
|
||||
components: { Drop },
|
||||
props: {
|
||||
trigger: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['click', 'hover', 'custom']);
|
||||
},
|
||||
default: 'hover'
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
|
||||
},
|
||||
default: 'bottom'
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
transition () {
|
||||
return ['bottom-start', 'bottom', 'bottom-end'].indexOf(this.placement) > -1 ? 'slide-up' : 'fade';
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
if (this.trigger !== 'click') {
|
||||
return false;
|
||||
}
|
||||
this.visible = !this.visible;
|
||||
},
|
||||
handleMouseenter () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
if (this.trigger !== 'hover') {
|
||||
return false;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.visible = true;
|
||||
}, 250);
|
||||
},
|
||||
handleMouseleave () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
if (this.trigger !== 'hover') {
|
||||
return false;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.visible = false;
|
||||
}, 150);
|
||||
},
|
||||
handleClose () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
if (this.trigger !== 'click') {
|
||||
return false;
|
||||
}
|
||||
this.visible = false;
|
||||
},
|
||||
hasParent () {
|
||||
const $parent = this.$parent.$parent;
|
||||
if ($parent && $parent.$options.name === 'Dropdown') {
|
||||
return $parent;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
this.$emit('on-visible-change', val);
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-click' (key) {
|
||||
const $parent = this.hasParent();
|
||||
if ($parent ) $parent.$emit('on-click', key);
|
||||
},
|
||||
'on-hover-click' () {
|
||||
const $parent = this.hasParent();
|
||||
if ($parent) {
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'custom') return false;
|
||||
this.visible = false;
|
||||
});
|
||||
$parent.$emit('on-hover-click');
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'custom') return false;
|
||||
this.visible = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
'on-haschild-click' () {
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'custom') return false;
|
||||
this.visible = true;
|
||||
});
|
||||
const $parent = this.hasParent();
|
||||
if ($parent) $parent.$emit('on-haschild-click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import Dropdown from './dropdown.vue';
|
||||
import DropdownMenu from './dropdown-menu.vue';
|
||||
import DropdownItem from './dropdown-item.vue';
|
||||
|
||||
Dropdown.Menu = DropdownMenu;
|
||||
Dropdown.Item = DropdownItem;
|
||||
export default Dropdown;
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label"><slot name="label">{{ label }}</slot></label>
|
||||
<div :class="[prefixCls + '-content']" :style="contentStyles">
|
||||
<slot></slot>
|
||||
<div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
|
||||
|
||||
import AsyncValidator from 'async-validator';
|
||||
|
||||
const prefixCls = 'ivu-form-item';
|
||||
|
||||
function getPropByPath(obj, path) {
|
||||
let tempObj = obj;
|
||||
path = path.replace(/\[(\w+)\]/g, '.$1');
|
||||
path = path.replace(/^\./, '');
|
||||
|
||||
let keyArr = path.split('.');
|
||||
let i = 0;
|
||||
|
||||
for (let len = keyArr.length; i < len - 1; ++i) {
|
||||
let key = keyArr[i];
|
||||
if (key in tempObj) {
|
||||
tempObj = tempObj[key];
|
||||
} else {
|
||||
throw new Error('[iView warn]: please transfer a valid prop path to form item!');
|
||||
}
|
||||
}
|
||||
return {
|
||||
o: tempObj,
|
||||
k: keyArr[i],
|
||||
v: tempObj[keyArr[i]]
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
labelWidth: {
|
||||
type: Number
|
||||
},
|
||||
prop: {
|
||||
type: String
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rules: {
|
||||
type: [Object, Array]
|
||||
},
|
||||
error: {
|
||||
type: String
|
||||
},
|
||||
validateStatus: {
|
||||
type: Boolean
|
||||
},
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
isRequired: false,
|
||||
validateState: '',
|
||||
validateMessage: '',
|
||||
validateDisabled: false,
|
||||
validator: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
error (val) {
|
||||
this.validateMessage = val;
|
||||
this.validateState = 'error';
|
||||
},
|
||||
validateStatus (val) {
|
||||
this.validateState = val;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-required`]: this.required || this.isRequired,
|
||||
[`${prefixCls}-error`]: this.validateState === 'error',
|
||||
[`${prefixCls}-validating`]: this.validateState === 'validating'
|
||||
}
|
||||
];
|
||||
},
|
||||
form() {
|
||||
let parent = this.$parent;
|
||||
while (parent.$options.name !== 'iForm') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
fieldValue: {
|
||||
cache: false,
|
||||
get() {
|
||||
const model = this.form.model;
|
||||
if (!model || !this.prop) { return; }
|
||||
|
||||
let path = this.prop;
|
||||
if (path.indexOf(':') !== -1) {
|
||||
path = path.replace(/:/, '.');
|
||||
}
|
||||
|
||||
return getPropByPath(model, path).v;
|
||||
}
|
||||
},
|
||||
labelStyles () {
|
||||
let style = {};
|
||||
const labelWidth = this.labelWidth || this.form.labelWidth;
|
||||
if (labelWidth) {
|
||||
style.width = `${labelWidth}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
contentStyles () {
|
||||
let style = {};
|
||||
const labelWidth = this.labelWidth || this.form.labelWidth;
|
||||
if (labelWidth) {
|
||||
style.marginLeft = `${labelWidth}px`;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRules () {
|
||||
let formRules = this.form.rules;
|
||||
const selfRules = this.rules;
|
||||
|
||||
formRules = formRules ? formRules[this.prop] : [];
|
||||
|
||||
return [].concat(selfRules || formRules || []);
|
||||
},
|
||||
getFilteredRule (trigger) {
|
||||
const rules = this.getRules();
|
||||
|
||||
return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
|
||||
},
|
||||
validate(trigger, callback = function () {}) {
|
||||
const rules = this.getFilteredRule(trigger);
|
||||
if (!rules || rules.length === 0) {
|
||||
callback();
|
||||
return true;
|
||||
}
|
||||
|
||||
this.validateState = 'validating';
|
||||
|
||||
let descriptor = {};
|
||||
descriptor[this.prop] = rules;
|
||||
|
||||
const validator = new AsyncValidator(descriptor);
|
||||
let model = {};
|
||||
|
||||
model[this.prop] = this.fieldValue;
|
||||
|
||||
validator.validate(model, { firstFields: true }, errors => {
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
|
||||
callback(this.validateMessage);
|
||||
});
|
||||
},
|
||||
resetField () {
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
|
||||
let model = this.form.model;
|
||||
let value = this.fieldValue;
|
||||
let path = this.prop;
|
||||
if (path.indexOf(':') !== -1) {
|
||||
path = path.replace(/:/, '.');
|
||||
}
|
||||
|
||||
let prop = getPropByPath(model, path);
|
||||
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
this.validateDisabled = true;
|
||||
prop.o[prop.k] = [];
|
||||
} else if (value !== this.initialValue) {
|
||||
this.validateDisabled = true;
|
||||
prop.o[prop.k] = this.initialValue;
|
||||
}
|
||||
},
|
||||
onFieldBlur() {
|
||||
this.validate('blur');
|
||||
},
|
||||
onFieldChange() {
|
||||
if (this.validateDisabled) {
|
||||
this.validateDisabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.validate('change');
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.prop) {
|
||||
this.$dispatch('on-form-item-add', this);
|
||||
|
||||
Object.defineProperty(this, 'initialValue', {
|
||||
value: this.fieldValue
|
||||
});
|
||||
|
||||
let rules = this.getRules();
|
||||
|
||||
if (rules.length) {
|
||||
rules.every(rule => {
|
||||
if (rule.required) {
|
||||
this.isRequired = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
this.$on('on-form-blur', this.onFieldBlur);
|
||||
this.$on('on-form-change', this.onFieldChange);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$dispatch('on-form-item-remove', this);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<form :class="classes"><slot></slot></form>
|
||||
</template>
|
||||
<script>
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-form';
|
||||
|
||||
export default {
|
||||
name: 'iForm',
|
||||
props: {
|
||||
model: {
|
||||
type: Object
|
||||
},
|
||||
rules: {
|
||||
type: Object
|
||||
},
|
||||
labelWidth: {
|
||||
type: Number
|
||||
},
|
||||
labelPosition: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['left', 'right', 'top']);
|
||||
},
|
||||
default: 'right'
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fields: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-label-${this.labelPosition}`,
|
||||
{
|
||||
[`${prefixCls}-inline`]: this.inline
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetFields() {
|
||||
this.fields.forEach(field => {
|
||||
field.resetField();
|
||||
});
|
||||
},
|
||||
validate(callback) {
|
||||
let valid = true;
|
||||
let count = 0;
|
||||
this.fields.forEach(field => {
|
||||
field.validate('', errors => {
|
||||
if (errors) {
|
||||
valid = false;
|
||||
}
|
||||
if (typeof callback === 'function' && ++count === this.fields.length) {
|
||||
callback(valid);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
validateField(prop, cb) {
|
||||
const field = this.fields.filter(field => field.prop === prop)[0];
|
||||
if (!field) { throw new Error('[iView warn]: must call validateField with valid prop string!'); }
|
||||
|
||||
field.validate('', cb);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rules() {
|
||||
this.validate();
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-form-item-add' (field) {
|
||||
if (field) this.fields.push(field);
|
||||
return false;
|
||||
},
|
||||
'on-form-item-remove' (field) {
|
||||
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Form from './form.vue';
|
||||
import FormItem from './form-item.vue';
|
||||
|
||||
Form.Item = FormItem;
|
||||
export default Form;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<template>
|
||||
<i :class="classes" :style="styles"></i>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-icon';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
size: [Number, String],
|
||||
color: String
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls} ${prefixCls}-${this.type}`;
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
|
||||
if (this.size) {
|
||||
style['font-size'] = `${this.size}px`;
|
||||
}
|
||||
|
||||
if (this.color) {
|
||||
style.color = this.color;
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Icon from './icon.vue';
|
||||
export default Icon;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import InputNumber from './input-number.vue';
|
||||
export default InputNumber;
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
<template>
|
||||
<div :class="wrapClasses">
|
||||
<div :class="handlerClasses">
|
||||
<a
|
||||
@click="up"
|
||||
@mouse.down="preventDefault"
|
||||
:class="upClasses">
|
||||
<span :class="innerUpClasses" @click="preventDefault"></span>
|
||||
</a>
|
||||
<a
|
||||
@click="down"
|
||||
@mouse.down="preventDefault"
|
||||
:class="downClasses">
|
||||
<span :class="innerDownClasses" @click="preventDefault"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div :class="inputWrapClasses">
|
||||
<input
|
||||
:class="inputClasses"
|
||||
:disabled="disabled"
|
||||
autocomplete="off"
|
||||
@focus="focus"
|
||||
@blur="blur"
|
||||
@keydown.stop="keyDown"
|
||||
@change="change"
|
||||
:value="value">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-input-number';
|
||||
const iconPrefixCls = 'ivu-icon';
|
||||
|
||||
function isValueNumber (value) {
|
||||
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
|
||||
}
|
||||
function addNum (num1, num2) {
|
||||
let sq1, sq2, m;
|
||||
try {
|
||||
sq1 = num1.toString().split('.')[1].length;
|
||||
}
|
||||
catch (e) {
|
||||
sq1 = 0;
|
||||
}
|
||||
try {
|
||||
sq2 = num2.toString().split('.')[1].length;
|
||||
}
|
||||
catch (e) {
|
||||
sq2 = 0;
|
||||
}
|
||||
// if (sq1 === 0 || sq2 === 0) {
|
||||
// return num1 + num2;
|
||||
// } else {
|
||||
// m = Math.pow(10, Math.max(sq1, sq2));
|
||||
// return (num1 * m + num2 * m) / m;
|
||||
// }
|
||||
m = Math.pow(10, Math.max(sq1, sq2));
|
||||
return (num1 * m + num2 * m) / m;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
max: {
|
||||
type: Number,
|
||||
default: Infinity
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: -Infinity
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
focused: false,
|
||||
upDisabled: false,
|
||||
downDisabled: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-disabled`]: this.disabled,
|
||||
[`${prefixCls}-focused`]: this.focused
|
||||
}
|
||||
];
|
||||
},
|
||||
handlerClasses () {
|
||||
return `${prefixCls}-handler-wrap`;
|
||||
},
|
||||
upClasses () {
|
||||
return [
|
||||
`${prefixCls}-handler`,
|
||||
`${prefixCls}-handler-up`,
|
||||
{
|
||||
[`${prefixCls}-handler-up-disabled`]: this.upDisabled
|
||||
}
|
||||
];
|
||||
},
|
||||
innerUpClasses () {
|
||||
return `${prefixCls}-handler-up-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-up`;
|
||||
},
|
||||
downClasses () {
|
||||
return [
|
||||
`${prefixCls}-handler`,
|
||||
`${prefixCls}-handler-down`,
|
||||
{
|
||||
[`${prefixCls}-handler-down-disabled`]: this.downDisabled
|
||||
}
|
||||
];
|
||||
},
|
||||
innerDownClasses () {
|
||||
return `${prefixCls}-handler-down-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-down`;
|
||||
},
|
||||
inputWrapClasses () {
|
||||
return `${prefixCls}-input-wrap`;
|
||||
},
|
||||
inputClasses () {
|
||||
return `${prefixCls}-input`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
preventDefault (e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
up (e) {
|
||||
const targetVal = Number(e.target.value);
|
||||
if (this.upDisabled && isNaN(targetVal)) {
|
||||
return false;
|
||||
}
|
||||
this.changeStep('up', e);
|
||||
},
|
||||
down (e) {
|
||||
const targetVal = Number(e.target.value);
|
||||
if (this.downDisabled && isNaN(targetVal)) {
|
||||
return false;
|
||||
}
|
||||
this.changeStep('down', e);
|
||||
},
|
||||
changeStep (type, e) {
|
||||
if (this.disabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const targetVal = Number(e.target.value);
|
||||
let val = Number(this.value);
|
||||
const step = Number(this.step);
|
||||
if (isNaN(val)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// input a number, and key up or down
|
||||
if (!isNaN(targetVal)) {
|
||||
if (type === 'up') {
|
||||
if (addNum(targetVal, step) <= this.max) {
|
||||
val = targetVal;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else if (type === 'down') {
|
||||
if (addNum(targetVal, -step) >= this.min) {
|
||||
val = targetVal;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'up') {
|
||||
val = addNum(val, step);
|
||||
} else if (type === 'down') {
|
||||
val = addNum(val, -step);
|
||||
}
|
||||
this.setValue(val);
|
||||
},
|
||||
setValue (val) {
|
||||
this.$nextTick(() => {
|
||||
this.value = val;
|
||||
this.$emit('on-change', val);
|
||||
this.$dispatch('on-form-change', val);
|
||||
});
|
||||
},
|
||||
focus () {
|
||||
this.focused = true;
|
||||
},
|
||||
blur () {
|
||||
this.focused = false;
|
||||
},
|
||||
keyDown (e) {
|
||||
if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
this.up(e);
|
||||
} else if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
this.down(e);
|
||||
}
|
||||
},
|
||||
change (event) {
|
||||
let val = event.target.value.trim();
|
||||
|
||||
const max = this.max;
|
||||
const min = this.min;
|
||||
|
||||
if (isValueNumber(val)) {
|
||||
val = Number(val);
|
||||
this.value = val;
|
||||
|
||||
if (val > max) {
|
||||
this.setValue(max);
|
||||
} else if (val < min) {
|
||||
this.setValue(min);
|
||||
} else {
|
||||
this.setValue(val);
|
||||
}
|
||||
} else {
|
||||
event.target.value = this.value;
|
||||
}
|
||||
},
|
||||
changeVal (val) {
|
||||
if (isValueNumber(val) || val === 0) {
|
||||
val = Number(val);
|
||||
const step = this.step;
|
||||
|
||||
this.upDisabled = val + step > this.max;
|
||||
this.downDisabled = val - step < this.min;
|
||||
} else {
|
||||
this.upDisabled = true;
|
||||
this.downDisabled = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.changeVal(this.value);
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.changeVal(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Input from './input.vue';
|
||||
export default Input;
|
||||
|
|
@ -1,189 +0,0 @@
|
|||
<template>
|
||||
<div :class="wrapClasses">
|
||||
<template v-if="type !== 'textarea'">
|
||||
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" v-el:prepend><slot name="prepend"></slot></div>
|
||||
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
|
||||
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-else transition="fade"></i>
|
||||
<input
|
||||
:type="type"
|
||||
:class="inputClasses"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
:readonly="readonly"
|
||||
:name="name"
|
||||
v-model="value"
|
||||
:number="number"
|
||||
@keyup.enter="handleEnter"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@change="handleChange">
|
||||
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
|
||||
</template>
|
||||
<textarea
|
||||
v-else
|
||||
v-el:textarea
|
||||
:class="textareaClasses"
|
||||
:style="textareaStyles"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:rows="rows"
|
||||
:maxlength="maxlength"
|
||||
:readonly="readonly"
|
||||
:name="name"
|
||||
v-model="value"
|
||||
@keyup.enter="handleEnter"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@change="handleChange">
|
||||
</textarea>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import calcTextareaHeight from '../../utils/calcTextareaHeight';
|
||||
|
||||
const prefixCls = 'ivu-input';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['text', 'textarea', 'password']);
|
||||
},
|
||||
default: 'text'
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
// twoWay: true
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: String,
|
||||
autosize: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
number: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
prepend: true,
|
||||
append: true,
|
||||
slotReady: false,
|
||||
textareaStyles: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-wrapper-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-type`]: this.type,
|
||||
[`${prefixCls}-group`]: this.prepend || this.append,
|
||||
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
|
||||
}
|
||||
];
|
||||
},
|
||||
inputClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
textareaClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEnter () {
|
||||
this.$emit('on-enter');
|
||||
},
|
||||
handleIconClick () {
|
||||
this.$emit('on-click');
|
||||
},
|
||||
handleFocus () {
|
||||
this.$emit('on-focus');
|
||||
},
|
||||
handleBlur () {
|
||||
this.$emit('on-blur');
|
||||
this.$dispatch('on-form-blur', this.value);
|
||||
},
|
||||
handleChange (event) {
|
||||
this.$emit('on-change', event);
|
||||
},
|
||||
resizeTextarea () {
|
||||
const autosize = this.autosize;
|
||||
if (!autosize || this.type !== 'textarea') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const minRows = autosize.minRows;
|
||||
const maxRows = autosize.maxRows;
|
||||
|
||||
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
|
||||
},
|
||||
init () {
|
||||
if (this.type !== 'textarea') {
|
||||
this.prepend = this.$els.prepend.innerHTML !== '';
|
||||
this.append = this.$els.append.innerHTML !== '';
|
||||
} else {
|
||||
this.prepend = false;
|
||||
this.append = false;
|
||||
}
|
||||
this.slotReady = true;
|
||||
this.resizeTextarea();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value () {
|
||||
this.$nextTick(() => {
|
||||
this.resizeTextarea();
|
||||
});
|
||||
this.$dispatch('on-form-change', this.value);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.$nextTick(() => this.init());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="styles">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-col';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
span: [Number, String],
|
||||
order: [Number, String],
|
||||
offset: [Number, String],
|
||||
push: [Number, String],
|
||||
pull: [Number, String],
|
||||
className: String,
|
||||
xs: [Number, Object],
|
||||
sm: [Number, Object],
|
||||
md: [Number, Object],
|
||||
lg: [Number, Object]
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
gutter: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
let classList = [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-span-${this.span}`]: this.span,
|
||||
[`${prefixCls}-order-${this.order}`]: this.order,
|
||||
[`${prefixCls}-offset-${this.offset}`]: this.offset,
|
||||
[`${prefixCls}-push-${this.push}`]: this.push,
|
||||
[`${prefixCls}-pull-${this.pull}`]: this.pull,
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
];
|
||||
|
||||
['xs', 'sm', 'md', 'lg'].forEach(size => {
|
||||
if (typeof this[size] === 'number') {
|
||||
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
|
||||
} else if (typeof this[size] === 'object') {
|
||||
let props = this[size];
|
||||
Object.keys(props).forEach(prop => {
|
||||
classList.push(
|
||||
prop !== 'span'
|
||||
? `${prefixCls}-${size}-${prop}-${props[prop]}`
|
||||
: `${prefixCls}-span-${size}-${props[prop]}`
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return classList;
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
if (this.gutter !== 0) {
|
||||
style = {
|
||||
paddingLeft: this.gutter / 2 + 'px',
|
||||
paddingRight: this.gutter / 2 + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import Row from './row.vue';
|
||||
import Col from './col.vue';
|
||||
|
||||
export { Row, Col };
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="styles">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-row';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['flex']);
|
||||
}
|
||||
},
|
||||
align: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'middle', 'bottom']);
|
||||
}
|
||||
},
|
||||
justify: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
|
||||
}
|
||||
},
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
className: String
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
{
|
||||
[`${prefixCls}`]: !this.type,
|
||||
[`${prefixCls}-${this.type}`]: !!this.type,
|
||||
[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
|
||||
[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
];
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
if (this.gutter !== 0) {
|
||||
style = {
|
||||
marginLeft: this.gutter / -2 + 'px',
|
||||
marginRight: this.gutter / -2 + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateGutter (val) {
|
||||
this.$children.forEach((child) => {
|
||||
if (val !== 0) {
|
||||
child.gutter = val;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
gutter (val) {
|
||||
this.updateGutter(val);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateGutter(this.gutter);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
import LoadingBar from './loading-bar';
|
||||
|
||||
let loadingBarInstance;
|
||||
let color = 'primary';
|
||||
let failedColor = 'error';
|
||||
let height = 2;
|
||||
let timer;
|
||||
|
||||
function getLoadingBarInstance () {
|
||||
loadingBarInstance = loadingBarInstance || LoadingBar.newInstance({
|
||||
color: color,
|
||||
failedColor: failedColor,
|
||||
height: height
|
||||
});
|
||||
|
||||
return loadingBarInstance;
|
||||
}
|
||||
|
||||
function update(options) {
|
||||
let instance = getLoadingBarInstance();
|
||||
|
||||
instance.update(options);
|
||||
}
|
||||
|
||||
function hide() {
|
||||
setTimeout(() => {
|
||||
update({
|
||||
show: false
|
||||
});
|
||||
setTimeout(() => {
|
||||
update({
|
||||
percent: 0
|
||||
});
|
||||
}, 200);
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function clearTimer() {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
start () {
|
||||
if (timer) return;
|
||||
|
||||
let percent = 0;
|
||||
|
||||
update({
|
||||
percent: percent,
|
||||
status: 'success',
|
||||
show: true
|
||||
});
|
||||
|
||||
timer = setInterval(() => {
|
||||
percent += Math.floor(Math.random () * 3 + 5);
|
||||
if (percent > 95) {
|
||||
clearTimer();
|
||||
}
|
||||
update({
|
||||
percent: percent,
|
||||
status: 'success',
|
||||
show: true
|
||||
});
|
||||
}, 200);
|
||||
},
|
||||
update (percent) {
|
||||
clearTimer();
|
||||
update({
|
||||
percent: percent,
|
||||
status: 'success',
|
||||
show: true
|
||||
});
|
||||
},
|
||||
finish () {
|
||||
clearTimer();
|
||||
update({
|
||||
percent: 100,
|
||||
status: 'success',
|
||||
show: true
|
||||
});
|
||||
hide();
|
||||
},
|
||||
error () {
|
||||
clearTimer();
|
||||
update({
|
||||
percent: 100,
|
||||
status: 'error',
|
||||
show: true
|
||||
});
|
||||
hide();
|
||||
},
|
||||
config (options) {
|
||||
if (options.color) {
|
||||
color = options.color;
|
||||
}
|
||||
if (options.failedColor) {
|
||||
failedColor = options.failedColor;
|
||||
}
|
||||
if (options.height) {
|
||||
height = options.height;
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
clearTimer();
|
||||
let instance = getLoadingBarInstance();
|
||||
loadingBarInstance = null;
|
||||
instance.destroy();
|
||||
}
|
||||
};
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import LoadingBar from './loading-bar.vue';
|
||||
import Vue from 'vue';
|
||||
import { camelcaseToHyphen } from '../../utils/assist';
|
||||
|
||||
LoadingBar.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<loading-bar${props}></loading-bar>`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const loading_bar = new Vue({
|
||||
el: div,
|
||||
data: _props,
|
||||
components: { LoadingBar }
|
||||
}).$children[0];
|
||||
|
||||
return {
|
||||
update (options) {
|
||||
if ('percent' in options) {
|
||||
loading_bar.percent = options.percent;
|
||||
}
|
||||
if (options.status) {
|
||||
loading_bar.status = options.status;
|
||||
}
|
||||
if ('show' in options) {
|
||||
loading_bar.show = options.show;
|
||||
}
|
||||
},
|
||||
component: loading_bar,
|
||||
destroy () {
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default LoadingBar;
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" :style="outerStyles" v-show="show" transition="fade">
|
||||
<div :class="innerClasses" :style="styles"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-loading-bar';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
failedColor: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['success', 'error']);
|
||||
},
|
||||
default: 'success'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
},
|
||||
innerClasses () {
|
||||
return [
|
||||
`${prefixCls}-inner`,
|
||||
{
|
||||
[`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
|
||||
[`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
|
||||
}
|
||||
];
|
||||
},
|
||||
outerStyles () {
|
||||
return {
|
||||
height: `${this.height}px`
|
||||
};
|
||||
},
|
||||
styles () {
|
||||
let style = {
|
||||
width: `${this.percent}%`,
|
||||
height: `${this.height}px`
|
||||
};
|
||||
|
||||
if (this.color !== 'primary' && this.status === 'success') {
|
||||
style.backgroundColor = this.color;
|
||||
}
|
||||
|
||||
if (this.failedColor !== 'error' && this.status === 'error') {
|
||||
style.backgroundColor = this.failedColor;
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import Menu from './menu.vue';
|
||||
import MenuGroup from './menu-group.vue';
|
||||
import MenuItem from './menu-item.vue';
|
||||
import Submenu from './submenu.vue';
|
||||
|
||||
Menu.Group = MenuGroup;
|
||||
Menu.Item = MenuItem;
|
||||
Menu.Sub = Submenu;
|
||||
|
||||
export default Menu;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<li :class="[prefixCls + '-item-group']">
|
||||
<div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
|
||||
<ul><slot></slot></ul>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
name: 'MenuGroup',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes" @click.stop="handleClick"><slot></slot></li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-item`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.active,
|
||||
[`${prefixCls}-item-selected`]: this.active,
|
||||
[`${prefixCls}-item-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) return;
|
||||
this.$dispatch('on-menu-item-select', this.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
<template>
|
||||
<ul :class="classes" :style="styles"><slot></slot></ul>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['horizontal', 'vertical']);
|
||||
},
|
||||
default: 'vertical'
|
||||
},
|
||||
theme: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['light', 'dark', 'primary']);
|
||||
},
|
||||
default: 'light'
|
||||
},
|
||||
activeKey: {
|
||||
type: [String, Number]
|
||||
},
|
||||
openKeys: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '240px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
let theme = this.theme;
|
||||
if (this.mode === 'vertical' && this.theme === 'primary') theme = 'light';
|
||||
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-${theme}`,
|
||||
{
|
||||
[`${prefixCls}-${this.mode}`]: this.mode
|
||||
}
|
||||
];
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
|
||||
if (this.mode === 'vertical') style.width = this.width;
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateActiveKey () {
|
||||
this.$children.forEach((item, index) => {
|
||||
if (!this.activeKey && index === 0) {
|
||||
this.activeKey = -1;
|
||||
}
|
||||
|
||||
if (item.$options.name === 'Submenu') {
|
||||
item.active = false;
|
||||
item.$children.forEach(subitem => {
|
||||
if (subitem.$options.name === 'MenuGroup') {
|
||||
subitem.$children.forEach(groupItem => {
|
||||
if (groupItem.key === this.activeKey) {
|
||||
groupItem.active = true;
|
||||
groupItem.$parent.$parent.active = true;
|
||||
} else {
|
||||
groupItem.active = false;
|
||||
}
|
||||
});
|
||||
} else if (subitem.$options.name === 'MenuItem') {
|
||||
if (subitem.key === this.activeKey) {
|
||||
subitem.active = true;
|
||||
subitem.$parent.active = true;
|
||||
} else {
|
||||
subitem.active = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (item.$options.name === 'MenuGroup') {
|
||||
item.$children.forEach(groupItem => {
|
||||
groupItem.active = groupItem.key === this.activeKey;
|
||||
});
|
||||
} else if (item.$options.name === 'MenuItem') {
|
||||
item.active = item.key === this.activeKey;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateOpenKeys (key) {
|
||||
const index = this.openKeys.indexOf(key);
|
||||
if (index > -1) {
|
||||
this.openKeys.splice(index, 1);
|
||||
} else {
|
||||
this.openKeys.push(key);
|
||||
}
|
||||
},
|
||||
updateOpened () {
|
||||
this.$children.forEach(item => {
|
||||
if (item.$options.name === 'Submenu') {
|
||||
if (this.openKeys.indexOf(item.key) > -1) item.opened = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateActiveKey();
|
||||
this.updateOpened();
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' (key) {
|
||||
this.activeKey = key;
|
||||
this.$emit('on-select', key);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
openKeys () {
|
||||
this.$emit('on-open-change', this.openKeys);
|
||||
},
|
||||
activeKey () {
|
||||
this.updateActiveKey();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls + '-submenu-title']" v-el:reference @click="handleClick">
|
||||
<slot name="title"></slot>
|
||||
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
|
||||
</div>
|
||||
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
|
||||
<Drop
|
||||
v-else
|
||||
v-show="opened"
|
||||
placement="bottom"
|
||||
transition="slide-up"
|
||||
v-ref:drop
|
||||
:style="dropStyle"><slot></slot></Drop>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import { getStyle } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
name: 'Submenu',
|
||||
components: { Icon, Drop },
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
active: false,
|
||||
opened: false,
|
||||
dropWidth: parseFloat(getStyle(this.$el, 'width'))
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-submenu`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.active,
|
||||
[`${prefixCls}-opened`]: this.opened,
|
||||
[`${prefixCls}-submenu-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
mode () {
|
||||
return this.$parent.mode;
|
||||
},
|
||||
accordion () {
|
||||
return this.$parent.accordion;
|
||||
},
|
||||
dropStyle () {
|
||||
let style = {};
|
||||
|
||||
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMouseenter () {
|
||||
if (this.disabled) return;
|
||||
if (this.mode === 'vertical') return;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$parent.updateOpenKeys(this.key);
|
||||
this.opened = true;
|
||||
}, 250);
|
||||
},
|
||||
handleMouseleave () {
|
||||
if (this.disabled) return;
|
||||
if (this.mode === 'vertical') return;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$parent.updateOpenKeys(this.key);
|
||||
this.opened = false;
|
||||
}, 150);
|
||||
},
|
||||
handleClick () {
|
||||
if (this.disabled) return;
|
||||
if (this.mode === 'horizontal') return;
|
||||
const opened = this.opened;
|
||||
if (this.accordion) {
|
||||
this.$parent.$children.forEach(item => {
|
||||
if (item.$options.name === 'Submenu') item.opened = false;
|
||||
});
|
||||
}
|
||||
this.opened = !opened;
|
||||
this.$parent.updateOpenKeys(this.key);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mode (val) {
|
||||
if (val === 'horizontal') {
|
||||
this.$refs.drop.update();
|
||||
}
|
||||
},
|
||||
opened (val) {
|
||||
if (this.mode === 'vertical') return;
|
||||
if (val) {
|
||||
// set drop a width to fixed when menu has fixed position
|
||||
this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' () {
|
||||
if (this.mode === 'horizontal') this.opened = false;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import Notification from '../base/notification';
|
||||
|
||||
const prefixCls = 'ivu-message';
|
||||
const iconPrefixCls = 'ivu-icon';
|
||||
const prefixKey = 'ivu_message_key_';
|
||||
|
||||
let defaultDuration = 1.5;
|
||||
let top;
|
||||
let messageInstance;
|
||||
let key = 1;
|
||||
|
||||
const iconTypes = {
|
||||
'info': 'information-circled',
|
||||
'success': 'checkmark-circled',
|
||||
'warning': 'android-alert',
|
||||
'error': 'close-circled',
|
||||
'loading': 'load-c'
|
||||
};
|
||||
|
||||
function getMessageInstance () {
|
||||
messageInstance = messageInstance || Notification.newInstance({
|
||||
prefixCls: prefixCls,
|
||||
style: {
|
||||
top: `${top}px`
|
||||
}
|
||||
});
|
||||
|
||||
return messageInstance;
|
||||
}
|
||||
|
||||
function notice (content, duration = defaultDuration, type, onClose) {
|
||||
if (!onClose) {
|
||||
onClose = function () {
|
||||
|
||||
};
|
||||
}
|
||||
const iconType = iconTypes[type];
|
||||
|
||||
// if loading
|
||||
const loadCls = type === 'loading' ? ' ivu-load-loop' : '';
|
||||
|
||||
let instance = getMessageInstance();
|
||||
|
||||
instance.notice({
|
||||
key: `${prefixKey}${key}`,
|
||||
duration: duration,
|
||||
style: {},
|
||||
transitionName: 'move-up',
|
||||
content: `
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-${type}">
|
||||
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${loadCls}"></i>
|
||||
<span>${content}</span>
|
||||
</div>
|
||||
`,
|
||||
onClose: onClose
|
||||
});
|
||||
|
||||
// 用于手动消除
|
||||
return (function () {
|
||||
let target = key++;
|
||||
|
||||
return function () {
|
||||
instance.remove(`${prefixKey}${target}`);
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
export default {
|
||||
info (content, duration, onClose) {
|
||||
return notice(content, duration, 'info', onClose);
|
||||
},
|
||||
success (content, duration, onClose) {
|
||||
return notice(content, duration, 'success', onClose);
|
||||
},
|
||||
warning (content, duration, onClose) {
|
||||
return notice(content, duration, 'warning', onClose);
|
||||
},
|
||||
error (content, duration, onClose) {
|
||||
return notice(content, duration, 'error', onClose);
|
||||
},
|
||||
loading (content, duration, onClose) {
|
||||
return notice(content, duration, 'loading', onClose);
|
||||
},
|
||||
config (options) {
|
||||
if (options.top) {
|
||||
top = options.top;
|
||||
}
|
||||
if (options.duration) {
|
||||
defaultDuration = options.duration;
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
let instance = getMessageInstance();
|
||||
messageInstance = null;
|
||||
instance.destroy();
|
||||
}
|
||||
};
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import Modal from './modal.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import iButton from '../button/button.vue';
|
||||
import { camelcaseToHyphen } from '../../utils/assist';
|
||||
import { t } from '../../locale';
|
||||
|
||||
const prefixCls = 'ivu-modal-confirm';
|
||||
|
||||
Modal.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
|
||||
<div class="${prefixCls}">
|
||||
<div class="${prefixCls}-head">
|
||||
<div class="${prefixCls}-head-title">{{{ title }}}</div>
|
||||
</div>
|
||||
<div class="${prefixCls}-body">
|
||||
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
|
||||
{{{ body }}}
|
||||
</div>
|
||||
<div class="${prefixCls}-footer">
|
||||
<i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const modal = new Vue({
|
||||
el: div,
|
||||
components: { Modal, iButton, Icon },
|
||||
data: Object.assign(_props, {
|
||||
visible: false,
|
||||
width: 416,
|
||||
title: '',
|
||||
body: '',
|
||||
iconType: '',
|
||||
iconName: '',
|
||||
okText: t('i.modal.okText'),
|
||||
cancelText: t('i.modal.cancelText'),
|
||||
showCancel: false,
|
||||
loading: false,
|
||||
buttonLoading: false,
|
||||
scrollable: false
|
||||
}),
|
||||
computed: {
|
||||
iconTypeCls () {
|
||||
return [
|
||||
`${prefixCls}-body-icon`,
|
||||
`${prefixCls}-body-icon-${this.iconType}`
|
||||
];
|
||||
},
|
||||
iconNameCls () {
|
||||
return [
|
||||
'ivu-icon',
|
||||
`ivu-icon-${this.iconName}`
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel () {
|
||||
this.visible = false;
|
||||
this.buttonLoading = false;
|
||||
this.onCancel();
|
||||
this.remove();
|
||||
},
|
||||
ok () {
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
this.remove();
|
||||
}
|
||||
this.onOk();
|
||||
},
|
||||
remove () {
|
||||
setTimeout(() => {
|
||||
this.destroy();
|
||||
}, 300);
|
||||
},
|
||||
destroy () {
|
||||
this.$destroy();
|
||||
document.body.removeChild(div);
|
||||
this.onRemove();
|
||||
},
|
||||
onOk () {},
|
||||
onCancel () {},
|
||||
onRemove () {}
|
||||
}
|
||||
}).$children[0];
|
||||
|
||||
return {
|
||||
show (props) {
|
||||
modal.$parent.showCancel = props.showCancel;
|
||||
modal.$parent.iconType = props.icon;
|
||||
|
||||
switch (props.icon) {
|
||||
case 'info':
|
||||
modal.$parent.iconName = 'information-circled';
|
||||
break;
|
||||
case 'success':
|
||||
modal.$parent.iconName = 'checkmark-circled';
|
||||
break;
|
||||
case 'warning':
|
||||
modal.$parent.iconName = 'android-alert';
|
||||
break;
|
||||
case 'error':
|
||||
modal.$parent.iconName = 'close-circled';
|
||||
break;
|
||||
case 'confirm':
|
||||
modal.$parent.iconName = 'help-circled';
|
||||
break;
|
||||
}
|
||||
|
||||
if ('width' in props) {
|
||||
modal.$parent.width = props.width;
|
||||
}
|
||||
|
||||
if ('title' in props) {
|
||||
modal.$parent.title = props.title;
|
||||
}
|
||||
|
||||
if ('content' in props) {
|
||||
modal.$parent.body = props.content;
|
||||
}
|
||||
|
||||
if ('okText' in props) {
|
||||
modal.$parent.okText = props.okText;
|
||||
}
|
||||
|
||||
if ('cancelText' in props) {
|
||||
modal.$parent.cancelText = props.cancelText;
|
||||
}
|
||||
|
||||
if ('onCancel' in props) {
|
||||
modal.$parent.onCancel = props.onCancel;
|
||||
}
|
||||
|
||||
if ('onOk' in props) {
|
||||
modal.$parent.onOk = props.onOk;
|
||||
}
|
||||
|
||||
// async for ok
|
||||
if ('loading' in props) {
|
||||
modal.$parent.loading = props.loading;
|
||||
}
|
||||
|
||||
if ('scrollable' in props) {
|
||||
modal.$parent.scrollable = props.scrollable;
|
||||
}
|
||||
|
||||
// notice when component destroy
|
||||
modal.$parent.onRemove = props.onRemove;
|
||||
|
||||
modal.visible = true;
|
||||
},
|
||||
remove () {
|
||||
modal.visible = false;
|
||||
modal.$parent.buttonLoading = false;
|
||||
modal.$parent.remove();
|
||||
},
|
||||
component: modal
|
||||
};
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import Modal from './confirm';
|
||||
|
||||
let modalInstance;
|
||||
|
||||
function getModalInstance () {
|
||||
modalInstance = modalInstance || Modal.newInstance({
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
footerHide: true
|
||||
});
|
||||
|
||||
return modalInstance;
|
||||
}
|
||||
|
||||
function confirm (options) {
|
||||
let instance = getModalInstance();
|
||||
|
||||
options.onRemove = function () {
|
||||
modalInstance = null;
|
||||
};
|
||||
|
||||
instance.show(options);
|
||||
}
|
||||
|
||||
Modal.info = function (props = {}) {
|
||||
props.icon = 'info';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.success = function (props = {}) {
|
||||
props.icon = 'success';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.warning = function (props = {}) {
|
||||
props.icon = 'warning';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.error = function (props = {}) {
|
||||
props.icon = 'error';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.confirm = function (props = {}) {
|
||||
props.icon = 'confirm';
|
||||
props.showCancel = true;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.remove = function () {
|
||||
if (!modalInstance) { // at loading status, remove after Cancel
|
||||
return false;
|
||||
}
|
||||
|
||||
const instance = getModalInstance();
|
||||
|
||||
instance.remove();
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<template>
|
||||
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
|
||||
<div :class="wrapClasses" @click="handleWrapClick">
|
||||
<div :class="classes" :style="styles" v-show="visible" transition="ease">
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
|
||||
<slot name="close">
|
||||
<Icon type="ios-close-empty"></Icon>
|
||||
</slot>
|
||||
</a>
|
||||
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
|
||||
<div :class="[prefixCls + '-body']"><slot></slot></div>
|
||||
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
|
||||
<slot name="footer">
|
||||
<i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import iButton from '../button/button.vue';
|
||||
import { getScrollBarSize } from '../../utils/assist';
|
||||
import { t } from '../../locale';
|
||||
|
||||
const prefixCls = 'ivu-modal';
|
||||
|
||||
export default {
|
||||
components: { Icon, iButton },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 520
|
||||
},
|
||||
okText: {
|
||||
type: String,
|
||||
default () {
|
||||
return t('i.modal.okText');
|
||||
}
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default () {
|
||||
return t('i.modal.cancelText');
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
style: {
|
||||
type: Object
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
// for instance
|
||||
footerHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
wrapShow: false,
|
||||
showHead: true,
|
||||
buttonLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrap`,
|
||||
{
|
||||
[`${prefixCls}-hidden`]: !this.wrapShow,
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
];
|
||||
},
|
||||
maskClasses () {
|
||||
return `${prefixCls}-mask`;
|
||||
},
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
|
||||
const styleWidth = {
|
||||
width: `${this.width}px`
|
||||
};
|
||||
|
||||
const customStyle = this.style ? this.style : {};
|
||||
|
||||
Object.assign(style, styleWidth, customStyle);
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.visible = false;
|
||||
this.$emit('on-cancel');
|
||||
},
|
||||
mask () {
|
||||
if (this.maskClosable) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
handleWrapClick (event) {
|
||||
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
|
||||
const className = event.target.getAttribute('class');
|
||||
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
|
||||
},
|
||||
cancel () {
|
||||
this.close();
|
||||
},
|
||||
ok () {
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
}
|
||||
this.$emit('on-ok');
|
||||
},
|
||||
EscClose (e) {
|
||||
if (this.visible && this.closable) {
|
||||
if (e.keyCode === 27) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
checkScrollBar () {
|
||||
let fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
|
||||
const documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
if (this.bodyIsOverflowing) {
|
||||
this.scrollBarWidth = getScrollBarSize();
|
||||
}
|
||||
},
|
||||
setScrollBar () {
|
||||
if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
|
||||
document.body.style.paddingRight = `${this.scrollBarWidth}px`;
|
||||
}
|
||||
},
|
||||
resetScrollBar () {
|
||||
document.body.style.paddingRight = '';
|
||||
},
|
||||
addScrollEffect () {
|
||||
this.checkScrollBar();
|
||||
this.setScrollBar();
|
||||
document.body.style.overflow = 'hidden';
|
||||
},
|
||||
removeScrollEffect() {
|
||||
document.body.style.overflow = '';
|
||||
this.resetScrollBar();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.visible) {
|
||||
this.wrapShow = true;
|
||||
}
|
||||
|
||||
let showHead = true;
|
||||
|
||||
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
|
||||
showHead = false;
|
||||
}
|
||||
|
||||
this.showHead = showHead;
|
||||
|
||||
// ESC close
|
||||
document.addEventListener('keydown', this.EscClose);
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.EscClose);
|
||||
this.removeScrollEffect();
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val === false) {
|
||||
this.buttonLoading = false;
|
||||
this.timer = setTimeout(() => {
|
||||
this.wrapShow = false;
|
||||
this.removeScrollEffect();
|
||||
}, 300);
|
||||
} else {
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
this.wrapShow = true;
|
||||
if (!this.scrollable) {
|
||||
this.addScrollEffect();
|
||||
}
|
||||
}
|
||||
},
|
||||
loading (val) {
|
||||
if (!val) {
|
||||
this.buttonLoading = false;
|
||||
}
|
||||
},
|
||||
scrollable (val) {
|
||||
if (!val) {
|
||||
this.addScrollEffect();
|
||||
} else {
|
||||
this.removeScrollEffect();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
import Notification from '../base/notification';
|
||||
|
||||
const prefixCls = 'ivu-notice';
|
||||
const iconPrefixCls = 'ivu-icon';
|
||||
const prefixKey = 'ivu_notice_key_';
|
||||
|
||||
let top = 24;
|
||||
let defaultDuration = 4.5;
|
||||
let noticeInstance;
|
||||
let key = 1;
|
||||
|
||||
const iconTypes = {
|
||||
'info': 'information-circled',
|
||||
'success': 'checkmark-circled',
|
||||
'warning': 'android-alert',
|
||||
'error': 'close-circled'
|
||||
};
|
||||
|
||||
function getNoticeInstance () {
|
||||
noticeInstance = noticeInstance || Notification.newInstance({
|
||||
prefixCls: prefixCls,
|
||||
style: {
|
||||
top: `${top}px`,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
|
||||
return noticeInstance;
|
||||
}
|
||||
|
||||
function notice (type, options) {
|
||||
const title = options.title || '';
|
||||
const desc = options.desc || '';
|
||||
const noticeKey = options.key || `${prefixKey}${key}`;
|
||||
const onClose = options.onClose || function () {};
|
||||
// todo const btn = options.btn || null;
|
||||
const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
|
||||
|
||||
key++;
|
||||
|
||||
let instance = getNoticeInstance();
|
||||
|
||||
let content;
|
||||
|
||||
const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
|
||||
|
||||
if (type == 'normal') {
|
||||
content = `
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
|
||||
<div class="${prefixCls}-title">${title}</div>
|
||||
<div class="${prefixCls}-desc">${desc}</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const iconType = iconTypes[type];
|
||||
content = `
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
|
||||
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
|
||||
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
|
||||
</span>
|
||||
<div class="${prefixCls}-title">${title}</div>
|
||||
<div class="${prefixCls}-desc">${desc}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
instance.notice({
|
||||
key: noticeKey.toString(),
|
||||
duration: duration,
|
||||
style: {},
|
||||
transitionName: 'move-notice',
|
||||
content: content,
|
||||
onClose: onClose,
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
open (options) {
|
||||
return notice('normal', options);
|
||||
},
|
||||
info (options) {
|
||||
return notice('info', options);
|
||||
},
|
||||
success (options) {
|
||||
return notice('success', options);
|
||||
},
|
||||
warning (options) {
|
||||
return notice('warning', options);
|
||||
},
|
||||
error (options) {
|
||||
return notice('error', options);
|
||||
},
|
||||
config (options) {
|
||||
if (options.top) {
|
||||
top = options.top;
|
||||
}
|
||||
if (options.duration || options.duration === 0) {
|
||||
defaultDuration = options.duration;
|
||||
}
|
||||
},
|
||||
close (key) {
|
||||
if (key) {
|
||||
key = key.toString();
|
||||
if (noticeInstance) {
|
||||
noticeInstance.remove(key);
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
let instance = getNoticeInstance();
|
||||
noticeInstance = null;
|
||||
instance.destroy();
|
||||
}
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Page from './page.vue';
|
||||
export default Page;
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<div v-if="showSizer || showElevator" :class="optsClasses">
|
||||
<div v-if="showSizer" :class="sizerClasses">
|
||||
<i-select :model.sync="pageSize" :size="size" @on-change="changeSize">
|
||||
<i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
|
||||
</i-select>
|
||||
</div>
|
||||
<div v-if="showElevator" :class="ElevatorClasses">
|
||||
{{ t('i.page.goto') }}
|
||||
<input type="text" :value="_current" @keyup.enter="changePage">
|
||||
{{ t('i.page.p') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iSelect from '../../components/select/select.vue';
|
||||
import iOption from '../../components/select/option.vue';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-page';
|
||||
|
||||
function isValueNumber (value) {
|
||||
return (/^[1-9][0-9]*$/).test(value + '');
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
components: { iSelect, iOption },
|
||||
props: {
|
||||
pageSizeOpts: Array,
|
||||
showSizer: Boolean,
|
||||
showElevator: Boolean,
|
||||
current: Number,
|
||||
_current: Number,
|
||||
pageSize: Number,
|
||||
allPages: Number,
|
||||
isSmall: Boolean
|
||||
},
|
||||
computed: {
|
||||
size () {
|
||||
return this.isSmall ? 'small' : 'default';
|
||||
},
|
||||
optsClasses () {
|
||||
return [
|
||||
`${prefixCls}-options`
|
||||
];
|
||||
},
|
||||
sizerClasses () {
|
||||
return [
|
||||
`${prefixCls}-options-sizer`
|
||||
];
|
||||
},
|
||||
ElevatorClasses () {
|
||||
return [
|
||||
`${prefixCls}-options-elevator`
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSize () {
|
||||
this.$emit('on-size', this.pageSize);
|
||||
},
|
||||
changePage (event) {
|
||||
let val = event.target.value.trim();
|
||||
let page = 0;
|
||||
|
||||
if (isValueNumber(val)) {
|
||||
val = Number(val);
|
||||
if (val != this.current) {
|
||||
const allPages = this.allPages;
|
||||
|
||||
if (val > allPages) {
|
||||
page = allPages;
|
||||
} else {
|
||||
page = val;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
page = 1;
|
||||
}
|
||||
|
||||
if (page) {
|
||||
this.$emit('on-page', page);
|
||||
event.target.value = page;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue