xdesign-vue-next/lib/tabs/tab-nav.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import { _ as __unplugin_components_4 } from '../_chunks/dep-36abe4f1.js';
import { _ as __unplugin_components_3 } from '../_chunks/dep-17236cae.js';
import { _ as __unplugin_components_2 } from '../_chunks/dep-9beabfae.js';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, ref, computed, watch, onMounted, h, createVNode, Transition } from 'vue';
import debounce from 'lodash/debounce';
import props from './props.js';
import tabBase from '../_common/js/tabs/base.js';
import TTabNavItem from './tab-nav-item.js';
import TTabNavBar from './tab-nav-bar.js';
import { useResize } from '../hooks/useListener.js';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig.js';
import useDragSort from '../hooks/useDragSort.js';
import isFunction from 'lodash/isFunction';
import '../_chunks/dep-ae5efda0.js';
import './tab-panel-props.js';
import '../hooks/useRipple.js';
import '../hooks/useKeepAnimation.js';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import 'lodash/isString';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/en_US.js';
import '../_chunks/dep-3a1cce9f.js';
import 'lodash/isArray';
import '../utils/set-style.js';
import '@babel/runtime/helpers/slicedToArray';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/camelCase';
import 'lodash/isUndefined';
import 'lodash/isNull';
import 'lodash/isNumber';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var calculateCanToLeft = tabBase.calculateCanToLeft,
  calculateCanToRight = tabBase.calculateCanToRight,
  calcScrollLeft = tabBase.calcScrollLeft,
  scrollToLeft = tabBase.scrollToLeft,
  scrollToRight = tabBase.scrollToRight,
  moveActiveTabIntoView = tabBase.moveActiveTabIntoView;
