xt-element-ui 1.3.3 → 1.4.0

package/src/components/ex-icon/index.vue

@@ -1,168 +1,168 @@
-<template>
-  <component
-    :is="tag"
-    :class="iconClasses"
-    :style="iconStyle"
-    v-on="$listeners"
-    @click="handleClick"
-  >
-    <svg v-if="isSvgSprite" :style="svgStyle" aria-hidden="true">
-      <use :href="svgHref" />
-    </svg>
-    <slot v-else-if="hasDefaultSlot" />
-  </component>
-</template>
-
-<script>
-const customPrefixes = {}
-
-const ExIcon = {
-  name: 'ExIcon',
-  inheritAttrs: false,
-
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    size: {
-      type: [String, Number],
-      default: ''
-    },
-    color: {
-      type: String,
-      default: ''
-    },
-    spin: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    hasDefaultSlot() {
-      return !!this.$slots.default
-    },
-    iconName() {
-      return (this.name || '').trim()
-    },
-    isElIcon() {
-      return /^el-icon-/.test(this.iconName)
-    },
-    isSvgInline() {
-      return this.iconName.indexOf('<svg') > -1
-    },
-    isSvgSprite() {
-      return /^(#|svg:)/.test(this.iconName)
-    },
-    isCustomFont() {
-      if (!this.iconName) return false
-      return !this.isElIcon && !this.isSvgInline && !this.isSvgSprite
-    },
-    svgHref() {
-      if (!this.isSvgSprite) return ''
-      const name = this.iconName.replace(/^svg:/, '').replace(/^#/, '')
-      return `#${name}`
-    },
-    needsExIconPrefix() {
-      if (!this.isCustomFont) return false
-      for (const prefix of Object.keys(customPrefixes)) {
-        if (this.iconName.indexOf(prefix) === 0) {
-          return false
-        }
-      }
-      return true
-    },
-    tag() {
-      if (this.isSvgInline) return 'span'
-      return 'i'
-    },
-    iconClasses() {
-      const classes = []
-      if (this.isElIcon) {
-        classes.push(this.iconName)
-      } else if (this.isSvgSprite) {
-        classes.push('ex-icon-svg')
-      } else if (this.isCustomFont) {
-        if (this.needsExIconPrefix) classes.push('ex-icon')
-        classes.push(this.iconName)
-      } else if (this.isSvgInline) {
-        classes.push('ex-icon-inline-svg')
-      }
-      if (this.spin) classes.push('ex-icon-spin')
-      return classes
-    },
-    iconStyle() {
-      const style = {}
-      if (this.size) {
-        const s = typeof this.size === 'number' ? `${this.size}px` : this.size
-        style.fontSize = s
-        style.width = s
-        style.height = s
-      }
-      if (this.color) {
-        style.color = this.color
-      }
-      if (this.isSvgInline) {
-        style.display = 'inline-block'
-        style.verticalAlign = 'middle'
-      }
-      return style
-    },
-    svgStyle() {
-      return {
-        width: '1em',
-        height: '1em',
-        verticalAlign: '-0.15em',
-        fill: 'currentColor',
-        overflow: 'hidden'
-      }
-    }
-  },
-
-  mounted() {
-    if (this.isSvgInline && this.$el) {
-      this.$el.innerHTML = this.iconName
-    }
-  },
-
-  beforeUpdate() {
-    if (this.isSvgInline && this.$el) {
-      this.$el.innerHTML = this.iconName
-    }
-  },
-
-  methods: {
-    handleClick(e) {
-      this.$emit('click', e)
-    }
-  }
-}
-
-ExIcon.registerPrefix = function (prefix) {
-  if (prefix && typeof prefix === 'string') {
-    customPrefixes[prefix] = true
-  }
-}
-
-export default ExIcon
-</script>
-
-<style lang="scss" scoped>
-.ex-icon-svg {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  font-size: inherit;
-}
-
-.ex-icon-spin {
-  animation: ex-icon-spin-rotate 1s linear infinite;
-}
-
-@keyframes ex-icon-spin-rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-</style>
+<template>
+  <component
+    :is="tag"
+    :class="iconClasses"
+    :style="iconStyle"
+    v-on="$listeners"
+    @click="handleClick"
+  >
+    <svg v-if="isSvgSprite" :style="svgStyle" aria-hidden="true">
+      <use :href="svgHref" />
+    </svg>
+    <slot v-else-if="hasDefaultSlot" />
+  </component>
+</template>
+
+<script>
+const customPrefixes = {}
+
+const ExIcon = {
+  name: 'ExIcon',
+  inheritAttrs: false,
+
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [String, Number],
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    spin: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    hasDefaultSlot() {
+      return !!this.$slots.default
+    },
+    iconName() {
+      return (this.name || '').trim()
+    },
+    isElIcon() {
+      return /^el-icon-/.test(this.iconName)
+    },
+    isSvgInline() {
+      return this.iconName.indexOf('<svg') > -1
+    },
+    isSvgSprite() {
+      return /^(#|svg:)/.test(this.iconName)
+    },
+    isCustomFont() {
+      if (!this.iconName) return false
+      return !this.isElIcon && !this.isSvgInline && !this.isSvgSprite
+    },
+    svgHref() {
+      if (!this.isSvgSprite) return ''
+      const name = this.iconName.replace(/^svg:/, '').replace(/^#/, '')
+      return `#${name}`
+    },
+    needsExIconPrefix() {
+      if (!this.isCustomFont) return false
+      for (const prefix of Object.keys(customPrefixes)) {
+        if (this.iconName.indexOf(prefix) === 0) {
+          return false
+        }
+      }
+      return true
+    },
+    tag() {
+      if (this.isSvgInline) return 'span'
+      return 'i'
+    },
+    iconClasses() {
+      const classes = []
+      if (this.isElIcon) {
+        classes.push(this.iconName)
+      } else if (this.isSvgSprite) {
+        classes.push('ex-icon-svg')
+      } else if (this.isCustomFont) {
+        if (this.needsExIconPrefix) classes.push('ex-icon')
+        classes.push(this.iconName)
+      } else if (this.isSvgInline) {
+        classes.push('ex-icon-inline-svg')
+      }
+      if (this.spin) classes.push('ex-icon-spin')
+      return classes
+    },
+    iconStyle() {
+      const style = {}
+      if (this.size) {
+        const s = typeof this.size === 'number' ? `${this.size}px` : this.size
+        style.fontSize = s
+        style.width = s
+        style.height = s
+      }
+      if (this.color) {
+        style.color = this.color
+      }
+      if (this.isSvgInline) {
+        style.display = 'inline-block'
+        style.verticalAlign = 'middle'
+      }
+      return style
+    },
+    svgStyle() {
+      return {
+        width: '1em',
+        height: '1em',
+        verticalAlign: '-0.15em',
+        fill: 'currentColor',
+        overflow: 'hidden'
+      }
+    }
+  },
+
+  mounted() {
+    if (this.isSvgInline && this.$el) {
+      this.$el.innerHTML = this.iconName
+    }
+  },
+
+  beforeUpdate() {
+    if (this.isSvgInline && this.$el) {
+      this.$el.innerHTML = this.iconName
+    }
+  },
+
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+
+ExIcon.registerPrefix = function (prefix) {
+  if (prefix && typeof prefix === 'string') {
+    customPrefixes[prefix] = true
+  }
+}
+
+export default ExIcon
+</script>
+
+<style lang="scss" scoped>
+.ex-icon-svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-size: inherit;
+}
+
+.ex-icon-spin {
+  animation: ex-icon-spin-rotate 1s linear infinite;
+}
+
+@keyframes ex-icon-spin-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

package/src/components/ex-icon/style/index.scss

@@ -1,7 +1,7 @@
-.ex-icon {
-  display: inline-block;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: -0.15em;
-}
+.ex-icon {
+  display: inline-block;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: -0.15em;
+}

package/src/components/ex-page/index.js

@@ -1,8 +1,8 @@
-import ExPage from './index.vue'
-
-ExPage.install = function (Vue) {
-  Vue.component(ExPage.name, ExPage)
-}
-
-export default ExPage
+import ExPage from './index.vue'
+
+ExPage.install = function (Vue) {
+  Vue.component(ExPage.name, ExPage)
+}
+
+export default ExPage
 export { ExPage }

package/src/components/ex-select-tree/index.js

@@ -1,8 +1,8 @@
-import ExSelectTree from './index.vue'
-
-ExSelectTree.install = function (Vue) {
-  Vue.component(ExSelectTree.name, ExSelectTree)
-}
-
-export default ExSelectTree
+import ExSelectTree from './index.vue'
+
+ExSelectTree.install = function (Vue) {
+  Vue.component(ExSelectTree.name, ExSelectTree)
+}
+
+export default ExSelectTree
 export { ExSelectTree }

package/src/components/ex-table/ExTableCell.vue

@@ -1,23 +1,23 @@
-<script>
-export default {
-  name: 'ExTableCell',
-  functional: true,
-  props: {
-    row: Object,
-    index: Number,
-    formatter: Function,
-    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
-    const isVnode = (it) => it !== null && it !== undefined && typeof it === 'object' && it.hasOwnProperty('componentOptions')
-    const renderNode = ctx.props.formatter(h, params)
-    if (renderNode === null || renderNode === undefined || renderNode === '') return h('span', '')
-    return isVnode(renderNode) ? renderNode : h('span', String(renderNode))
-  }
-}
+<script>
+export default {
+  name: 'ExTableCell',
+  functional: true,
+  props: {
+    row: Object,
+    index: Number,
+    formatter: Function,
+    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
+    const isVnode = (it) => it !== null && it !== undefined && typeof it === 'object' && it.hasOwnProperty('componentOptions')
+    const renderNode = ctx.props.formatter(h, params)
+    if (renderNode === null || renderNode === undefined || renderNode === '') return h('span', '')
+    return isVnode(renderNode) ? renderNode : h('span', String(renderNode))
+  }
+}
 </script>

package/src/components/ex-table/index.js

@@ -1,8 +1,8 @@
-import ExTable from './index.vue'
-
-ExTable.install = function (Vue) {
-  Vue.component(ExTable.name, ExTable)
-}
-
-export default ExTable
+import ExTable from './index.vue'
+
+ExTable.install = function (Vue) {
+  Vue.component(ExTable.name, ExTable)
+}
+
+export default ExTable
 export { ExTable }

package/src/components/ex-table/virtualScrollData.js

@@ -1,35 +1,35 @@
-/**
- * 生成虚拟滚动演示数据
- * @param {number} count 数据条数，默认 10000
- * @returns {Array}
- */
-export function createVirtualScrollData(count = 10000) {
-  const departments = ['研发部', '产品部', '运营部', '财务部', '市场部']
-  const positions = ['工程师', '产品经理', '运营专员', '财务主管', '市场经理']
-  const statuses = ['在职', '休假', '离职']
-
-  return Array.from({ length: count }, (_, i) => ({
-    id: i + 1,
-    name: `用户${i + 1}`,
-    department: departments[i % departments.length],
-    position: positions[i % positions.length],
-    email: `user${i + 1}@example.com`,
-    phone: `13800138${String(i).padStart(4, '0')}`,
-    address: `北京市朝阳区第${i + 1}号街道`,
-    salary: 5000 + Math.floor(Math.random() * 10000),
-    status: statuses[i % statuses.length]
-  }))
-}
-
-/** 虚拟滚动演示列配置 */
-export const virtualScrollColumns = [
-  { prop: 'id', label: 'ID', fixed: 'left', width: 80 },
-  { prop: 'name', label: '姓名', fixed: 'left', width: 120 },
-  { prop: 'department', label: '部门', width: 150 },
-  { prop: 'position', label: '职位', width: 150 },
-  { prop: 'email', label: '邮箱', width: 200 },
-  { prop: 'phone', label: '电话', width: 130 },
-  { prop: 'address', label: '地址', width: 200 },
-  { prop: 'salary', label: '薪资', width: 120 },
-  { prop: 'status', label: '状态', fixed: 'right', width: 100 }
-]
+/**
+ * 生成虚拟滚动演示数据
+ * @param {number} count 数据条数，默认 10000
+ * @returns {Array}
+ */
+export function createVirtualScrollData(count = 10000) {
+  const departments = ['研发部', '产品部', '运营部', '财务部', '市场部']
+  const positions = ['工程师', '产品经理', '运营专员', '财务主管', '市场经理']
+  const statuses = ['在职', '休假', '离职']
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `用户${i + 1}`,
+    department: departments[i % departments.length],
+    position: positions[i % positions.length],
+    email: `user${i + 1}@example.com`,
+    phone: `13800138${String(i).padStart(4, '0')}`,
+    address: `北京市朝阳区第${i + 1}号街道`,
+    salary: 5000 + Math.floor(Math.random() * 10000),
+    status: statuses[i % statuses.length]
+  }))
+}
+
+/** 虚拟滚动演示列配置 */
+export const virtualScrollColumns = [
+  { prop: 'id', label: 'ID', fixed: 'left', width: 80 },
+  { prop: 'name', label: '姓名', fixed: 'left', width: 120 },
+  { prop: 'department', label: '部门', width: 150 },
+  { prop: 'position', label: '职位', width: 150 },
+  { prop: 'email', label: '邮箱', width: 200 },
+  { prop: 'phone', label: '电话', width: 130 },
+  { prop: 'address', label: '地址', width: 200 },
+  { prop: 'salary', label: '薪资', width: 120 },
+  { prop: 'status', label: '状态', fixed: 'right', width: 100 }
+]

