ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
266 lines (222 loc) • 10.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SiderProps = void 0;
var _vue = require("vue");
var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _type = require("../_util/type");
var _propsUtil = require("../_util/props-util");
var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
var _isNumeric = _interopRequireDefault(require("../_util/isNumeric"));
var _configProvider = require("../config-provider");
var _BarsOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/BarsOutlined"));
var _RightOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/RightOutlined"));
var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/LeftOutlined"));
var _omit = _interopRequireDefault(require("omit.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
var dimensionMaxMap = {
xs: '479.98px',
sm: '575.98px',
md: '767.98px',
lg: '991.98px',
xl: '1199.98px',
xxl: '1599.98px'
};
var SiderProps = {
prefixCls: _vueTypes.default.string,
collapsible: _vueTypes.default.looseBool,
collapsed: _vueTypes.default.looseBool,
defaultCollapsed: _vueTypes.default.looseBool,
reverseArrow: _vueTypes.default.looseBool,
zeroWidthTriggerStyle: _vueTypes.default.style,
trigger: _vueTypes.default.VNodeChild,
width: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string]),
collapsedWidth: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string]),
breakpoint: _vueTypes.default.oneOf((0, _type.tuple)('xs', 'sm', 'md', 'lg', 'xl', 'xxl')),
theme: _vueTypes.default.oneOf((0, _type.tuple)('light', 'dark')).def('dark'),
onBreakpoint: Function,
onCollapse: Function
};
exports.SiderProps = SiderProps;
var generateId = function () {
var i = 0;
return function () {
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
i += 1;
return "".concat(prefix).concat(i);
};
}();
var _default = (0, _vue.defineComponent)({
name: 'ALayoutSider',
mixins: [_BaseMixin.default],
inheritAttrs: false,
__ANT_LAYOUT_SIDER: true,
props: (0, _initDefaultProps.default)(SiderProps, {
collapsible: false,
defaultCollapsed: false,
reverseArrow: false,
width: 200,
collapsedWidth: 80
}),
emits: ['breakpoint', 'update:collapsed', 'collapse'],
setup: function setup() {
return {
siderHook: (0, _vue.inject)('siderHook', {}),
configProvider: (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider)
};
},
data: function data() {
var uniqueId = generateId('ant-sider-');
var matchMedia;
if (typeof window !== 'undefined') {
matchMedia = window.matchMedia;
}
var props = (0, _propsUtil.getOptionProps)(this);
var mql;
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
mql = matchMedia("(max-width: ".concat(dimensionMaxMap[props.breakpoint], ")"));
}
var sCollapsed;
if ('collapsed' in props) {
sCollapsed = props.collapsed;
} else {
sCollapsed = props.defaultCollapsed;
}
return {
sCollapsed: sCollapsed,
below: false,
belowShow: false,
uniqueId: uniqueId,
mql: mql
};
},
watch: {
collapsed: function collapsed(val) {
this.setState({
sCollapsed: val
});
}
},
created: function created() {
(0, _vue.provide)('layoutSiderContext', this); // menu组件中使用
},
mounted: function mounted() {
var _this = this;
(0, _vue.nextTick)(function () {
if (_this.mql) {
_this.mql.addListener(_this.responsiveHandler);
_this.responsiveHandler(_this.mql);
}
if (_this.siderHook.addSider) {
_this.siderHook.addSider(_this.uniqueId);
}
});
},
beforeUnmount: function beforeUnmount() {
if (this.mql) {
this.mql.removeListener(this.responsiveHandler);
}
if (this.siderHook.removeSider) {
this.siderHook.removeSider(this.uniqueId);
}
},
methods: {
responsiveHandler: function responsiveHandler(mql) {
this.setState({
below: mql.matches
});
this.$emit('breakpoint', mql.matches);
if (this.sCollapsed !== mql.matches) {
this.setCollapsed(mql.matches, 'responsive');
}
},
setCollapsed: function setCollapsed(collapsed, type) {
if (!(0, _propsUtil.hasProp)(this, 'collapsed')) {
this.setState({
sCollapsed: collapsed
});
}
this.$emit('update:collapsed', collapsed);
this.$emit('collapse', collapsed, type);
},
toggle: function toggle() {
var collapsed = !this.sCollapsed;
this.setCollapsed(collapsed, 'clickTrigger');
},
belowShowChange: function belowShowChange() {
this.setState({
belowShow: !this.belowShow
});
}
},
render: function render() {
var _classNames;
var _a = _extends(_extends({}, (0, _propsUtil.getOptionProps)(this)), this.$attrs),
customizePrefixCls = _a.prefixCls,
className = _a.class,
theme = _a.theme,
collapsible = _a.collapsible,
reverseArrow = _a.reverseArrow,
style = _a.style,
width = _a.width,
collapsedWidth = _a.collapsedWidth,
zeroWidthTriggerStyle = _a.zeroWidthTriggerStyle,
others = __rest(_a, ["prefixCls", "class", "theme", "collapsible", "reverseArrow", "style", "width", "collapsedWidth", "zeroWidthTriggerStyle"]);
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
var divProps = (0, _omit.default)(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint', 'siderHook', 'zeroWidthTriggerStyle', 'trigger']);
var trigger = (0, _propsUtil.getComponent)(this, 'trigger');
var rawWidth = this.sCollapsed ? collapsedWidth : width; // use "px" as fallback unit for width
var siderWidth = (0, _isNumeric.default)(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth); // special trigger when collapsedWidth == 0
var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? (0, _vue.createVNode)("span", {
"onClick": this.toggle,
"class": "".concat(prefixCls, "-zero-width-trigger ").concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left'),
"style": zeroWidthTriggerStyle
}, [(0, _vue.createVNode)(_BarsOutlined.default, null, null)]) : null;
var iconObj = {
expanded: reverseArrow ? (0, _vue.createVNode)(_RightOutlined.default, null, null) : (0, _vue.createVNode)(_LeftOutlined.default, null, null),
collapsed: reverseArrow ? (0, _vue.createVNode)(_LeftOutlined.default, null, null) : (0, _vue.createVNode)(_RightOutlined.default, null, null)
};
var status = this.sCollapsed ? 'collapsed' : 'expanded';
var defaultTrigger = iconObj[status];
var triggerDom = trigger !== null ? zeroWidthTrigger || (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-trigger"),
"onClick": this.toggle,
"style": {
width: siderWidth
}
}, [trigger || defaultTrigger]) : null;
var divStyle = _extends(_extends({}, style), {
flex: "0 0 ".concat(siderWidth),
maxWidth: siderWidth,
minWidth: siderWidth,
width: siderWidth
});
var siderCls = (0, _classNames2.default)(className, prefixCls, "".concat(prefixCls, "-").concat(theme), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), !!this.sCollapsed), _defineProperty(_classNames, "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, "".concat(prefixCls, "-below"), !!this.below), _defineProperty(_classNames, "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), _classNames));
return (0, _vue.createVNode)("aside", _objectSpread(_objectSpread({
"class": siderCls
}, divProps), {}, {
"style": divStyle
}), [(0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-children")
}, [(0, _propsUtil.getSlot)(this)]), collapsible || this.below && zeroWidthTrigger ? triggerDom : null]);
}
});
exports.default = _default;