var TTabNav = defineComponent(_objectSpread(_objectSpread({
  name: "XTabNav"
}, {
  resizeObserver: null
}), {}, {
  props: {
    theme: props.theme,
    panels: {
      type: Array,
      "default": function _default() {
        return [];
      }
    },
    value: props.value,
    placement: props.placement,
    size: props.size,
    disabled: props.disabled,
    addable: props.addable,
    onChange: props.onChange,
    onAdd: props.onAdd,
    onRemove: props.onRemove,
    dragSort: props.dragSort,
    onDragSort: props.onDragSort
  },
  setup: function setup(props) {
    var COMPONENT_NAME = usePrefixClass("tabs");
    var classPrefix = usePrefixClass();
    var _useCommonClassName = useCommonClassName(),
      SIZE = _useCommonClassName.SIZE;
    var scrollLeft = ref(0);
    var canToLeft = ref(false);
    var canToRight = ref(false);
    var navsContainerRef = ref();
    var navsWrapRef = ref();
    var leftOperationsRef = ref();
    var toLeftBtnRef = ref();
    var rightOperationsRef = ref();
    var toRightBtnRef = ref();
    var activeTabRef = ref();
    var getRefs = function getRefs() {
      return {
        navsContainer: navsContainerRef.value,
        navsWrap: navsWrapRef.value,
        leftOperations: leftOperationsRef.value,
        toLeftBtn: toLeftBtnRef.value,
        rightOperations: rightOperationsRef.value,
        toRightBtn: toRightBtnRef.value
      };
    };
    var wrapTransformStyle = computed(function () {
      if (["left", "right"].includes(props.placement.toLowerCase())) return {};
      return {
        transform: "translate3d(".concat(-scrollLeft.value, "px, 0, 0)")
      };
    });
    var navsContainerStyle = computed(function () {
      return props.addable ? {
        "min-height": "48px"
      } : null;
    });
    var iconBaseClass = computed(function () {
      var _ref;
      return _ref = {}, _defineProperty(_ref, "".concat(COMPONENT_NAME.value, "__btn"), true), _defineProperty(_ref, SIZE.value.medium, props.size === "medium"), _defineProperty(_ref, SIZE.value.large, props.size === "large"), _ref;
    });
    var leftIconClass = computed(function () {
      return _objectSpread(_defineProperty({}, "".concat(COMPONENT_NAME.value, "__btn--left"), true), iconBaseClass.value);
    });
    var rightIconClass = computed(function () {
      return _objectSpread(_defineProperty({}, "".concat(COMPONENT_NAME.value, "__btn--right"), true), iconBaseClass.value);
    });
    var addIconClass = computed(function () {
      return _objectSpread(_defineProperty({}, "".concat(COMPONENT_NAME.value, "__add-btn"), true), iconBaseClass.value);
    });
    var navContainerClass = computed(function () {
      var _ref2;
      return _ref2 = {}, _defineProperty(_ref2, "".concat(COMPONENT_NAME.value, "__nav-container"), true), _defineProperty(_ref2, "".concat(COMPONENT_NAME.value, "__nav--card"), props.theme === "card"), _defineProperty(_ref2, "".concat(classPrefix.value, "-is-").concat(props.placement), true), _defineProperty(_ref2, "".concat(classPrefix.value, "-is-addable"), props.addable), _ref2;
    });
    var navScrollContainerClass = computed(function () {
      var _ref3;
      return _ref3 = {}, _defineProperty(_ref3, "".concat(COMPONENT_NAME.value, "__nav-scroll"), true), _defineProperty(_ref3, "".concat(classPrefix.value, "-is-scrollable"), canToLeft.value || canToRight.value), _ref3;
    });
    var navsWrapClass = computed(function () {
      return ["".concat(COMPONENT_NAME.value, "__nav-wrap"), "".concat(classPrefix.value, "-is-smooth"), _defineProperty({}, "".concat(classPrefix.value, "-is-vertical"), props.placement === "left" || props.placement === "right")];
    });
    var totalAdjust = function totalAdjust() {
      adjustArrowDisplay();
      adjustScrollLeft();
    };
    watch([scrollLeft, function () {
      return props.placement;
    }, function () {
      return props.panels;
    }], totalAdjust);
    useResize(debounce(totalAdjust), navsContainerRef.value);
    onMounted(totalAdjust);
    var adjustScrollLeft = function adjustScrollLeft() {
      scrollLeft.value = calcScrollLeft(getRefs(), scrollLeft.value);
    };
    var adjustArrowDisplay = function adjustArrowDisplay() {
      canToLeft.value = calculateCanToLeft(getRefs(), scrollLeft.value, props.placement);
      canToRight.value = calculateCanToRight(getRefs(), scrollLeft.value, props.placement);
    };
    var handleScroll = function handleScroll(direction) {
      if (direction === "left") {
        scrollLeft.value = scrollToLeft(getRefs(), scrollLeft.value);
      } else {
        scrollLeft.value = scrollToRight(getRefs(), scrollLeft.value);
      }
    };
    var handleAddTab = function handleAddTab(e) {
      var _props$onAdd;
      (_props$onAdd = props.onAdd) === null || _props$onAdd === void 0 ? void 0 : _props$onAdd.call(props, {
        e: e
      });
    };
    var tabClick = function tabClick(event, nav) {
      var value = nav.value,
        disabled = nav.disabled;
      if (disabled || props.value === value) {
        return false;
      }
      props.onChange(value);
    };
    var removeBtnClick = function removeBtnClick(_ref5) {
      var e = _ref5.e,
        value = _ref5.value,
        index = _ref5.index;
      props.onRemove({
        e: e,
        value: value,
        index: index
      });
    };
    var setActiveTab = function setActiveTab(ref2) {
      if ((ref2 === null || ref2 === void 0 ? void 0 : ref2.value) === props.value && activeTabRef.value !== ref2.$el) {
        activeTabRef.value = ref2.$el;
        scrollLeft.value = moveActiveTabIntoView(_objectSpread({
          activeTab: activeTabRef.value
        }, getRefs()), scrollLeft.value);
      }
    };
    var _useDragSort = useDragSort(props),
      setNavsWrap = _useDragSort.setNavsWrap;
    onMounted(function () {
      setNavsWrap(navsWrapRef.value);
    });
    var navs = computed(function () {
      return props.panels.map(function (panel, index) {
        var _panel$children;
        var label;
        if (panel !== null && panel !== void 0 && (_panel$children = panel.children) !== null && _panel$children !== void 0 && _panel$children.label) {
          label = panel.children.label();
        } else if (isFunction(panel.label)) {
          label = panel.label(h);
        } else {
          label = panel.label || "\u9009\u9879\u5361".concat(index + 1);
        }
        var draggable = props.dragSort;
        if (draggable && panel.draggable === false) {
          draggable = panel.draggable;
        }
        return createVNode(TTabNavItem, {
          "ref": setActiveTab,
          "draggable": draggable,
          "key": panel.value,
          "index": index,
          "theme": props.theme,
          "size": props.size,
          "placement": props.placement,
          "label": label,
          "active": panel.value === props.value,
          "disabled": props.disabled || panel.disabled,
          "removable": panel.removable,
          "value": panel.value,
          "onClick": function onClick(e) {
            return tabClick(e, panel);
          },
          "onRemove": removeBtnClick
        }, null);
      });
    });
    var renderArrows = function renderArrows() {
      return [createVNode("div", {
        "ref": leftOperationsRef,
        "class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--left")]
      }, [createVNode(Transition, {
        "name": "fade",
        "mode": "out-in",
        "appear": true
      }, {
        "default": function _default() {
          return [canToLeft.value ? createVNode("div", {
            "ref": toLeftBtnRef,
            "class": leftIconClass.value,
            "onClick": function onClick() {
              return handleScroll("left");
            }
          }, [createVNode(__unplugin_components_2, null, null)]) : null];
        }
      })]), createVNode("div", {
        "ref": rightOperationsRef,
        "class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--right")]
      }, [createVNode(Transition, {
        "name": "fade",
        "mode": "out-in",
        "appear": true
      }, {
        "default": function _default() {
          return [canToRight.value ? createVNode("div", {
            "ref": toRightBtnRef,
            "class": rightIconClass.value,
            "onClick": function onClick() {
              return handleScroll("right");
            }
          }, [createVNode(__unplugin_components_3, null, null)]) : null];
        }
      }), props.addable ? createVNode("div", {
        "class": addIconClass.value,
        "onClick": handleAddTab
      }, [createVNode(__unplugin_components_4, null, null)]) : null])];
    };
    var renderNavs = function renderNavs() {
      return createVNode("div", {
        "class": navContainerClass.value
      }, [createVNode("div", {
        "class": navScrollContainerClass.value
      }, [createVNode("div", {
        "ref": navsWrapRef,
        "class": navsWrapClass.value,
        "style": wrapTransformStyle.value
      }, [props.theme !== "card" && createVNode(TTabNavBar, {
        "placement": props.placement,
        "value": props.value,
        "navs": navs.value
      }, null), navs.value])])]);
    };
    return function () {
      return createVNode("div", {
        "ref": navsContainerRef,
        "class": ["".concat(COMPONENT_NAME.value, "__nav")],
        "style": navsContainerStyle.value
      }, [renderArrows(), renderNavs()]);
    };
  }
}));

export { TTabNav as default };
//# sourceMappingURL=tab-nav.js.map