package/src/components/ex-upload/index.js

@@ -1,8 +1,8 @@
-import ExUpload from './index.vue'
-
-ExUpload.install = function (Vue) {
-  Vue.component(ExUpload.name, ExUpload)
-}
-
-export default ExUpload
+import ExUpload from './index.vue'
+
+ExUpload.install = function (Vue) {
+  Vue.component(ExUpload.name, ExUpload)
+}
+
+export default ExUpload
 export { ExUpload }

package/src/components/index.scss

@@ -1,40 +1,49 @@
-// 组件样式统一入口文件
-
-// Button 组件样式
-@import './xt-button/style/index.scss';
-
-// Card 组件样式
-@import './xt-card/style/index.scss';
-
-// CardItem 组件样式
-@import './xt-card-item/style/index.scss';
-
-// Input 组件样式
-@import './xt-input/style/index.scss';
-
-// FlexBox 组件样式
-@import './xt-flex-box/style/index.scss';
-
-// ConfigProvider 组件样式
-@import './xt-config-provider/style/index.scss';
-
-// Text 组件样式
-@import './xt-text/style/index.scss';
-
-// StepPrice 组件样式
-@import './xt-step-price/style/index.scss';
-
-// Time 组件样式
-@import './xt-time/style/index.scss';
-
-// ExButton 组件样式
-@import './ex-button/style/index.scss';
-
-// ExCard 组件样式
-@import './ex-card/style/index.scss';
-
-// GridBox 组件样式
-@import './xt-grid-box/style/index.scss';
-
-// ExIcon 组件样式
-@import './ex-icon/style/index.scss';
+// 组件样式统一入口文件
+
+// Button 组件样式
+@import './xt-button/style/index.scss';
+
+// Card 组件样式
+@import './xt-card/style/index.scss';
+
+// CardItem 组件样式
+@import './xt-card-item/style/index.scss';
+
+// Input 组件样式
+@import './xt-input/style/index.scss';
+
+// FlexBox 组件样式
+@import './xt-flex-box/style/index.scss';
+
+// ConfigProvider 组件样式
+@import './xt-config-provider/style/index.scss';
+
+// Text 组件样式
+@import './xt-text/style/index.scss';
+
+// StepPrice 组件样式
+@import './xt-step-price/style/index.scss';
+
+// Time 组件样式
+@import './xt-time/style/index.scss';
+
+// ExButton 组件样式
+@import './ex-button/style/index.scss';
+
+// ExCard 组件样式
+@import './ex-card/style/index.scss';
+
+// GridBox 组件样式
+@import './xt-grid-box/style/index.scss';
+
+// ExIcon 组件样式
+@import './ex-icon/style/index.scss';
+
+// Progress 组件样式
+@import './xt-progress/style/index.scss';
+
+// Tabs 组件样式
+@import './xt-tabs/style/index.scss';
+
+// Badge 组件样式
+@import './xt-badge/style/index.scss';

package/src/components/xt-badge/index.js

@@ -0,0 +1,7 @@
+import XtBadge from './index.vue'
+
+XtBadge.install = function(Vue) {
+  Vue.component(XtBadge.name, XtBadge)
+}
+
+export default XtBadge