@lx-frontend/wrap-element-ui 0.4.0-beta.3 → 0.4.1

package/packages/SearchSelect/src/SearchSelect.vue

@@ -1,150 +1,150 @@
-<template>
-  <div
-    class="search-select"
-    @keyup.up.prevent="navigateOptions($event, 'prev')"
-    @keyup.down.prevent="navigateOptions($event, 'next')"
-    @keyup.enter.prevent="selectOption"
-  >
-    <el-input
-      class="search-select__input"
-      ref="input"
-      v-model="content"
-      :placeholder="placeholder"
-      @input="handleInputChange"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    ></el-input>
-    <div v-if="visible && value !== ''" class="select-down" >
-      <div
-        v-for="(item, index) in list"
-        :key="getKey(item, index)"
-        :class="['select-down__item', {'select-down__item--active': currentId === index}]"
-        @mouseover="currentId = index"
-        @click="handleSelect(item)"
-      >
-        <div
-          v-for="(showItem, index) in showList"
-          :key="getKey(showItem, index)"
-          :style="`flex: ${showItem.flex}`"
-          :class="`select-down__box select-down__${showItem.name}`"
-        >
-          <span>{{ item[showItem.name] || '--' }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SearchSelect',
-  props: {
-    value: {
-      default: '',
-      type: String,
-    },
-    placeholder: {
-      default: '请输入',
-      type: String,
-    },
-    list: {
-      default: () => [],
-      type: Array,
-    },
-    showList: {
-      default: () => [],
-      type: Array,
-    }
-  },
-  data() {
-    return {
-      content: '',
-      visible: false,
-      currentId: 0
-    }
-  },
-  watch: {
-    value(val) {
-      this.content = val
-    }
-  },
-  methods: {
-    handleFocus() {
-      this.visible = true
-      this.$emit('input', this.content)
-    },
-    handleInputChange(params) {
-      this.$emit('update:value', params)
-      this.$emit('input', params)
-    },
-    navigateOptions(e, params) {
-      e.target.selectionStart = this.content.length
-      if (params === 'next') this.currentId = this.currentId === this.list.length - 1 ? 0 : this.currentId + 1
-      if (params === 'prev') this.currentId = this.currentId === 0 ? this.list.length - 1 : this.currentId - 1
-    },
-    selectOption() {
-      this.visible = false
-      this.$refs.input.blur()
-      this.$emit('select', this.list[this.currentId])
-    },
-    handleBlur() {
-      const timer = setTimeout(() => {
-        this.visible = false
-        clearTimeout(timer)
-      }, 300)
-    },
-    handleSelect(item) {
-      this.$emit('select', item)
-    },
-    getKey (item, index) {
-      return btoa(escape(`${item}_${index}`))
-    }
-  },
-};
-</script>
-
-<style lang="scss">
-.search-select{
-  position: relative;
-  width: 100%;
-
-  &__input{
-    width: 100%;
-  }
-}
-
-.select-down{
-    width: 100%;
-    position: absolute;
-    z-index: 100;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
-    border-radius: 4px;
-    border: 0 solid #d0d0d1;
-    background-color: #fff;
-    overflow: hidden;
-    margin-top: 10px;
-
-    &__item{
-      height: 30px;
-      line-height: 30px;
-      display: flex;
-      justify-content: space-between;
-      text-align: center;
-      box-sizing: border-box;
-      padding: 0 15px;
-
-      &--active{
-        background-color: #eee;
-      }
-    }
-
-    &__box{
-      text-align: center;
-      overflow: hidden;
-
-      &:first-of-type{
-        text-align: left;
-      }
-    }
-  }
-</style>
+<template>
+  <div
+    class="search-select"
+    @keyup.up.prevent="navigateOptions($event, 'prev')"
+    @keyup.down.prevent="navigateOptions($event, 'next')"
+    @keyup.enter.prevent="selectOption"
+  >
+    <el-input
+      class="search-select__input"
+      ref="input"
+      v-model="content"
+      :placeholder="placeholder"
+      @input="handleInputChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    ></el-input>
+    <div v-if="visible && value !== ''" class="select-down" >
+      <div
+        v-for="(item, index) in list"
+        :key="getKey(item, index)"
+        :class="['select-down__item', {'select-down__item--active': currentId === index}]"
+        @mouseover="currentId = index"
+        @click="handleSelect(item)"
+      >
+        <div
+          v-for="(showItem, index) in showList"
+          :key="getKey(showItem, index)"
+          :style="`flex: ${showItem.flex}`"
+          :class="`select-down__box select-down__${showItem.name}`"
+        >
+          <span>{{ item[showItem.name] || '--' }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchSelect',
+  props: {
+    value: {
+      default: '',
+      type: String,
+    },
+    placeholder: {
+      default: '请输入',
+      type: String,
+    },
+    list: {
+      default: () => [],
+      type: Array,
+    },
+    showList: {
+      default: () => [],
+      type: Array,
+    }
+  },
+  data() {
+    return {
+      content: '',
+      visible: false,
+      currentId: 0
+    }
+  },
+  watch: {
+    value(val) {
+      this.content = val
+    }
+  },
+  methods: {
+    handleFocus() {
+      this.visible = true
+      this.$emit('input', this.content)
+    },
+    handleInputChange(params) {
+      this.$emit('update:value', params)
+      this.$emit('input', params)
+    },
+    navigateOptions(e, params) {
+      e.target.selectionStart = this.content.length
+      if (params === 'next') this.currentId = this.currentId === this.list.length - 1 ? 0 : this.currentId + 1
+      if (params === 'prev') this.currentId = this.currentId === 0 ? this.list.length - 1 : this.currentId - 1
+    },
+    selectOption() {
+      this.visible = false
+      this.$refs.input.blur()
+      this.$emit('select', this.list[this.currentId])
+    },
+    handleBlur() {
+      const timer = setTimeout(() => {
+        this.visible = false
+        clearTimeout(timer)
+      }, 300)
+    },
+    handleSelect(item) {
+      this.$emit('select', item)
+    },
+    getKey (item, index) {
+      return btoa(escape(`${item}_${index}`))
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.search-select{
+  position: relative;
+  width: 100%;
+
+  &__input{
+    width: 100%;
+  }
+}
+
+.select-down{
+    width: 100%;
+    position: absolute;
+    z-index: 100;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    border-radius: 4px;
+    border: 0 solid #d0d0d1;
+    background-color: #fff;
+    overflow: hidden;
+    margin-top: 10px;
+
+    &__item{
+      height: 30px;
+      line-height: 30px;
+      display: flex;
+      justify-content: space-between;
+      text-align: center;
+      box-sizing: border-box;
+      padding: 0 15px;
+
+      &--active{
+        background-color: #eee;
+      }
+    }
+
+    &__box{
+      text-align: center;
+      overflow: hidden;
+
+      &:first-of-type{
+        text-align: left;
+      }
+    }
+  }
+</style>

package/packages/index.js

@@ -1,59 +1,59 @@
-/**
- * @author Vic
- * Date: 19/03/14
- */
-import DemoComponent from './DemoComponent/index'
-import AuditSteps from './AuditSteps/index'
-import Ellipsis from './Ellipsis/index'
-import SearchForm from './SearchForm/index'
-import LxTable from './LxTable/index'
-import SearchSelect from './SearchSelect/index'
-import AddMembers from './AddMembers/index'
-import PopoverForm from './PopoverForm/index'
-
-
-const components = [
-  DemoComponent,
-  AuditSteps,
-  Ellipsis,
-  SearchForm,
-  LxTable,
-  SearchSelect,
-  AddMembers,
-  PopoverForm
-]
-
-const install = function (Vue) {
-  if (install.installed) return
-  components.map(function(component) {
-    Vue.component(component.name, component)
-  })
-}
-
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue)
-}
-
-export {
-  install,
-  DemoComponent,
-  AuditSteps,
-  Ellipsis,
-  SearchForm,
-  LxTable,
-  SearchSelect,
-  AddMembers,
-  PopoverForm
-}
-
-export default {
-  install,
-  DemoComponent,
-  AuditSteps,
-  Ellipsis,
-  SearchForm,
-  LxTable,
-  SearchSelect,
-  AddMembers,
-  PopoverForm
-}
+/**
+ * @author Vic
+ * Date: 19/03/14
+ */
+import DemoComponent from './DemoComponent/index'
+import AuditSteps from './AuditSteps/index'
+import Ellipsis from './Ellipsis/index'
+import SearchForm from './SearchForm/index'
+import LxTable from './LxTable/index'
+import SearchSelect from './SearchSelect/index'
+import AddMembers from './AddMembers/index'
+import PopoverForm from './PopoverForm/index'
+
+
+const components = [
+  DemoComponent,
+  AuditSteps,
+  Ellipsis,
+  SearchForm,
+  LxTable,
+  SearchSelect,
+  AddMembers,
+  PopoverForm
+]
+
+const install = function (Vue) {
+  if (install.installed) return
+  components.map(function(component) {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export {
+  install,
+  DemoComponent,
+  AuditSteps,
+  Ellipsis,
+  SearchForm,
+  LxTable,
+  SearchSelect,
+  AddMembers,
+  PopoverForm
+}
+
+export default {
+  install,
+  DemoComponent,
+  AuditSteps,
+  Ellipsis,
+  SearchForm,
+  LxTable,
+  SearchSelect,
+  AddMembers,
+  PopoverForm
+}

package/packages/singleMessage/index.ts

@@ -1,44 +1,44 @@
-import { Message } from 'element-ui';
-import MessageType from 'element-ui/packages/message';
-
-
-let messageInstance: MessageType = null;
-
-const closeMsg = (message: MessageType) => {
-  message.singleTimer = setTimeout(() => {
-    message.singleTimer && clearTimeout(message.singleTimer);
-    message.close();
-    messageInstance = null;
-  }, 3000);
-};
-
-const singleMessage: MessageType = (options: any) => {
-  if (
-    messageInstance
-    && (messageInstance.message !== options.message || messageInstance.type !== options.type)
-  ) {
-    messageInstance.close();
-    messageInstance = Message({ ...options, duration: 0 });
-    return closeMsg(messageInstance);
-  }
-  if (messageInstance) {
-    messageInstance.singleTimer && clearTimeout(messageInstance.singleTimer);
-    return closeMsg(messageInstance);
-  }
-  messageInstance = Message({ ...options, duration: 0 });
-  closeMsg(messageInstance);
-};
-
-['error', 'success', 'info', 'warning'].forEach(type => {
-  singleMessage[type] = options => {
-    if (typeof options === 'string') {
-      options = {
-        message: options,
-      };
-    }
-    options.type = type;
-    return singleMessage(options);
-  };
-});
-
-export default singleMessage;
+import { Message } from 'element-ui';
+import MessageType from 'element-ui/packages/message';
+
+
+let messageInstance: MessageType = null;
+
+const closeMsg = (message: MessageType) => {
+  message.singleTimer = setTimeout(() => {
+    message.singleTimer && clearTimeout(message.singleTimer);
+    message.close();
+    messageInstance = null;
+  }, 3000);
+};
+
+const singleMessage: MessageType = (options: any) => {
+  if (
+    messageInstance
+    && (messageInstance.message !== options.message || messageInstance.type !== options.type)
+  ) {
+    messageInstance.close();
+    messageInstance = Message({ ...options, duration: 0 });
+    return closeMsg(messageInstance);
+  }
+  if (messageInstance) {
+    messageInstance.singleTimer && clearTimeout(messageInstance.singleTimer);
+    return closeMsg(messageInstance);
+  }
+  messageInstance = Message({ ...options, duration: 0 });
+  closeMsg(messageInstance);
+};
+
+['error', 'success', 'info', 'warning'].forEach(type => {
+  singleMessage[type] = options => {
+    if (typeof options === 'string') {
+      options = {
+        message: options,
+      };
+    }
+    options.type = type;
+    return singleMessage(options);
+  };
+});
+
+export default singleMessage;

package/packages/theme-default/gulpfile.js

@@ -1,25 +1,25 @@
-'use strict';
-
-var gulp = require('gulp');
-var sass = require('gulp-sass');
-var autoprefixer = require('gulp-autoprefixer');
-var cssmin = require('gulp-cssmin');
-
-gulp.task('compile', function() {
-  return gulp.src('./src/*.scss')
-    .pipe(sass.sync())
-    .pipe(autoprefixer({
-      browsers: ['ie > 9', 'last 2 versions'],
-      cascade: false
-    }))
-    .pipe(cssmin())
-    .pipe(gulp.dest('./lib'));
-});
-
-gulp.task('copyfont', function() {
-  return gulp.src('./src/fonts/**')
-    .pipe(cssmin())
-    .pipe(gulp.dest('./lib/fonts'));
-});
-
-gulp.task('build', ['compile', 'copyfont']);
+'use strict';
+
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var cssmin = require('gulp-cssmin');
+
+gulp.task('compile', function() {
+  return gulp.src('./src/*.scss')
+    .pipe(sass.sync())
+    .pipe(autoprefixer({
+      browsers: ['ie > 9', 'last 2 versions'],
+      cascade: false
+    }))
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib'));
+});
+
+gulp.task('copyfont', function() {
+  return gulp.src('./src/fonts/**')
+    .pipe(cssmin())
+    .pipe(gulp.dest('./lib/fonts'));
+});
+
+gulp.task('build', ['compile', 'copyfont']);

package/packages/theme-default/package.json

@@ -1,23 +1,23 @@
-{
-  "name": "wrap-element-ui-theme-default",
-  "version": "0.0.0",
-  "description": "wrap-element-ui component default theme.",
-  "main": "lib/index.css",
-  "scripts": {
-    "dev": "gulp build && gulp watch",
-    "build": "gulp build"
-  },
-  "keywords": [
-    "wrap-element-ui",
-    "theme"
-  ],
-  "author": "Vic",
-  "license": "MIT",
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-cssmin": "^0.1.7",
-    "gulp-postcss": "^6.1.1",
-    "postcss-salad": "^1.0.5"
-  },
-  "dependencies": {}
-}
+{
+  "name": "wrap-element-ui-theme-default",
+  "version": "0.0.0",
+  "description": "wrap-element-ui component default theme.",
+  "main": "lib/index.css",
+  "scripts": {
+    "dev": "gulp build && gulp watch",
+    "build": "gulp build"
+  },
+  "keywords": [
+    "wrap-element-ui",
+    "theme"
+  ],
+  "author": "Vic",
+  "license": "MIT",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "postcss-salad": "^1.0.5"
+  },
+  "dependencies": {}
+}