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

src/collapse-item/index.js

@@ -0,0 +1,150 @@
+import { createNamespace, isDef } from '../utils';
+import { raf } from '../utils/dom/raf';
+import Cell from '../cell';
+import { cellProps } from '../cell/shared';
+import { ChildrenMixin } from '../mixins/relation';
+
+const [createComponent, bem] = createNamespace('collapse-item');
+const CELL_SLOTS = ['title', 'icon', 'right-icon'];
+
+export default createComponent({
+  mixins: [ChildrenMixin('vanCollapse')],
+
+  props: {
+    ...cellProps,
+    name: [String, Number],
+    disabled: Boolean,
+    isLink: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      show: null,
+      inited: null
+    };
+  },
+
+  computed: {
+    currentName() {
+      return isDef(this.name) ? this.name : this.index;
+    },
+
+    expanded() {
+      if (!this.parent) {
+        return null;
+      }
+
+      const { value } = this.parent;
+      return this.parent.accordion
+        ? value === this.currentName
+        : value.some(name => name === this.currentName);
+    }
+  },
+
+  created() {
+    this.show = this.expanded;
+    this.inited = this.expanded;
+  },
+
+  watch: {
+    expanded(expanded, prev) {
+      if (prev === null) {
+        return;
+      }
+
+      if (expanded) {
+        this.show = true;
+        this.inited = true;
+      }
+
+      raf(() => {
+        const { content, wrapper } = this.$refs;
+        if (!content || !wrapper) {
+          return;
+        }
+
+        const { clientHeight } = content;
+        if (clientHeight) {
+          const contentHeight = `${clientHeight}px`;
+          wrapper.style.height = expanded ? 0 : contentHeight;
+          raf(() => {
+            wrapper.style.height = expanded ? contentHeight : 0;
+          });
+        } else {
+          this.onTransitionEnd();
+        }
+      });
+    }
+  },
+
+  methods: {
+    onClick() {
+      if (this.disabled) {
+        return;
+      }
+
+      const { parent } = this;
+      const name =
+        parent.accordion && this.currentName === parent.value ? '' : this.currentName;
+      this.parent.switch(name, !this.expanded);
+    },
+
+    onTransitionEnd() {
+      if (!this.expanded) {
+        this.show = false;
+      } else {
+        this.$refs.wrapper.style.height = null;
+      }
+    }
+  },
+
+  render(h) {
+    const { disabled, expanded } = this;
+
+    const titleSlots = CELL_SLOTS.reduce((slots, name) => {
+      if (this.slots(name)) {
+        slots[name] = () => this.slots(name);
+      }
+      return slots;
+    }, {});
+
+    if (this.slots('value')) {
+      titleSlots.default = () => this.slots('value');
+    }
+
+    const Title = (
+      <Cell
+        role="button"
+        class={bem('title', { disabled, expanded })}
+        onClick={this.onClick}
+        scopedSlots={titleSlots}
+        tabindex={disabled ? -1 : 0}
+        aria-expanded={String(expanded)}
+        {...{ props: this.$props }}
+      />
+    );
+
+    const Content = this.inited && (
+      <div
+        vShow={this.show}
+        ref="wrapper"
+        class={bem('wrapper')}
+        onTransitionend={this.onTransitionEnd}
+      >
+        <div ref="content" class={bem('content')}>
+          {this.slots()}
+        </div>
+      </div>
+    );
+
+    return (
+      <div class={[bem(), { 'van-hairline--top': this.index }]}>
+        {Title}
+        {Content}
+      </div>
+    );
+  }
+});

src/collapse-item/index.less

@@ -0,0 +1,49 @@
+@import '../style/var';
+
+.van-collapse-item {
+  &__title {
+    .van-cell__right-icon::before {
+      transform: rotate(90deg);
+      transition: @collapse-item-transition-duration;
+    }
+
+    &::after {
+      visibility: hidden;
+    }
+
+    &--expanded {
+      .van-cell__right-icon::before {
+        transform: rotate(-90deg);
+      }
+
+      &::after {
+        visibility: visible;
+      }
+    }
+
+    &--disabled {
+      &,
+      & .van-cell__right-icon {
+        color: @collapse-item-title-disabled-color;
+      }
+
+      &:active {
+        background-color: @white;
+      }
+    }
+  }
+
+  &__wrapper {
+    overflow: hidden;
+    transition: height @collapse-item-transition-duration ease-in-out;
+    will-change: height;
+  }
+
+  &__content {
+    padding: @collapse-item-content-padding;
+    color: @collapse-item-content-text-color;
+    font-size: @collapse-item-content-font-size;
+    line-height: @collapse-item-content-line-height;
+    background-color: @collapse-item-content-background-color;
+  }
+}