init

init

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,19 @@
+*.iml
+.idea
+.ipr
+.iws
+*.diff
+*.patch
+*.bak
+.DS_Store
+node_modules/
+.project
+.settings
+npm-debug.log
+.*proj
+.svn/
+*.swp
+*.swo
+*.log
+/index.html
+/index_prod.html

.npmignore

@@ -0,0 +1,7 @@
+.*
+*.md
+*.yml
+build/
+node_modules/
+local/
+gulpfile.js

README.md

@@ -1,2 +1 @@
 # iview
-A UI components with Vue.js.

build/build-components.js

@@ -0,0 +1,3 @@
+/**
+ * todo 编译.vue组件为.js文件
+ */

build/build-style.js

@@ -0,0 +1,68 @@
+/**
+ * 编译样式文件
+ * iview.css 是基础组件css
+ * iview.pack.css 是套装的全部css
+ * iview.all.css 是基础组件加套装的全部css
+ * packages/*.css 是某个套装的css
+ * article.css 是文章排版的css
+ * */
+var gulp = require('gulp');
+var minifyCSS = require('gulp-minify-css');
+var less = require('gulp-less');
+var rename = require('gulp-rename');
+var concat = require('gulp-concat');
+
+// 组件的基础css
+gulp.task('base', function () {
+     gulp.src('../styles/index.less')
+         .pipe(less())
+         .pipe(minifyCSS())
+         .pipe(rename('iview.css'))
+         .pipe(gulp.dest('../dist/styles'))
+});
+
+// 字体
+gulp.task('fonts', function () {
+    gulp.src('../styles/common/iconfont/fonts/*.*')
+        .pipe(gulp.dest('../dist/styles/fonts'))
+});
+
+// 文章排版
+gulp.task('article', function () {
+    gulp.src('../styles/article/index.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename('article.css'))
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+// 套装的全部css
+gulp.task('pack-all', function () {
+    gulp.src('../styles/package.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename('iview.pack.css'))
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+// 每个套装的css
+gulp.task('pack', function () {
+    gulp.src(['../styles/packages/*.less', '!../styles/packages/index.less'])
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename({
+            prefix: 'iview.pack.'
+        }))
+        .pipe(gulp.dest('../dist/styles/packages'))
+});
+
+// 全部css(包含组件和套装)
+gulp.task('all', function () {
+    gulp.src(['../styles/index.less', '../styles/package.less'])
+        .pipe(less())
+        .pipe(concat('iview.all.css'))
+        .pipe(minifyCSS())
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+gulp.task('default', ['base', 'fonts', 'article', 'pack-all', 'pack', 'all']);

build/vue.config.js

@@ -0,0 +1,12 @@
+var compiler = require('vueify').compiler;
+var fs = require('fs');
+
+var data = fs.readFileSync('../components/button/button.vue', 'utf-8');
+// console.log(data);
+
+var fileContent = data;
+var filePath = '../components/button';
+compiler.compile(fileContent, filePath, function (err, result) {
+    // result is a common js module string
+    console.log(result);
+});

build/webpack.config.js

@@ -0,0 +1,72 @@
+/**
+ * 本地预览
+ */
+
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    // 入口
+    entry: {
+        main: './local/main',
+        vendors: ['vue', 'vue-router']
+    },
+    // 输出
+    output: {
+        path: path.join(__dirname, '.././local/dist'),
+        publicPath: '/local/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: "../local/dist/"
+                }
+            ),
+            less: ExtractTextPlugin.extract(
+                'vue-style-loader',
+                'css-loader!less-loader'
+            ),
+            js: 'babel'
+        }
+    },
+    // 转es5
+    babel: {
+        presets: ['es2015'],
+        plugins: ['transform-runtime']
+    },
+    resolve: {
+        // require时省略的扩展名，如：require('module') 不需要module.js
+        extensions: ['', '.js', '.vue'],
+        alias: {
+            iview: '../.././index'
+        }
+    },
+    plugins: [
+        new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }),             // 提取CSS
+        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),                           // 提取第三方库
+        new HtmlWebpackPlugin({                                                                     // 构建html文件
+            filename: '../../index.html',
+            template: './local/template/index.html',
+            inject: 'body'
+        })
+    ]
+};

components/affix/affix.vue

@@ -0,0 +1,126 @@
+<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>

components/affix/index.js

@@ -0,0 +1,2 @@
+import Affix from './affix.vue';
+export default Affix;