[improvement] rename packages dir to src (#3659)

src/tabbar-item/index.js

@@ -0,0 +1,59 @@
+import { createNamespace, isObj } from '../utils';
+import Icon from '../icon';
+import Info from '../info';
+import { route, routeProps } from '../utils/router';
+import { ChildrenMixin } from '../mixins/relation';
+
+const [createComponent, bem] = createNamespace('tabbar-item');
+
+export default createComponent({
+  mixins: [ChildrenMixin('vanTabbar')],
+
+  props: {
+    ...routeProps,
+    icon: String,
+    dot: Boolean,
+    name: [String, Number],
+    info: [String, Number]
+  },
+
+  data() {
+    return {
+      active: false
+    };
+  },
+
+  computed: {
+    routeActive() {
+      const { to, $route } = this;
+      if (to && $route) {
+        const path = isObj(to) ? to.path : to;
+        return $route.path === path;
+      }
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      this.parent.onChange(this.name || this.index);
+      this.$emit('click', event);
+      route(this.$router, this);
+    }
+  },
+
+  render(h) {
+    const { icon, slots } = this;
+    const active = this.parent.route ? this.routeActive : this.active;
+    const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
+
+    return (
+      <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
+        <div class={bem('icon', { dot: this.dot })}>
+          {slots('icon', { active }) || (icon && <Icon name={icon} />)}
+          <Info info={this.info} />
+        </div>
+        <div class={bem('text')}>{slots('default', { active })}</div>
+      </div>
+    );
+  }
+});

src/tabbar-item/index.less

@@ -0,0 +1,49 @@
+@import '../style/var';
+
+.van-tabbar-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: @tabbar-item-text-color;
+  font-size: @tabbar-item-font-size;
+  line-height: @tabbar-item-line-height;
+
+  &__icon {
+    position: relative;
+    margin-bottom: @tabbar-item-margin-bottom;
+    font-size: @tabbar-item-icon-size;
+
+    .van-icon {
+      display: block;
+      min-width: 1em;
+    }
+
+    &--dot {
+      &::after {
+        position: absolute;
+        top: 0;
+        right: -8px;
+        width: 8px;
+        height: 8px;
+        background-color: @red;
+        border-radius: 100%;
+        content: ' ';
+      }
+    }
+
+    img {
+      display: block;
+      height: @tabbar-item-icon-size;
+    }
+  }
+
+  &--active {
+    color: @tabbar-item-active-color;
+  }
+
+  .van-info {
+    margin-top: 2px;
+  }
+}