@aochuang/common 1.0.0 → 1.0.126

package/components/tabbar/tabbar-item.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="ui-tabbar-item" :class="{'is-active': tabbarValue === value, 'is-link': link}" @click="handleClick">
+        <template v-if="$slots.icon">
+            <span class="ui-tabbar-item__icon">
+                <slot name="icon"></slot>
+            </span>
+        </template>
+        <span class="ui-tabbar-item__text">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+<script>
+export default {
+    name: 'UiTabbarItem',
+    inject: ['UiTabbar'],
+    props: {
+        value: {
+            type: String
+        }
+    },
+    computed: {
+        link () {
+            return this.UiTabbar.link
+        },
+        tabbarValue () {
+            return this.UiTabbar.value
+        }
+    },
+    watch: {
+        tabbarValue (value) {
+            if (value !== this.value) {
+                return
+            }
+            this.$nextTick(() => {
+                this.scrollIntoHorizontalParent()
+            })
+        }
+    },
+    mounted () {
+        if (this.tabbarValue !== this.value) {
+            return
+        }
+        this.$nextTick(() => {
+            this.scrollIntoHorizontalParent()
+        })
+    },
+    methods: {
+        handleClick () {
+            this.UiTabbar.setValue(this.value)
+        },
+        getHorizontalScrollPadding (scrollParent) {
+            const siblings = this.$el && this.$el.parentElement ? Array.from(this.$el.parentElement.children) : []
+            if (siblings.length === 0) {
+                return {
+                    left: 0,
+                    right: 0
+                }
+            }
+            const firstItem = siblings[0]
+            const lastItem = siblings[siblings.length - 1]
+            const left = Math.max(firstItem.offsetLeft, 0)
+            const right = Math.max(scrollParent.scrollWidth - lastItem.offsetLeft - lastItem.offsetWidth, 0)
+            return {
+                left,
+                right
+            }
+        },
+        getHorizontalScrollParent () {
+            let parent = this.$el && this.$el.parentElement
+            while (parent) {
+                const style = window.getComputedStyle(parent)
+                const overflowX = style.overflowX
+                const canScrollHorizontally = parent.scrollWidth > parent.clientWidth
+                if (canScrollHorizontally && ['auto', 'scroll', 'overlay'].includes(overflowX)) {
+                    return parent
+                }
+                parent = parent.parentElement
+            }
+            return null
+        },
+        scrollIntoHorizontalParent () {
+            const scrollParent = this.getHorizontalScrollParent()
+            if (!scrollParent) {
+                return
+            }
+            const scrollPadding = this.getHorizontalScrollPadding(scrollParent)
+            const itemLeft = this.$el.offsetLeft
+            const itemRight = itemLeft + this.$el.offsetWidth
+            const containerLeft = scrollParent.scrollLeft
+            const containerRight = containerLeft + scrollParent.clientWidth
+            const maxScrollLeft = Math.max(scrollParent.scrollWidth - scrollParent.clientWidth, 0)
+            if (itemLeft < containerLeft) {
+                this.setHorizontalScrollLeft(scrollParent, Math.max(itemLeft - scrollPadding.left, 0))
+            } else if (itemRight > containerRight) {
+                this.setHorizontalScrollLeft(scrollParent, Math.min(itemRight + scrollPadding.right - scrollParent.clientWidth, maxScrollLeft))
+            }
+        },
+        setHorizontalScrollLeft (scrollParent, left) {
+            if (typeof scrollParent.scrollTo === 'function') {
+                scrollParent.scrollTo({
+                    left,
+                    behavior: 'smooth'
+                })
+                return
+            }
+            scrollParent.scrollLeft = left
+        }
+    }
+}
+</script>
+<style lang="less">
+.ui-tabbar-item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    line-height: 24px;
+    box-sizing: content-box;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #666;
+    transition: all .25s;
+    white-space: nowrap;
+    &:not(.is-link) {
+        padding-right: 8px;
+        padding-left: 8px;
+    }
+    &:hover {
+        color: #333;
+        &:not(.is-link) {
+            background-color: #f8f8f8;
+            border: 1px solid #f8f8f8;
+        }
+    }
+    &.is-active {
+        color: #409EFF;
+        &:not(.is-link) {
+            border-color: #e6f2ff;
+            background-color: #e6f2ff;
+        }
+    }
+}
+.ui-tabbar-item__icon{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    vertical-align: top;
+    line-height: 16px;
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+    + .ui-tabbar-item__text {
+        margin-left: 4px;
+    }
+}
+</style>

package/components/tabbar/tabbar.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="ui-tabbar" :class="{'is-link': link}">
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+    name: 'UiTabbar',
+    props: {
+        value: {
+            type: String
+        },
+        link: {
+            type: Boolean
+        }
+    },
+    provide () {
+        return {
+            UiTabbar: this
+        }
+    },
+    methods: {
+        setValue (value) {
+            this.$emit('input', value)
+        }
+    }
+}
+</script>
+<style lang="less">
+.ui-tabbar{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &:not(.is-link) {
+        > .ui-tabbar-item {
+            &:not(:last-child) {
+                margin-right: 12px;
+            }
+        }
+    }
+    &.is-link {
+        > .ui-tabbar-item {
+            &:not(:last-child) {
+                margin-right: 20px;
+            }
+        }
+    }
+}
+</style>

package/components/tabs/index.js

@@ -0,0 +1,12 @@
+import Tabs from './tabs.vue'
+import TabsPane from 'element-ui/lib/tab-pane'
+import 'element-ui/lib/theme-chalk/tab-pane.css'
+
+Tabs.install = (Vue) => {
+  Vue.component(Tabs.name, Tabs)
+  Vue.component('UiTabsPane', TabsPane)
+}
+
+Tabs.TabsPane = TabsPane
+
+export default Tabs

