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

src/step/index.js

@@ -0,0 +1,66 @@
+import { createNamespace } from '../utils';
+import Icon from '../icon';
+
+const [createComponent, bem] = createNamespace('step');
+
+export default createComponent({
+  beforeCreate() {
+    const { steps } = this.$parent;
+    const index = this.$parent.slots().indexOf(this.$vnode);
+    steps.splice(index === -1 ? steps.length : index, 0, this);
+  },
+
+  beforeDestroy() {
+    const index = this.$parent.steps.indexOf(this);
+    if (index > -1) {
+      this.$parent.steps.splice(index, 1);
+    }
+  },
+
+  computed: {
+    status() {
+      const index = this.$parent.steps.indexOf(this);
+      const { active } = this.$parent;
+
+      if (index < active) {
+        return 'finish';
+      }
+      if (index === active) {
+        return 'process';
+      }
+    }
+  },
+
+  render(h) {
+    const { slots, status } = this;
+    const { activeIcon, activeColor, inactiveIcon, direction } = this.$parent;
+    const titleStyle = status === 'process' && { color: activeColor };
+
+    function Circle() {
+      if (status === 'process') {
+        return (
+          slots('active-icon') || (
+            <Icon class={bem('icon')} name={activeIcon} color={activeColor} />
+          )
+        );
+      }
+
+      const inactiveIconSlot = slots('inactive-icon');
+      if (inactiveIcon || inactiveIconSlot) {
+        return inactiveIconSlot || <Icon class={bem('icon')} name={inactiveIcon} />;
+      }
+
+      return <i class={bem('circle')} />;
+    }
+
+    return (
+      <div class={['van-hairline', bem([direction, { [status]: status }])]}>
+        <div class={bem('title')} style={titleStyle}>
+          {this.slots()}
+        </div>
+        <div class={bem('circle-container')}>{Circle()}</div>
+        <div class={bem('line')} />
+      </div>
+    );
+  }
+});

src/step/index.less

@@ -0,0 +1,141 @@
+@import '../style/var';
+
+.van-step {
+  position: relative;
+  flex: 1;
+  color: @step-text-color;
+  font-size: @step-font-size;
+
+  &__circle {
+    display: block;
+    width: @step-circle-size;
+    height: @step-circle-size;
+    background-color: @step-circle-color;
+    border-radius: 50%;
+  }
+
+  &__line {
+    position: absolute;
+    background-color: @step-line-color;
+  }
+
+  &--horizontal {
+    float: left;
+
+    &:first-child {
+      .van-step__title {
+        margin-left: 0;
+        transform: none;
+      }
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 1px;
+      width: auto;
+
+      .van-step__title {
+        margin-left: 0;
+        transform: none;
+      }
+
+      .van-step__circle-container {
+        right: -9px;
+        left: auto;
+      }
+    }
+
+    .van-step__circle-container {
+      position: absolute;
+      top: 30px;
+      left: -8px;
+      z-index: 1;
+      padding: 0 8px;
+      background-color: @white;
+      transform: translateY(-50%);
+    }
+
+    .van-step__title {
+      display: inline-block;
+      margin-left: 3px;
+      font-size: @step-horizontal-title-font-size;
+      transform: translateX(-50%);
+
+      @media (max-width: 321px) {
+        font-size: @step-horizontal-title-font-size - 1px;
+      }
+    }
+
+    .van-step__line {
+      top: 30px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+    }
+
+    .van-step__icon {
+      display: block;
+      font-size: @step-icon-size;
+    }
+
+    .van-step--process {
+      color: @step-process-text-color;
+    }
+  }
+
+  &--vertical {
+    display: block;
+    float: none;
+    padding: 10px 10px 10px 0;
+    line-height: 18px;
+
+    &:not(:last-child)::after {
+      border-bottom-width: 1px;
+    }
+
+    &:first-child {
+      &::before {
+        position: absolute;
+        top: 0;
+        left: -15px;
+        z-index: 1;
+        width: 1px;
+        height: 20px;
+        background-color: @white;
+        content: '';
+      }
+    }
+
+    .van-step__circle-container {
+      position: absolute;
+      top: 19px;
+      left: -15px;
+      z-index: 2;
+      font-size: @step-icon-size;
+      line-height: 1;
+      transform: translate(-50%, -50%);
+    }
+
+    .van-step__line {
+      top: 16px;
+      left: -15px;
+      width: 1px;
+      height: 100%;
+    }
+  }
+
+  &:last-child {
+    .van-step__line {
+      width: 0;
+    }
+  }
+
+  &--finish {
+    color: @step-finish-text-color;
+
+    .van-step__circle,
+    .van-step__line {
+      background-color: @step-finish-line-color;
+    }
+  }
+}