cbvirtua 1.0.9 → 1.0.11

package/vant/tabs/index.js

@@ -0,0 +1,453 @@
+// Utils
+import { createNamespace, isDef, addUnit } from '../utils';
+import { scrollLeftTo, scrollTopTo } from './utils';
+import { route } from '../utils/router';
+import { isHidden } from '../utils/dom/style';
+import { on, off } from '../utils/dom/event';
+import { unitToPx } from '../utils/format/unit';
+import { BORDER_TOP_BOTTOM } from '../utils/constant';
+import { callInterceptor } from '../utils/interceptor';
+import {
+  getScroller,
+  getVisibleTop,
+  getElementTop,
+  getVisibleHeight,
+  setRootScrollTop,
+} from '../utils/dom/scroll';
+
+// Mixins
+import { ParentMixin } from '../mixins/relation';
+import { BindEventMixin } from '../mixins/bind-event';
+
+// Components
+import Title from './Title';
+import Sticky from '../sticky';
+import Content from './Content';
+
+const [createComponent, bem] = createNamespace('tabs');
+
+export default createComponent({
+  mixins: [
+    ParentMixin('vanTabs'),
+    BindEventMixin(function (bind) {
+      if (!this.scroller) {
+        this.scroller = getScroller(this.$el);
+      }
+
+      bind(window, 'resize', this.resize, true);
+
+      if (this.scrollspy) {
+        bind(this.scroller, 'scroll', this.onScroll, true);
+      }
+    }),
+  ],
+
+  inject: {
+    vanPopup: {
+      default: null,
+    },
+  },
+
+  model: {
+    prop: 'active',
+  },
+
+  props: {
+    color: String,
+    border: Boolean,
+    sticky: Boolean,
+    animated: Boolean,
+    swipeable: Boolean,
+    scrollspy: Boolean,
+    background: String,
+    lineWidth: [Number, String],
+    lineHeight: [Number, String],
+    beforeChange: Function,
+    titleActiveColor: String,
+    titleInactiveColor: String,
+    type: {
+      type: String,
+      default: 'line',
+    },
+    active: {
+      type: [Number, String],
+      default: 0,
+    },
+    ellipsis: {
+      type: Boolean,
+      default: true,
+    },
+    duration: {
+      type: [Number, String],
+      default: 0.3,
+    },
+    offsetTop: {
+      type: [Number, String],
+      default: 0,
+    },
+    lazyRender: {
+      type: Boolean,
+      default: true,
+    },
+    swipeThreshold: {
+      type: [Number, String],
+      default: 5,
+    },
+  },
+
+  data() {
+    return {
+      position: '',
+      currentIndex: null,
+      lineStyle: {
+        backgroundColor: this.color,
+      },
+    };
+  },
+
+  computed: {
+    // whether the nav is scrollable
+    scrollable() {
+      return this.children.length > this.swipeThreshold || !this.ellipsis;
+    },
+
+    navStyle() {
+      return {
+        borderColor: this.color,
+        background: this.background,
+      };
+    },
+
+    currentName() {
+      const activeTab = this.children[this.currentIndex];
+
+      if (activeTab) {
+        return activeTab.computedName;
+      }
+    },
+
+    offsetTopPx() {
+      return unitToPx(this.offsetTop);
+    },
+
+    scrollOffset() {
+      if (this.sticky) {
+        return this.offsetTopPx + this.tabHeight;
+      }
+      return 0;
+    },
+  },
+
+  watch: {
+    color: 'setLine',
+
+    active(name) {
+      if (name !== this.currentName) {
+        this.setCurrentIndexByName(name);
+      }
+    },
+
+    children() {
+      this.setCurrentIndexByName(this.active);
+      this.setLine();
+
+      this.$nextTick(() => {
+        this.scrollIntoView(true);
+      });
+    },
+
+    currentIndex() {
+      this.scrollIntoView();
+      this.setLine();
+
+      // scroll to correct position
+      if (this.stickyFixed && !this.scrollspy) {
+        setRootScrollTop(Math.ceil(getElementTop(this.$el) - this.offsetTopPx));
+      }
+    },
+
+    scrollspy(val) {
+      if (val) {
+        on(this.scroller, 'scroll', this.onScroll, true);
+      } else {
+        off(this.scroller, 'scroll', this.onScroll);
+      }
+    },
+  },
+
+  mounted() {
+    this.init();
+
+    // https://github.com/vant-ui/vant/issues/7959
+    if (this.vanPopup) {
+      this.vanPopup.onReopen(() => {
+        this.setLine();
+      });
+    }
+  },
+
+  activated() {
+    this.init();
+    this.setLine();
+  },
+
+  methods: {
+    // @exposed-api
+    resize() {
+      this.setLine();
+    },
+
+    init() {
+      this.$nextTick(() => {
+        this.inited = true;
+        this.tabHeight = getVisibleHeight(this.$refs.wrap);
+        this.scrollIntoView(true);
+      });
+    },
+
+    // update nav bar style
+    setLine() {
+      const shouldAnimate = this.inited;
+
+      this.$nextTick(() => {
+        const { titles } = this.$refs;
+
+        if (
+          !titles ||
+          !titles[this.currentIndex] ||
+          this.type !== 'line' ||
+          isHidden(this.$el)
+        ) {
+          return;
+        }
+
+        const title = titles[this.currentIndex].$el;
+        const { lineWidth, lineHeight } = this;
+        const left = title.offsetLeft + title.offsetWidth / 2;
+
+        const lineStyle = {
+          width: addUnit(lineWidth),
+          backgroundColor: this.color,
+          transform: `translateX(${left}px) translateX(-50%)`,
+        };
+
+        if (shouldAnimate) {
+          lineStyle.transitionDuration = `${this.duration}s`;
+        }
+
+        if (isDef(lineHeight)) {
+          const height = addUnit(lineHeight);
+          lineStyle.height = height;
+          lineStyle.borderRadius = height;
+        }
+
+        this.lineStyle = lineStyle;
+      });
+    },
+
+    // correct the index of active tab
+    setCurrentIndexByName(name) {
+      const matched = this.children.filter((tab) => tab.computedName === name);
+      const defaultIndex = (this.children[0] || {}).index || 0;
+      this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
+    },
+
+    setCurrentIndex(currentIndex) {
+      const newIndex = this.findAvailableTab(currentIndex);
+
+      if (!isDef(newIndex)) {
+        return;
+      }
+
+      const newTab = this.children[newIndex];
+      const newName = newTab.computedName;
+      const shouldEmitChange = this.currentIndex !== null;
+
+      this.currentIndex = newIndex;
+
+      if (newName !== this.active) {
+        this.$emit('input', newName);
+
+        if (shouldEmitChange) {
+          this.$emit('change', newName, newTab.title);
+        }
+      }
+    },
+
+    findAvailableTab(index) {
+      const diff = index < this.currentIndex ? -1 : 1;
+
+      while (index >= 0 && index < this.children.length) {
+        if (!this.children[index].disabled) {
+          return index;
+        }
+
+        index += diff;
+      }
+    },
+
+    // emit event when clicked
+    onClick(item, index) {
+      const { title, disabled, computedName } = this.children[index];
+      if (disabled) {
+        this.$emit('disabled', computedName, title);
+      } else {
+        callInterceptor({
+          interceptor: this.beforeChange,
+          args: [computedName],
+          done: () => {
+            this.setCurrentIndex(index);
+            this.scrollToCurrentContent();
+          },
+        });
+
+        this.$emit('click', computedName, title);
+        route(item.$router, item);
+      }
+    },
+
+    // scroll active tab into view
+    scrollIntoView(immediate) {
+      const { titles } = this.$refs;
+
+      if (!this.scrollable || !titles || !titles[this.currentIndex]) {
+        return;
+      }
+
+      const { nav } = this.$refs;
+      const title = titles[this.currentIndex].$el;
+      const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
+
+      scrollLeftTo(nav, to, immediate ? 0 : +this.duration);
+    },
+
+    onSticktScroll(params) {
+      this.stickyFixed = params.isFixed;
+      this.$emit('scroll', params);
+    },
+
+    // @exposed-api
+    scrollTo(name) {
+      this.$nextTick(() => {
+        this.setCurrentIndexByName(name);
+        this.scrollToCurrentContent(true);
+      });
+    },
+
+    scrollToCurrentContent(immediate = false) {
+      if (this.scrollspy) {
+        const target = this.children[this.currentIndex];
+        const el = target?.$el;
+
+        if (el) {
+          const to = getElementTop(el, this.scroller) - this.scrollOffset;
+
+          this.lockScroll = true;
+          scrollTopTo(this.scroller, to, immediate ? 0 : +this.duration, () => {
+            this.lockScroll = false;
+          });
+        }
+      }
+    },
+
+    onScroll() {
+      if (this.scrollspy && !this.lockScroll) {
+        const index = this.getCurrentIndexOnScroll();
+        this.setCurrentIndex(index);
+      }
+    },
+
+    getCurrentIndexOnScroll() {
+      const { children } = this;
+
+      for (let index = 0; index < children.length; index++) {
+        const top = getVisibleTop(children[index].$el);
+
+        if (top > this.scrollOffset) {
+          return index === 0 ? 0 : index - 1;
+        }
+      }
+
+      return children.length - 1;
+    },
+  },
+
+  render() {
+    const { type, animated, scrollable } = this;
+
+    const Nav = this.children.map((item, index) => (
+      <Title
+        ref="titles"
+        refInFor
+        type={type}
+        dot={item.dot}
+        info={item.badge ?? item.info}
+        title={item.title}
+        color={this.color}
+        style={item.titleStyle}
+        class={item.titleClass}
+        isActive={index === this.currentIndex}
+        disabled={item.disabled}
+        scrollable={scrollable}
+        activeColor={this.titleActiveColor}
+        inactiveColor={this.titleInactiveColor}
+        scopedSlots={{
+          default: () => item.slots('title'),
+        }}
+        onClick={() => {
+          this.onClick(item, index);
+        }}
+      />
+    ));
+
+    const Wrap = (
+      <div
+        ref="wrap"
+        class={[
+          bem('wrap', { scrollable }),
+          { [BORDER_TOP_BOTTOM]: type === 'line' && this.border },
+        ]}
+      >
+        <div
+          ref="nav"
+          role="tablist"
+          class={bem('nav', [type, { complete: this.scrollable }])}
+          style={this.navStyle}
+        >
+          {this.slots('nav-left')}
+          {Nav}
+          {type === 'line' && (
+            <div class={bem('line')} style={this.lineStyle} />
+          )}
+          {this.slots('nav-right')}
+        </div>
+      </div>
+    );
+
+    return (
+      <div class={bem([type])}>
+        {this.sticky ? (
+          <Sticky
+            container={this.$el}
+            offsetTop={this.offsetTop}
+            onScroll={this.onSticktScroll}
+          >
+            {Wrap}
+          </Sticky>
+        ) : (
+          Wrap
+        )}
+        <Content
+          count={this.children.length}
+          animated={animated}
+          duration={this.duration}
+          swipeable={this.swipeable}
+          currentIndex={this.currentIndex}
+          onChange={this.setCurrentIndex}
+        >
+          {this.slots()}
+        </Content>
+      </div>
+    );
+  },
+});

