vue-admin-core
Version:
A Component Library for Vue 3
311 lines (308 loc) • 9.87 kB
JavaScript
import { defineComponent, ref, watchEffect, h } from 'vue';
import { ElBadge, ElCollapseItem, ElRow, ElCollapse, ElCard, ElEmpty } from 'element-plus';
import { useField, useFieldSchema, RecursionField } from '@formily/vue';
import { observer } from '@formily/reactive-vue';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { ArrayBase } from '../../array-base/src/index.mjs';
import '../../__builtins__/shared/index.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';
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 = observer(
defineComponent({
name: "FArrayCollapse",
props: {
defaultOpenPanelCount: {
type: Number,
default: 5
},
onChange: { type: Function }
},
setup(props, { attrs }) {
const fieldRef = useField();
const schemaRef = useFieldSchema();
const prefixCls = `${stylePrefix}-array-collapse`;
const activeKeys = ref([]);
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 } = 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 = h(
ArrayBase.Item,
{
index,
record: item
},
{
default: () => [
h(
RecursionField,
{
schema: items2,
name: index,
filterProperties: (schema2) => {
if (!isIndexComponent(schema2))
return false;
return true;
},
onlyRenderProperties: true
},
{}
),
errors.length ? h(
ElBadge,
{
class: [`${prefixCls}-errors-badge`],
value: errors.length
},
{ default: () => headerTitle }
) : headerTitle
]
}
);
const extra = h(
ArrayBase.Item,
{
index,
record: item
},
{
default: () => [
h(
RecursionField,
{
schema: items2,
name: index,
filterProperties: (schema2) => {
if (!isOperationComponent(schema2))
return false;
return true;
},
onlyRenderProperties: true
},
{}
)
]
}
);
const content = h(
RecursionField,
{
schema: items2,
name: index,
filterProperties: (schema2) => {
if (isIndexComponent(schema2))
return false;
if (isOperationComponent(schema2))
return false;
return true;
}
},
{}
);
return h(
ElCollapseItem,
{
...props2,
...panelProps,
name: index,
key
},
{
default: () => [
h(
ArrayBase.Item,
{
index,
record: item
},
{
default: () => [content]
}
)
],
title: () => {
return h(
ElRow,
{
style: { flex: 1 },
type: "flex",
justify: "space-between"
},
{
default: () => [
// title(),
// extra
h("span", {}, title),
h("span", {}, extra)
]
}
);
}
}
);
});
return h(
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 h(
RecursionField,
{
schema: schema2,
name: "addition"
},
{}
);
}
return addition;
}, null);
};
const renderEmpty = () => {
if (dataSource == null ? void 0 : dataSource.length)
return;
return h(
ElCard,
{
class: [`${prefixCls}-item`],
shadow: "never",
...attrs,
header: attrs.title || field.title
},
{
default: () => h(ElEmpty, { description: "No Data", imageSize: 100 }, {})
}
);
};
return h(
"div",
{
class: [prefixCls]
},
h(
ArrayBase,
{
keyMap,
add: (index) => {
activeKeys.value = insertActiveKeys(
activeKeys.value,
index,
attrs.accordion
);
}
},
{
default: () => [renderEmpty(), renderItems(), renderAddition()]
}
)
);
};
}
})
);
const ArrayCollapseItem = defineComponent({
name: "FArrayCollapseItem",
setup(_props, { slots }) {
return () => h("div", {}, slots);
}
});
const ArrayCollapse = composeExport(ArrayCollapseInner, {
Item: ArrayCollapseItem,
Index: ArrayBase.Index,
SortHandle: ArrayBase.SortHandle,
Addition: ArrayBase.Addition,
Remove: ArrayBase.Remove,
MoveDown: ArrayBase.MoveDown,
MoveUp: ArrayBase.MoveUp,
useArray: ArrayBase.useArray,
useIndex: ArrayBase.useIndex,
useRecord: ArrayBase.useRecord
});
export { ArrayCollapse, ArrayCollapseInner, ArrayCollapseItem, ArrayCollapse as default };
//# sourceMappingURL=index.mjs.map