first commit

This commit is contained in:
root
2026-04-08 17:52:38 +08:00
commit 70a2ca66f3
12436 changed files with 1921163 additions and 0 deletions
@@ -0,0 +1,6 @@
import { useCheck } from "./use-check.js";
import { useCheckedChange } from "./use-checked-change.js";
import { useComputedData } from "./use-computed-data.js";
import { useMove } from "./use-move.js";
import { usePropsAlias } from "./use-props-alias.js";
export { useCheck, useCheckedChange, useComputedData, useMove, usePropsAlias };
@@ -0,0 +1,7 @@
import { usePropsAlias } from "./use-props-alias.mjs";
import { useCheck } from "./use-check.mjs";
import { useCheckedChange } from "./use-checked-change.mjs";
import { useComputedData } from "./use-computed-data.mjs";
import { useMove } from "./use-move.mjs";
export { useCheck, useCheckedChange, useComputedData, useMove, usePropsAlias };
@@ -0,0 +1,20 @@
import { CheckboxValueType } from "../../../checkbox/src/checkbox.js";
import "../../../checkbox/index.js";
import { TransferDataItem } from "../transfer.js";
import { TransferPanelEmits, TransferPanelProps, TransferPanelState } from "../transfer-panel.js";
import * as vue from "vue";
import { SetupContext } from "vue";
//#region ../../packages/components/transfer/src/composables/use-check.d.ts
declare const useCheck: (props: Required<Pick<TransferPanelProps, "data" | "format" | "defaultChecked">> & {
filterMethod: TransferPanelProps["filterMethod"];
}, panelState: TransferPanelState, emit: SetupContext<TransferPanelEmits>["emit"]) => {
filteredData: vue.ComputedRef<TransferDataItem[]>;
checkableData: vue.ComputedRef<TransferDataItem[]>;
checkedSummary: vue.ComputedRef<string>;
isIndeterminate: vue.ComputedRef<boolean>;
updateAllChecked: () => void;
handleAllCheckedChange: (value: CheckboxValueType) => void;
};
//#endregion
export { useCheck };
@@ -0,0 +1,76 @@
import { isFunction } from "../../../../utils/types.mjs";
import { CHECKED_CHANGE_EVENT } from "../transfer-panel.mjs";
import { usePropsAlias } from "./use-props-alias.mjs";
import { computed, watch } from "vue";
//#region ../../packages/components/transfer/src/composables/use-check.ts
const useCheck = (props, panelState, emit) => {
const propsAlias = usePropsAlias(props);
const filteredData = computed(() => {
return props.data.filter((item) => {
if (isFunction(props.filterMethod)) return props.filterMethod(panelState.query, item);
else return String(item[propsAlias.value.label] || item[propsAlias.value.key]).toLowerCase().includes(panelState.query.toLowerCase());
});
});
const checkableData = computed(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled]));
const checkedSummary = computed(() => {
const checkedLength = panelState.checked.length;
const dataLength = props.data.length;
const { noChecked, hasChecked } = props.format;
if (noChecked && hasChecked) return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString());
else return `${checkedLength}/${dataLength}`;
});
const isIndeterminate = computed(() => {
const checkedLength = panelState.checked.length;
return checkedLength > 0 && checkedLength < checkableData.value.length;
});
const updateAllChecked = () => {
const checkableDataKeys = checkableData.value.map((item) => item[propsAlias.value.key]);
panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every((item) => panelState.checked.includes(item));
};
const handleAllCheckedChange = (value) => {
panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : [];
};
watch(() => panelState.checked, (val, oldVal) => {
updateAllChecked();
if (panelState.checkChangeByUser) emit(CHECKED_CHANGE_EVENT, val, val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v)));
else {
emit(CHECKED_CHANGE_EVENT, val);
panelState.checkChangeByUser = true;
}
});
watch(checkableData, () => {
updateAllChecked();
});
watch(() => props.data, () => {
const checked = [];
const filteredDataKeys = filteredData.value.map((item) => item[propsAlias.value.key]);
panelState.checked.forEach((item) => {
if (filteredDataKeys.includes(item)) checked.push(item);
});
panelState.checkChangeByUser = false;
panelState.checked = checked;
});
watch(() => props.defaultChecked, (val, oldVal) => {
if (oldVal && val.length === oldVal.length && val.every((item) => oldVal.includes(item))) return;
const checked = [];
const checkableDataKeys = checkableData.value.map((item) => item[propsAlias.value.key]);
val.forEach((item) => {
if (checkableDataKeys.includes(item)) checked.push(item);
});
panelState.checkChangeByUser = false;
panelState.checked = checked;
}, { immediate: true });
return {
filteredData,
checkableData,
checkedSummary,
isIndeterminate,
updateAllChecked,
handleAllCheckedChange
};
};
//#endregion
export { useCheck };
//# sourceMappingURL=use-check.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,10 @@
import { TransferCheckedState, TransferEmits, TransferKey } from "../transfer.js";
import { SetupContext } from "vue";
//#region ../../packages/components/transfer/src/composables/use-checked-change.d.ts
declare const useCheckedChange: (checkedState: TransferCheckedState, emit: SetupContext<TransferEmits>["emit"]) => {
onSourceCheckedChange: (val: TransferKey[], movedKeys?: TransferKey[]) => void;
onTargetCheckedChange: (val: TransferKey[], movedKeys?: TransferKey[]) => void;
};
//#endregion
export { useCheckedChange };
@@ -0,0 +1,23 @@
import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT } from "../transfer.mjs";
//#region ../../packages/components/transfer/src/composables/use-checked-change.ts
const useCheckedChange = (checkedState, emit) => {
const onSourceCheckedChange = (val, movedKeys) => {
checkedState.leftChecked = val;
if (!movedKeys) return;
emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
};
const onTargetCheckedChange = (val, movedKeys) => {
checkedState.rightChecked = val;
if (!movedKeys) return;
emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
};
return {
onSourceCheckedChange,
onTargetCheckedChange
};
};
//#endregion
export { useCheckedChange };
//# sourceMappingURL=use-checked-change.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checked-change.mjs","names":[],"sources":["../../../../../../../packages/components/transfer/src/composables/use-checked-change.ts"],"sourcesContent":["import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT } from '../transfer'\n\nimport type { SetupContext } from 'vue'\nimport type {\n TransferCheckedState,\n TransferEmits,\n TransferKey,\n} from '../transfer'\n\nexport const useCheckedChange = (\n checkedState: TransferCheckedState,\n emit: SetupContext<TransferEmits>['emit']\n) => {\n const onSourceCheckedChange = (\n val: TransferKey[],\n movedKeys?: TransferKey[]\n ) => {\n checkedState.leftChecked = val\n if (!movedKeys) return\n emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys)\n }\n\n const onTargetCheckedChange = (\n val: TransferKey[],\n movedKeys?: TransferKey[]\n ) => {\n checkedState.rightChecked = val\n if (!movedKeys) return\n emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys)\n }\n\n return {\n onSourceCheckedChange,\n onTargetCheckedChange,\n }\n}\n"],"mappings":";;;AASA,MAAa,oBACX,cACA,SACG;CACH,MAAM,yBACJ,KACA,cACG;AACH,eAAa,cAAc;AAC3B,MAAI,CAAC,UAAW;AAChB,OAAK,yBAAyB,KAAK,UAAU;;CAG/C,MAAM,yBACJ,KACA,cACG;AACH,eAAa,eAAe;AAC5B,MAAI,CAAC,UAAW;AAChB,OAAK,0BAA0B,KAAK,UAAU;;AAGhD,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,10 @@
import { TransferDataItem, TransferProps } from "../transfer.js";
import * as vue from "vue";
//#region ../../packages/components/transfer/src/composables/use-computed-data.d.ts
declare const useComputedData: (props: Required<Omit<TransferProps, "filterPlaceholder" | "filterMethod" | "renderContent">>) => {
sourceData: vue.ComputedRef<TransferDataItem[]>;
targetData: vue.ComputedRef<TransferDataItem[]>;
};
//#endregion
export { useComputedData };
@@ -0,0 +1,23 @@
import { usePropsAlias } from "./use-props-alias.mjs";
import { computed } from "vue";
//#region ../../packages/components/transfer/src/composables/use-computed-data.ts
const useComputedData = (props) => {
const propsAlias = usePropsAlias(props);
const dataObj = computed(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {}));
return {
sourceData: computed(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key]))),
targetData: computed(() => {
if (props.targetOrder === "original") return props.data.filter((item) => props.modelValue.includes(item[propsAlias.value.key]));
else return props.modelValue.reduce((arr, cur) => {
const val = dataObj.value[cur];
if (val) arr.push(val);
return arr;
}, []);
})
};
};
//#endregion
export { useComputedData };
//# sourceMappingURL=use-computed-data.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-computed-data.mjs","names":[],"sources":["../../../../../../../packages/components/transfer/src/composables/use-computed-data.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { TransferDataItem, TransferKey, TransferProps } from '../transfer'\n\nexport const useComputedData = (\n props: Required<\n Omit<TransferProps, 'filterPlaceholder' | 'filterMethod' | 'renderContent'>\n >\n) => {\n const propsAlias = usePropsAlias(props)\n\n const dataObj = computed(() =>\n props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {})\n )\n\n const sourceData = computed(() =>\n props.data.filter(\n (item) => !props.modelValue.includes(item[propsAlias.value.key])\n )\n )\n\n const targetData = computed(() => {\n if (props.targetOrder === 'original') {\n return props.data.filter((item) =>\n props.modelValue.includes(item[propsAlias.value.key])\n )\n } else {\n return props.modelValue.reduce(\n (arr: TransferDataItem[], cur: TransferKey) => {\n const val = dataObj.value[cur]\n if (val) {\n arr.push(val)\n }\n return arr\n },\n []\n )\n }\n })\n\n return {\n sourceData,\n targetData,\n }\n}\n"],"mappings":";;;;AAKA,MAAa,mBACX,UAGG;CACH,MAAM,aAAa,cAAc,MAAM;CAEvC,MAAM,UAAU,eACd,MAAM,KAAK,QAAQ,GAAG,SAAS,EAAE,IAAI,WAAW,MAAM,QAAQ,QAAQ,GAAG,EAAE,CAAC,CAC7E;AA2BD,QAAO;EACL,YA1BiB,eACjB,MAAM,KAAK,QACR,SAAS,CAAC,MAAM,WAAW,SAAS,KAAK,WAAW,MAAM,KAAK,CACjE,CACF;EAuBC,YArBiB,eAAe;AAChC,OAAI,MAAM,gBAAgB,WACxB,QAAO,MAAM,KAAK,QAAQ,SACxB,MAAM,WAAW,SAAS,KAAK,WAAW,MAAM,KAAK,CACtD;OAED,QAAO,MAAM,WAAW,QACrB,KAAyB,QAAqB;IAC7C,MAAM,MAAM,QAAQ,MAAM;AAC1B,QAAI,IACF,KAAI,KAAK,IAAI;AAEf,WAAO;MAET,EAAE,CACH;IAEH;EAKD"}
@@ -0,0 +1,10 @@
import { TransferCheckedState, TransferEmits, TransferProps } from "../transfer.js";
import { SetupContext } from "vue";
//#region ../../packages/components/transfer/src/composables/use-move.d.ts
declare const useMove: (props: Required<Omit<TransferProps, "filterPlaceholder" | "filterMethod" | "renderContent">>, checkedState: TransferCheckedState, emit: SetupContext<TransferEmits>["emit"]) => {
addToLeft: () => void;
addToRight: () => void;
};
//#endregion
export { useMove };
@@ -0,0 +1,37 @@
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../../constants/event.mjs";
import { usePropsAlias } from "./use-props-alias.mjs";
//#region ../../packages/components/transfer/src/composables/use-move.ts
const useMove = (props, checkedState, emit) => {
const propsAlias = usePropsAlias(props);
const _emit = (value, direction, movedKeys) => {
emit(UPDATE_MODEL_EVENT, value);
emit(CHANGE_EVENT, value, direction, movedKeys);
};
const addToLeft = () => {
const currentValue = props.modelValue.slice();
checkedState.rightChecked.forEach((item) => {
const index = currentValue.indexOf(item);
if (index > -1) currentValue.splice(index, 1);
});
_emit(currentValue, "left", checkedState.rightChecked);
};
const addToRight = () => {
let currentValue = props.modelValue.slice();
const itemsToBeMoved = props.data.filter((item) => {
const itemKey = item[propsAlias.value.key];
return checkedState.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey);
}).map((item) => item[propsAlias.value.key]);
currentValue = props.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
if (props.targetOrder === "original") currentValue = props.data.filter((item) => currentValue.includes(item[propsAlias.value.key])).map((item) => item[propsAlias.value.key]);
_emit(currentValue, "right", checkedState.leftChecked);
};
return {
addToLeft,
addToRight
};
};
//#endregion
export { useMove };
//# sourceMappingURL=use-move.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-move.mjs","names":[],"sources":["../../../../../../../packages/components/transfer/src/composables/use-move.ts"],"sourcesContent":["import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { usePropsAlias } from './use-props-alias'\n\nimport type { SetupContext } from 'vue'\nimport type {\n TransferCheckedState,\n TransferDataItem,\n TransferDirection,\n TransferEmits,\n TransferKey,\n TransferProps,\n} from '../transfer'\n\nexport const useMove = (\n props: Required<\n Omit<TransferProps, 'filterPlaceholder' | 'filterMethod' | 'renderContent'>\n >,\n checkedState: TransferCheckedState,\n emit: SetupContext<TransferEmits>['emit']\n) => {\n const propsAlias = usePropsAlias(props)\n\n const _emit = (\n value: TransferKey[],\n direction: TransferDirection,\n movedKeys: TransferKey[]\n ) => {\n emit(UPDATE_MODEL_EVENT, value)\n emit(CHANGE_EVENT, value, direction, movedKeys)\n }\n\n const addToLeft = () => {\n const currentValue = props.modelValue.slice()\n\n checkedState.rightChecked.forEach((item) => {\n const index = currentValue.indexOf(item)\n if (index > -1) {\n currentValue.splice(index, 1)\n }\n })\n _emit(currentValue, 'left', checkedState.rightChecked)\n }\n\n const addToRight = () => {\n let currentValue = props.modelValue.slice()\n\n const itemsToBeMoved = props.data\n .filter((item: TransferDataItem) => {\n const itemKey = item[propsAlias.value.key]\n return (\n checkedState.leftChecked.includes(itemKey) &&\n !props.modelValue.includes(itemKey)\n )\n })\n .map((item) => item[propsAlias.value.key])\n\n currentValue =\n props.targetOrder === 'unshift'\n ? itemsToBeMoved.concat(currentValue)\n : currentValue.concat(itemsToBeMoved)\n\n if (props.targetOrder === 'original') {\n currentValue = props.data\n .filter((item) => currentValue.includes(item[propsAlias.value.key]))\n .map((item) => item[propsAlias.value.key])\n }\n\n _emit(currentValue, 'right', checkedState.leftChecked)\n }\n\n return {\n addToLeft,\n addToRight,\n }\n}\n"],"mappings":";;;;AAaA,MAAa,WACX,OAGA,cACA,SACG;CACH,MAAM,aAAa,cAAc,MAAM;CAEvC,MAAM,SACJ,OACA,WACA,cACG;AACH,OAAK,oBAAoB,MAAM;AAC/B,OAAK,cAAc,OAAO,WAAW,UAAU;;CAGjD,MAAM,kBAAkB;EACtB,MAAM,eAAe,MAAM,WAAW,OAAO;AAE7C,eAAa,aAAa,SAAS,SAAS;GAC1C,MAAM,QAAQ,aAAa,QAAQ,KAAK;AACxC,OAAI,QAAQ,GACV,cAAa,OAAO,OAAO,EAAE;IAE/B;AACF,QAAM,cAAc,QAAQ,aAAa,aAAa;;CAGxD,MAAM,mBAAmB;EACvB,IAAI,eAAe,MAAM,WAAW,OAAO;EAE3C,MAAM,iBAAiB,MAAM,KAC1B,QAAQ,SAA2B;GAClC,MAAM,UAAU,KAAK,WAAW,MAAM;AACtC,UACE,aAAa,YAAY,SAAS,QAAQ,IAC1C,CAAC,MAAM,WAAW,SAAS,QAAQ;IAErC,CACD,KAAK,SAAS,KAAK,WAAW,MAAM,KAAK;AAE5C,iBACE,MAAM,gBAAgB,YAClB,eAAe,OAAO,aAAa,GACnC,aAAa,OAAO,eAAe;AAEzC,MAAI,MAAM,gBAAgB,WACxB,gBAAe,MAAM,KAClB,QAAQ,SAAS,aAAa,SAAS,KAAK,WAAW,MAAM,KAAK,CAAC,CACnE,KAAK,SAAS,KAAK,WAAW,MAAM,KAAK;AAG9C,QAAM,cAAc,SAAS,aAAa,YAAY;;AAGxD,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,11 @@
import { TransferProps } from "../transfer.js";
import * as vue from "vue";
//#region ../../packages/components/transfer/src/composables/use-props-alias.d.ts
declare const usePropsAlias: (props: TransferProps) => vue.ComputedRef<{
label: string;
key: string;
disabled: string;
}>;
//#endregion
export { usePropsAlias };
@@ -0,0 +1,18 @@
import { computed } from "vue";
//#region ../../packages/components/transfer/src/composables/use-props-alias.ts
const usePropsAlias = (props) => {
const initProps = {
label: "label",
key: "key",
disabled: "disabled"
};
return computed(() => ({
...initProps,
...props.props
}));
};
//#endregion
export { usePropsAlias };
//# sourceMappingURL=use-props-alias.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-props-alias.mjs","names":[],"sources":["../../../../../../../packages/components/transfer/src/composables/use-props-alias.ts"],"sourcesContent":["import { computed } from 'vue'\n\nimport type { TransferProps, TransferPropsAlias } from '../transfer'\n\nexport const usePropsAlias = (props: TransferProps) => {\n const initProps: Required<TransferPropsAlias> = {\n label: 'label',\n key: 'key',\n disabled: 'disabled',\n }\n\n return computed(() => ({\n ...initProps,\n ...props.props,\n }))\n}\n"],"mappings":";;;AAIA,MAAa,iBAAiB,UAAyB;CACrD,MAAM,YAA0C;EAC9C,OAAO;EACP,KAAK;EACL,UAAU;EACX;AAED,QAAO,gBAAgB;EACrB,GAAG;EACH,GAAG,MAAM;EACV,EAAE"}
@@ -0,0 +1,30 @@
import "../../../utils/index.js";
import { TransferDataItem, TransferKey, TransferProps } from "./transfer.js";
import { _default } from "./transfer-panel.vue.js";
import { ExtractPublicPropTypes, VNode } from "vue";
//#region ../../packages/components/transfer/src/transfer-panel.d.ts
interface TransferPanelState {
checked: TransferKey[];
allChecked: boolean;
query: string;
checkChangeByUser: boolean;
}
interface TransferPanelProps {
data?: TransferProps['data'];
optionRender?: (option: TransferDataItem) => VNode | VNode[];
placeholder?: string;
title?: string;
filterable?: boolean;
format?: TransferProps['format'];
filterMethod?: TransferProps['filterMethod'];
defaultChecked?: TransferProps['leftDefaultChecked'];
props?: TransferProps['props'];
}
declare const transferPanelEmits: {
"checked-change": (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
};
type TransferPanelEmits = typeof transferPanelEmits;
type TransferPanelInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { TransferPanelEmits, TransferPanelInstance, TransferPanelProps, TransferPanelState };
@@ -0,0 +1,24 @@
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { transferCheckedChangeFn, transferProps } from "./transfer.mjs";
//#region ../../packages/components/transfer/src/transfer-panel.ts
const CHECKED_CHANGE_EVENT = "checked-change";
/**
* @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.
*/
const transferPanelProps = buildProps({
data: transferProps.data,
optionRender: { type: definePropType(Function) },
placeholder: String,
title: String,
filterable: Boolean,
format: transferProps.format,
filterMethod: transferProps.filterMethod,
defaultChecked: transferProps.leftDefaultChecked,
props: transferProps.props
});
const transferPanelEmits = { [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn };
//#endregion
export { CHECKED_CHANGE_EVENT, transferPanelEmits, transferPanelProps };
//# sourceMappingURL=transfer-panel.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"transfer-panel.mjs","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { transferCheckedChangeFn, transferProps } from './transfer'\n\nimport type { ExtractPublicPropTypes, VNode } from 'vue'\nimport type { TransferDataItem, TransferKey, TransferProps } from './transfer'\nimport type TransferPanel from './transfer-panel.vue'\n\nexport interface TransferPanelState {\n checked: TransferKey[]\n allChecked: boolean\n query: string\n checkChangeByUser: boolean\n}\n\nexport const CHECKED_CHANGE_EVENT = 'checked-change'\n\nexport interface TransferPanelProps {\n data?: TransferProps['data']\n optionRender?: (option: TransferDataItem) => VNode | VNode[]\n placeholder?: string\n title?: string\n filterable?: boolean\n format?: TransferProps['format']\n filterMethod?: TransferProps['filterMethod']\n defaultChecked?: TransferProps['leftDefaultChecked']\n props?: TransferProps['props']\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport const transferPanelProps = buildProps({\n data: transferProps.data,\n optionRender: {\n type: definePropType<(option: TransferDataItem) => VNode | VNode[]>(\n Function\n ),\n },\n placeholder: String,\n title: String,\n filterable: Boolean,\n format: transferProps.format,\n filterMethod: transferProps.filterMethod,\n defaultChecked: transferProps.leftDefaultChecked,\n props: transferProps.props,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `TransferPanelProps` instead.\n */\nexport type TransferPanelPropsPublic = ExtractPublicPropTypes<\n typeof transferPanelProps\n>\n\nexport const transferPanelEmits = {\n [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferPanelEmits = typeof transferPanelEmits\n\nexport type TransferPanelInstance = InstanceType<typeof TransferPanel> & unknown\n"],"mappings":";;;;AAcA,MAAa,uBAAuB;;;;AAiBpC,MAAa,qBAAqB,WAAW;CAC3C,MAAM,cAAc;CACpB,cAAc,EACZ,MAAM,eACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQ,cAAc;CACtB,cAAc,cAAc;CAC5B,gBAAgB,cAAc;CAC9B,OAAO,cAAc;CACtB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuB,yBACzB"}
@@ -0,0 +1,33 @@
import { TransferDataItem, TransferFormat, TransferKey, TransferPropsAlias } from "./transfer.js";
import { TransferPanelProps } from "./transfer-panel.js";
import "../../../index.js";
import * as vue from "vue";
//#region ../../packages/components/transfer/src/transfer-panel.vue.d.ts
declare var __VLS_31: {}, __VLS_33: {};
type __VLS_Slots = {} & {
empty?: (props: typeof __VLS_31) => any;
} & {
default?: (props: typeof __VLS_33) => any;
};
declare const __VLS_base: vue.DefineComponent<TransferPanelProps, {
/** @description filter keyword */query: vue.Ref<string, string>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
"checked-change": (value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void;
}, string, vue.PublicProps, Readonly<TransferPanelProps> & Readonly<{
"onChecked-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
}>, {
props: TransferPropsAlias;
data: TransferDataItem[];
format: TransferFormat;
defaultChecked: TransferKey[];
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,107 @@
import { isEmpty } from "../../../utils/types.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElInput } from "../../input/index.mjs";
import { ElCheckbox, ElCheckboxGroup } from "../../checkbox/index.mjs";
import { transferPanelEmits, transferPanelProps } from "./transfer-panel.mjs";
import { usePropsAlias } from "./composables/use-props-alias.mjs";
import { useCheck } from "./composables/use-check.mjs";
import { Search } from "@element-plus/icons-vue";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, openBlock, reactive, renderList, renderSlot, toDisplayString, toRefs, unref, useSlots, vShow, withCtx, withDirectives } from "vue";
//#region ../../packages/components/transfer/src/transfer-panel.vue?vue&type=script&setup=true&lang.ts
var transfer_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElTransferPanel",
__name: "transfer-panel",
props: transferPanelProps,
emits: transferPanelEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const slots = useSlots();
const OptionContent = ({ option }) => option;
const { t } = useLocale();
const ns = useNamespace("transfer");
const panelState = reactive({
checked: [],
allChecked: false,
query: "",
checkChangeByUser: true
});
const propsAlias = usePropsAlias(props);
const { filteredData, checkedSummary, isIndeterminate, handleAllCheckedChange } = useCheck(props, panelState, emit);
const hasNoMatch = computed(() => !isEmpty(panelState.query) && isEmpty(filteredData.value));
const hasFooter = computed(() => !isEmpty(slots.default()[0].children));
const { checked, allChecked, query } = toRefs(panelState);
__expose({ query });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ns).b("panel")) }, [
createElementVNode("p", { class: normalizeClass(unref(ns).be("panel", "header")) }, [createVNode(unref(ElCheckbox), {
modelValue: unref(allChecked),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(allChecked) ? allChecked.value = $event : null),
indeterminate: unref(isIndeterminate),
"validate-event": false,
onChange: unref(handleAllCheckedChange)
}, {
default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(ns).be("panel", "header-title")) }, toDisplayString(__props.title), 3), createElementVNode("span", { class: normalizeClass(unref(ns).be("panel", "header-count")) }, toDisplayString(unref(checkedSummary)), 3)]),
_: 1
}, 8, [
"modelValue",
"indeterminate",
"onChange"
])], 2),
createElementVNode("div", { class: normalizeClass([unref(ns).be("panel", "body"), unref(ns).is("with-footer", hasFooter.value)]) }, [
__props.filterable ? (openBlock(), createBlock(unref(ElInput), {
key: 0,
modelValue: unref(query),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(query) ? query.value = $event : null),
class: normalizeClass(unref(ns).be("panel", "filter")),
size: "default",
placeholder: __props.placeholder,
"prefix-icon": unref(Search),
clearable: "",
"validate-event": false
}, null, 8, [
"modelValue",
"class",
"placeholder",
"prefix-icon"
])) : createCommentVNode("v-if", true),
withDirectives(createVNode(unref(ElCheckboxGroup), {
modelValue: unref(checked),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(checked) ? checked.value = $event : null),
"validate-event": false,
class: normalizeClass([unref(ns).is("filterable", __props.filterable), unref(ns).be("panel", "list")])
}, {
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredData), (item) => {
return openBlock(), createBlock(unref(ElCheckbox), {
key: item[unref(propsAlias).key],
class: normalizeClass(unref(ns).be("panel", "item")),
value: item[unref(propsAlias).key],
disabled: item[unref(propsAlias).disabled],
"validate-event": false
}, {
default: withCtx(() => [createVNode(OptionContent, { option: __props.optionRender?.(item) }, null, 8, ["option"])]),
_: 2
}, 1032, [
"class",
"value",
"disabled"
]);
}), 128))]),
_: 1
}, 8, ["modelValue", "class"]), [[vShow, !hasNoMatch.value && !unref(isEmpty)(__props.data)]]),
withDirectives(createElementVNode("div", { class: normalizeClass(unref(ns).be("panel", "empty")) }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(hasNoMatch.value ? unref(t)("el.transfer.noMatch") : unref(t)("el.transfer.noData")), 1)])], 2), [[vShow, hasNoMatch.value || unref(isEmpty)(__props.data)]])
], 2),
hasFooter.value ? (openBlock(), createElementBlock("p", {
key: 0,
class: normalizeClass(unref(ns).be("panel", "footer"))
}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("v-if", true)
], 2);
};
}
});
//#endregion
export { transfer_panel_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=transfer-panel.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import transfer_panel_vue_vue_type_script_setup_true_lang_default from "./transfer-panel.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/transfer/src/transfer-panel.vue
var transfer_panel_default = transfer_panel_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { transfer_panel_default as default };
//# sourceMappingURL=transfer-panel2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"transfer-panel2.mjs","names":[],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n <div :class=\"ns.b('panel')\">\n <p :class=\"ns.be('panel', 'header')\">\n <el-checkbox\n v-model=\"allChecked\"\n :indeterminate=\"isIndeterminate\"\n :validate-event=\"false\"\n @change=\"handleAllCheckedChange\"\n >\n <span :class=\"ns.be('panel', 'header-title')\">{{ title }}</span>\n <span :class=\"ns.be('panel', 'header-count')\">\n {{ checkedSummary }}\n </span>\n </el-checkbox>\n </p>\n\n <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n <el-input\n v-if=\"filterable\"\n v-model=\"query\"\n :class=\"ns.be('panel', 'filter')\"\n size=\"default\"\n :placeholder=\"placeholder\"\n :prefix-icon=\"Search\"\n clearable\n :validate-event=\"false\"\n />\n <el-checkbox-group\n v-show=\"!hasNoMatch && !isEmpty(data)\"\n v-model=\"checked\"\n :validate-event=\"false\"\n :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n >\n <el-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[propsAlias.key]\"\n :class=\"ns.be('panel', 'item')\"\n :value=\"item[propsAlias.key]\"\n :disabled=\"item[propsAlias.disabled]\"\n :validate-event=\"false\"\n >\n <option-content :option=\"optionRender?.(item)\" />\n </el-checkbox>\n </el-checkbox-group>\n <div\n v-show=\"hasNoMatch || isEmpty(data)\"\n :class=\"ns.be('panel', 'empty')\"\n >\n <slot name=\"empty\">\n {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n </slot>\n </div>\n </div>\n <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n <slot />\n </p>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty, mutable } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElInput } from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { transferPanelEmits } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferPanelProps, TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n name: 'ElTransferPanel',\n})\n\nconst props = withDefaults(defineProps<TransferPanelProps>(), {\n data: () => [],\n format: () => ({}),\n defaultChecked: () => [],\n props: () =>\n mutable({\n label: 'label',\n key: 'key',\n disabled: 'disabled',\n }),\n})\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option?: VNode | VNode[] }) => option\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\n\nconst panelState = reactive<TransferPanelState>({\n checked: [],\n allChecked: false,\n query: '',\n checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n () => !isEmpty(panelState.query) && isEmpty(filteredData.value)\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\n\nconst { checked, allChecked, query } = toRefs(panelState)\n\ndefineExpose({\n /** @description filter keyword */\n query,\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,133 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import { Mutable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { _default } from "./transfer.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes, VNode, h } from "vue";
//#region ../../packages/components/transfer/src/transfer.d.ts
type TransferKey = string | number;
type TransferDirection = 'left' | 'right';
type TransferDataItem = Record<string, any>;
type renderContent = (h: typeof h, option: TransferDataItem) => VNode | VNode[];
interface TransferFormat {
noChecked?: string;
hasChecked?: string;
}
interface TransferPropsAlias {
label?: string;
key?: string;
disabled?: string;
}
interface TransferCheckedState {
leftChecked: TransferKey[];
rightChecked: TransferKey[];
}
declare const LEFT_CHECK_CHANGE_EVENT = "left-check-change";
declare const RIGHT_CHECK_CHANGE_EVENT = "right-check-change";
interface TransferProps {
/**
* @description data source
*/
data?: TransferDataItem[];
/**
* @description custom list titles
*/
titles?: [string, string];
/**
* @description custom button texts
*/
buttonTexts?: [string, string];
/**
* @description placeholder for the filter input
*/
filterPlaceholder?: string;
/**
* @description custom filter method
*/
filterMethod?: (query: string, item: TransferDataItem) => boolean;
/**
* @description key array of initially checked data items of the left list
*/
leftDefaultChecked?: TransferKey[];
/**
* @description key array of initially checked data items of the right list
*/
rightDefaultChecked?: TransferKey[];
/**
* @description custom render function for data items
*/
renderContent?: renderContent;
/**
* @description binding value
*/
modelValue?: TransferKey[];
/**
* @description texts for checking status in list header
*/
format?: TransferFormat;
/**
* @description whether Transfer is filterable
*/
filterable?: boolean;
/**
* @description prop aliases for data source
*/
props?: TransferPropsAlias;
/**
* @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top
*/
targetOrder?: 'original' | 'push' | 'unshift';
/**
* @description whether to trigger form validation
*/
validateEvent?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `TransferProps` instead.
*/
declare const transferProps: {
readonly data: EpPropFinalized<(new (...args: any[]) => TransferDataItem[]) | (() => TransferDataItem[]) | (((new (...args: any[]) => TransferDataItem[]) | (() => TransferDataItem[])) | null)[], unknown, unknown, () => never[], boolean>;
readonly titles: EpPropFinalized<(new (...args: any[]) => [string, string]) | (() => [string, string]) | (((new (...args: any[]) => [string, string]) | (() => [string, string])) | null)[], unknown, unknown, () => never[], boolean>;
readonly buttonTexts: EpPropFinalized<(new (...args: any[]) => [string, string]) | (() => [string, string]) | (((new (...args: any[]) => [string, string]) | (() => [string, string])) | null)[], unknown, unknown, () => never[], boolean>;
readonly filterPlaceholder: StringConstructor;
readonly filterMethod: {
readonly type: vue.PropType<(query: string, item: TransferDataItem) => boolean>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly leftDefaultChecked: EpPropFinalized<(new (...args: any[]) => TransferKey[]) | (() => TransferKey[]) | (((new (...args: any[]) => TransferKey[]) | (() => TransferKey[])) | null)[], unknown, unknown, () => never[], boolean>;
readonly rightDefaultChecked: EpPropFinalized<(new (...args: any[]) => TransferKey[]) | (() => TransferKey[]) | (((new (...args: any[]) => TransferKey[]) | (() => TransferKey[])) | null)[], unknown, unknown, () => never[], boolean>;
readonly renderContent: {
readonly type: vue.PropType<renderContent>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly modelValue: EpPropFinalized<(new (...args: any[]) => TransferKey[]) | (() => TransferKey[]) | (((new (...args: any[]) => TransferKey[]) | (() => TransferKey[])) | null)[], unknown, unknown, () => never[], boolean>;
readonly format: EpPropFinalized<(new (...args: any[]) => TransferFormat) | (() => TransferFormat) | (((new (...args: any[]) => TransferFormat) | (() => TransferFormat)) | null)[], unknown, unknown, () => {}, boolean>;
readonly filterable: BooleanConstructor;
readonly props: EpPropFinalized<(new (...args: any[]) => TransferPropsAlias) | (() => TransferPropsAlias) | (((new (...args: any[]) => TransferPropsAlias) | (() => TransferPropsAlias)) | null)[], unknown, unknown, () => Mutable<{
readonly label: "label";
readonly key: "key";
readonly disabled: "disabled";
}>, boolean>;
readonly targetOrder: EpPropFinalized<StringConstructor, "push" | "unshift" | "original", unknown, "original", boolean>;
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `TransferProps` instead.
*/
type TransferPropsPublic = ExtractPublicPropTypes<typeof transferProps>;
declare const transferCheckedChangeFn: (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
declare const transferEmits: {
change: (value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => boolean;
"update:modelValue": (value: TransferKey[]) => boolean;
"left-check-change": (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
"right-check-change": (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
};
type TransferEmits = typeof transferEmits;
type TransferInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, TransferCheckedState, TransferDataItem, TransferDirection, TransferEmits, TransferFormat, TransferInstance, TransferKey, TransferProps, TransferPropsAlias, TransferPropsPublic, renderContent, transferCheckedChangeFn, transferEmits, transferProps };
@@ -0,0 +1,78 @@
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isArray } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { mutable } from "../../../utils/typescript.mjs";
import { isNil } from "lodash-unified";
//#region ../../packages/components/transfer/src/transfer.ts
const LEFT_CHECK_CHANGE_EVENT = "left-check-change";
const RIGHT_CHECK_CHANGE_EVENT = "right-check-change";
/**
* @deprecated Removed after 3.0.0, Use `TransferProps` instead.
*/
const transferProps = buildProps({
data: {
type: definePropType(Array),
default: () => []
},
titles: {
type: definePropType(Array),
default: () => []
},
buttonTexts: {
type: definePropType(Array),
default: () => []
},
filterPlaceholder: String,
filterMethod: { type: definePropType(Function) },
leftDefaultChecked: {
type: definePropType(Array),
default: () => []
},
rightDefaultChecked: {
type: definePropType(Array),
default: () => []
},
renderContent: { type: definePropType(Function) },
modelValue: {
type: definePropType(Array),
default: () => []
},
format: {
type: definePropType(Object),
default: () => ({})
},
filterable: Boolean,
props: {
type: definePropType(Object),
default: () => mutable({
label: "label",
key: "key",
disabled: "disabled"
})
},
targetOrder: {
type: String,
values: [
"original",
"push",
"unshift"
],
default: "original"
},
validateEvent: {
type: Boolean,
default: true
}
});
const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(isArray) || isArray(value) && isNil(movedKeys);
const transferEmits = {
[CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(isArray) && ["left", "right"].includes(direction),
[UPDATE_MODEL_EVENT]: (value) => isArray(value),
[LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
[RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn
};
//#endregion
export { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, transferCheckedChangeFn, transferEmits, transferProps };
//# sourceMappingURL=transfer.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,50 @@
import { TransferDataItem, TransferDirection, TransferFormat, TransferKey, TransferProps, TransferPropsAlias } from "./transfer.js";
import { TransferPanelInstance } from "./transfer-panel.js";
import * as vue from "vue";
//#region ../../packages/components/transfer/src/transfer.vue.d.ts
declare var __VLS_12: {}, __VLS_14: {}, __VLS_65: {}, __VLS_67: {};
type __VLS_Slots = {} & {
'left-empty'?: (props: typeof __VLS_12) => any;
} & {
'left-footer'?: (props: typeof __VLS_14) => any;
} & {
'right-empty'?: (props: typeof __VLS_65) => any;
} & {
'right-footer'?: (props: typeof __VLS_67) => any;
};
declare const __VLS_base: vue.DefineComponent<TransferProps, {
/** @description clear the filter keyword of a certain panel */clearQuery: (which: TransferDirection) => void; /** @description left panel ref */
leftPanel: vue.Ref<TransferPanelInstance | undefined, TransferPanelInstance | undefined>; /** @description right panel ref */
rightPanel: vue.Ref<TransferPanelInstance | undefined, TransferPanelInstance | undefined>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
"update:modelValue": (value: TransferKey[]) => void;
change: (value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => void;
"left-check-change": (value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void;
"right-check-change": (value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void;
}, string, vue.PublicProps, Readonly<TransferProps> & Readonly<{
onChange?: ((value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => any) | undefined;
"onUpdate:modelValue"?: ((value: TransferKey[]) => any) | undefined;
"onLeft-check-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
"onRight-check-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
}>, {
props: TransferPropsAlias;
validateEvent: boolean;
modelValue: TransferKey[];
data: TransferDataItem[];
titles: [string, string];
format: TransferFormat;
buttonTexts: [string, string];
leftDefaultChecked: TransferKey[];
rightDefaultChecked: TransferKey[];
targetOrder: "original" | "push" | "unshift";
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,168 @@
import { isEmpty, isUndefined } from "../../../utils/types.mjs";
import { debugWarn } from "../../../utils/error.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { useFormItem } from "../../form/src/hooks/use-form-item.mjs";
import { ElButton } from "../../button/index.mjs";
import { transferEmits, transferProps } from "./transfer.mjs";
import { usePropsAlias } from "./composables/use-props-alias.mjs";
import { useCheckedChange } from "./composables/use-checked-change.mjs";
import { useComputedData } from "./composables/use-computed-data.mjs";
import { useMove } from "./composables/use-move.mjs";
import transfer_panel_default from "./transfer-panel2.mjs";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { Comment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, openBlock, reactive, ref, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
//#region ../../packages/components/transfer/src/transfer.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 0 };
var transfer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElTransfer",
__name: "transfer",
props: transferProps,
emits: transferEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const slots = useSlots();
const { t } = useLocale();
const ns = useNamespace("transfer");
const { formItem } = useFormItem();
const checkedState = reactive({
leftChecked: [],
rightChecked: []
});
const propsAlias = usePropsAlias(props);
const { sourceData, targetData } = useComputedData(props);
const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(checkedState, emit);
const { addToLeft, addToRight } = useMove(props, checkedState, emit);
const leftPanel = ref();
const rightPanel = ref();
const clearQuery = (which) => {
switch (which) {
case "left":
leftPanel.value.query = "";
break;
case "right":
rightPanel.value.query = "";
break;
}
};
const hasButtonTexts = computed(() => props.buttonTexts.length === 2);
const leftPanelTitle = computed(() => props.titles[0] || t("el.transfer.titles.0"));
const rightPanelTitle = computed(() => props.titles[1] || t("el.transfer.titles.1"));
const panelFilterPlaceholder = computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
watch(() => props.modelValue, () => {
if (props.validateEvent) formItem?.validate?.("change").catch((err) => debugWarn(err));
});
const optionRender = computed(() => (option) => {
if (props.renderContent) return props.renderContent(h, option);
const defaultSlotVNodes = (slots.default?.({ option }) || []).filter((node) => node.type !== Comment);
if (defaultSlotVNodes.length) return defaultSlotVNodes;
return h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
});
__expose({
clearQuery,
leftPanel,
rightPanel
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ns).b()) }, [
createVNode(transfer_panel_default, {
ref_key: "leftPanel",
ref: leftPanel,
data: unref(sourceData),
"option-render": optionRender.value,
placeholder: panelFilterPlaceholder.value,
title: leftPanelTitle.value,
filterable: __props.filterable,
format: __props.format,
"filter-method": __props.filterMethod,
"default-checked": __props.leftDefaultChecked,
props: props.props,
onCheckedChange: unref(onSourceCheckedChange)
}, {
empty: withCtx(() => [renderSlot(_ctx.$slots, "left-empty")]),
default: withCtx(() => [renderSlot(_ctx.$slots, "left-footer")]),
_: 3
}, 8, [
"data",
"option-render",
"placeholder",
"title",
"filterable",
"format",
"filter-method",
"default-checked",
"props",
"onCheckedChange"
]),
createElementVNode("div", { class: normalizeClass(unref(ns).e("buttons")) }, [createVNode(unref(ElButton), {
type: "primary",
class: normalizeClass([unref(ns).e("button"), unref(ns).is("with-texts", hasButtonTexts.value)]),
disabled: unref(isEmpty)(checkedState.rightChecked),
onClick: unref(addToLeft)
}, {
default: withCtx(() => [createVNode(unref(ElIcon), null, {
default: withCtx(() => [createVNode(unref(ArrowLeft))]),
_: 1
}), !unref(isUndefined)(__props.buttonTexts[0]) ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.buttonTexts[0]), 1)) : createCommentVNode("v-if", true)]),
_: 1
}, 8, [
"class",
"disabled",
"onClick"
]), createVNode(unref(ElButton), {
type: "primary",
class: normalizeClass([unref(ns).e("button"), unref(ns).is("with-texts", hasButtonTexts.value)]),
disabled: unref(isEmpty)(checkedState.leftChecked),
onClick: unref(addToRight)
}, {
default: withCtx(() => [!unref(isUndefined)(__props.buttonTexts[1]) ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.buttonTexts[1]), 1)) : createCommentVNode("v-if", true), createVNode(unref(ElIcon), null, {
default: withCtx(() => [createVNode(unref(ArrowRight))]),
_: 1
})]),
_: 1
}, 8, [
"class",
"disabled",
"onClick"
])], 2),
createVNode(transfer_panel_default, {
ref_key: "rightPanel",
ref: rightPanel,
data: unref(targetData),
"option-render": optionRender.value,
placeholder: panelFilterPlaceholder.value,
filterable: __props.filterable,
format: __props.format,
"filter-method": __props.filterMethod,
title: rightPanelTitle.value,
"default-checked": __props.rightDefaultChecked,
props: props.props,
onCheckedChange: unref(onTargetCheckedChange)
}, {
empty: withCtx(() => [renderSlot(_ctx.$slots, "right-empty")]),
default: withCtx(() => [renderSlot(_ctx.$slots, "right-footer")]),
_: 3
}, 8, [
"data",
"option-render",
"placeholder",
"filterable",
"format",
"filter-method",
"title",
"default-checked",
"props",
"onCheckedChange"
])
], 2);
};
}
});
//#endregion
export { transfer_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=transfer.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import transfer_vue_vue_type_script_setup_true_lang_default from "./transfer.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/transfer/src/transfer.vue
var transfer_default = transfer_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { transfer_default as default };
//# sourceMappingURL=transfer2.mjs.map
File diff suppressed because one or more lines are too long