diff --git a/.babelrc b/.babelrc old mode 100644 new mode 100755 index 8c642c5f0187f7181db4028ed2935acf8ff04968..2aa7f94c2589add195d359ce294dc3ad364468da --- a/.babelrc +++ b/.babelrc @@ -12,6 +12,7 @@ ] ], "plugins": [ - "@babel/plugin-syntax-dynamic-import" + "@babel/plugin-syntax-dynamic-import", + "transform-vue-jsx" ] } \ No newline at end of file diff --git a/3.0.md b/3.0.md new file mode 100644 index 0000000000000000000000000000000000000000..da63c4192de95155ccaf7867d44530ed478c34c4 --- /dev/null +++ b/3.0.md @@ -0,0 +1,36 @@ + +`Alert` + +- 优化 `cloasable` 关闭时动画卡顿 +- 优化内容文字文字换行 +- 增加 `message` `description` 属性来呈现标题和内容 + +`Badge` + +- 增加 `dot` 隐藏显示 + +`Card` + +- 优化 `extra` 显示更友好 +- 优化标题居中显示,超出部分隐藏,调节字体大小 + +`Checkbox` + +- 统一禁用光标状态 +- `Group` 增加 `options` 属性来呈现子组件 + +`Carousel` + +- 优化切换动画 抖动和 尺寸变化的组件内部的动画展现形式 +- 增加循环无缝播放 + +`Radio` + +- `RadioGroup` 增加 `mini`, `large` ,`circle` ,`options` 来控制组件呈现模式 +- `RadioButton`增加 `icon` 属性来展示图标 + +`Switch` + +- 增加 `icon` 属性可展示图标切换开关 +- 优化组件,可展示多个文字切换开关 + diff --git a/build/build.js b/build/build.js old mode 100644 new mode 100755 index 8dfe6760335c36fb3b993f3fc23c57018fe964f0..f499d264a8a68e2bcc5964e7b8a6fdf738ed012a --- a/build/build.js +++ b/build/build.js @@ -1,36 +1,26 @@ -const rm = require('rimraf') -const ora = require('ora') -const spinner = ora('开始构建...') const chalk = require('chalk') const webpack = require('webpack') -const path = require('path') -let isBuildDoc = process.argv.splice(2).length>0; +let isBuildDoc = process.argv.splice(2).length > 0; let config = isBuildDoc ? require('./webpack.prod.doc.conf') : require('./webpack.prod.conf'); -let rmPath = isBuildDoc ? './docs/dist' : './dist'; -// spinner.start() - -rm(rmPath, (err) => { +webpack(config, function (err, stats) { + // spinner.stop() if (err) throw err - webpack(config, function (err, stats) { - // spinner.stop() - if (err) throw err - process.stdout.write(stats.toString({ - colors: true, - modules: false, - children: false, - chunks: false, - chunkModules: false - }) + '\n\n') + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false + }) + '\n\n') - if (stats.hasErrors()) { - console.log(chalk.red(' 编译出现错误.\n')) - process.exit(1) - } + if (stats.hasErrors()) { + console.log(chalk.red(' 编译出现错误.\n')) + process.exit(1) + } - console.log(chalk.cyan(' 编译完成.\n')) - process.exit() - }) + console.log(chalk.cyan(' 编译完成.\n')) + process.exit() }) \ No newline at end of file diff --git a/build/md-loader/index.js b/build/md-loader/index.js new file mode 100755 index 0000000000000000000000000000000000000000..e464f65f96e38a89a16093400f2a044754a701fb --- /dev/null +++ b/build/md-loader/index.js @@ -0,0 +1 @@ +module.exports = require('./loader'); \ No newline at end of file diff --git a/build/md-loader/loader.js b/build/md-loader/loader.js new file mode 100755 index 0000000000000000000000000000000000000000..fc32e655866e68cd0b04d9a3634cb5db6b849e43 --- /dev/null +++ b/build/md-loader/loader.js @@ -0,0 +1,174 @@ +var loaderUtils = require('loader-utils'); +var hljs = require('highlight.js'); +var cheerio = require('cheerio'); +var markdown = require('markdown-it'); +var Token = require('markdown-it/lib/token'); + +/** + * `
` => `
`
+ * `` => ``
+ * @param  {string} str
+ * @return {string}
+ */
+var addVuePreviewAttr = function (str) {
+  return str.replace(/( vue file template
+ * @param  {[type]} html [description]
+ * @return {[type]}      [description]
+ */
+var renderVueTemplate = function (html, wrapper) {
+  var $ = cheerio.load(html, {
+    decodeEntities: false,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false,
+    xmlMode: true,
+  });
+
+  var output = {
+    style: $.html('style'),
+    // get only the first script child. Causes issues if multiple script files in page.
+    script: $.html($('script').first())
+  };
+  var result;
+
+  $('style').remove();
+  $('script').remove();
+
+  if (wrapper) {
+    result =
+      `\n`
+  } else {
+    result =
+      `\n`
+  }
+  result += output.style + '\n' + output.script;
+
+  return result;
+};
+
+module.exports = function (source) {
+  this.cacheable && this.cacheable();
+  var parser, preprocess;
+  // var params = loaderUtils.getOptions(this) || {};
+  // var vueMarkdownOptions = this._compilation.__vueMarkdownOptions__;
+  // var opts = vueMarkdownOptions ? Object.create(vueMarkdownOptions.__proto__) : {}; // inherit prototype
+  var opts = loaderUtils.getOptions(this);
+
+  var preventExtract = false;
+
+  // opts = Object.assign(opts, params, vueMarkdownOptions); // assign attributes
+
+  if (opts.preventExtract) {
+    delete opts.preventExtract;
+    preventExtract = true;
+  }
+
+  if (typeof opts.render === 'function') {
+    parser = opts;
+  } else {
+    opts = Object.assign(
+      {
+        preset: 'default',
+        html: true,
+        highlight: renderHighlight,
+        wrapper: 'section'
+      },
+      opts
+    );
+
+    var plugins = opts.use;
+    preprocess = opts.preprocess;
+
+    delete opts.use;
+    delete opts.preprocess;
+
+    parser = markdown(opts.preset, opts);
+
+    //add ruler:extract script and style tags from html token content
+    !preventExtract &&
+      parser.core.ruler.push('extract_script_or_style', function replace(
+        state
+      ) {
+        let tag_reg = new RegExp('<(script|style)(?:[^<]|<)+', 'g');
+        let newTokens = [];
+        state.tokens
+          .filter(token => token.type == 'fence' && token.info == 'html')
+          .forEach(token => {
+            let tokens = (token.content.match(tag_reg) || []).map(content => {
+              let t = new Token('html_block', '', 0);
+              t.content = content;
+              return t;
+            });
+            if (tokens.length > 0) {
+              newTokens.push.apply(newTokens, tokens);
+            }
+          });
+        state.tokens.push.apply(state.tokens, newTokens);
+      });
+
+    if (plugins) {
+      plugins.forEach(function (plugin) {
+        if (Array.isArray(plugin)) {
+          parser.use.apply(parser, plugin);
+        } else {
+          parser.use(plugin);
+        }
+      });
+    }
+  }
+
+  /**
+   * override default parser rules by adding v-pre attribute on 'code' and 'pre' tags
+   * @param {Array} rules rules to override
+   */
+  function overrideParserRules(rules) {
+    if (parser && parser.renderer && parser.renderer.rules) {
+      var parserRules = parser.renderer.rules;
+      rules.forEach(function (rule) {
+        if (parserRules && parserRules[rule]) {
+          var defaultRule = parserRules[rule];
+          parserRules[rule] = function () {
+            return addVuePreviewAttr(defaultRule.apply(this, arguments));
+          };
+        }
+      });
+    }
+  }
+
+  overrideParserRules(['code_inline', 'code_block', 'fence']);
+
+  if (preprocess) {
+    source = preprocess.call(this, parser, source);
+  }
+
+  source = source.replace(/@/g, '__at__');
+
+  var content = parser.render(source).replace(/__at__/g, '@');
+  var result = renderVueTemplate(content, opts.wrapper);
+
+  if (opts.raw) {
+    return result;
+  } else {
+    return 'module.exports = ' + JSON.stringify(result);
+  }
+};
diff --git a/build/md-loader/render.js b/build/md-loader/render.js
new file mode 100755
index 0000000000000000000000000000000000000000..4eb0b99cf8ee28e00a0eebdbf2e7ff7f1fb4b03f
--- /dev/null
+++ b/build/md-loader/render.js
@@ -0,0 +1,121 @@
+const cheerio = require('cheerio');
+const Token = require('markdown-it/lib/token');
+const hljs = require('highlight.js');
+const anchor = require('markdown-it-anchor')
+
+
+const cnReg = new RegExp('<(cn)(?:[^<]|<)+', 'g');
+
+const getDomHtml = (str, tag, scoped) => {
+  const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true, });  //xmlMode 为false 闭合标签 编译错误 
+  if (!tag) {
+    return str;
+  }
+  if (tag === 'style') {
+    return scoped
+      ? $(`${tag}[scoped]`).html()
+      : $(`${tag}`).not(`${tag}[scoped]`).html();
+  }
+  return $(tag).html() || '';
+};
+
+const render = (md, options) => {
+
+  md.core.ruler.push('render', ({ tokens }) => {
+    let cn, template, script, style, scopedStyle, code, sourceCode;
+
+
+    tokens.forEach(token => {
+      if (token.type === 'html_block') {
+        if (token.content.match(cnReg)) {
+          cn = getDomHtml(token.content, 'cn');
+          token.content = ''
+        }
+        /* if (token.content.match(usReg)) {
+             us = getDomHtml(token.content, 'us');
+             token.content = '';
+           } */
+      }
+      if (token.info === 'tpl') {
+        sourceCode = token.content;
+        code = '````html\n' + token.content + '````';
+        template = getDomHtml(token.content, 'template');
+        script = getDomHtml(token.content, 'script');
+        style = getDomHtml(token.content, 'style');
+        scopedStyle = getDomHtml(token.content, 'style', true);
+        token.content = '';
+        token.type = 'html_block';
+      }
+    });
+    if (template) {
+      let data = { html: template, script, style, cn, sourceCode, };
+
+      data = md.utils.escapeHtml(JSON.stringify(data));
+
+      const codeHtml = code ? md.render(code) : '';
+
+      const cnHtml = cn ? md.render(cn) : '';
+
+      let newContent = `
+      `;
+      newContent += script
+        ? `
+      
+      `
+        : '';
+      newContent += style ? `` : '';
+      newContent += scopedStyle ? `` : '';
+      const tk = new Token('html_block', '', 0);
+      tk.content = newContent;
+      tokens.push(tk);
+    }
+  });
+}
+
+//options
+
+
+const replaceDelimiters = function (str) {
+  return str.replace(/({{|}})/g, '$1');
+};
+
+var renderHighlight = function (str, lang) {
+  if (!(lang && hljs.getLanguage(lang))) {
+    return '';
+  }
+
+  try {
+    return replaceDelimiters(hljs.highlight(lang, str, true).value);
+  } catch (err) { }
+};
+
+var markdown = require('markdown-it')({
+  html: true,
+  breaks: true,
+  highlight: renderHighlight,
+})
+markdown
+  .use(anchor, {
+    level: 2,
+    slugify: string => string.trim().split(' ').join('-'),
+    permalink: true,
+    permalinkClass: 'anchor',
+    permalinkSymbol: '#',
+    permalinkBefore: false,
+  })
+  .use(render)
+
+markdown = Object.assign(markdown, {
+  raw: true,
+  wrapper: 'div'
+})
+
+module.exports = markdown
\ No newline at end of file
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
old mode 100644
new mode 100755
index ba6bf9c6ece0430e4291a4bc99999fb149185fe7..1c2397d528c5a9842f19eb9fdac7777680dbdbe4
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,43 +1,85 @@
+const webpack = require('webpack')
 const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const pkg = require('../package.json');
 
+const markdown = require('./md-loader/render')
+
+const vueLoaderOptions = {
+  loaders: {
+    js: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: ['env'],
+          plugins: ['transform-vue-jsx', 'transform-object-rest-spread'],
+        },
+      },
+    ],
+  },
+};
 module.exports = {
+  bail: true,
   module: {
     rules: [
       {
-        test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',
-        /* query: {
-          presets: ['es2015', 'stage-3'],
-          plugins: ['transform-runtime']
-        } */
+        test: /\.md$/,
+        use: [
+          { loader: 'vue-loader', },
+          { loader: './build/md-loader', options: markdown },
+          { loader: 'kui-loader', options: { prefix: false } }
+        ]
       },
-      { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
-      { test: /\.styl(us)?$/, use: ['style-loader', 'css-loader', 'stylus-loader'] },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader', /* 'postcss-loader' */]
+        use: ['vue-style-loader', 'css-loader'],
       },
       {
-        test: /\.less$/,
-        use: ['style-loader', 'css-loader', 'less-loader'],
+        test: /\.vue$/,
+        use: [{
+          loader: 'vue-loader',
+          options: vueLoaderOptions
+          // options: {
+          //   loaders: {
+          //     css: 'vue-style-loader!css-loader',
+          //     less: 'vue-style-loader!css-loader!less-loader'
+          //   },
+          // }
+        },
+        { loader: 'kui-loader', options: { prefix: false } }
+        ]
       },
       {
-        test: /\.(png|jpg|gif)$/,
-        loader: 'url-loader',
-        query: { limit: 13000, name: 'img/[name].[ext]?[hash:7]' }
+        test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader',
       },
       {
-        test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
+        test: /\.(png|jpg|gif)$/,
         loader: 'file-loader',
-        query: { limit: 10000, name: 'fonts/[name].[ext]?[hash:7]', prefix: 'font' }
+        options: { limit: 8192, name: 'img/[name].[ext]?[hash:7]', esModule: false }
       },
     ]
   },
 
   resolve: {
-    extensions: ['.js', '.vue', '.json', '.less'],
+    extensions: ['.js', '.jsx', '.vue', '.json', '.less', '.md'],
     alias: {
       'vue': 'vue/dist/vue.esm.js',
-      '@': path.resolve(__dirname, '../src'),
+      '@': path.join(__dirname, '../'),
     },
-  }
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.BannerPlugin(`${pkg.name} v${pkg.version} 
+Copyright 2017-present, kui-vue.
+All rights reserved.
+Author: chuchur@qq.com / www.chuchur.com
+        `),
+    new webpack.ContextReplacementPlugin(
+      /moment[\\\/]locale$/,
+      /^\.\/(zh-cn)$/
+    ),
+  ],
+
+
+
 }
\ No newline at end of file
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
old mode 100644
new mode 100755
index a4b0a7396895c55079f181d9d0f7a6c1d59afa5a..49fe10ddacd64c001c0bee214f95d547f771b278
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -2,77 +2,57 @@
  * by chuchur /chuchur@qq.com
  * 打包vue 组件
  */
-const webpack = require('webpack')
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const merge = require('webpack-merge');
 const webpackBaseConfig = require('./webpack.base.conf.js');
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+// const webpack = require('webpack')
 
-module.exports = merge(webpackBaseConfig, {
-    mode: 'development',
-    devServer: {
-        contentBase: path.resolve(__dirname, 'docs'),
-        port: 7005,
-        clientLogLevel: 'none',
-        hot: true,
-        // open: false,
-        inline: true,
-        compress: true,
-        historyApiFallback: true,
-    },
-    entry: {
-        index: ['./docs/src/main.js'],
-        vendors: ['vue', 'vue-router']
-    },
-    output: {
-        path: path.resolve(__dirname, 'docs'),
-        filename: '[name].[hash:5].js',
-        publicPath: '/',
-        chunkFilename: '[name].[chunkhash:5].js',
-    },
-    module: {
-        rules: [
-            {
-                test: /\.vue$/,
-                use: [{
-                    loader: 'vue-loader',
-                    options: {
-                        loaders: {
-                            css: 'vue-style-loader!css-loader',
-                            less: 'vue-style-loader!css-loader!less-loader'
-                        },
-                    }
-                },
-                { loader: 'kui-loader', options: { prefix: false } }
-                ]
-            },
-        ]
-    },
-    optimization: {
-        minimize: false,
-    },
-    plugins: [
-        new VueLoaderPlugin(), //for vue-loader 15
-        new webpack.HotModuleReplacementPlugin(),
 
-        new webpack.DefinePlugin({ DEVELOPMENT: JSON.stringify(true) }),
-        // 位于开发环境下
-        // 自动生成html插件,如果创建多个HtmlWebpackPlugin的实例,就会生成多个页面
-        new HtmlWebpackPlugin({
-            favicon: path.join(__dirname, '../docs/src/assets/favicon.png'),
-            // 生成html文件的名字,路径和生产环境下的不同,要与修改后的publickPath相结合,否则开启服务器后页面空白
-            filename: 'index.html',
-            // 源文件,路径相对于本文件所在的位置
-            template: path.resolve(__dirname, '../docs/src/index.html'),
-            // 需要引入entry里面的哪几个入口,如果entry里有公共模块,记住一定要引入
-            chunks: ['vendors', 'index'],
-            // 要把 
+```
\ No newline at end of file
diff --git a/components/affix/demo/container.md b/components/affix/demo/container.md
new file mode 100755
index 0000000000000000000000000000000000000000..dcce161753960444acb4705c64bf4874113b14f6
--- /dev/null
+++ b/components/affix/demo/container.md
@@ -0,0 +1,31 @@
+
+#### 基本 
+最简单的用法。
+
+
+```tpl
+
+
+
+```
diff --git a/components/affix/demo/index.vue b/components/affix/demo/index.vue
new file mode 100755
index 0000000000000000000000000000000000000000..e221de993db9954e0dd794c54d01ff6610a7883c
--- /dev/null
+++ b/components/affix/demo/index.vue
@@ -0,0 +1,23 @@
+ 
\ No newline at end of file
diff --git a/components/affix/demo/info.md b/components/affix/demo/info.md
new file mode 100755
index 0000000000000000000000000000000000000000..aed0a3017399c2c6d0f6bed5e3822a04bfb54824
--- /dev/null
+++ b/components/affix/demo/info.md
@@ -0,0 +1,8 @@
+## Affix 固钉
+将页面元素钉在可视范围。
+
+## 何时使用
+当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+页面可视范围过小时,慎用此功能以免遮挡页面内容。
+
+## 代码演示
\ No newline at end of file
diff --git a/components/affix/index.js b/components/affix/index.js
new file mode 100755
index 0000000000000000000000000000000000000000..da7cf069d50e45eb25bb50b9e82132e41a36c6cc
--- /dev/null
+++ b/components/affix/index.js
@@ -0,0 +1,2 @@
+import Affix from './affix.jsx'
+export default Affix
\ No newline at end of file
diff --git a/components/affix/index.md b/components/affix/index.md
new file mode 100755
index 0000000000000000000000000000000000000000..c05c0946142bb8505e068b1cb515c290971304f5
--- /dev/null
+++ b/components/affix/index.md
@@ -0,0 +1,6 @@
+## API
+| 属性           | 说明                                 | 类型            | 默认值 |
+|--------------|------------------------------------|---------------|-----|
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发                   | String,Number | 0   |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发                   | String,Number | -   |
+| change       | 在固定状态发生改变时触发,返回当前固定状态 `false` , `true` | Function      | -   |
\ No newline at end of file
diff --git a/components/affix/styles/index.less b/components/affix/styles/index.less
new file mode 100755
index 0000000000000000000000000000000000000000..0ca3bb5b300e25c8b14eb8a8f7abc1bc7ac31dc8
--- /dev/null
+++ b/components/affix/styles/index.less
@@ -0,0 +1,4 @@
+.k-affix {
+	position: fixed;
+	z-index: 1000;
+}
\ No newline at end of file
diff --git a/components/alert/alert.jsx b/components/alert/alert.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..571ae064fa386d20be2682ae8cb94fa4fd459bb4
--- /dev/null
+++ b/components/alert/alert.jsx
@@ -0,0 +1,59 @@
+
+import Icon from "../icon";
+import { getTranstionProp } from '../_tool/transition'
+export default {
+  components: { Icon },
+  name: "Alert",
+  props: {
+    type: { type: String, default: "warning" },
+    closable: Boolean,
+    showIcon: Boolean,
+    message: String,
+    description: String,
+  },
+  data() {
+    return {
+      closed: false
+    };
+  },
+  methods: {
+    close() {
+      this.closed = true;
+      this.$emit("close");
+    }
+  },
+  render() {
+
+    let { closed, showIcon, closable, close, $slots, type, description, message } = this
+    const classes = [
+      "k-alert", {
+        [`k-alert-${this.type}`]: type,
+        'k-alert-has-icon': showIcon,
+        'k-alert-has-close': closable,
+        'k-alert-has-description': description
+      }
+    ];
+    let icons = {
+      info: "ios-information-circle",
+      error: "ios-close-circle",
+      success: "ios-checkmark-circle",
+      warning: "ios-alert"
+    };
+    const iconNode = showIcon ?  : null
+    const closeIcon = closable ?  : null
+      description = 
{description}
+ const msg =
{(message || $slots.default)}
+ const aniprop = getTranstionProp('k-alert-slide') + // console.log(aniprop) + return ( + +
+ {iconNode} + {msg} + {description} + {closeIcon} +
+
+ ) + } +}; \ No newline at end of file diff --git a/components/alert/demo/base.md b/components/alert/demo/base.md new file mode 100755 index 0000000000000000000000000000000000000000..32458c3d87307cd38a33154ea76d4c697437a6ec --- /dev/null +++ b/components/alert/demo/base.md @@ -0,0 +1,15 @@ + +#### 基本用法 +通过 `type` 来控制展示类型 + + +```tpl + +``` \ No newline at end of file diff --git a/components/alert/demo/close.md b/components/alert/demo/close.md new file mode 100755 index 0000000000000000000000000000000000000000..65942aa1fca69438a6fe8f779f3b0ddf7376a9b3 --- /dev/null +++ b/components/alert/demo/close.md @@ -0,0 +1,21 @@ + +#### 可关闭 +`closable` 来控制是否显示可关闭按钮,平滑、自然隐藏关闭 + + +```tpl + +``` \ No newline at end of file diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md new file mode 100755 index 0000000000000000000000000000000000000000..253b6d2d3379051f9268143100b1947b061665cf --- /dev/null +++ b/components/alert/demo/icon.md @@ -0,0 +1,36 @@ + +#### 图标 +`showIcon` 来设置是否显示图标 + + +```tpl + +``` \ No newline at end of file diff --git a/components/alert/demo/index.vue b/components/alert/demo/index.vue new file mode 100755 index 0000000000000000000000000000000000000000..f07a46448bdcd15322efbc17257f40fd156d41b6 --- /dev/null +++ b/components/alert/demo/index.vue @@ -0,0 +1,21 @@ + \ No newline at end of file diff --git a/components/alert/demo/info.md b/components/alert/demo/info.md new file mode 100755 index 0000000000000000000000000000000000000000..70ef2436e85d5228088c7233173f87b41c20b1d7 --- /dev/null +++ b/components/alert/demo/info.md @@ -0,0 +1,8 @@ +# Alert 警告提示 +警告提示,展现需要关注的信息。 + +## 何时使用 +- 当某个页面需要向用户显示警告的信息时。 +- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。 + +## 代码演示 \ No newline at end of file diff --git a/src/components/alert/index.js b/components/alert/index.js old mode 100644 new mode 100755 similarity index 69% rename from src/components/alert/index.js rename to components/alert/index.js index 1ad979f54fcaeec8124d853fc57f3e04178432e8..033791d07ebc595c079524cb0e3f95aea57d8e7c --- a/src/components/alert/index.js +++ b/components/alert/index.js @@ -1,3 +1,2 @@ -import './alert.less' import Alert from './alert' export default Alert; \ No newline at end of file diff --git a/components/alert/index.md b/components/alert/index.md new file mode 100755 index 0000000000000000000000000000000000000000..fa2b9a9a5cfbe3ab1675b6046163630e26b5be81 --- /dev/null +++ b/components/alert/index.md @@ -0,0 +1,9 @@ +### API +| 属性 | 说明 | 类型 | 默认值 | +|-------------|----------------------------------------------------|-------------|---------| +| type | 按钮类型,可选值为 `success`、`info`、`warning`、`error` 或者不设置 | String | warning | +| message | 警告提示内容 | String,Slot | - | +| description | 警告提示的辅助性文字介绍 | String | - | +| show-icon | 是否显示图标 | Boolean | false | +| closable | 是否显示关闭按钮 | Boolean | false | +| close | 关闭时触发的回调函数 | Function | - | \ No newline at end of file diff --git a/components/alert/styles/index.less b/components/alert/styles/index.less new file mode 100755 index 0000000000000000000000000000000000000000..dd2cffdd7c910b4288311e3904faed53245f5682 --- /dev/null +++ b/components/alert/styles/index.less @@ -0,0 +1,102 @@ +@import '../../styles/global.less'; +.k-alert { + border-radius: @radius; + margin-bottom: 16px; + padding: 8px 15px; + box-sizing: border-box; + position: relative; + line-height: 1.5; + font-size: 12px; + transition: all .3s; + overflow: hidden; + background: tint(@warning, 90%); + border: 1px solid tint(@warning, 70%); + &-icon { + color: @warning; + position: absolute; + top: 8px; + left: 10px; + font-size: 20px; + } + &-has-icon { + padding-left: 38px; + } + &-has-close { + padding-right: 30px; + } + &-has-description { + padding: 15px; + .k-alert-icon { + font-size: 30px; + top: 15px; + } + .k-alert-close { + font-size: 18px; + } + .k-alert-message { + font-size: 14px; + font-weight: 500; + margin-bottom: 5px; + } + .k-alert-description { + font-size: 14px; + } + &.k-alert-has-icon { + padding-left: 50px; + } + &.k-alert-has-close { + padding-right: 35px; + } + } + &-close { + font-size: 16px; + position: absolute; + right: 4px; + top: 8px; + cursor: pointer; + text-decoration: none; + color: @color; + padding: 0px 5px; + &:hover { + text-decoration: none; + color: @danger; + } + } + &-success { + background: tint(@success, 90%); + border-color: tint(@success, 70%); + .k-alert-icon { + color: @success; + } + } + &-error { + background: tint(@danger, 90%); + border-color: tint(@danger, 70%); + .k-alert-icon { + color: @danger; + } + } + &-info { + background: tint(@main, 90%); + border-color: tint(@main, 70%); + .k-alert-icon { + color: @main; + } + } + &-slide-leave-to { + animation: k-alert-slide-out 0.3s ease-in-out; + animation-fill-mode: both; + } + @keyframes k-alert-slide-out { + 0% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } + 100% { + transform: scaleY(0); + transform-origin: 0% 0%; + opacity: 0; + } + } +} \ No newline at end of file diff --git a/src/components/backtop/backTop.vue b/components/backtop/backtop.jsx old mode 100644 new mode 100755 similarity index 75% rename from src/components/backtop/backTop.vue rename to components/backtop/backtop.jsx index 6ff0a560aba7a359e0dc9bba5897e3c5658fe0f3..68b4d293cb5e95a0fc6415b36ba7b1fd2ec32630 --- a/src/components/backtop/backTop.vue +++ b/components/backtop/backtop.jsx @@ -1,18 +1,8 @@ - - +}; \ No newline at end of file diff --git a/components/backtop/demo/base.md b/components/backtop/demo/base.md new file mode 100755 index 0000000000000000000000000000000000000000..c4ec07b51f5b135c301db5694075ec35d395cbc3 --- /dev/null +++ b/components/backtop/demo/base.md @@ -0,0 +1,13 @@ + +#### 基础用法 +默认位置距离页面右部和底部 50px,滚动至距顶端 400px 时显示。 + + +```tpl + +``` \ No newline at end of file diff --git a/docs/src/code/backtop.js b/components/backtop/demo/custom.md old mode 100644 new mode 100755 similarity index 31% rename from docs/src/code/backtop.js rename to components/backtop/demo/custom.md index 01f5dfd3fdfd4be3e6be20f1f67b08fda184e695..194e759d5f3dc4d6242772336cfe0fe6beae9ec7 --- a/docs/src/code/backtop.js +++ b/components/backtop/demo/custom.md @@ -1,9 +1,17 @@ -let code = {} -code.base = `` + +#### 基础用法 +可以自定义回到顶部按钮的样式 `bottom` 为 `100px` + -code.custom = ` -
UP
-
+```tpl + -` -export default code \ No newline at end of file + +``` \ No newline at end of file diff --git a/components/backtop/demo/index.vue b/components/backtop/demo/index.vue new file mode 100755 index 0000000000000000000000000000000000000000..7cf49cc05403c4f6bc5b2b6dc2eef1630e533da2 --- /dev/null +++ b/components/backtop/demo/index.vue @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/components/backtop/demo/info.md b/components/backtop/demo/info.md new file mode 100755 index 0000000000000000000000000000000000000000..ae7e091a755936b32f6c4dc70bcc9171df0ed825 --- /dev/null +++ b/components/backtop/demo/info.md @@ -0,0 +1,7 @@ +## BackTop 回到顶部 +返回页面顶部的操作按钮。 + +## 何时使用 +- 当页面内容区域比较长时; +- 当用户需要频繁返回顶部查看相关内容时。 +## 代码演示 \ No newline at end of file diff --git a/components/backtop/index.js b/components/backtop/index.js new file mode 100755 index 0000000000000000000000000000000000000000..2dc41b0bdff09b7a9405459ae96890af7a20d6c8 --- /dev/null +++ b/components/backtop/index.js @@ -0,0 +1,2 @@ +import BackTop from './backtop.jsx' +export default BackTop \ No newline at end of file diff --git a/components/backtop/index.md b/components/backtop/index.md new file mode 100755 index 0000000000000000000000000000000000000000..5a6667b1d6519fae839d4ef11d0fa2050619459b --- /dev/null +++ b/components/backtop/index.md @@ -0,0 +1,7 @@ +## API +| 属性 | 说明 | 类型 | 默认值 | +|--------|-----------------------------|---------------|-----| +| height | 页面滚动高度达到该值时才显示 `BackTop` 组件 | String,Number | 400 | +| bottom | 组件距离底部的距离 | String,Number | 40 | +| right | 组件距离右部的距离 | String,Number | 40 | +| click | 点击按钮时触发 | Function | - | \ No newline at end of file diff --git a/components/backtop/styles/index.less b/components/backtop/styles/index.less new file mode 100755 index 0000000000000000000000000000000000000000..8d49f0c8d32ceadfa1ff31cf3c16cb5bd053bab8 --- /dev/null +++ b/components/backtop/styles/index.less @@ -0,0 +1,59 @@ +@import '../../styles/global.less'; +.k-backtop { + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; + z-index: 10; + position: fixed; + right: 50px; + bottom: 50px; + height: 40px; + width: 40px; + cursor: pointer; + display: block; + overflow: hidden; + border-radius: @radius; + &-content { + background-color: rgba(0, 0, 0, .45); + opacity: .5; + height: 40px; + transition: opacity .3s ease-in-out; + text-align: center; + line-height: 40px; + color: #fff; + &:hover { + opacity: 1; + } + .k-ion { + font-size: 20px; + color: #fff; + } + } +} + +@keyframes k-backtop-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes k-backtop-fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.k-backtop-fade-enter-active { + animation: k-backtop-fade-in .4s; +} + +.k-backtop-fade-leave-active { + animation: k-backtop-fade-out .4s; +} \ No newline at end of file diff --git a/components/badge/badge.jsx b/components/badge/badge.jsx new file mode 100755 index 0000000000000000000000000000000000000000..551fc5e2b7a5966bae1f13540f79c8e9a5ef7a9d --- /dev/null +++ b/components/badge/badge.jsx @@ -0,0 +1,57 @@ +export default { + name: "Badge", + props: { + count: [String, Number], + dot: Boolean, + color: String, + status: { + type: String, + // validator: (value) => { + // ['default', 'success', 'error', 'warning'].indexOf(value) > -1 + // }, + default: 'default' + }, + text: String, + maxCount: { type: Number, default: 99 } + }, + render() { + const { $slots, maxCount, count, dot, color, status, text } = this + let innerText = null, statusNode = []; + + if (typeof count === 'number' && count !== 0) { + innerText = count > maxCount ? maxCount + '+' : count + } else if (typeof count === 'string') { + innerText = count + } else if (status && !dot && !$slots.default) { + const props = { + class: ['k-badge-status-dot', { + [`k-badge-status-${status}`]: status, + [`k-badge-status-${color}`]: color && !/^#/.test(color) + }], + style: { + backgroundColor: /^#/.test(color)?color:null + } + } + statusNode.push() + if (text) + statusNode.push({text}) + } + + const props = { + class: { + 'k-badge-count': count !== undefined, + 'k-badge-dot': dot, + [`k-badge-${status}`]: status, + }, + style: { backgroundColor: color } + } + const supNode = (innerText !== null || dot) ? {innerText} : null + return ( +
+ {$slots.default} + {supNode} + {statusNode} +
+ ) + } +}; diff --git a/components/badge/demo/base.md b/components/badge/demo/base.md new file mode 100755 index 0000000000000000000000000000000000000000..5c3fb5093a2c150204bebc752153a6ca09248b9e --- /dev/null +++ b/components/badge/demo/base.md @@ -0,0 +1,17 @@ + +#### 基本用法 +`Badge` 基础使用 + + +```tpl + +``` \ No newline at end of file diff --git a/components/badge/demo/color.md b/components/badge/demo/color.md new file mode 100644 index 0000000000000000000000000000000000000000..641deebf845d55a282e9654c4c7337b64efb38df --- /dev/null +++ b/components/badge/demo/color.md @@ -0,0 +1,65 @@ + +#### 多彩徽标 +多种预设色彩的徽标样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。 + + +```tpl + + + +``` \ No newline at end of file diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md new file mode 100755 index 0000000000000000000000000000000000000000..fa3ccd4bd9ebe931a080617c488d60bcbb35a1d9 --- /dev/null +++ b/components/badge/demo/dot.md @@ -0,0 +1,31 @@ + +#### 点 +设置 `dot` 来展示一个点 + + +```tpl + + +``` \ No newline at end of file diff --git a/components/badge/demo/dynamic.md b/components/badge/demo/dynamic.md new file mode 100755 index 0000000000000000000000000000000000000000..74a065523a7cb84a3118298a672d369d21650f2c --- /dev/null +++ b/components/badge/demo/dynamic.md @@ -0,0 +1,51 @@ + +#### 可控 +动态控制 + + +```tpl + + + +``` \ No newline at end of file diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue new file mode 100755 index 0000000000000000000000000000000000000000..c3152b4f14cfedfebedf902c373b2bd25a91abc9 --- /dev/null +++ b/components/badge/demo/index.vue @@ -0,0 +1,29 @@ + \ No newline at end of file diff --git a/components/badge/demo/info.md b/components/badge/demo/info.md new file mode 100755 index 0000000000000000000000000000000000000000..086087df4f5c9fb473324a68da1d6a690eb127c4 --- /dev/null +++ b/components/badge/demo/info.md @@ -0,0 +1,7 @@ +# Badge徽标数 +图标右上角的圆形徽标数字。 + +## 何时使用 +一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。 + +## 代码演示 \ No newline at end of file diff --git a/components/badge/demo/mark.md b/components/badge/demo/mark.md new file mode 100644 index 0000000000000000000000000000000000000000..96d79b2355b7baa531a1ca6aa87b2604a733ee22 --- /dev/null +++ b/components/badge/demo/mark.md @@ -0,0 +1,15 @@ + +#### 独立使用 +不包裹任何元素即是独立使用,可自定样式展现。 +在右上角的 badge 则限定为红色。 + + +```tpl + +``` \ No newline at end of file diff --git a/components/badge/demo/max.md b/components/badge/demo/max.md new file mode 100755 index 0000000000000000000000000000000000000000..160043af18f5808177aa9a8197e5195db2ea5536 --- /dev/null +++ b/components/badge/demo/max.md @@ -0,0 +1,41 @@ + +#### 最大值 / 自定义 +设置 `max-count` 配合 `count` ,数字模式超出隐藏,`count` 不为数字时将不进行计算 + + +```tpl + + +``` \ No newline at end of file diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md new file mode 100644 index 0000000000000000000000000000000000000000..dde0b212dd43c41efe1e9d67142bda817a5614c3 --- /dev/null +++ b/components/badge/demo/status.md @@ -0,0 +1,34 @@ + +#### 状态点 +用于表示状态的小圆点。 + + +```tpl + + +``` \ No newline at end of file diff --git a/components/badge/index.js b/components/badge/index.js new file mode 100755 index 0000000000000000000000000000000000000000..10678bdb736401d5732f3364d27da1ed67856190 --- /dev/null +++ b/components/badge/index.js @@ -0,0 +1,2 @@ +import Badge from './badge.jsx' +export default Badge \ No newline at end of file diff --git a/components/badge/index.md b/components/badge/index.md new file mode 100755 index 0000000000000000000000000000000000000000..fa2c59979dfa9cd7245368a4f85613ad9c999662 --- /dev/null +++ b/components/badge/index.md @@ -0,0 +1,7 @@ +### API +| 属性 | 说明 | 类型 | 默认值 | +|-----------|-----------------------------------------|----------------|--------| +| count | 显示的文字 | String,Number | - | +| color | 徽标颜色 | String | - | +| max-count | 展示封顶的数字值,高于的部分会以+号显示 | Number | 99 | +| dot | 不展示数字,只有一个小红点 | Boolean | false | \ No newline at end of file diff --git a/src/components/badge/badge.less b/components/badge/styles/index.less old mode 100644 new mode 100755 similarity index 36% rename from src/components/badge/badge.less rename to components/badge/styles/index.less index c95a371a0f23a3386a51d57bdac72f1dffab0d6d..9134dde167133aa97a9e33ceac51f9af72f78216 --- a/src/components/badge/badge.less +++ b/components/badge/styles/index.less @@ -4,28 +4,27 @@ display: inline-block; line-height: 1; vertical-align: middle; - .k-badge-count { + &-count { position: absolute; - transform: translateY(-50%) translateX(100%); + transform: translate(50%, -50%); + transform-origin: 100% 0; top: 0px; - right: 10px; + right: 0; height: 20px; border-radius: 10px; min-width: 20px; background: #ed3f14; - border: 1px solid transparent; color: #fff; line-height: 18px; text-align: center; padding: 0 6px; font-size: 12px; white-space: nowrap; - transform-origin: -10% center; z-index: 10; box-shadow: 0 0 0 1px #fff; box-sizing: border-box; } - .k-badge-mark { + &-mark { display: inline-block; border-radius: 10px; min-width: 20px; @@ -40,18 +39,91 @@ box-sizing: border-box; white-space: nowrap; box-shadow: 0 0 0 2px #fff; + top: 0; + bottom: 0; } - .k-badge-dot { + &-dot { position: absolute; - transform: translateX(-50%); - transform-origin: 0 center; - top: -4px; - right: -8px; - height: 8px; - width: 8px; - border-radius: 100%; + // transform: translateX(-50%); + // transform-origin: 0 center; + // top: -4px; + // right: -8px; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + height: 6px; + width: 6px; + border-radius: 50%; background: @danger; z-index: 10; box-shadow: 0 0 0 1px #fff; } + &-status-dot { + position: relative; + top: -1px; + display: inline-block; + width: 6px; + height: 6px; + vertical-align: middle; + border-radius: 50%; + } + &-status-text { + color: @color; + font-size: 14px; + margin-left: 8px; + } + &-status-success { + background-color: @success; + } + &-status-error { + background-color: @danger; + } + &-status-warning { + background-color: @warning; + } + &-status-default { + background-color: #ddd; + } + + + &-status-pink { + background-color: @pink; + } + &-status-red { + background-color: @red; + } + &-status-yellow { + background-color: @yellow; + } + &-status-orange { + background-color: @orange; + } + &-status-cyan { + background-color: @cyan; + } + &-status-green { + background-color: @green; + } + &-status-blue { + background-color: @blue; + } + &-status-purple { + background-color: @purple; + } + &-status-geekblue { + background-color: @geekblue; + } + &-status-magenta { + background-color: @magenta; + } + &-status-volcano { + background-color: @volcano; + } + &-status-gold { + background-color: @gold; + } + &-status-lime { + background-color: @lime; + } } \ No newline at end of file diff --git a/components/base/input.jsx b/components/base/input.jsx new file mode 100644 index 0000000000000000000000000000000000000000..06dcb640692902870f3d3dfa47360b96fcf9ef30 --- /dev/null +++ b/components/base/input.jsx @@ -0,0 +1,200 @@ +import Icon from '../icon' +import { isNotEmpty } from '../_tool/utils' +export default { + name: "baseInput", + props: { + maxlength: Number, + clearable: Boolean, + mini: Boolean, + large: Boolean, + value: [String, Number], + placeholder: String, + disabled: Boolean, + readonly: Boolean, + type: { + validator(value) { + return (["text", "textarea", "password", "url", "email", "date", "search"].indexOf(value) >= 0); + }, + default: 'text' + }, + icon: String, + autofocus: Boolean, + iconAlign: String, + rows: { type: Number, default: 2 }, + name: String, + number: Boolean, + }, + data() { + return { + currentValue: this.value, + isFocus: false, + isEnter: false, + isPassword: true, + }; + }, + inject: { + FormItem: { default: null }, + }, + watch: { + value(value) { + this.currentValue = value + this.FormItem && this.FormItem.testValue(value) + } + }, + methods: { + clear() { + this.setValue('') + this.$nextTick(e => this.$refs.input.focus()) + }, + iconClick() { + !this.disabled && this.$emit("icon-click"); + }, + handleFocus(e) { + this.isFocus = true + this.$emit('focus', e) + }, + handleBlur(e) { + this.isFocus = false + this.$emit('blur', e) + this.FormItem && this.FormItem.testValue(this.value, 'blur') + }, + handleInput(e) { + this.setValue(e.target.value, e) + }, + showPassword() { + let type = '' + if (!this.isPassword) { + type = 'password' + } else { + type = 'text' + } + this.isPassword = !this.isPassword + this.$refs.input.type = type + }, + setValue(value, e) { + // console.log(value) + //todo: 数值过大 会有bug + // if (this.number && /^(-?\d+)(\.\d+)?$/.test(value)) { + // value = parseFloat(value) + // } + // if (!hasProp(this, 'value')) { + this.currentValue = value + // } + this.$emit('input', value) + this.$emit('change', e) + }, + getSuffix() { + let { $listeners } = this + const Search = ('search' in $listeners) + ? : null + const Password = + + (this.type == 'password') + ? : null + + return Password || Search || this.$slots.suffix + }, + renderInput() { + const { + disabled, placeholder, type, maxlength, readonly, autofocus, + currentValue, + icon, clearable + } = this + + let suffix = this.getSuffix() + const hasChild = suffix || clearable || icon + const inputProps = { + domProps: { + value: currentValue + }, + class: [ + 'k-input', + { + ["k-input-disabled"]: disabled, + ["k-input-mini"]: !hasChild ? this.mini : null, + ["k-input-lg"]: this.large + } + ], + ref: 'input', + attrs: { + ...this.$attrs, + disabled, placeholder, type, maxlength, readonly, autofocus, + }, + on: { + ...this.$listeners, + focus: this.handleFocus, + blur: this.handleBlur, + input: this.handleInput + } + } + + const props = this.getProp(hasChild) + + // console.log(currentValue, 'currentValue') + + const clearableShow = clearable && (this.isFocus || this.isEnter) && isNotEmpty(currentValue) + + + // console.log(inputProps) + + return ( + hasChild ? +
+ {icon ? : null} + + {suffix ?
{suffix}
: null} + {clearableShow ? : null} +
+ : + ) + }, + renderTextArea() { + const { + $attrs, $listeners, currentValue, + rows, disabled, placeholder, maxlength, readonly, autofocus, + } = this + const inputProps = { + domProps: { + value: currentValue + }, + class: 'k-textarea', + attrs: { + ...$attrs, + rows, disabled, placeholder, maxlength, readonly, autofocus + }, + ref: 'input', + on: { + ...$listeners, + input: this.handleInput + } + } + return - - - - \ No newline at end of file diff --git a/src/components/layout/content.vue b/src/components/layout/content.vue deleted file mode 100644 index a0434e43509cd052f4e2d3b76b5cfb64a79ec17b..0000000000000000000000000000000000000000 --- a/src/components/layout/content.vue +++ /dev/null @@ -1,18 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue deleted file mode 100644 index 7546f29901b49e4fc604a43d89856876f214b54f..0000000000000000000000000000000000000000 --- a/src/components/layout/footer.vue +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/layout/index.js b/src/components/layout/index.js deleted file mode 100644 index 51e6a3199b22f7c7f613a65a2ad47ae58266735c..0000000000000000000000000000000000000000 --- a/src/components/layout/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import './layout.less'; -import Layout from './layout' -import Header from './header' -import Footer from './footer' -import Sider from './sider' -import Content from './content' -export { Layout, Header, Footer, Sider, Content } \ No newline at end of file diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue deleted file mode 100644 index c19b4df087d126a1b50cc123559b3ef98ecbf0f7..0000000000000000000000000000000000000000 --- a/src/components/layout/layout.vue +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/layout/sider.vue b/src/components/layout/sider.vue deleted file mode 100644 index 7773c1ab9915224bb475c9e1d813d9356676292d..0000000000000000000000000000000000000000 --- a/src/components/layout/sider.vue +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/loading/loading.less b/src/components/loading/loading.less deleted file mode 100644 index ba217fecea887b1dc677394cda95c592521c3a21..0000000000000000000000000000000000000000 --- a/src/components/loading/loading.less +++ /dev/null @@ -1,110 +0,0 @@ -@import '../../styles/global.less'; -@keyframes flip{ - 25%{ transform: perspective(100px) rotateX(180deg) rotateY(0);} - 50%{ transform: perspective(100px) rotateX(180deg) rotateY(180deg);} - 75%{ transform: perspective(100px) rotateX(0) rotateY(180deg);} - 100%{ transform: perspective(100px) rotateX(0) rotateY(0);} -} -@keyframes rotate{ - 0%{ transform: rotate(0deg);} - 100%{ transform: rotate(360deg);} -} -@keyframes bounce{ - 0%, 100% { transform: scale(0.0); } - 50% { transform: scale(1.0);} -} -@keyframes zoom{ - 0% { transform: scale(0.0);opacity: 1; } - 100% { transform: scale(1.0);opacity: 0} -} -.k-loading-warp{ - position: fixed; - z-index: 1001; - left: 0; - top:0; - bottom: 0; - right: 0; - background: rgba(255, 255, 255, 0.6); - .k-loading-line{ - height: 100%; - transition:width .2s ease-in-out; - background-color: @main; - } - .k-loading-line-error{ - background-color: @danger !important; - } - .k-loading-inner{ - margin: 0 auto; - position: relative; - text-align: center; - top: 50%; - margin-top: -17.5px; - } - .k-loading-animate{ - width: 35px; - height: 35px; - margin: 0 auto; - } - .k-loading-animate-flip{ - background-color:@main; - animation: flip 3s 0s cubic-bezier(.09,.57,.49,.9) infinite; - } - .k-loading-animate-bounce{ - position: relative; - &::before,&::after{ - content: ''; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: @main; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: bounce 2.0s infinite ease-in-out; - } - &::before{ - animation-delay: -1.0s; - } - - } - .k-loading-animate-zoom{ - position: relative; - &::before,&::after{ - content: ''; - width: 100%; - height: 100%; - border-radius: 50%; - background: @main; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: zoom 2s 0s cubic-bezier(.09,.57,.49,.9) infinite; - // animation: zoom 2.0s infinite ease-in-out; - } - &::before{ - animation-delay: -1.0s; - } - - } - .k-loading-animate-rotate{ - position: relative; - border:5px solid tint(@main, 80%); - border-radius: 50%; - &::before{ - content:''; - width: 100%; - height: 100%; - position:absolute; - left: -5px; - top: -5px; - border-radius: 50%; - border: 5px solid transparent; - border-top-color: @main; - animation: rotate .5s infinite linear; - box-sizing: content-box; - } - } -} - diff --git a/src/components/menu/index.js b/src/components/menu/index.js deleted file mode 100644 index 0105e13913bf06bec95d012c8362cedde95d6109..0000000000000000000000000000000000000000 --- a/src/components/menu/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import './menu.less' -import Menu from './menu' -import MenuGroup from './menugroup' -import MenuItem from './menuitem' -import SubMenu from './submenu' -export { - Menu, - MenuGroup, - MenuItem, - SubMenu -} \ No newline at end of file diff --git a/src/components/menu/menu.less b/src/components/menu/menu.less deleted file mode 100644 index 1a99e04001fa9734dc6466831b5a75af84b44067..0000000000000000000000000000000000000000 --- a/src/components/menu/menu.less +++ /dev/null @@ -1,359 +0,0 @@ -@import '../../styles/global.less'; -.k-menu { - display: block; - margin: 0; - padding: 0; - outline: 0; - list-style: none; - font-size: 14px; - position: relative; - z-index: 800; - &:after, &:before { - content: ""; - display: table; - } - &:after { - content: ""; - display: block; - height: 0; - clear: both; - } - [class^="k-ion"], [class*=" k-ion"] { - margin-right: 8px; - } - .k-menu-arrow { - transition: all .3s; - } - .k-menu-item, .k-menu-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.k-menu-horizontal { - height: 50px; - line-height: 50px; - //一层 - .k-menu-item, .k-menu-submenu { - float: left; - padding: 0 20px; - position: relative; - cursor: pointer; - z-index: 3; - cursor: pointer; - &:after { - position: absolute; - content: ''; - height: 0; - bottom: 0; - width: 30px; - margin-left: -15px; - left: 50%; - } - &:hover .k-menu-arrow { - transform: rotate(180deg); - } - } - .k-menu-item-group { - background: #fff; - .k-menu-item-group-title { - color: #999; - font-size: 12px; - line-height: 35px; - padding: 0 12px; - } - } - //二层 - .k-menu-dropdown { - left: 0; - padding: 5px; - margin-left: -5px; - box-sizing: content-box; - position: absolute; - z-index: 901; - width: 100%; - min-width: 120px; - .k-menu-popup { - display: inline-block; - border-radius: @radius; - box-shadow: 0 1px 6px rgba(0, 0, 0, .2); - } - .k-menu-item { - padding: 7px 16px 8px; - line-height: normal; - box-sizing: border-box; - width: 100%; - min-width: 120px; - color: initial; - &:after { - display: none; - } - } - } - //三层 - .k-menu-submenu { - .k-menu-submenu { - width: 100%; - padding: 0; - // padding: 7px 16px 8px; - .k-menu-title { - // padding: 0 16px; - padding: 10px 16px 11px; - line-height: 1; - position: relative; - } - &:hover { - .k-menu-arrow { - transform: rotate(90deg); - } - } - .k-menu-arrow { - position: absolute; - right: 10px; - top: 50%; - margin: -7px 0 0 0; - transform: rotate(-90deg); - } - .k-menu-dropdown { - left: 100%; - top: 0; - margin: -5px 0 0 0; - } - } - } - // theme - &.k-menu-light { - background: #fff; - color: #555; - .k-menu-item, .k-menu-submenu { - &:hover { - color: @main; - } - } - .k-menu-item-actived { - //one - color: @main; - position: relative; - &::after { - border-bottom: 2px solid @main; - } - } - .k-menu-popup { - .k-menu-item, .k-menu-submenu { - background: #fff; - color: #555; - &:hover { - color: @main; - } - } - .k-menu-item-actived { - color: @main; - &::after { - display: none; - } - .k-menu-arrow { - transform: rotate(90deg); - } - } - } - } - &.k-menu-dark { - background: #646d82; - color: #fff; - .k-menu-item, .k-menu-submenu { - &:hover { - color: orange; - background: #5e677c; - } - } - .k-menu-item-actived { - //one - color: orange; - position: relative; - background: #586074; - &::after { - border-bottom: 2px solid orange; - } - } - .k-menu-popup { - .k-menu-item, .k-menu-submenu { - background: #fff; - color: #555; - &:hover { - background: #eeefef; - color: orange; - } - } - .k-menu-item-actived { - color: orange; - background: #eeefef; - &::after { - display: none; - } - .k-menu-arrow { - transform: rotate(90deg); - } - } - } - } - &.k-menu-primary { - background: @main; - color: #fff; - .k-menu-item, .k-menu-submenu { - //one - &:hover { - // color: #555; - background: #4f9df9; - } - } - .k-menu-item-actived { - //one - // color: #333; - background: #3785e1; - position: relative; - &::after { - border-bottom: 2px solid #fff; - } - } - .k-menu-popup { - .k-menu-item, .k-menu-submenu { - background: #fff; - color: #555; - &:hover { - background: @main; - color: #fff; - } - } - .k-menu-item-actived { - color: #fff; - background: @main; - &::after { - display: none; - } - .k-menu-arrow { - transform: rotate(90deg); - } - } - } - } -} - -.k-menu-vertical { - color: #555; - &::before { - content: ""; - top: 0; - display: block; - width: 1px; - height: 100%; - background: #dddee1; - position: absolute; - right: 0px; - } - .k-menu-item, .k-menu-title { - height: 50px; - line-height: 50px; - padding: 0 24px; - box-sizing: border-box; - overflow: hidden; - cursor: pointer; - position: relative; - .k-menu-arrow { - transform: rotate(-90deg); - float: right; - margin-top: 18px; - } - } - .k-menu-submenu { - .k-menu-item, .k-menu-submenu .k-menu-title, .k-menu-item-group-title { - padding-left: 42px; - } - .k-menu-submenu .k-menu-item { - padding-left: 60px; - } - } - .k-menu-dropdown { - transition: height .3s ease-in-out, opacity .3s ease-in-out; - overflow: hidden; - } - .k-menu-item-opened { - >.k-menu-title .k-menu-arrow { - transform: rotate(0deg); - } - } - .k-menu-item-group-title { - color: #999; - padding: 12px 24px; - } - &.k-menu-light { - background: #fff; - .k-menu-item { - &:after { - position: absolute; - content: ''; - height: 100%; - top: 0; - width: 2px; - right: 0; - } - &.k-menu-item-actived, &:hover { - color: @main; - &:after { - background: @main; - } - } - } - .k-menu-title:hover { - color: @main; - } - } - &.k-menu-dark { - background: #646d82; - color: #fff; - .k-menu-item { - &:after { - position: absolute; - content: ''; - height: 100%; - top: 0; - width: 2px; - right: 0; - } - &.k-menu-item-actived, &:hover { - color: orange; - background: #5e677c; - &:after { - background: orange; - } - } - } - .k-menu-title:hover { - color: orange; - } - } - &.k-menu-primary { - background: #fff; - color: #555; - .k-menu-item { - &:after { - position: absolute; - content: ''; - height: 100%; - top: 0; - width: 2px; - right: 0; - } - &.k-menu-item-actived, &:hover { - color: #fff; - background: @main; - &:after { - background: orange; - } - } - } - .k-menu-title:hover { - color: @main; - } - } -} diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue deleted file mode 100644 index f7633328d515f516f590d7658e8e3bcfb1a4a9b0..0000000000000000000000000000000000000000 --- a/src/components/menu/menu.vue +++ /dev/null @@ -1,84 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/menu/menugroup.vue b/src/components/menu/menugroup.vue deleted file mode 100644 index cef6befd8c09e43cb2f9bf5bebd24c3f84baddc7..0000000000000000000000000000000000000000 --- a/src/components/menu/menugroup.vue +++ /dev/null @@ -1,51 +0,0 @@ - - diff --git a/src/components/menu/menuitem.vue b/src/components/menu/menuitem.vue deleted file mode 100644 index eaff1cb56c21d5cf228d62c1294cb55c2e58b8ce..0000000000000000000000000000000000000000 --- a/src/components/menu/menuitem.vue +++ /dev/null @@ -1,47 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/menu/submenu.vue b/src/components/menu/submenu.vue deleted file mode 100644 index 8e5d6aa6e0ad9fc34fde94b2088fdd8eb41c3a38..0000000000000000000000000000000000000000 --- a/src/components/menu/submenu.vue +++ /dev/null @@ -1,123 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/message/index.js b/src/components/message/index.js deleted file mode 100755 index 3f2c9b96ec0f77accf0914a4ad68df17a94648c1..0000000000000000000000000000000000000000 --- a/src/components/message/index.js +++ /dev/null @@ -1,96 +0,0 @@ -import './notice.less' -import './message.less' -import Notices from './notices' -import Vue from 'vue'; - -Notices.Create = options => { - const props = options || {}; - const Notice = new Vue({ - render(h) { - return h(Notices, { - props: props - }); - } - }); - - const component = Notice.$mount(); - document.body.appendChild(component.$el); - const notice = Notice.$children[0]; - return notice -}; - -let messageInstance; -let noticeInstance; - -const getInstance = (type) => { - if (type == 'message') { - messageInstance = messageInstance || Notices.Create({ type }) - return messageInstance - } else { - noticeInstance = noticeInstance || Notices.Create({ type }) - return noticeInstance - } -}; -const message = (noticeType, type, title, content, duration, close) => { - getInstance(noticeType).add({ - title, noticeType, duration, content, type, close - }); -} - -let Message = { - name: 'Message', - info(content, duration, onClose) { - message('message', 'info', null, content, duration, onClose); - }, - success(content, duration, onClose) { - message('message', 'success', null, content, duration, onClose); - }, - warning(content, duration, onClose) { - message('message', 'warning', null, content, duration, onClose); - }, - error(content, duration, onClose) { - message('message', 'error', null, content, duration, onClose); - }, - config(options) { - options.noticeType = 'message' - getInstance('message').add(options); - }, - destroy() { - messageInstance = null; - document.body.removeChild(document.getElementsByClassName('k-message')); - } -}; -let Notice = { - name: 'Notice', - info(options) { - options.type = 'info' - options.noticeType = 'notice' - getInstance('notice').add(options); - }, - success(options) { - options.type = 'success' - options.noticeType = 'notice' - getInstance('notice').add(options); - }, - warning(options) { - options.type = 'warning' - options.noticeType = 'notice' - getInstance('notice').add(options); - }, - error(options) { - options.type = 'error' - options.noticeType = 'notice' - getInstance('notice').add(options); - }, - open(options) { - options.noticeType = 'notice' - options.type = null - getInstance('notice').add(options); - }, - destroy() { - noticeInstance = null; - document.body.removeChild(document.getElementsByClassName('k-notice')); - } -} - -export { Message, Notice }; \ No newline at end of file diff --git a/src/components/message/message.less b/src/components/message/message.less deleted file mode 100755 index 0a0b2749891e217566313a1d3eb51c1d60e8957d..0000000000000000000000000000000000000000 --- a/src/components/message/message.less +++ /dev/null @@ -1,82 +0,0 @@ -@import '../../styles/global.less'; -.k-message { - font-size: 14px; - line-height: 1.5; - color: rgba(0, 0, 0, 0.65); - -webkit-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - padding: 0; - list-style: none; - position: fixed; - z-index: 1010; - width: 100%; - top: 16px; - left: 0; - pointer-events: none; - .k-message-notice { - box-sizing: content-box; - padding: 8px; - text-align: center; - transition: all .3s; - // overflow: hidden; - &:first-child { - // margin-top: -8px; - } - } - .k-message-notice-content { - box-sizing: content-box; - line-height: 1.5; - padding: 10px 16px; - border-radius: @radius; - -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - background: #fff; - display: inline-block; - pointer-events: all; - &>[class^="k-ion"], [class*=" k-ion"] { - margin-right: 5px; - font-size: 18px; - vertical-align: middle; - } - } - .k-message-close { - font-size: 12px; - line-height: 1.5; - overflow: hidden; - cursor: pointer; - float: right; - margin-left: 15px; - &::before { - content: '\f2c0'; - font-family: Ionicons; - color: #999; - font-size: 15px; - vertical-align: middle; - } - } -} - -.k-message-success .k-message-notice-content { - &>[class^="k-ion"], [class*=" k-ion"] { - color: @success; - } -} - -.k-message-error .k-message-notice-content { - &>[class^="k-ion"], [class*=" k-ion"] { - color: @danger; - } -} - -.k-message-info .k-message-notice-content { - &>[class^="k-ion"], [class*=" k-ion"] { - color: @main; - } -} - -.k-message-warning .k-message-notice-content { - &>[class^="k-ion"], [class*=" k-ion"] { - color: @warning; - } -} \ No newline at end of file diff --git a/src/components/message/notice.less b/src/components/message/notice.less deleted file mode 100755 index ec7e53da3c70158a095f21b616e67b91fe423634..0000000000000000000000000000000000000000 --- a/src/components/message/notice.less +++ /dev/null @@ -1,90 +0,0 @@ -@import '../../styles/global.less'; -.k-notice { - font-size: 14px; - line-height: 1.5; - color: rgba(0, 0, 0, 0.65); - -webkit-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - padding: 0; - list-style: none; - position: fixed; - z-index: 1010; - width: 384px; - max-width: calc(100vw - 32px); - margin-right: 24px; - right: 0px; - top: 24px; - bottom: auto; - .k-notice-notice { - box-sizing: content-box; - transition: all .3s ease-in-out; - padding: 16px; - border-radius: @radius; - -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - background: #fff; - line-height: 1.5; - position: relative; - margin-bottom: 16px; - overflow: hidden; - } - .k-notice-title { - margin-right: 16px; - font-size: 16px; - color: rgba(0, 0, 0, 0.85); - margin-bottom: 8px; - line-height: 24px; - display: inline-block; - } - .k-notice-close { - position: absolute; - right: 22px; - top: 16px; - outline: none; - cursor: pointer; - color: rgba(0, 0, 0, 0.85); - font-size: 14px; - &::before { - content: '\f2c0'; - font-family: Ionicons; - color: #999; - } - } - .k-notice-info, .k-notice-error, .k-notice-success, .k-notice-warning { - .k-notice-notice-content { - padding-left: 35px; - &::before { - position: absolute; - left: 22px; - top: 17px; - font-family: Ionicons; - font-size: 24px; - } - } - } - .k-notice-info .k-notice-notice-content { - &::before { - color: @main; - content: '\f1a0'; - } - } - .k-notice-error .k-notice-notice-content { - &::before { - content: '\f14e'; - color: @danger; - } - } - .k-notice-success .k-notice-notice-content { - &::before { - content: '\f14a'; - color: @success; - } - } - .k-notice-warning .k-notice-notice-content { - &::before { - content: '\f104'; - color: @warning; - } - } -} \ No newline at end of file diff --git a/src/components/message/notice.vue b/src/components/message/notice.vue deleted file mode 100755 index d1f0f73c193f7e6e7e7acbe1a9487b244a6de6e7..0000000000000000000000000000000000000000 --- a/src/components/message/notice.vue +++ /dev/null @@ -1,58 +0,0 @@ - - diff --git a/src/components/message/notices.vue b/src/components/message/notices.vue deleted file mode 100755 index 2a2fbe904a0ba8090378c9e36d51955a96f703f1..0000000000000000000000000000000000000000 --- a/src/components/message/notices.vue +++ /dev/null @@ -1,48 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/modal/index.js b/src/components/modal/index.js deleted file mode 100644 index 80e8341a396670d46a9fbacaefc41e40d809d55f..0000000000000000000000000000000000000000 --- a/src/components/modal/index.js +++ /dev/null @@ -1,157 +0,0 @@ -import './modal.less' -import Vue from 'vue'; -import Modal from './modal.vue' -import Button from '../button/button.vue' - -let modalInstance; -let showPos = {} -let mousedown = e => { - if (!modalInstance) { - showPos = { x: e.clientX, y: e.clientY } - } -} -if (typeof window != 'undefined') { - document.addEventListener('mousedown', mousedown) -} -const createModal = options => { - const props = options || {} - const Instance = new Vue({ - data: Object.assign({}, props, { isLoading: false, closing: false }), - computed: { - iconClasses() { - let icons = { - info: "ios-information-circle", - error: "ios-close-circle", - success: "ios-checkmark-circle", - warning: "ios-alert" - }; - let cls = ["k-toast-icon"] - if (this.icon) { - if (icons[this.icon]) { - cls.push(`k-ion-${icons[this.icon]}`) - } else { - cls.push(`k-ion-${this.icon}`) - } - } - return cls; - }, - iconStyles() { - return this.color ? { color: this.color } : {}; - }, - }, - beforeDestroy() { - document.removeEventListener('mousedown', mousedown) - }, - render(h) { - //header - let header = h('div', { attrs: { class: 'k-toast-header' } }, [ - h('span', { style: this.iconStyles, class: this.iconClasses }), - h('span', { attrs: { class: 'k-toast-title' } }, this.title || '温馨提示') - ]) - - //body - let body = h('div', { attrs: { class: 'k-toast-content' } }, [this.content || '我是内容']) - //footer - let footerNode = [h(Button, { - props: { type: 'primary', icon: this.loading ? 'ios-sync' : '' }, - class: [this.loading ? (this.isLoading ? 'k-btn-icon-loop' : '') : ''], - on: { click: this.ok } - }, this.okText || '确定')] - - if (this.confrim) { - footerNode.unshift(h(Button, { on: { click: this.cancel } }, this.cancelText || '取消')) - } - let footer = h('div', { attrs: { class: 'k-toast-footer' } }, footerNode) - - let content = h('template', { slot: 'content' }, [header, body, footer]) - - return h(Modal, { props: { type: 'toast' }, }, [content]); - }, - methods: { - cancel() { - this.onCancel && this.onCancel() - this.remove() - }, - ok() { - if (this.closing) return; - if (this.loading) { - this.isLoading = true - } else { - this.remove() - } - this.onOk && this.onOk() - this.closing = true - }, - remove() { - // modal.close() - this.$children[0].close() - clearTimeout(this.timer) - this.timer = setTimeout(e => { - document.body.removeChild(this.$el) - this.destory() - }, 300) - } - } - }) - const component = Instance.$mount() - document.body.appendChild(component.$el) - let modal = Instance.$children[0]; - return { - show() { - modal.showPos = showPos - modal.setPos() - modal.visiblew = true; - modal.visible = true; - }, - remove() { - modal.close() - modal.$parent.remove() - } - } -} - - - -let getModal = (props = {}) => { - props.showPos = showPos - props.destory = () => { - modalInstance = null; - } - modalInstance = modalInstance || createModal(props) - // modalInstance.value = true - modalInstance.show() - return modalInstance -} -Modal.show = (props = {}) => { - return getModal(props) -} - -Modal.info = (props = {}) => { - props.icon = 'info' - return getModal(props) -} - -Modal.success = (props = {}) => { - props.icon = 'success' - return getModal(props) -} -Modal.warning = (props = {}) => { - props.icon = 'warning' - return getModal(props) -} -Modal.error = (props = {}) => { - props.icon = 'error' - return getModal(props) -} -Modal.comfirm = (props = {}) => { - props.icon = 'ios-help-circle' - props.confrim = true - return getModal(props) -} -Modal.close = () => { - if (modalInstance) { - let t = getModal() - t.remove() - } -} -export default Modal \ No newline at end of file diff --git a/src/components/modal/modal.less b/src/components/modal/modal.less deleted file mode 100644 index 972f17d5aa5345cd9e453f911709f9e71595a5ea..0000000000000000000000000000000000000000 --- a/src/components/modal/modal.less +++ /dev/null @@ -1,204 +0,0 @@ -@import '../../styles/global.less'; -.k-modal { - .k-modal-mask { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(55, 55, 55, .6); - height: 100%; - z-index: 1000; // animation: mmask .5s ease-in-out; - overflow: hidden; - } - .k-modal-wrap { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1000; - overflow: auto; - outline: 0; - -webkit-overflow-scrolling: touch; - } - .k-modal-centered { - text-align: center; - &::before { - display: inline-block; - width: 0; - height: 100%; - vertical-align: middle; - content: ''; - } - .modal { - top: 0; - display: inline-block; - text-align: left; - vertical-align: middle; - } - } - .modal { - position: relative; - z-index: 1001; - outline: 0; - top: 100px; - margin: 0 auto; - width: 520px; // animation: fadeIn .5s ease-in-out; - } - .k-modal-content { - border-radius: @radius; - position: relative; - background-color: #fff; - border: 0; - background-clip: padding-box; - height: 100%; - overflow: hidden; - .k-modal-close { - position: absolute; - right: 16px; - overflow: hidden; - cursor: pointer; - font-size: 20px; - color: #999; - // padding: 5px 0 9px; - line-height: 43px; - width: 43px; - right: 0; - text-align: center; - top: 0; - transition: all .3s ease-in-out; - &:hover { - color: @danger; - transform: rotate(360deg); - } - } - .k-modal-header { - border-bottom: 1px solid #e9eaec; - padding: 14px 16px; - line-height: 1; - font-size: 14px; - font-weight: 700; - user-select: none; - .k-modal-header-inner { - width: 90%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - .k-modal-body { - padding: 16px; - font-size: 12px; - line-height: 1.5; - height: calc(100% - 43px - 53px); - overflow: auto; - } - .k-modal-footer { - border-top: 1px solid #e9eaec; - padding: 10px 16px; - text-align: right; - display: inline-block; - width: 100%; - box-sizing: border-box; - .k-btn { - margin-left: 8px; - } - } - } // .modal.closed { - // top: 0px; - // opacity: 0; - // animation: fadeOutUp .3s ease-in-out; - // } -} - -.k-modal-max { - .k-modal-wrap { - overflow: hidden; - } - .modal { - height: 100%; - width: 100%; - top: 0; - left: 0; - // - .k-modal-content { - height: 100%; - border-radius: 0; - overflow: hidden; - } - .k-modal-footer { - position: absolute; - width: 100%; - bottom: 0; - left: 0; - background: #fff; - } - .k-modal-body { - // height: 100%; - height: calc(100% - 43px - 59px); - overflow: auto; - padding: 0; - } - } -} - -.k-toast { - // - .modal { - width: 416px; - background: #fff; - border-radius: @radius; - padding: 16px; - overflow: hidden; - } - .k-toast-icon { - font-size: 28px; - margin-right: 12px; - float: left; - } - .k-toast-title { - font-size: 16px; - font-weight: 700; - overflow: hidden; - display: block; - } - .k-ion-ios-information-circle { - color: @main; - } - .k-ion-ios-close-circle { - color: @danger; - } - .k-ion-ios-checkmark-circle { - color: @success; - } - .k-ion-ios-alert, .k-ion-ios-help-circle { - color: @warning; - } - .k-toast-content { - padding-left: 35px; - padding-top: 8px; - font-size: 14px; - } - .k-toast-footer { - float: right; - margin-top: 20px; - .k-btn { - margin-left: 8px; - } - .k-btn-primary i { - display: none; - } - .k-btn-primary span { - margin: 0; - } - .k-btn-icon-loop { - opacity: .8; - i { - display: inline-block; - -webkit-animation: loadloop 1s linear infinite; - animation: loadloop 1s linear infinite - } - } - } -} diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue deleted file mode 100644 index 68daca992b449427834bc061c62b483746defae8..0000000000000000000000000000000000000000 --- a/src/components/modal/modal.vue +++ /dev/null @@ -1,237 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/page/page.less b/src/components/page/page.less deleted file mode 100644 index 5495f98fe4700f1166fa1a52fc732c6d550c9642..0000000000000000000000000000000000000000 --- a/src/components/page/page.less +++ /dev/null @@ -1,82 +0,0 @@ -@import '../../styles/global.less'; -.k-page { - color: #999; - text-align: right; - font-size: 14px; - padding: 20px 0; - text-align: center; - user-select: none; - .k-pager { - margin: 0 auto; - display: inline-block; - vertical-align: middle; - .k-pager-item { - background: #fff; - color: #333; - min-width: 32px; - height: 32px; - line-height: 32px; - border-radius: @radius; - margin: 0 5px; - text-align: center; - display: inline-block; - box-sizing: content-box; - border: 1px solid #e4e4e4; - transition: all 0.2s ease-in-out 0s; - margin-left: -1px; - cursor: pointer; - &:hover { - background-color: #f5f5f5; - border-color: @main; - } - &.active { - color: #FFF; - border: 1px solid @main; - background-color: @main; - } - span{ - margin:0 5px; - } - } - .k-pager-more{ - color:@gray; - } - } - .k-page-sizer{ - display: inline-block; - width:90px; - } - .k-page-number { - margin: 0 4px; - display: inline-block; - &>span { - color: #666; - } - } - .k-page-options { - display: inline-block; - span{ - padding: 0 5px; - } - .k-page-options-elevator { - width: 50px ; - text-align: center; - vertical-align:middle; - } - .k-page-options-action{ - vertical-align:middle; - } - } -} - -.k-page-mini { - .k-pager .k-pager-item { - height: 24px; - font-size: 12px; - line-height: 24px; - min-width:24px; - } - .k-page-sizer{ - width:80px; - } -} \ No newline at end of file diff --git a/src/components/page/page.vue b/src/components/page/page.vue deleted file mode 100644 index 06da353104bea28021a8db91e29482b2dc5ab5c9..0000000000000000000000000000000000000000 --- a/src/components/page/page.vue +++ /dev/null @@ -1,168 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/poptip/index.js b/src/components/poptip/index.js deleted file mode 100644 index 038b72ab5c8e7ec4969f034f7cff4700683029ed..0000000000000000000000000000000000000000 --- a/src/components/poptip/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './poptip.less' -import Poptip from './poptip' -export default Poptip \ No newline at end of file diff --git a/src/components/poptip/poptip.less b/src/components/poptip/poptip.less deleted file mode 100644 index a91984fa3e16d871c49d994b992101614bd39f25..0000000000000000000000000000000000000000 --- a/src/components/poptip/poptip.less +++ /dev/null @@ -1,215 +0,0 @@ -@import '../../styles/global.less'; -.k-poptip { - display: inline-block; - position: relative; -} - -.k-poptip-dom { - min-width: 200px; - max-width: 300px; - font-size: 12px; - line-height: 1.5; - position: absolute; - z-index: 1001; - box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 6px; - white-space: nowrap; - border-radius: @radius; - background: #fff; - box-sizing: border-box; // padding: 15px; - // margin: 10px; - [class^=k-ion] { - color: orange; - font-size: 20px; - margin-right: 5px; - float: left; - } - .k-poptip-footer { - text-align: right; - padding-top: 10px; - } - .k-poptip-title { - font-size: 14px; - margin: 0; - padding: 8px 16px; - position: relative; - border-bottom: 1px solid #eee; - text-overflow: ellipsis; - overflow: hidden; - } - .k-poptip-content { - padding: 8px 16px; - white-space: normal; - } - .k-poptip-arrow { - position: absolute; - width: 0; - height: 0; - bottom: -13px; - margin-left: -6px; - border: 6px solid transparent; - &::after { - content: ""; - position: absolute; - border: 6px solid transparent; - top: -7px; - left: -6px; - } - } //ok - &[k-placement^=top] { - .k-poptip-arrow { - border-top-color: rgba(216, 216, 216, 0.6); - &::after { - border-top-color: white; - } - } - } - &[k-placement=top] { - .k-poptip-arrow { - left: 50%; - } - } - &[k-placement=top-right] { - .k-poptip-arrow { - right: 10px; - } - } - &[k-placement=top-left] { - .k-poptip-arrow { - left: 20px; - } - } - &[k-placement^=bottom] { - .k-poptip-arrow { - border-bottom-color: rgba(216, 216, 216, 0.6); - top: -12px; - &::after { - top: -5px; - border-bottom-color: white; - } - } - } - &[k-placement=bottom] { - .k-poptip-arrow { - left: 50%; - } - } - &[k-placement=bottom-left] { - .k-poptip-arrow { - left: 16px; - } - } - &[k-placement=bottom-right] { - .k-poptip-arrow { - right: 10px; - } - } - &[k-placement^=left] { - .k-poptip-arrow { - right: -12px; - border-left-color: rgba(216, 216, 216, 0.6); - &::after { - border-left-color: white; - top: -6px; - left: -7px; - } - } - } - &[k-placement=left] { - .k-poptip-arrow { - top: 50%; - margin-top: -6px; - ; - } - } - &[k-placement=left-bottom] { - .k-poptip-arrow { - bottom: 10px; - } - } - &[k-placement=left-top] { - .k-poptip-arrow { - top: 10px; - } - } //ok - &[k-placement^=right] { - .k-poptip-arrow { - left: -6px; - border-right-color: rgba(216, 216, 216, 0.6); - &::after { - border-right-color: white; - top: -6px; - left: -5px; - } - } - } - &[k-placement=right] { - .k-poptip-arrow { - top: 50%; - margin-top: -6px; - ; - } - } - &[k-placement=right-top] { - .k-poptip-arrow { - top: 10px; - } - } - &[k-placement=right-bottom] { - .k-poptip-arrow { - bottom: 10px; - } - } -} - -.k-poptip-dark { - background-color: @dark; - color: #fff; - .k-poptip-title { - border-bottom: 1px solid rgba(0, 0, 0,.2); - } - &[k-placement^=top] { - .k-poptip-arrow { - &::after { - border-top-color: @dark; - } - } - } - &[k-placement^=bottom] { - .k-poptip-arrow { - &::after { - border-bottom-color: @dark; - } - } - } - &[k-placement^=left] { - .k-poptip-arrow { - &::after { - border-left-color: @dark; - } - } - } - &[k-placement^=right] { - .k-poptip-arrow { - &::after { - border-right-color: @dark; - } - } - } -} - -.k-poptip-confirm { - .k-poptip-title { - border: none; - padding: 16px 16px 8px; - } - .k-poptip-content { - padding: 16px 16px 0; - } - .k-poptip-message { - padding-left: 20px; - } - .k-poptip-footer { - text-align: right; - padding: 8px 16px 16px; - } -} \ No newline at end of file diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue deleted file mode 100644 index 4fd9081032b33a217ad5a5ecd672c79d311b137d..0000000000000000000000000000000000000000 --- a/src/components/poptip/poptip.vue +++ /dev/null @@ -1,193 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/radio/index.js b/src/components/radio/index.js deleted file mode 100644 index 5a86e5ac8f445247814dd5093dc7ad2b9bc0c0e1..0000000000000000000000000000000000000000 --- a/src/components/radio/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import './radio.less' -import Radio from './radio' -import RadioGroup from './radioGroup' -import RadioButton from './radioButton' -export { Radio, RadioGroup, RadioButton } \ No newline at end of file diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue deleted file mode 100644 index fb10c8c602af8d5fdcec469458d62654c777bd5a..0000000000000000000000000000000000000000 --- a/src/components/radio/radio.vue +++ /dev/null @@ -1,69 +0,0 @@ - - diff --git a/src/components/radio/radioButton.vue b/src/components/radio/radioButton.vue deleted file mode 100644 index 300802314817febeb216d0df97c263d5ab0203f9..0000000000000000000000000000000000000000 --- a/src/components/radio/radioButton.vue +++ /dev/null @@ -1,40 +0,0 @@ - - diff --git a/src/components/radio/radioGroup.vue b/src/components/radio/radioGroup.vue deleted file mode 100644 index 61291d0d7ef254765b22bcfecb63c7dfde66f45c..0000000000000000000000000000000000000000 --- a/src/components/radio/radioGroup.vue +++ /dev/null @@ -1,62 +0,0 @@ - - diff --git a/src/components/scroll/index.js b/src/components/scroll/index.js deleted file mode 100644 index c27e3a856a1bfee3eec3870ad98f3aaf3070f3bb..0000000000000000000000000000000000000000 --- a/src/components/scroll/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './scroll.less' -import Scroll from './scroll' -export default Scroll \ No newline at end of file diff --git a/src/components/scroll/scroll.less b/src/components/scroll/scroll.less deleted file mode 100644 index 27c1d45ca986f1cf5824d0baad40dc71588e19f1..0000000000000000000000000000000000000000 --- a/src/components/scroll/scroll.less +++ /dev/null @@ -1,48 +0,0 @@ -.k-scroll { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - // user-select: none; - .k-scroll-view { - position: relative; - transition:top .1s ease-in-out; - } - &:hover { - .k-scroll-vertical-bar { - opacity: .3; - } - } - .k-scroll-vertical-bar { - width: 6px; - background: #000; - border-radius: 3px; - min-height: 20px; - position: absolute; - right: 2px; - top: 0; - z-index: 999999; - opacity: 0; - transition: opacity .3s ease-in-out,top .1s ease-in-out; - cursor: pointer; - user-select: none; - -webkit-user-select: none; - pointer-events: all; - &:hover{ - opacity: .5; - } - } - .k-scroll-horizontal-bar { - height: px; - background: #ddd; - border-radius: 4px; - min-width: 20px; - position: absolute; - left: 0; - bottom: 0; - display: none; - z-index: 999999; - transition: opacity .3s ease-in-out,top .3s ease-in-out; - user-select: none; - } -} \ No newline at end of file diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue deleted file mode 100644 index b97ff867a29d8d17fe3521aedb8a8f475f78f4c2..0000000000000000000000000000000000000000 --- a/src/components/scroll/scroll.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - diff --git a/src/components/select/index.js b/src/components/select/index.js deleted file mode 100644 index e69d67c6e7d5a1ef9f70ef2512daed9176d75e9a..0000000000000000000000000000000000000000 --- a/src/components/select/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import './select.less' -import Select from './select' -import Option from './option' -export { Select, Option } \ No newline at end of file diff --git a/src/components/select/option.vue b/src/components/select/option.vue deleted file mode 100644 index 3ce9560d4069c088892e0d63a6e6fa003e74a120..0000000000000000000000000000000000000000 --- a/src/components/select/option.vue +++ /dev/null @@ -1,57 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/select/select.less b/src/components/select/select.less deleted file mode 100644 index 967fc59df2c4ee846df4b744d6e9c5d353c3627c..0000000000000000000000000000000000000000 --- a/src/components/select/select.less +++ /dev/null @@ -1,227 +0,0 @@ -@import '../../styles/global.less'; -.k-select { - display: inline-block; - width: 100%; - box-sizing: border-box; - vertical-align: middle; - color: #495060; - font-size: 14px; - position: relative; - .k-select-selection { - border-radius: @radius; - overflow: hidden; - display: block; - box-sizing: border-box; - outline: 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - position: relative; - background-color: #fff; - border: 1px solid #dddee1; - transition: border-color .2s ease-in-out, background-color .2s ease-in-out; - height: 32px; - position: relative; - } - /* .k-select-placeholder { - color: #888; - } */ - /* .k-select-placeholder, */ - .k-select-label { - display: block; - height: 30px; - line-height: 30px; - font-size: 12px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-top: -1px; - padding-left: 8px; - padding-right: 32px; - border: none; - background: transparent; - box-sizing: border-box; - width: 100%; - cursor: pointer; - } - .k-select-arrow { - font-size: 18px; - position: absolute; // border-left: 1px solid #ddd; - top: 0; - right: 0; - height: 100%; - width: 32px; - line-height: 30px; - // background: #fff; - -moz-box-sizing: border-box; - box-sizing: border-box; - text-align: center; - pointer-events: none; - &:after { - transition: all .3s ease-in-out; - position: absolute; - content: '\F3D0'; - font-family: Ionicons; - top: 0; - right: 0; - height: 100%; - width: 32px; - line-height: 32px; - transform: rotate(0deg); - } - } - .k-select-clearable { - position: absolute; - top: 0; - right: 0; - width: 32px; - line-height: 30px; - height: 100%; - display: none; - // background: #fff; - &::before { - content: "\f14e"; - font-family: Ionicons; - font-size: 15px; - position: absolute; - left: 0; - top: 0; - text-align: center; - color: #999; - width: 100%; - } - &:hover { - &::before { - color: #555; - } - } - } -} - -.k-select-dropdown { - user-select: none; - border-radius: @radius; - width: inherit; - max-height: 200px; - overflow: auto; - background-color: #fff; - box-sizing: border-box; - box-shadow: 0 1px 6px rgba(0, 0, 0, .2); - position: absolute; - z-index: 1001; - .k-select-item { - margin: 0; - line-height: normal; - padding: 7px 16px; - clear: both; - color: #495060; - font-size: 12px !important; - white-space: nowrap; - list-style: none; - width: 100%; - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - &:hover { - background: #f5f5f5; - } - } - .k-select-item-selected { - background: @main; - color: #fff; - &:hover { - background: @main; - } - } - .k-select-item-disabled { - background: #f5f5f5; - color: #b2b2b2; - cursor: not-allowed; - } - // &:hover{ - // overflow: auto; - // } - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } - &::-webkit-scrollbar-thumb { - background: #e6e5e5; - border-radius: 4px; - } -} - -.k-select-mini { - .k-select-selection { - height: 25px; - } - /* .k-select-placeholder { - height: 25px; - line-height: 25px; - } */ - .k-select-arrow { - line-height: 23px; - height: 23px; - width: 23px; - font-size: 12px; - &::after { - line-height: 23px; - height: 23px; - width: 23px; - } - } - .k-select-label { - line-height: 23px; - height: 23px; - padding-right: 23px; - } - .k-select-clearable { - // top: 7px; - // right: 7px; - width: 23px; - line-height: 23px; - &::before { - font-size: 12px; - } - } -} - -.k-select-open { - .k-select-selection { - border-color: @main; // border-color: #3bb4f2; - // box-shadow: 0 0 5px rgba(59, 180, 242, 0.55); - box-shadow: 0 0 5px fade(@main, 75%); - } - .k-select-arrow { - &:after { - transform: rotate(180deg); - } - } -} - -.k-select-disabled { - .k-select-label { - cursor: not-allowed; - } - .k-select-selection { - background: #f5f5f5; - cursor: not-allowed; - } - .k-select-arrow { - background: #f5f5f5; - } -} - -.k-select-isclearable { - &:hover { - .k-select-clearable { - display: block; - } - .k-select-arrow { - display: none; - } - } -} \ No newline at end of file diff --git a/src/components/select/select.vue b/src/components/select/select.vue deleted file mode 100644 index 19f7a97c875f5d7ca59b42732168a1b85924671b..0000000000000000000000000000000000000000 --- a/src/components/select/select.vue +++ /dev/null @@ -1,220 +0,0 @@ - - - diff --git a/src/components/switch/index.js b/src/components/switch/index.js deleted file mode 100644 index 0902eb1f13701b5d5940983a1d9ed464bb596424..0000000000000000000000000000000000000000 --- a/src/components/switch/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './switch.less' -import Switch from './switch' -export default Switch \ No newline at end of file diff --git a/src/components/switch/switch.vue b/src/components/switch/switch.vue deleted file mode 100644 index fc9ce2079962b308dcc669a42e3d650e4696a1e8..0000000000000000000000000000000000000000 --- a/src/components/switch/switch.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - diff --git a/src/components/table/expand.js b/src/components/table/expand.js deleted file mode 100644 index a360570944fecac25986cd62693a5ccabe7cfb8b..0000000000000000000000000000000000000000 --- a/src/components/table/expand.js +++ /dev/null @@ -1,21 +0,0 @@ -export default { - name: 'TableExpand', - functional: true, - props: { - row: Object, - render: Function, - index: Number, - column: { - type: Object, - default: null - } - }, - render: (h, ctx) => { - const params = { - row: ctx.props.row, - index: ctx.props.index - }; - if (ctx.props.column) params.column = ctx.props.column; - return ctx.props.render(h, params); - } -}; \ No newline at end of file diff --git a/src/components/table/index.js b/src/components/table/index.js deleted file mode 100644 index f709d6c2f9ec9dc1d033e71fe26ed148ae044953..0000000000000000000000000000000000000000 --- a/src/components/table/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './table.less' -import Table from './table' -export default Table \ No newline at end of file diff --git a/src/components/table/table.less b/src/components/table/table.less deleted file mode 100644 index 02a3131a4d6fa225bc1ecb1a7fe9509cccffe5ec..0000000000000000000000000000000000000000 --- a/src/components/table/table.less +++ /dev/null @@ -1,206 +0,0 @@ -@import '../../styles/global.less'; -@keyframes zoom{ - 0% { transform: scale(0.0);opacity: 1; } - 100% { transform: scale(1.0);opacity: 0} -} -.k-table { - background: #fff; - width: 100%; - margin: 10px 0; - overflow: auto; - box-sizing: border-box; - position: relative; - table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - thead { - background: #f9f9f9; - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; - } - tr th { - font-weight: 700; - font-size: 14px; // padding: 13px; - height: 40px; - .k-table-cell { - padding: 0 13px; - box-sizing: border-box; - a { - color: @main; - } - } - } - th, td { - // - font-size: 12px; - text-align: left; - white-space: nowrap; - } - td { - height: 45px; - .k-table-cell { - padding: 0 13px; - box-sizing: border-box; - a { - color: @main; - } - } - .k-table-cell-hidden { - overflow: hidden; - text-overflow: ellipsis; - } - } - tbody tr { - &:nth-child(even) { - background: #f9f9f9; - } - &:nth-child(odd) { - background: #fff; - } - &:hover { - background: tint(@main, 93%); - } - } - } - .selection { - border-left: 1px solid #eee; - border-right: 1px solid #eee; - white-space: nowrap; - } - th>a, td>a { - color: #3a95ff; - } - .mini { - height: 22px !important; - line-height: 20px; - padding: 0 5px !important; - } - .no-data { - text-align: center; - padding: 10px 0; - } - .sort { - cursor: pointer; - } - .k-table-sort { - position: relative; - margin-left: 5px; - span { - border: 3px solid #ddd; - border-color: transparent; - position: absolute; - top: 0; - height: 0; - cursor: pointer; - } - .k-table-sort-asc { - border-bottom-color: #ddd; - border-top-width: 0; - border-bottom-width: 5px; - top: 2px; - &:hover { - border-bottom-color: @main; - } - } - .k-table-sort-asc.active { - border-bottom-color: @main; - } - .k-table-sort-desc.active { - border-top-color: @main; - } - .k-table-sort-desc { - border-bottom-width: 0; - border-top-color: #ddd; - top: 10px; - border-top-width: 5px; - &:hover { - border-top-color: @main; - } - } - } - .k-loading-warp { - position: absolute; - z-index: 10; - left: 0; - top: 0; - bottom: 0; - right: 0; - background: rgba(255, 255, 255, 0.6); - .k-loading-inner { - margin: 0 auto; - position: relative; - text-align: center; - top: 50%; - margin-top: -17.5px; - } - .k-loading-animate-zoom { - position: relative; - &::before, &::after { - content: ''; - width: 100%; - height: 100%; - border-radius: 50%; - background: @main; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: zoom 2s 0s cubic-bezier(.09, .57, .49, .9) infinite; - // animation: zoom 2.0s infinite ease-in-out; - } - &::before { - animation-delay: -1.0s; - } - } - } -} - -.k-table-mini { - table { - tr th { - height: 30px; - font-size: 12px; - } - td { - height: 30px; - } - } -} - -.k-table-header { - position: absolute; - top: 0; - left: 0; - z-index: 100; -} - -.k-table-bordered { - border: 1px solid #eee; // border-right: 1px solid #eee; - border-bottom: none; - .no-data { - border-bottom: 1px solid #eee; - } - th, td { - border: 1px solid #eee; - } - tr td:first-child, tr th:first-child { - border-left: none; - } - tr td:last-child, tr th:last-child { - border-right: none; - } - tr th:first-child, table thead, tr th { - border-top: none; - } -} - -.k-table-fixed { - th, td { - overflow: hidden; - text-overflow: ellipsis; - white-space: normal; - word-break: break-all; - box-sizing: border-box; - } -} \ No newline at end of file diff --git a/src/components/table/table.vue b/src/components/table/table.vue deleted file mode 100644 index 36863c23d5ff755c815d228e5a56482bb36279d6..0000000000000000000000000000000000000000 --- a/src/components/table/table.vue +++ /dev/null @@ -1,238 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js deleted file mode 100644 index 717329a403213600bead1f5d83268be5bace52ba..0000000000000000000000000000000000000000 --- a/src/components/tabs/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import './tabs.less' -import Tabs from './tabs' -import TabPane from './tabPane' -export { Tabs, TabPane } \ No newline at end of file diff --git a/src/components/tabs/tabpane.vue b/src/components/tabs/tabpane.vue deleted file mode 100644 index ed31d2bf376c0213fff5568b6930b086032fbd68..0000000000000000000000000000000000000000 --- a/src/components/tabs/tabpane.vue +++ /dev/null @@ -1,34 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue deleted file mode 100644 index 48fd469218a333fa5ce4a35847bf2e88b8d073ac..0000000000000000000000000000000000000000 --- a/src/components/tabs/tabs.vue +++ /dev/null @@ -1,230 +0,0 @@ - - - diff --git a/src/components/tag/index.js b/src/components/tag/index.js deleted file mode 100644 index efa85648210f09be6bdb2050ef1f4cf937300782..0000000000000000000000000000000000000000 --- a/src/components/tag/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './tag.less' -import Tag from './tag' -export default Tag \ No newline at end of file diff --git a/src/components/tag/tag.less b/src/components/tag/tag.less deleted file mode 100644 index 2644a0f5c3c4145849c1d1338690f19aa05ba6df..0000000000000000000000000000000000000000 --- a/src/components/tag/tag.less +++ /dev/null @@ -1,50 +0,0 @@ -@import '../../styles/global.less'; -.k-tag { - display: inline-block; - line-height: 20px; - height: 22px; - padding: 0 7px; - border: 1px solid #d9d9d9; - background: #fafafa; - font-size: 12px; - border-radius: @radius; - box-sizing: border-box; - white-space: nowrap; - margin-right: 8px; - vertical-align: middle; - cursor: pointer; - .k-ion-md-close { - font-size: 12px; - margin-left: 8px; - color: #666; - margin-top:-1px; - } -} - -.k-tag-has-color { - color: #fff; - border-color: transparent; - .k-ion-md-close { - color: #fff; - } -} - -.k-tag-blue { - background: @primary; -} - -.k-tag-gray { - background: @gray; -} - -.k-tag-green { - background: @success; -} - -.k-tag-red { - background: @danger; -} - -.k-tag-orange { - background: @warning; -} \ No newline at end of file diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue deleted file mode 100644 index 7b0d198c38d3db2dd2c54464bf6a1c8153dc4e43..0000000000000000000000000000000000000000 --- a/src/components/tag/tag.vue +++ /dev/null @@ -1,45 +0,0 @@ - - diff --git a/src/components/timeline/index.js b/src/components/timeline/index.js deleted file mode 100644 index a6badf24148d9b22273907d459c5136a7b2fd744..0000000000000000000000000000000000000000 --- a/src/components/timeline/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import './timeline.less' -import TimeLine from './timeline'; -import TimeLineItem from './timelineitem'; - - -export { TimeLine, TimeLineItem } \ No newline at end of file diff --git a/src/components/timeline/timeline.less b/src/components/timeline/timeline.less deleted file mode 100644 index 330390bcad7a11bd2873e2efdf375b5decdc6435..0000000000000000000000000000000000000000 --- a/src/components/timeline/timeline.less +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../styles/global.less'; -.k-timeline { - background-color: #fff; - font-size: 13px; - overflow: hidden; - position: relative; - z-index: 1; - .k-time-line-item { - position: relative; - &:not(:last-child):before { - position: absolute; - width: 1px; - background: #ddd; - left: 7px; - content: ""; - height: 100%; - top: 5px; - } - } - .k-time-line-dot { - position: absolute; - background: #fff; - top: 0; - left: 1px; - font-size: 16px; - width: auto; - height: 16px; - line-height: 16px; - color: @main; - } - .k-time-line-item-content { - padding: 1px 1px 10px 24px; - font-size: 12px; - position: relative; - top: 0; - } -} \ No newline at end of file diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue deleted file mode 100644 index 539f8b957d70d9173ce8a3299cf8a8a78adf712d..0000000000000000000000000000000000000000 --- a/src/components/timeline/timeline.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/src/components/timeline/timelineitem.vue b/src/components/timeline/timelineitem.vue deleted file mode 100644 index 470cb6d886f4a6c4371be982879752f9591745c2..0000000000000000000000000000000000000000 --- a/src/components/timeline/timelineitem.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/src/components/tooltip/index.js b/src/components/tooltip/index.js deleted file mode 100644 index 1a4fb86ad02e96906ca5f57e5510eda08b4bae3b..0000000000000000000000000000000000000000 --- a/src/components/tooltip/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './tooltip.less' -import Tooltip from './tooltip' -export default Tooltip \ No newline at end of file diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue deleted file mode 100644 index 2043529f264ab0c82c6caa4623b3390998276e61..0000000000000000000000000000000000000000 --- a/src/components/tooltip/tooltip.vue +++ /dev/null @@ -1,169 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/tree/node.vue b/src/components/tree/node.vue deleted file mode 100644 index 6a843a36ebd745f6d34e805034e90f02e708bb7a..0000000000000000000000000000000000000000 --- a/src/components/tree/node.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - diff --git a/src/components/tree/tree.less b/src/components/tree/tree.less deleted file mode 100644 index 8329f195c497df2617c53fc7441591a5ea947b23..0000000000000000000000000000000000000000 --- a/src/components/tree/tree.less +++ /dev/null @@ -1,56 +0,0 @@ -.k-tree { - li { - padding: 4px 0; - margin: 0; - list-style: none; - white-space: nowrap; - outline: 0; - user-select: none; - ul { - margin: 0; - padding: 0 0 0 18px; - } - } - .k-tree-title { - display: inline-block; - margin: 0; - padding: 0 4px; - border-radius: 3px; - cursor: pointer; - color: #495060; - transition: all .2s ease-in-out; - &:hover { - background: #ddd; - } - } - .k-tree-title-selected { - background: #ddd; - } - .k-tree-arrow { - // font-size: 20px; - width: 24px; - height: 24px; - line-height: 24px; - display: inline-block; - vertical-align: middle; - position: relative; - text-align: center; - transform: rotate(0deg); - transition: transform .2s ease-in-out; - cursor: pointer; - } - .k-tree-arrow-open { - transform: rotate(90deg) - } - .k-tree-children{ - overflow: hidden; - transition: height .2s ease-in-out; - -webkit-transition: height .2s ease-in-out; - } - .tree-nodata{ - padding: 8px 10px; - display: block; - color: #495060; - font-size: 12px; - } -} \ No newline at end of file diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue deleted file mode 100644 index 02b909abdd9edcf1a682f012ed4b8f7548e91886..0000000000000000000000000000000000000000 --- a/src/components/tree/tree.vue +++ /dev/null @@ -1,111 +0,0 @@ - - - diff --git a/src/directives/winScroll.js b/src/directives/winScroll.js deleted file mode 100644 index c217ca32e206e71bcfc2e609fbd289644888f1da..0000000000000000000000000000000000000000 --- a/src/directives/winScroll.js +++ /dev/null @@ -1,22 +0,0 @@ -import Vue from 'vue'; -const SSR = Vue.prototype.$isServer -export default { - bind(el, binding) { - if (SSR) return; - let scroll = (e) => { - if (binding.expression) { - binding.value(e); - } - } - el.__scroll = scroll - window.addEventListener('resize', scroll) - document.addEventListener('scroll', scroll) - document.addEventListener('mousewheel', scroll) - }, - unbind(el, bind) { - window.removeEventListener('resize', el.__scroll) - document.removeEventListener('scroll', el.__scroll) - document.removeEventListener('mousewheel', el.__scroll) - delete el.__scroll - } -} \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index f1af36e26c21305d7db9d30798364b13ea929eb2..0000000000000000000000000000000000000000 --- a/src/index.js +++ /dev/null @@ -1,93 +0,0 @@ -import Alert from './components/alert' -import Affix from './components/affix' -import { Breadcrumb, BreadcrumbItem } from './components/breadcrumb' -import { Button, ButtonGroup } from './components/button' -import Badge from './components/badge' -import BackTop from './components/backtop' -import ColorPicker from './components/colorPicker' -import Card from './components/card' -import { Carousel, CarouselItem } from './components/carousel' -import { Collapse, Panel } from './components/collapse' -import { Checkbox, CheckboxGroup } from './components/checkbox' -import DatePicker from './components/datePicker' -import { Dropdown, DropdownItem, DropdownMenu } from './components/dropdown' -import Drawer from './components/drawer' -import { Form, FormItem } from './components/form' -import ImagePreview from './components/imagePreview' -import Icon from './components/icon' -import Input from './components/input' -import Loading from './components/loading' -import { Layout, Header, Footer, Content, Sider } from './components/layout' -import Modal from './components/modal' -import { Menu, MenuGroup, MenuItem, SubMenu } from './components/menu' -import { Message, Notice } from './components/message' -import Page from './components/page' -import Poptip from './components/poptip' -import { Radio, RadioGroup, RadioButton } from './components/radio' -// import Scroll from './components/scroll' -// import Slider from './components/slider' -import Switch from './components/switch' -import { Select, Option } from './components/select' -import { Steps, Step } from './components/steps' -import Table from './components/table' -import Tooltip from './components/tooltip' -import TreeSelect from './components/treeselect' -import { Tabs, TabPane } from './components/tabs' -import { TimeLine, TimeLineItem } from './components/timeline' -import Tree from './components/tree' -import Tag from './components/tag' -import { Row, Col } from './components/grid' -import Upload from './components/upload' - -const { version } = require('../package.json'); - -// import './styles'; -// import './styles/cover'; - -const components = { - Alert, Affix, - BackTop, Badge, Button, ButtonGroup, Breadcrumb, BreadcrumbItem, - Card, Carousel, CarouselItem, Collapse, ColorPicker, Checkbox, CheckboxGroup, Col, - DatePicker, Dropdown, DropdownItem, DropdownMenu, Drawer, - Form, FormItem, - ImagePreview, Input, Icon, - Loading, - Menu, MenuGroup, MenuItem, Modal, Message, - Layout, Header, Footer, Content, Sider, - Notice, - Option, - Page, Poptip, Panel, - Row, Radio, RadioGroup, RadioButton, - /* Scroll, */ Steps, Step, Select, SubMenu, //Slider, - Table, Tabs, TabPane, TimeLine, TimeLineItem, Tag, Tooltip, Tree, TreeSelect, - Upload, -} -const UI = { - ...components, - kForm: Form, - kButton: Button, - kInput: Input, - kSelect: Select, - kOption: Option, - kTable: Table, - kSwitch: Switch, - kCol: Col, - kMenu: Menu, - Version: version, -} -const install = function (Vue, opts = {}) { - for (let key in UI) { - Vue.component(key, UI[key]); - } - Vue.prototype.$Message = Message; - Vue.prototype.$Loading = Loading; - Vue.prototype.$Notice = Notice; - Vue.prototype.$Modal = Modal; - Vue.prototype.$ImagePreview = ImagePreview; -} -UI.install = install -// auto install -if (typeof window !== 'undefined' && window.Vue) { - install(window.Vue); -} -export default UI \ No newline at end of file diff --git a/src/styles/global.less b/src/styles/global.less deleted file mode 100644 index 74f9fa8d2be3ae6731b6c893e136a1d46fd9615b..0000000000000000000000000000000000000000 --- a/src/styles/global.less +++ /dev/null @@ -1,123 +0,0 @@ -//颜色 -// @main: #19be6b; -@main: #3a95ff; -@primary: #3a95ff; -@success: #00bb5d; -@danger: #ff3300; -@warning: #ffa500; -@gray: #969696; -@purple: #c13aff; -@dark: rgba(0, 0, 0, .75); -@radius: ~'2px'; - -::selection { - background: @main; - color: #fff; -} - -*, :after, :before { - box-sizing: border-box; - margin: 0; - -webkit-tap-highlight-color: transparent; - outline: none; -} -//下拉动画 -@keyframes dropDownIn { - 0% { opacity: 0; transform: scaleY(0) } - to { opacity: 1; transform: scaleY(1) } -} - -@keyframes dropDownOut { - 0% { opacity: 1; transform: scaleY(1) } - to { opacity: 0; transform: scaleY(0) } -} - -@keyframes fadeInDown { - from { opacity: 0; transform: translate3d(0, -100%, 0); } - to { opacity: 1; } -} -@keyframes fadeOutUp { - from { opacity: 1; } - to { opacity: 0; transform: translate3d(0, -100%, 0); } - } - @keyframes fadeInLeft { - from { opacity: 0; transform: translate3d(100%, 0, 0); } - to { opacity: 1; } -} - @keyframes fadeOutRight { - from { opacity: 1; } - to { opacity: 0; transform: translate3d(100%, 0, 0);} -} -@keyframes fadeInRight { - from { opacity: 0; transform: translate3d(-100%, 0, 0); } - to { opacity: 1; } -} -@keyframes fadeOutLeft { - from { opacity: 1; } - to{ opacity: 0; transform: translate3d(-100%, 0, 0); } -} -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} -@keyframes fadeOut { - from { opacity: 1; } - to { opacity: 0; } -} -@keyframes fadeEaseIn { - from { opacity: 0;transform: scale(1.1); filter: blur(5px)} - to { opacity: 1; } -} -@keyframes fadeEaseOut { - from { opacity: 1; } - to { opacity: 0;transform: scale(1.1);filter: blur(5px) } -} - -@keyframes loadloop { - 0% {-webkit-transform: rotate(0);transform: rotate(0) } - 50% {-webkit-transform: rotate(180deg);transform: rotate(180deg) } - to {-webkit-transform: rotate(1turn);transform: rotate(1turn) } -} - -.zoomInX, .zoomOutX { - &.animated {animation-duration: .3s;} -} - -@keyframes zoomInX { - from {opacity: 0;transform: scale3d(.3, .3, .3);filter: blur(5px)} - 50% {opacity: 1;} -} - -@keyframes zoomOutX { - from {opacity: 1;} - to {opacity: 0;transform: scale3d(.3, .3, .3);filter: blur(5px) - } -} - -.zoomInX {animation-name: zoomInX;} - -.zoomOutX {animation-name: zoomOutX;} -.k-load-loop { - -webkit-animation: loadloop 1s linear infinite; - animation: loadloop 1s linear infinite -} -.fadeease-enter-active { animation: fadeEaseIn .3s ;} -.fadeease-leave-active { animation: fadeEaseOut .3s ;} - -.fade-enter-active { animation: fadeIn .4s ;animation-timing-function: linear;} -.fade-leave-active { animation: fadeOut .4s ;animation-timing-function: linear; } - -.fadeleft-enter-active { animation: fadeInLeft .3s ;} -.fadeleft-leave-active { animation: fadeOutRight .3s ;} -.faderight-enter-active { animation: fadeInRight .3s ;} -.faderight-leave-active { animation: fadeOutLeft .3s ; } - -.fadedown-enter-active { animation: fadeInDown .4s ;} -.fadedown-leave-active { animation: fadeOutUp .3s ; } - -.dropdown-enter-active { transform-origin:0 0; animation: dropDownIn .3s } -.dropdown-leave-active {transform-origin:0 0; animation: dropDownOut .3s } - -.dropdownBottom-enter-active { transform-origin:0 100%; animation: dropDownIn .3s } -.dropdownBottom-leave-active { transform-origin: 0 0; animation: dropDownOut .3s cubic-bezier(.755, .05, .855, .06)} - diff --git a/src/styles/index.less b/src/styles/index.less deleted file mode 100644 index 3bccf72b15e000c5a145d8240b57f28aeca9ce8a..0000000000000000000000000000000000000000 --- a/src/styles/index.less +++ /dev/null @@ -1,42 +0,0 @@ -@import '../components/alert/alert.less'; -@import '../components/affix/affix.less'; -@import '../components/badge/badge.less'; -@import '../components/backtop/backtop.less'; -@import '../components/breadcrumb/breadcrumb.less'; -@import '../components/button/button.less'; -@import '../components/card/card.less'; -@import '../components/colorpicker/colorpicker.less'; -@import '../components/collapse/collapse.less'; -@import '../components/carousel/carousel.less'; -@import '../components/checkbox/checkbox.less'; -@import '../components/datepicker/calendar.less'; -@import '../components/datepicker/datepicker.less'; -@import '../components/drawer/drawer.less'; -@import '../components/dropdown/dropdown.less'; -@import '../components/form/form.less'; -@import '../components/icon/icon.less'; -@import '../components/grid/grid.less'; -@import '../components/input/input.less'; -@import '../components/imagepreview/imagepreview.less'; -@import '../components/loading/loading.less'; -@import '../components/layout/layout.less'; -@import '../components/modal/modal.less'; -@import '../components/message/message.less'; -@import '../components/message/notice.less'; -@import '../components/menu/menu.less'; -@import '../components/page/page.less'; -@import '../components/poptip/poptip.less'; -@import '../components/radio/radio.less'; -// @import '../components/scroll/scroll.less'; -@import '../components/select/select.less'; -@import '../components/switch/switch.less'; -// @import '../components/slider/slider.less'; -@import '../components/steps/steps.less'; -@import '../components/timeline/timeline.less'; -@import '../components/tag/tag.less'; -@import '../components/tooltip/tooltip.less'; -@import '../components/table/table.less'; -@import '../components/tree/tree.less'; -@import '../components/treeselect/treeselect.less'; -@import '../components/tabs/tabs.less'; -@import '../components/upload/upload.less'; \ No newline at end of file