xdesign-vue-next/es/_common/js/tabs/base.mjs.map

XDesign Component for vue-next

{"version":3,"file":"base.mjs","sources":["../../../../src/_common/js/tabs/base.ts"],"sourcesContent":["const getDomWidth = (dom: HTMLElement): number => dom?.offsetWidth || 0;\n\ntype navPlacement = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface allElementDeps {\n  activeTab?: HTMLElement;\n  navsContainer?: HTMLElement;\n  navsWrap?: HTMLElement;\n  leftOperations?: HTMLElement;\n  toLeftBtn?: HTMLElement;\n  rightOperations?: HTMLElement;\n  toRightBtn?: HTMLElement;\n}\n\nexport default {\n  /**\n   * 计算滚动条的当前偏移值，用于 resize 时调整\n   * @returns number\n   */\n  calcScrollLeft(elements: allElementDeps, scrollLeft: number): number {\n    const container = elements.navsContainer;\n    const wrap = elements.navsWrap;\n    const { rightOperations } = elements;\n    const rightOperationsZoneWidth = getDomWidth(rightOperations);\n\n    if (!wrap || !container) return scrollLeft;\n\n    const containerWidth = getDomWidth(container);\n    const wrapWidth = getDomWidth(wrap);\n\n    if (wrapWidth <= containerWidth) {\n      // 容器大于选项，则设置第一个 nav-item 和容器左边相连\n      return 0;\n    }\n\n    // 一般发生在 window.resize，容器变大，此时设置最后一个 nav-item 和容器右边相连\n    if (scrollLeft + containerWidth - rightOperationsZoneWidth > wrapWidth) {\n      return wrapWidth + rightOperationsZoneWidth - containerWidth;\n    }\n\n    return scrollLeft;\n  },\n\n  /**\n   * 计算往左滚动按钮是否应该出现\n   * @param depElement 计算时依赖的元素\n   * @param scrollLeft 当前的 scrollLeft\n   * @param placement navs 的位置\n   * @returns boolean\n   */\n  calculateCanToLeft(depElement: allElementDeps, scrollLeft: number, placement: navPlacement) {\n    if (['left', 'right'].includes(placement.toLowerCase())) {\n      return false;\n    }\n    const { navsContainer: container, navsWrap: wrap, leftOperations, toLeftBtn } = depElement;\n    if (!wrap || !container) {\n      return false;\n    }\n    const leftOperationsZoneWidth = getDomWidth(leftOperations);\n    const leftIconWidth = getDomWidth(toLeftBtn);\n\n    return scrollLeft + Math.round(leftOperationsZoneWidth - leftIconWidth) > 0;\n  },\n\n  /**\n   * 计算往右滚动按钮是否应该出现\n   * @param depElement 计算时依赖的元素\n   * @param scrollLeft 当前的偏移值\n   * @param placement navs 的位置\n   * @returns boolean\n   */\n  calculateCanToRight(depElement: allElementDeps, scrollLeft: number, placement: navPlacement) {\n    if (['left', 'right'].includes(placement.toLowerCase())) {\n      return false;\n    }\n    const { navsContainer: container, navsWrap: wrap, rightOperations, toRightBtn } = depElement;\n    if (!wrap || !container) {\n      return false;\n    }\n    const rightOperationsZoneWidth = getDomWidth(rightOperations);\n    const rightIconWidth = getDomWidth(toRightBtn);\n    return (\n      scrollLeft + getDomWidth(container) - (rightOperationsZoneWidth - rightIconWidth)\n      - getDomWidth(wrap) < -1\n    ); // 小数像素不精确，所以这里判断小于-1\n  },\n\n  /**\n   * 计算将当前 tab 滚动到可视区域的偏移值\n   * @param depElement 计算时依赖的元素\n   * @param scrollLeft 当前的偏移值\n   * @returns number\n   */\n  moveActiveTabIntoView(depElement: allElementDeps, scrollLeft: number): number {\n    const {\n      activeTab,\n      navsContainer: container,\n      navsWrap,\n      leftOperations,\n      toLeftBtn,\n      rightOperations,\n      toRightBtn,\n    } = depElement;\n    if (!activeTab) return scrollLeft;\n    const totalWidthBeforeActiveTab = activeTab.offsetLeft;\n    if (!container) return scrollLeft;\n    // 如果要当前tab左边对齐左操作栏的右边以展示完整的tab，需要获取左边操作栏的宽度\n    const _getLeftCoverWidth = () => {\n      const leftOperationsZoneWidth = getDomWidth(leftOperations);\n      const leftIconWidth = getDomWidth(toLeftBtn);\n      // 判断当前tab是不是第一个tab\n      if (totalWidthBeforeActiveTab === 0) {\n        // 如果是第一个tab要移动到最左边，则要减去左箭头的宽度，因为此时左箭头会被隐藏起来\n        return leftOperationsZoneWidth - leftIconWidth;\n      }\n      return leftOperationsZoneWidth;\n    };\n    const leftCoverWidth = _getLeftCoverWidth();\n    // 判断当前tab是不是在左边被隐藏\n    const isCurrentTabHiddenInLeftZone = scrollLeft + leftCoverWidth > totalWidthBeforeActiveTab;\n    if (isCurrentTabHiddenInLeftZone) {\n      return totalWidthBeforeActiveTab - leftCoverWidth;\n    }\n\n    // move to right\n    const activeTabWidth = activeTab.offsetWidth;\n    if (!container || !navsWrap) return scrollLeft;\n    const containerWidth = getDomWidth(container);\n    // 如果要当前tab右边对齐右操作栏的左边以展示完整的tab，需要获取右边操作栏的宽度\n    const _getRightCoverWidth = () => {\n      const rightOperationsZoneWidth = getDomWidth(rightOperations);\n      const rightIconWidth = getDomWidth(toRightBtn);\n      const wrapWidth = getDomWidth(navsWrap);\n      // 判断当前tab是不是最后一个tab，小于1是防止小数像素导致值不相等的情况\n      if (Math.abs(totalWidthBeforeActiveTab + activeTabWidth - wrapWidth) < 1) {\n        // 如果是最后一个tab，则要减去右箭头的宽度，因为此时右箭头会被隐藏\n        return rightOperationsZoneWidth - rightIconWidth;\n      }\n      return rightOperationsZoneWidth;\n    };\n    const rightCoverWidth = _getRightCoverWidth();\n    // 判断当前tab是不是在右边被隐藏\n    const isHiddenInRightZone = scrollLeft + containerWidth - rightCoverWidth\n      < totalWidthBeforeActiveTab + activeTabWidth;\n    if (isHiddenInRightZone) {\n      return totalWidthBeforeActiveTab + activeTabWidth - containerWidth + rightCoverWidth;\n    }\n    return scrollLeft;\n  },\n\n  /**\n   * 计算点击“往左按钮”时，需要的偏移值\n   * @param depElement 计算时依赖的元素\n   * @param scrollLeft 当前的偏移值\n   * @returns number\n   */\n  scrollToLeft(depElement: allElementDeps, scrollLeft: number): number {\n    const { navsContainer: container, leftOperations, toLeftBtn } = depElement;\n    if (!container) return 0;\n    const leftOperationsZoneWidth = getDomWidth(leftOperations);\n    const leftIconWidth = getDomWidth(toLeftBtn);\n    const containerWidth = getDomWidth(container);\n\n    return Math.max(-(leftOperationsZoneWidth - leftIconWidth), scrollLeft - containerWidth);\n  },\n\n  /**\n   * 计算点击“往右按钮”时，需要的偏移值\n   * @param depElement 计算时依赖的元素\n   * @param scrollLeft 当前的偏移值\n   * @returns number\n   */\n  scrollToRight(depElement: allElementDeps, scrollLeft: number): number {\n    const { navsContainer: container, navsWrap: wrap, rightOperations, toRightBtn } = depElement;\n    const rightOperationsZoneWidth = getDomWidth(rightOperations);\n    const rightIconWidth = getDomWidth(toRightBtn);\n    const containerWidth = getDomWidth(container);\n    const wrapWidth = getDomWidth(wrap);\n\n    return Math.min(\n      scrollLeft + containerWidth - rightOperationsZoneWidth - rightIconWidth,\n      wrapWidth - containerWidth + rightOperationsZoneWidth - rightIconWidth,\n    );\n  },\n};\n"],"names":["calcScrollLeft","calculateCanToLeft","calculateCanToRight","moveActiveTabIntoView","scrollToLeft","scrollToRight"],"mappings":"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"}