xdesign-vue-next
Version:
XDesign Component for vue-next
310 lines (302 loc) • 13.7 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var addLine = require('../_chunks/dep-ad48b3a9.js');
var arrowRightSLine = require('../_chunks/dep-68b4181e.js');
var arrowLeftSLine = require('../_chunks/dep-3ac66be1.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var debounce = require('lodash/debounce');
var tabs_props = require('./props.js');
var _common_js_tabs_base = require('../_common/js/tabs/base.js');
var tabs_tabNavItem = require('./tab-nav-item.js');
var tabs_tabNavBar = require('./tab-nav-bar.js');
var hooks_useListener = require('../hooks/useListener.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useDragSort = require('../hooks/useDragSort.js');
var isFunction = require('lodash/isFunction');
require('../_chunks/dep-ac484abb.js');
require('./tab-panel-props.js');
require('../hooks/useRipple.js');
require('../hooks/useKeepAnimation.js');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('../_chunks/dep-8d10b59f.js');
require('lodash/isArray');
require('../utils/set-style.js');
require('@babel/runtime/helpers/slicedToArray');
require('../utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/camelCase');
require('lodash/isUndefined');
require('lodash/isNull');
require('lodash/isNumber');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
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__default["default"](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 = _common_js_tabs_base["default"].calculateCanToLeft,
calculateCanToRight = _common_js_tabs_base["default"].calculateCanToRight,
calcScrollLeft = _common_js_tabs_base["default"].calcScrollLeft,
scrollToLeft = _common_js_tabs_base["default"].scrollToLeft,
scrollToRight = _common_js_tabs_base["default"].scrollToRight,
moveActiveTabIntoView = _common_js_tabs_base["default"].moveActiveTabIntoView;
var TTabNav = vue.defineComponent(_objectSpread(_objectSpread({
name: "XTabNav"
}, {
resizeObserver: null
}), {}, {
props: {
theme: tabs_props["default"].theme,
panels: {
type: Array,
"default": function _default() {
return [];
}
},
value: tabs_props["default"].value,
placement: tabs_props["default"].placement,
size: tabs_props["default"].size,
disabled: tabs_props["default"].disabled,
addable: tabs_props["default"].addable,
onChange: tabs_props["default"].onChange,
onAdd: tabs_props["default"].onAdd,
onRemove: tabs_props["default"].onRemove,
dragSort: tabs_props["default"].dragSort,
onDragSort: tabs_props["default"].onDragSort
},
setup: function setup(props) {
var COMPONENT_NAME = hooks_useConfig.usePrefixClass("tabs");
var classPrefix = hooks_useConfig.usePrefixClass();
var _useCommonClassName = hooks_useConfig.useCommonClassName(),
SIZE = _useCommonClassName.SIZE;
var scrollLeft = vue.ref(0);
var canToLeft = vue.ref(false);
var canToRight = vue.ref(false);
var navsContainerRef = vue.ref();
var navsWrapRef = vue.ref();
var leftOperationsRef = vue.ref();
var toLeftBtnRef = vue.ref();
var rightOperationsRef = vue.ref();
var toRightBtnRef = vue.ref();
var activeTabRef = vue.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 = vue.computed(function () {
if (["left", "right"].includes(props.placement.toLowerCase())) return {};
return {
transform: "translate3d(".concat(-scrollLeft.value, "px, 0, 0)")
};
});
var navsContainerStyle = vue.computed(function () {
return props.addable ? {
"min-height": "48px"
} : null;
});
var iconBaseClass = vue.computed(function () {
var _ref;
return _ref = {}, _defineProperty__default["default"](_ref, "".concat(COMPONENT_NAME.value, "__btn"), true), _defineProperty__default["default"](_ref, SIZE.value.medium, props.size === "medium"), _defineProperty__default["default"](_ref, SIZE.value.large, props.size === "large"), _ref;
});
var leftIconClass = vue.computed(function () {
return _objectSpread(_defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__btn--left"), true), iconBaseClass.value);
});
var rightIconClass = vue.computed(function () {
return _objectSpread(_defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__btn--right"), true), iconBaseClass.value);
});
var addIconClass = vue.computed(function () {
return _objectSpread(_defineProperty__default["default"]({}, "".concat(COMPONENT_NAME.value, "__add-btn"), true), iconBaseClass.value);
});
var navContainerClass = vue.computed(function () {
var _ref2;
return _ref2 = {}, _defineProperty__default["default"](_ref2, "".concat(COMPONENT_NAME.value, "__nav-container"), true), _defineProperty__default["default"](_ref2, "".concat(COMPONENT_NAME.value, "__nav--card"), props.theme === "card"), _defineProperty__default["default"](_ref2, "".concat(classPrefix.value, "-is-").concat(props.placement), true), _defineProperty__default["default"](_ref2, "".concat(classPrefix.value, "-is-addable"), props.addable), _ref2;
});
var navScrollContainerClass = vue.computed(function () {
var _ref3;
return _ref3 = {}, _defineProperty__default["default"](_ref3, "".concat(COMPONENT_NAME.value, "__nav-scroll"), true), _defineProperty__default["default"](_ref3, "".concat(classPrefix.value, "-is-scrollable"), canToLeft.value || canToRight.value), _ref3;
});
var navsWrapClass = vue.computed(function () {
return ["".concat(COMPONENT_NAME.value, "__nav-wrap"), "".concat(classPrefix.value, "-is-smooth"), _defineProperty__default["default"]({}, "".concat(classPrefix.value, "-is-vertical"), props.placement === "left" || props.placement === "right")];
});
var totalAdjust = function totalAdjust() {
adjustArrowDisplay();
adjustScrollLeft();
};
vue.watch([scrollLeft, function () {
return props.placement;
}, function () {
return props.panels;
}], totalAdjust);
hooks_useListener.useResize(debounce__default["default"](totalAdjust), navsContainerRef.value);
vue.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 = hooks_useDragSort["default"](props),
setNavsWrap = _useDragSort.setNavsWrap;
vue.onMounted(function () {
setNavsWrap(navsWrapRef.value);
});
var navs = vue.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__default["default"](panel.label)) {
label = panel.label(vue.h);
} else {
label = panel.label || "\u9009\u9879\u5361".concat(index + 1);
}
var draggable = props.dragSort;
if (draggable && panel.draggable === false) {
draggable = panel.draggable;
}
return vue.createVNode(tabs_tabNavItem["default"], {
"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 [vue.createVNode("div", {
"ref": leftOperationsRef,
"class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--left")]
}, [vue.createVNode(vue.Transition, {
"name": "fade",
"mode": "out-in",
"appear": true
}, {
"default": function _default() {
return [canToLeft.value ? vue.createVNode("div", {
"ref": toLeftBtnRef,
"class": leftIconClass.value,
"onClick": function onClick() {
return handleScroll("left");
}
}, [vue.createVNode(arrowLeftSLine.__unplugin_components_2, null, null)]) : null];
}
})]), vue.createVNode("div", {
"ref": rightOperationsRef,
"class": ["".concat(COMPONENT_NAME.value, "__operations"), "".concat(COMPONENT_NAME.value, "__operations--right")]
}, [vue.createVNode(vue.Transition, {
"name": "fade",
"mode": "out-in",
"appear": true
}, {
"default": function _default() {
return [canToRight.value ? vue.createVNode("div", {
"ref": toRightBtnRef,
"class": rightIconClass.value,
"onClick": function onClick() {
return handleScroll("right");
}
}, [vue.createVNode(arrowRightSLine.__unplugin_components_3, null, null)]) : null];
}
}), props.addable ? vue.createVNode("div", {
"class": addIconClass.value,
"onClick": handleAddTab
}, [vue.createVNode(addLine.__unplugin_components_4, null, null)]) : null])];
};
var renderNavs = function renderNavs() {
return vue.createVNode("div", {
"class": navContainerClass.value
}, [vue.createVNode("div", {
"class": navScrollContainerClass.value
}, [vue.createVNode("div", {
"ref": navsWrapRef,
"class": navsWrapClass.value,
"style": wrapTransformStyle.value
}, [props.theme !== "card" && vue.createVNode(tabs_tabNavBar["default"], {
"placement": props.placement,
"value": props.value,
"navs": navs.value
}, null), navs.value])])]);
};
return function () {
return vue.createVNode("div", {
"ref": navsContainerRef,
"class": ["".concat(COMPONENT_NAME.value, "__nav")],
"style": navsContainerStyle.value
}, [renderArrows(), renderNavs()]);
};
}
}));
exports["default"] = TTabNav;
//# sourceMappingURL=tab-nav.js.map