@idooel/components 0.0.2-beta.3 → 0.0.2-beta.30

package/packages/business-components/tabs-sub-center/src/index.vue

@@ -1,117 +1,117 @@
-<template>
-  <div class="g-form__tabs">
-    <div :class="['g-form__wrapper', disabled && 'disabled']">
-      <div :class="['g-form__item', !disabled && (innerActiveKey == props.key) && 'actived']" @click="handleTabClick(props)" v-for="props in dataSource" :key="props.key">
-        <div>{{ props.title }}</div>
-        <div v-if="isSuffix" class="suffix">
-          <template v-if="props.loading">
-            <ele-loading style="margin-left:4px;" :loading="props.loading"></ele-loading>
-          </template>
-          <div v-else>({{ props.suffix }}人)</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ele-tabs-sub-center',
-  props: {
-    activeKey: {
-      type: [String, Number]
-    },
-    isSuffix: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    dataSource: {
-      type: Array
-    }
-  },
-  data () {
-    return {
-      innerActiveKey: 1
-    }
-  },
-  watch: {
-    activeKey: {
-      handler (key) {
-        this.innerActiveKey = key
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    setLoadingByKey (key, status = true) {
-      const target = this.dataSource.find(item => item.key == key)
-      this.$set(target, 'loading', status)
-    },
-    setTitleByKey (key, title) {
-      const target = this.dataSource.find(item => item.key == key)
-      this.$set(target, 'title', title)
-    },
-    setSuffixByKey (key, suffix) {
-      const target = this.dataSource.find(item => item.key == key)
-      this.$set(target, 'suffix', suffix)
-    },
-    handleTabClick (props) {
-      if (this.disabled) return
-      const { key } = props
-      this.innerActiveKey = key
-      this.$emit('on-click', props)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-form__tabs {
-  width: 100%;
-  background: #fff;
-  display: flex;
-  flex-direction: row;
-  height: 32px;
-  .g-form__wrapper {
-    display: flex;
-    flex-direction: row;
-    &.disabled {
-      .g-form__item {
-        cursor: not-allowed;
-        border-color: rgba(0, 0, 0, 0.16);
-        background: rgba(0, 0, 0, 0.04);
-        color: rgba(0, 0, 0, 0.24);
-      }
-    }
-    .g-form__item {
-      padding: 0px 16px;
-      cursor: pointer;
-      font-size: 14px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      border: 1px solid rgba(0, 0, 0, 0.16);
-      color: rgba(0, 0, 0, 0.64);
-      border-right: unset;
-      & .suffix {
-        display: flex;
-      }
-      &:last-child {
-        border-right: 1px solid rgba(0, 0, 0, 0.16);
-      }
-      &.actived {
-        border-color:#409eff;
-        color: #409eff;
-        font-size: 14px;
-        &+.g-form__item {
-          border-left: 1px solid #409eff;
-        }
-      }
-    }
-  }
-}
+<template>
+  <div class="g-form__tabs">
+    <div :class="['g-form__wrapper', disabled && 'disabled']">
+      <div :class="['g-form__item', !disabled && (innerActiveKey == props.key) && 'actived']" @click="handleTabClick(props)" v-for="props in dataSource" :key="props.key">
+        <div>{{ props.title }}</div>
+        <div v-if="isSuffix" class="suffix">
+          <template v-if="props.loading">
+            <ele-loading style="margin-left:4px;" :loading="props.loading"></ele-loading>
+          </template>
+          <div v-else>({{ props.suffix }}人)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-tabs-sub-center',
+  props: {
+    activeKey: {
+      type: [String, Number]
+    },
+    isSuffix: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    dataSource: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      innerActiveKey: 1
+    }
+  },
+  watch: {
+    activeKey: {
+      handler (key) {
+        this.innerActiveKey = key
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    setLoadingByKey (key, status = true) {
+      const target = this.dataSource.find(item => item.key == key)
+      this.$set(target, 'loading', status)
+    },
+    setTitleByKey (key, title) {
+      const target = this.dataSource.find(item => item.key == key)
+      this.$set(target, 'title', title)
+    },
+    setSuffixByKey (key, suffix) {
+      const target = this.dataSource.find(item => item.key == key)
+      this.$set(target, 'suffix', suffix)
+    },
+    handleTabClick (props) {
+      if (this.disabled) return
+      const { key } = props
+      this.innerActiveKey = key
+      this.$emit('on-click', props)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-form__tabs {
+  width: 100%;
+  background: #fff;
+  display: flex;
+  flex-direction: row;
+  height: 32px;
+  .g-form__wrapper {
+    display: flex;
+    flex-direction: row;
+    &.disabled {
+      .g-form__item {
+        cursor: not-allowed;
+        border-color: rgba(0, 0, 0, 0.16);
+        background: rgba(0, 0, 0, 0.04);
+        color: rgba(0, 0, 0, 0.24);
+      }
+    }
+    .g-form__item {
+      padding: 0px 16px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border: 1px solid rgba(0, 0, 0, 0.16);
+      color: rgba(0, 0, 0, 0.64);
+      border-right: unset;
+      & .suffix {
+        display: flex;
+      }
+      &:last-child {
+        border-right: 1px solid rgba(0, 0, 0, 0.16);
+      }
+      &.actived {
+        border-color:#409eff;
+        color: #409eff;
+        font-size: 14px;
+        &+.g-form__item {
+          border-left: 1px solid #409eff;
+        }
+      }
+    }
+  }
+}
 </style>

package/packages/button/index.js

@@ -1,5 +1,5 @@
-import EleButton from './src/index.vue'
-
-EleButton.install = Vue => Vue.component(EleButton.name, EleButton)
-
+import EleButton from './src/index.vue'
+
+EleButton.install = Vue => Vue.component(EleButton.name, EleButton)
+
 export default EleButton

package/packages/button/src/index.vue

@@ -1,66 +1,66 @@
-<template>
-  <a-dropdown v-if="mode == 'dropdown'">
-    <a-menu slot="overlay" @click="handleMenuClick">
-      <a-menu-item :key="opt.value" v-for="opt in dataSource">
-        {{ opt.label }}
-      </a-menu-item>
-    </a-menu>
-    <a-button :type="type">
-      <slot></slot>
-      <a-icon :type="icon" />
-    </a-button>
-  </a-dropdown>
-  <a-button :type="type" :icon="icon" @click="handleClick" v-else>
-    <slot></slot>
-  </a-button>
-</template>
-
-<script>
-import { CONTEXT } from '../../utils'
-export default {
-  name: 'ele-button',
-  props: {
-    record: {
-      type: Object
-    },
-    eventName: {
-      type: String
-    },
-    mode: {
-      type: String
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    type: {
-      type: String,
-      default: 'default'
-    },
-    icon: {
-      type: String
-    }
-  },
-  inject: {
-    [CONTEXT]: {
-      default: () => (() => ({}))
-    }
-  },
-  computed: {
-    callContext () {
-      return this[CONTEXT].call(this)
-    }
-  },
-  methods: {
-    handleMenuClick (props) {
-      const { key } = props
-      const currentClickTarget = this.dataSource.find(item => item.value === key)
-      const { eventName } = currentClickTarget
-      eventName && this.$emit(eventName, { ...currentClickTarget })
-    },
-    handleClick () {
-      this.$emit(this.eventName || 'click', { ...this.record, ...this.callContext })
-    }
-  }
-}
+<template>
+  <a-dropdown v-if="mode == 'dropdown'">
+    <a-menu slot="overlay" @click="handleMenuClick">
+      <a-menu-item :key="opt.value" v-for="opt in dataSource">
+        {{ opt.label }}
+      </a-menu-item>
+    </a-menu>
+    <a-button :type="type">
+      <slot></slot>
+      <a-icon :type="icon" />
+    </a-button>
+  </a-dropdown>
+  <a-button :type="type" :icon="icon" @click="handleClick" v-else>
+    <slot></slot>
+  </a-button>
+</template>
+
+<script>
+import { CONTEXT } from '../../utils'
+export default {
+  name: 'ele-button',
+  props: {
+    record: {
+      type: Object
+    },
+    eventName: {
+      type: String
+    },
+    mode: {
+      type: String
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    icon: {
+      type: String
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    callContext () {
+      return this[CONTEXT].call(this)
+    }
+  },
+  methods: {
+    handleMenuClick (props) {
+      const { key } = props
+      const currentClickTarget = this.dataSource.find(item => item.value === key)
+      const { eventName } = currentClickTarget
+      eventName && this.$emit(eventName, { ...currentClickTarget })
+    },
+    handleClick () {
+      this.$emit(this.eventName || 'click', { ...this.record, ...this.callContext })
+    }
+  }
+}
 </script>

package/packages/checkbox/index.js

@@ -1,5 +1,5 @@
-import EleCheckbox from './src/index.vue'
-
-EleCheckbox.install = Vue => Vue.component(EleCheckbox.name, EleCheckbox)
-
+import EleCheckbox from './src/index.vue'
+
+EleCheckbox.install = Vue => Vue.component(EleCheckbox.name, EleCheckbox)
+
 export default EleCheckbox

package/packages/checkbox/src/index.vue

@@ -1,53 +1,53 @@
-<template>
-  <a-checkbox-group
-    :value="value"
-    :options="dataSource" 
-    :disabled="disabled" 
-    @change="onChange">
-  </a-checkbox-group>
-</template>
-
-<script>
-export default {
-  name: 'ele-checkbox',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    value: {
-      type: Array
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    onChange (value) {
-      this.$emit('change', value)
-      this.$emit('input', value)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.ant-checkbox-group {
-  text-align: left;
-  line-height: 32px;
-}
-.has-error {
-  .ant-checkbox-group {
-    ::v-deep .ant-checkbox-wrapper {
-      color: var(--idooel-form-border-err-color);
-    }
-    ::v-deep .ant-checkbox-inner {
-      border-color: var(--idooel-form-border-err-color);
-    }
-  }
-}
+<template>
+  <a-checkbox-group
+    :value="value"
+    :options="dataSource" 
+    :disabled="disabled" 
+    @change="onChange">
+  </a-checkbox-group>
+</template>
+
+<script>
+export default {
+  name: 'ele-checkbox',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Array
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ant-checkbox-group {
+  text-align: left;
+  line-height: 32px;
+}
+.has-error {
+  .ant-checkbox-group {
+    ::v-deep .ant-checkbox-wrapper {
+      color: var(--idooel-form-border-err-color);
+    }
+    ::v-deep .ant-checkbox-inner {
+      border-color: var(--idooel-form-border-err-color);
+    }
+  }
+}
 </style>

package/packages/composite-components/button-group/index.js

@@ -1,5 +1,5 @@
-import EleButtonGroup from './src/index.vue'
-
-EleButtonGroup.install = Vue => Vue.component(EleButtonGroup.name, EleButtonGroup)
-
+import EleButtonGroup from './src/index.vue'
+
+EleButtonGroup.install = Vue => Vue.component(EleButtonGroup.name, EleButtonGroup)
+
 export default EleButtonGroup