package/vant/tabs/index.less

@@ -0,0 +1,153 @@
+@import '../style/var';
+
+.van-tab {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 @padding-base;
+  color: @tab-text-color;
+  font-size: @tab-font-size;
+  line-height: @tab-line-height;
+  cursor: pointer;
+
+  &--active {
+    color: @tab-active-text-color;
+    font-weight: @font-weight-bold;
+  }
+
+  &--disabled {
+    color: @tab-disabled-text-color;
+    cursor: not-allowed;
+  }
+
+  &__text {
+    &--ellipsis {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__text-wrapper {
+    position: relative;
+  }
+}
+
+.van-tabs {
+  position: relative;
+
+  &__wrap {
+    overflow: hidden;
+
+    &--page-top {
+      position: fixed;
+    }
+
+    &--content-bottom {
+      top: auto;
+      bottom: 0;
+    }
+
+    &--scrollable {
+      .van-tab {
+        flex: 1 0 auto;
+        padding: 0 @padding-sm;
+      }
+
+      .van-tabs__nav {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__nav {
+    position: relative;
+    display: flex;
+    background-color: @tabs-nav-background-color;
+    user-select: none;
+
+    &--line {
+      box-sizing: content-box;
+      height: 100%;
+      padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
+    }
+
+    &--line&--complete {
+      padding-right: @padding-xs;
+      padding-left: @padding-xs;
+    }
+
+    &--card {
+      box-sizing: border-box;
+      height: @tabs-card-height;
+      margin: 0 @padding-md;
+      border: @border-width-base solid @tabs-default-color;
+      border-radius: @border-radius-sm;
+
+      .van-tab {
+        color: @tabs-default-color;
+        border-right: @border-width-base solid @tabs-default-color;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        &.van-tab--active {
+          color: @white;
+          background-color: @tabs-default-color;
+        }
+
+        &--disabled {
+          color: @tab-disabled-text-color;
+        }
+      }
+    }
+  }
+
+  &__line {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: @tabs-bottom-bar-width;
+    height: @tabs-bottom-bar-height;
+    background-color: @tabs-bottom-bar-color;
+    border-radius: @tabs-bottom-bar-height;
+  }
+
+  &__track {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    will-change: left;
+  }
+
+  &__content {
+    &--animated {
+      overflow: hidden;
+    }
+  }
+
+  &--line {
+    .van-tabs__wrap {
+      height: @tabs-line-height;
+    }
+  }
+
+  &--card {
+    > .van-tabs__wrap {
+      height: @tabs-card-height;
+    }
+  }
+}

package/vant/tabs/utils.ts

@@ -0,0 +1,53 @@
+import { raf } from '../utils/dom/raf';
+import { getScrollTop, setScrollTop } from '../utils/dom/scroll';
+
+export function scrollLeftTo(
+  scroller: HTMLElement,
+  to: number,
+  duration: number
+) {
+  let count = 0;
+  const from = scroller.scrollLeft;
+  const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
+
+  function animate() {
+    scroller.scrollLeft += (to - from) / frames;
+
+    if (++count < frames) {
+      raf(animate);
+    }
+  }
+
+  animate();
+}
+
+export function scrollTopTo(
+  scroller: HTMLElement,
+  to: number,
+  duration: number,
+  callback: Function
+) {
+  let current = getScrollTop(scroller);
+
+  const isDown = current < to;
+  const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
+  const step = (to - current) / frames;
+
+  function animate() {
+    current += step;
+
+    if ((isDown && current > to) || (!isDown && current < to)) {
+      current = to;
+    }
+
+    setScrollTop(scroller, current);
+
+    if ((isDown && current < to) || (!isDown && current > to)) {
+      raf(animate);
+    } else if (callback) {
+      raf(callback as FrameRequestCallback);
+    }
+  }
+
+  animate();
+}

package/vant/utils/constant.ts

@@ -0,0 +1,11 @@
+// color
+export const RED = '#ee0a24';
+
+// border
+export const BORDER = 'van-hairline';
+export const BORDER_TOP = `${BORDER}--top`;
+export const BORDER_LEFT = `${BORDER}--left`;
+export const BORDER_BOTTOM = `${BORDER}--bottom`;
+export const BORDER_SURROUND = `${BORDER}--surround`;
+export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
+export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;

package/vant/utils/create/bem.ts

@@ -0,0 +1,45 @@
+/**
+ * bem helper
+ * b() // 'button'
+ * b('text') // 'button__text'
+ * b({ disabled }) // 'button button--disabled'
+ * b('text', { disabled }) // 'button__text button__text--disabled'
+ * b(['disabled', 'primary']) // 'button button--disabled button--primary'
+ */
+
+export type Mod = string | { [key: string]: any };
+export type Mods = Mod | Mod[];
+
+function gen(name: string, mods?: Mods): string {
+  if (!mods) {
+    return '';
+  }
+
+  if (typeof mods === 'string') {
+    return ` ${name}--${mods}`;
+  }
+
+  if (Array.isArray(mods)) {
+    return mods.reduce<string>((ret, item) => ret + gen(name, item), '');
+  }
+
+  return Object.keys(mods).reduce(
+    (ret, key) => ret + (mods[key] ? gen(name, key) : ''),
+    ''
+  );
+}
+
+export function createBEM(name: string) {
+  return function (el?: Mods, mods?: Mods): Mods {
+    if (el && typeof el !== 'string') {
+      mods = el;
+      el = '';
+    }
+
+    el = el ? `${name}__${el}` : name;
+
+    return `${el}${gen(el, mods)}`;
+  };
+}
+
+export type BEM = ReturnType<typeof createBEM>;