vue-admin-core
Version:
A Component Library for Vue 3
318 lines (313 loc) • 10.2 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var elementPlus = require('element-plus');
var vue$1 = require('@formily/vue');
var reactiveVue = require('@formily/reactive-vue');
var index = require('../../__builtins__/configs/index.js');
var index$1 = require('../../array-base/src/index.js');
require('../../__builtins__/shared/index.js');
var utils = require('../../__builtins__/shared/utils.js');
const isAdditionComponent = (schema) => {
var _a;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Addition")) > -1;
};
const isIndexComponent = (schema) => {
var _a;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Index")) > -1;
};
const isRemoveComponent = (schema) => {
var _a;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("Remove")) > -1;
};
const isMoveUpComponent = (schema) => {
var _a;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("MoveUp")) > -1;
};
const isMoveDownComponent = (schema) => {
var _a;
return ((_a = schema["x-component"]) == null ? void 0 : _a.indexOf("MoveDown")) > -1;
};
const isOperationComponent = (schema) => {
return isAdditionComponent(schema) || isRemoveComponent(schema) || isMoveDownComponent(schema) || isMoveUpComponent(schema);
};
const range = (count) => Array.from({ length: count }).map((_, i) => i);
const takeDefaultActiveKeys = (dataSourceLength, defaultOpenPanelCount, accordion = false) => {
if (accordion) {
return 0;
}
if (dataSourceLength < defaultOpenPanelCount)
return range(dataSourceLength);
return range(defaultOpenPanelCount);
};
const insertActiveKeys = (activeKeys, index, accordion = false) => {
if (accordion)
return index;
if (activeKeys.length <= index)
return activeKeys.concat(index);
return activeKeys.reduce((buf, key) => {
if (key < index)
return buf.concat(key);
if (key === index)
return buf.concat([key, key + 1]);
return buf.concat(key + 1);
}, []);
};
const ArrayCollapseInner = reactiveVue.observer(
vue.defineComponent({
name: "FArrayCollapse",
props: {
defaultOpenPanelCount: {
type: Number,
default: 5
},
onChange: { type: Function }
},
setup(props, { attrs }) {
const fieldRef = vue$1.useField();
const schemaRef = vue$1.useFieldSchema();
const prefixCls = `${index.stylePrefix}-array-collapse`;
const activeKeys = vue.ref([]);
vue.watchEffect(() => {
const field = fieldRef.value;
const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
if (!field.modified && dataSource.length) {
activeKeys.value = takeDefaultActiveKeys(
dataSource.length,
props.defaultOpenPanelCount,
attrs.accordion
);
}
});
const { getKey, keyMap } = index$1.ArrayBase.useKey(schemaRef.value);
return () => {
const field = fieldRef.value;
const schema = schemaRef.value;
const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
if (!schema)
throw new Error("can not found schema object");
const renderItems = () => {
if (!dataSource.length) {
return null;
}
const items = dataSource == null ? void 0 : dataSource.map((item, index) => {
const items2 = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
const key = getKey(item, index);
const panelProps = field.query(`${field.address}.${index}`).get("componentProps");
const props2 = items2 == null ? void 0 : items2["x-component-props"];
const headerTitle = (panelProps == null ? void 0 : panelProps.title) || props2.title || field.title;
const path = field.address.concat(index);
const errors = field.form.queryFeedbacks({
type: "error",
address: `${path}.**`
});
const title = vue.h(
index$1.ArrayBase.Item,
{
index,
record: item
},
{
default: () => [
vue.h(
vue$1.RecursionField,
{
schema: items2,
name: index,
filterProperties: (schema2) => {
if (!isIndexComponent(schema2))
return false;
return true;
},
onlyRenderProperties: true
},
{}
),
errors.length ? vue.h(
elementPlus.ElBadge,
{
class: [`${prefixCls}-errors-badge`],
value: errors.length
},
{ default: () => headerTitle }
) : headerTitle
]
}
);
const extra = vue.h(
index$1.ArrayBase.Item,
{
index,
record: item
},
{
default: () => [
vue.h(
vue$1.RecursionField,
{
schema: items2,
name: index,
filterProperties: (schema2) => {
if (!isOperationComponent(schema2))
return false;
return true;
},
onlyRenderProperties: true
},
{}
)
]
}
);
const content = vue.h(
vue$1.RecursionField,
{
schema: items2,
name: index,
filterProperties: (schema2) => {
if (isIndexComponent(schema2))
return false;
if (isOperationComponent(schema2))
return false;
return true;
}
},
{}
);
return vue.h(
elementPlus.ElCollapseItem,
{
...props2,
...panelProps,
name: index,
key
},
{
default: () => [
vue.h(
index$1.ArrayBase.Item,
{
index,
record: item
},
{
default: () => [content]
}
)
],
title: () => {
return vue.h(
elementPlus.ElRow,
{
style: { flex: 1 },
type: "flex",
justify: "space-between"
},
{
default: () => [
// title(),
// extra
vue.h("span", {}, title),
vue.h("span", {}, extra)
]
}
);
}
}
);
});
return vue.h(
elementPlus.ElCollapse,
{
class: [`${prefixCls}-item`],
...attrs,
modelValue: activeKeys.value,
onChange: (keys) => {
activeKeys.value = keys;
}
},
{
default: () => [items]
}
);
};
const renderAddition = () => {
return schema.reduceProperties((addition, schema2) => {
if (isAdditionComponent(schema2)) {
return vue.h(
vue$1.RecursionField,
{
schema: schema2,
name: "addition"
},
{}
);
}
return addition;
}, null);
};
const renderEmpty = () => {
if (dataSource == null ? void 0 : dataSource.length)
return;
return vue.h(
elementPlus.ElCard,
{
class: [`${prefixCls}-item`],
shadow: "never",
...attrs,
header: attrs.title || field.title
},
{
default: () => vue.h(elementPlus.ElEmpty, { description: "No Data", imageSize: 100 }, {})
}
);
};
return vue.h(
"div",
{
class: [prefixCls]
},
vue.h(
index$1.ArrayBase,
{
keyMap,
add: (index) => {
activeKeys.value = insertActiveKeys(
activeKeys.value,
index,
attrs.accordion
);
}
},
{
default: () => [renderEmpty(), renderItems(), renderAddition()]
}
)
);
};
}
})
);
const ArrayCollapseItem = vue.defineComponent({
name: "FArrayCollapseItem",
setup(_props, { slots }) {
return () => vue.h("div", {}, slots);
}
});
const ArrayCollapse = utils.composeExport(ArrayCollapseInner, {
Item: ArrayCollapseItem,
Index: index$1.ArrayBase.Index,
SortHandle: index$1.ArrayBase.SortHandle,
Addition: index$1.ArrayBase.Addition,
Remove: index$1.ArrayBase.Remove,
MoveDown: index$1.ArrayBase.MoveDown,
MoveUp: index$1.ArrayBase.MoveUp,
useArray: index$1.ArrayBase.useArray,
useIndex: index$1.ArrayBase.useIndex,
useRecord: index$1.ArrayBase.useRecord
});
exports.ArrayCollapse = ArrayCollapse;
exports.ArrayCollapseInner = ArrayCollapseInner;
exports.ArrayCollapseItem = ArrayCollapseItem;
exports.default = ArrayCollapse;
//# sourceMappingURL=index.js.map