package/components/tabs/tabs.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-tabs
+    ref="tabs"
+    class="ui-tabs"
+    v-model="innerValue"
+    :stretch="stretch"
+    :tab-position="tabPosition"
+    :type="type"
+    :style="style"
+    @tab-click="handleTabClick"
+  >
+    <slot></slot>
+  </el-tabs>
+</template>
+<script>
+import Tabs from 'element-ui/lib/tabs'
+import 'element-ui/lib/theme-chalk/tabs.css'
+
+export default {
+  name: 'UiTabs',
+  components: {
+    ElTabs: Tabs
+  },
+  props: {
+    value: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    align: {
+      type: String,
+      default: 'left',
+      validator (value) {
+        return ['left', 'center', 'right'].indexOf(value) >= 0
+      }
+    },
+    stretch: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: String
+    },
+    tabPosition: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      tabs: null
+    }
+  },
+  computed: {
+    innerValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    style () {
+      const style = {}
+      if (this.height) {
+        style.height = this.height
+      }
+      return style
+    }
+  },
+  mounted () {
+    this.tabs = this.$refs.tabs
+  },
+  methods: {
+    setCurrentName (name) {
+      this.$refs.tabs && this.$refs.tabs.setCurrentName(name)
+    },
+    // 上面那个会导致一直触发input事件，要解决切换选项卡检查是否有数据变化场景，需要静态方式设置currentName属性
+    setTabsStaticCurrentName (name) {
+      if (!this.$refs.tabs) {
+        return
+      }
+      this.$refs.tabs.currentName = name
+    },
+    handleTabClick (evt) {
+      this.$emit('tab-click', {
+        name: evt.name
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-tabs.is-one{
+  .el-tabs__header.is-top{
+    display: none;
+  }
+}
+.el-tabs--top.ui-tabs.el-tabs{
+  display: flex;
+  flex-direction: column;
+  .el-tabs__content{
+    flex: 1;
+    min-height: 0;
+    overflow: initial;
+  }
+  .el-tab-pane{
+    height: 100%;
+  }
+}
+.el-tabs--border-card.ui-tabs {
+  box-shadow: none;
+  & >.el-tabs__content{
+    padding: 0;
+  }
+  &.el-tabs--bottom .el-tabs__header.is-bottom{
+    margin-top: 0;
+  }
+}
+</style>

package/components/tag/index.js

@@ -0,0 +1,9 @@
+import ElTag from 'element-ui/lib/tag'
+import 'element-ui/lib/theme-chalk/tag.css'
+import './tag.less'
+
+ElTag.install = (Vue) => {
+  Vue.component('UiTag', ElTag)
+}
+
+export default ElTag

package/components/tag/tag.less

@@ -0,0 +1,39 @@
+body {
+  .el-tag:not(.el-tag--mini) {
+    white-space: break-spaces;
+    min-height: 20px;
+    line-height: 22px;
+    padding-left: 8px;
+    padding-right: 8px;
+    height: auto;
+  }
+  .el-tag.el-tag--mini {
+    white-space: nowrap;
+    line-height: 17px;
+    padding-left: 4px;
+    padding-right: 4px;
+    font-size: 10px;
+    height: auto;
+    box-sizing: content-box;
+  }
+  .el-tag.el-tag--primary{
+    color: #0052CC;
+    background-color: #edf3fb;
+  }
+  .el-tag.el-tag--success{
+    color: #67C23A;
+    background-color: #f0f9eb;
+  }
+  .el-tag.el-tag--warning{
+    color: #E6A23C;
+    background-color: #fdf6ec;
+  }
+  .el-tag.el-tag--danger{
+    color: #F56C6C;
+    background-color: #fef0f0;
+  }
+  .el-tag.el-tag--info{
+    color: #172b4d;
+    background-color: #e6e6ea;
+  }
+}

package/components/text/index.js

@@ -0,0 +1,7 @@
+import Text from './text'
+
+Text.install = Vue => {
+  Vue.component(Text.name, Text)
+}
+
+export default Text

package/components/text/text.vue

@@ -0,0 +1,69 @@
+<script>
+export default {
+  name: 'UiText',
+  functional: true,
+  props: {
+    icon: {
+      type: String
+    },
+    lineClamp: {
+      type: Number
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'info', 'primary', 'success', 'danger', 'warning'].includes(value)
+      }
+    }
+  },
+  render (h, c) {
+    const style = {}
+    if (c.props.lineClamp) {
+        style.display = '-webkit-box'
+        style.overflow = 'hidden'
+        style['text-overflow'] = 'ellipsis'
+        style['-webkit-line-clamp'] = c.props.lineClamp
+        style['-webkit-box-orient'] = 'vertical'
+    }
+    return h('span', {
+      class: ['ui-text', 'ui-text--' + c.props.type, c.data.class],
+      style
+    }, [
+      c.props.icon ? h('ui-icon', {
+        props: {
+          class: 'ui-text__icon',
+          name: c.props.icon
+        }
+      }) : null,
+      c.scopedSlots.default ? c.scopedSlots.default() : null
+    ])
+  }
+}
+</script>
+<style lang="less">
+.ui-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: pre-wrap;
+}
+.ui-text__icon{
+  margin-right: 4px;
+}
+.ui-text--info {
+  color: #909399;
+}
+.ui-text--primary {
+  color: #409eff;
+}
+.ui-text--success {
+  color: #67c23a;
+}
+.ui-text--danger {
+  color: #f56c6c;
+}
+.ui-text--warning {
+  color: #e6a23c;
+}
+</style>

package/components/textarea/index.js

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