cyber-web-ui
Version:
spring-cyber前端ui框架
148 lines • 6.66 kB
JavaScript
import { withDirectives as _withDirectives, vShow as _vShow, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import Icon from '../icon/index';
import { maintainStore } from '../_utils/store';
import isWindows from '../_utils/is-windows.js';
import { Button as AButton } from 'ant-design-vue';
import { filterEmpty } from "../_utils/index.js";
import { reactive, defineComponent, onMounted, onUnmounted, ref, watch, nextTick } from "vue";
var collapseForm = defineComponent({
name: "CCollapseForm",
props: {
// 加载中
loading: {
type: Boolean,
default: false
},
// 是否使用收缩功能
shrink: {
type: Boolean,
default: false
},
showReload: {
type: Boolean,
default: true
}
},
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
slots = _ref.slots,
emit = _ref.emit,
expose = _ref.expose;
var rightRef = ref();
var collapseRef = ref();
var collapseFormState = reactive({
showMore: false,
showHidden: false,
resizeSymbol: Symbol('collapse-form')
});
var changeShrink = function changeShrink() {
collapseFormState.showHidden = !collapseFormState.showHidden;
};
var listener = function listener() {
nextTick(function () {
var _collapseRef$value;
if ((_collapseRef$value = collapseRef.value) !== null && _collapseRef$value !== void 0 && _collapseRef$value.children) {
var offsetTop = collapseRef.value.offsetTop;
var list = Array.from(collapseRef.value.querySelectorAll(".cyber-collapse-form-item"));
collapseFormState.showMore = list.some(function (item) {
return item.offsetTop > offsetTop;
});
}
});
};
onMounted(function () {
watch(function () {
return rightRef.value;
}, function () {
listener();
}, {
immediate: true
});
if (isWindows()) {
// 监听resize
maintainStore().resizeState[collapseFormState.resizeSymbol] = listener;
}
});
onUnmounted(function () {
if (isWindows()) {
// 取消监听resize
delete maintainStore().resizeState[collapseFormState.resizeSymbol];
}
});
return function () {
function defaultSlot() {
var _slots$default;
return filterEmpty(((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || []).map(function (item) {
if (/Select$/.test(item.type.name)) {
item.props = _objectSpread({
getPopupContainer: function getPopupContainer(triggerNode) {
return triggerNode.parentNode.parentNode;
}
}, item.props || {});
}
return _createVNode("div", {
"class": "cyber-collapse-form-item"
}, [item]);
});
}
function rightSlot() {
var list = filterEmpty(slots.right ? slots.right() : []);
if (list.length) return _createVNode("div", {
"class": "cyber-collapse-form-right",
"ref": rightRef
}, [list]);
}
function reloadSlot() {
if (!props.showReload) return;
return _createVNode(AButton, {
"type": "text",
"disabled": props.loading,
"class": "collapse-form-search-button",
"onClick": function onClick() {
if (props.loading) return;
emit("search");
}
}, {
default: function _default() {
return [slots.reloadIcon ? slots.reloadIcon() : _createVNode(Icon, {
"icon": "cyber-shuaxin",
"size": "16"
}, null)];
}
});
}
function shrinkSlot() {
if (!props.shrink) return;
return _withDirectives(_createVNode("div", {
"class": ["cyber-collapse-shrink", {
spread: collapseFormState.showHidden
}],
"onClick": changeShrink
}, [_withDirectives(_createVNode("span", null, [_createTextVNode("\u66F4\u591A")]), [[_vShow, !collapseFormState.showHidden]]), _withDirectives(_createVNode("span", null, [_createTextVNode("\u6536\u8D77")]), [[_vShow, collapseFormState.showHidden]]), _createVNode(Icon, {
"icon": "cyber-collapse",
"size": "16"
}, null)]), [[_vShow, collapseFormState.showMore]]);
}
return _createVNode("div", {
"class": ["cyber-collapse-form", {
'cyber-collapse-form-shrink': props.shrink
}, {
show: collapseFormState.showHidden
}],
"ref": collapseRef
}, [rightSlot(), _createVNode("div", {
"class": "cyber-collapse-action-box"
}, [shrinkSlot(), reloadSlot()]), defaultSlot()]);
};
}
});
collapseForm.install = function (app) {
app.component(collapseForm.name, collapseForm);
};
export default collapseForm;