feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
@@ -0,0 +1,9 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, TransferCheckedState, TransferDataItem, TransferDirection, TransferEmits, TransferFormat, TransferInstance, TransferKey, TransferProps, TransferPropsAlias, TransferPropsPublic, renderContent, transferCheckedChangeFn, transferEmits, transferProps } from "./src/transfer.js";
import { _default } from "./src/transfer.vue.js";
//#region ../../packages/components/transfer/index.d.ts
declare const ElTransfer: SFCWithInstall<typeof _default>;
//#endregion
export { ElTransfer, ElTransfer as default, LEFT_CHECK_CHANGE_EVENT, RIGHT_CHECK_CHANGE_EVENT, TransferCheckedState, TransferDataItem, TransferDirection, TransferEmits, TransferFormat, TransferInstance, TransferKey, TransferProps, TransferPropsAlias, TransferPropsPublic, renderContent, transferCheckedChangeFn, transferEmits, transferProps };
+17
View File
@@ -0,0 +1,17 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_transfer = require('./src/transfer.js');
const require_transfer$1 = require('./src/transfer2.js');
//#region ../../packages/components/transfer/index.ts
const ElTransfer = require_install.withInstall(require_transfer$1.default);
//#endregion
exports.ElTransfer = ElTransfer;
exports.default = ElTransfer;
exports.LEFT_CHECK_CHANGE_EVENT = require_transfer.LEFT_CHECK_CHANGE_EVENT;
exports.RIGHT_CHECK_CHANGE_EVENT = require_transfer.RIGHT_CHECK_CHANGE_EVENT;
exports.transferCheckedChangeFn = require_transfer.transferCheckedChangeFn;
exports.transferEmits = require_transfer.transferEmits;
exports.transferProps = require_transfer.transferProps;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Transfer"],"sources":["../../../../../packages/components/transfer/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Transfer from './src/transfer.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTransfer: SFCWithInstall<typeof Transfer> = withInstall(Transfer)\nexport default ElTransfer\n\nexport * from './src/transfer'\n"],"mappings":";;;;;;AAKA,MAAa,aAA8CA,4BAAYC,2BAAS"}
@@ -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,12 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_use_props_alias = require('./use-props-alias.js');
const require_use_check = require('./use-check.js');
const require_use_checked_change = require('./use-checked-change.js');
const require_use_computed_data = require('./use-computed-data.js');
const require_use_move = require('./use-move.js');
exports.useCheck = require_use_check.useCheck;
exports.useCheckedChange = require_use_checked_change.useCheckedChange;
exports.useComputedData = require_use_computed_data.useComputedData;
exports.useMove = require_use_move.useMove;
exports.usePropsAlias = require_use_props_alias.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: <T extends TransferDataItem = TransferDataItem>(props: Required<Pick<TransferPanelProps<T>, "data" | "format" | "defaultChecked" | "props">> & {
filterMethod: TransferPanelProps<T>["filterMethod"];
}, panelState: TransferPanelState, emit: SetupContext<TransferPanelEmits>["emit"]) => {
filteredData: vue.ComputedRef<T[]>;
checkableData: vue.ComputedRef<T[]>;
checkedSummary: vue.ComputedRef<string>;
isIndeterminate: vue.ComputedRef<boolean>;
updateAllChecked: () => void;
handleAllCheckedChange: (value: CheckboxValueType) => void;
};
//#endregion
export { useCheck };
@@ -0,0 +1,78 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_transfer_panel = require('../transfer-panel.js');
const require_use_props_alias = require('./use-props-alias.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/transfer/src/composables/use-check.ts
const useCheck = (props, panelState, emit) => {
const propsAlias = require_use_props_alias.usePropsAlias(props);
const filteredData = (0, vue.computed)(() => {
return props.data.filter((item) => {
if ((0, _vue_shared.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 = (0, vue.computed)(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled]));
const checkedSummary = (0, vue.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 = (0, vue.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]) : [];
};
(0, vue.watch)(() => panelState.checked, (val, oldVal) => {
updateAllChecked();
if (panelState.checkChangeByUser) emit(require_transfer_panel.CHECKED_CHANGE_EVENT, val, val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v)));
else {
emit(require_transfer_panel.CHECKED_CHANGE_EVENT, val);
panelState.checkChangeByUser = true;
}
});
(0, vue.watch)(checkableData, () => {
updateAllChecked();
});
(0, vue.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;
});
(0, vue.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
exports.useCheck = useCheck;
//# sourceMappingURL=use-check.js.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,24 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_transfer = require('../transfer.js');
//#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(require_transfer.LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
};
const onTargetCheckedChange = (val, movedKeys) => {
checkedState.rightChecked = val;
if (!movedKeys) return;
emit(require_transfer.RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
};
return {
onSourceCheckedChange,
onTargetCheckedChange
};
};
//#endregion
exports.useCheckedChange = useCheckedChange;
//# sourceMappingURL=use-checked-change.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checked-change.js","names":["LEFT_CHECK_CHANGE_EVENT","RIGHT_CHECK_CHANGE_EVENT"],"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,OAAKA,0CAAyB,KAAK,UAAU;;CAG/C,MAAM,yBACJ,KACA,cACG;AACH,eAAa,eAAe;AAC5B,MAAI,CAAC,UAAW;AAChB,OAAKC,2CAA0B,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: <T extends TransferDataItem = TransferDataItem>(props: Required<Omit<TransferProps<T>, "filterPlaceholder" | "filterMethod" | "renderContent">>) => {
sourceData: vue.ComputedRef<T[]>;
targetData: vue.ComputedRef<T[]>;
};
//#endregion
export { useComputedData };
@@ -0,0 +1,25 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
const require_use_props_alias = require('./use-props-alias.js');
let vue = require("vue");
//#region ../../packages/components/transfer/src/composables/use-computed-data.ts
const useComputedData = (props) => {
const propsAlias = require_use_props_alias.usePropsAlias(props);
const dataObj = (0, vue.computed)(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur, o), {}));
return {
sourceData: (0, vue.computed)(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key]))),
targetData: (0, vue.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
exports.useComputedData = useComputedData;
//# sourceMappingURL=use-computed-data.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-computed-data.js","names":["usePropsAlias"],"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 = <T extends TransferDataItem = TransferDataItem>(\n props: Required<\n Omit<\n TransferProps<T>,\n 'filterPlaceholder' | 'filterMethod' | 'renderContent'\n >\n >\n) => {\n const propsAlias = usePropsAlias(props)\n\n const dataObj = computed(() =>\n props.data.reduce<Record<string, T>>(\n (o, cur) => ((o[cur[propsAlias.value.key]] = cur), o),\n {}\n )\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((arr: T[], cur: TransferKey) => {\n const val = dataObj.value[cur]\n if (val) {\n arr.push(val)\n }\n return arr\n }, [])\n }\n })\n\n return {\n sourceData,\n targetData,\n }\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBACX,UAMG;CACH,MAAM,aAAaA,sCAAc,MAAM;CAEvC,MAAM,kCACJ,MAAM,KAAK,QACR,GAAG,SAAU,EAAE,IAAI,WAAW,MAAM,QAAQ,KAAM,IACnD,EAAE,CACH,CACF;AAwBD,QAAO;EACL,oCAtBA,MAAM,KAAK,QACR,SAAS,CAAC,MAAM,WAAW,SAAS,KAAK,WAAW,MAAM,KAAK,CACjE,CACF;EAoBC,oCAlBgC;AAChC,OAAI,MAAM,gBAAgB,WACxB,QAAO,MAAM,KAAK,QAAQ,SACxB,MAAM,WAAW,SAAS,KAAK,WAAW,MAAM,KAAK,CACtD;OAED,QAAO,MAAM,WAAW,QAAQ,KAAU,QAAqB;IAC7D,MAAM,MAAM,QAAQ,MAAM;AAC1B,QAAI,IACF,KAAI,KAAK,IAAI;AAEf,WAAO;MACN,EAAE,CAAC;IAER;EAKD"}
@@ -0,0 +1,10 @@
import { TransferCheckedState, TransferDataItem, TransferEmits, TransferProps } from "../transfer.js";
import { SetupContext } from "vue";
//#region ../../packages/components/transfer/src/composables/use-move.d.ts
declare const useMove: <T extends TransferDataItem = TransferDataItem>(props: Required<Omit<TransferProps<T>, "filterPlaceholder" | "filterMethod" | "renderContent">>, checkedState: TransferCheckedState, emit: SetupContext<TransferEmits>["emit"]) => {
addToLeft: () => void;
addToRight: () => void;
};
//#endregion
export { useMove };
@@ -0,0 +1,38 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_event = require('../../../../constants/event.js');
const require_use_props_alias = require('./use-props-alias.js');
//#region ../../packages/components/transfer/src/composables/use-move.ts
const useMove = (props, checkedState, emit) => {
const propsAlias = require_use_props_alias.usePropsAlias(props);
const _emit = (value, direction, movedKeys) => {
emit(require_event.UPDATE_MODEL_EVENT, value);
emit(require_event.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
exports.useMove = useMove;
//# sourceMappingURL=use-move.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-move.js","names":["usePropsAlias","UPDATE_MODEL_EVENT","CHANGE_EVENT"],"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 = <T extends TransferDataItem = TransferDataItem>(\n props: Required<\n Omit<\n TransferProps<T>,\n 'filterPlaceholder' | 'filterMethod' | 'renderContent'\n >\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) => {\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,OAMA,cACA,SACG;CACH,MAAM,aAAaA,sCAAc,MAAM;CAEvC,MAAM,SACJ,OACA,WACA,cACG;AACH,OAAKC,kCAAoB,MAAM;AAC/B,OAAKC,4BAAc,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,SAAS;GAChB,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,13 @@
import { TransferPropsAlias } from "../transfer.js";
import * as vue from "vue";
//#region ../../packages/components/transfer/src/composables/use-props-alias.d.ts
declare const usePropsAlias: (props: {
props?: TransferPropsAlias;
}) => vue.ComputedRef<{
label: string;
key: string;
disabled: string;
}>;
//#endregion
export { usePropsAlias };
@@ -0,0 +1,20 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../../_virtual/_rolldown/runtime.js');
let vue = require("vue");
//#region ../../packages/components/transfer/src/composables/use-props-alias.ts
const usePropsAlias = (props) => {
const initProps = {
label: "label",
key: "key",
disabled: "disabled"
};
return (0, vue.computed)(() => ({
...initProps,
...props.props
}));
};
//#endregion
exports.usePropsAlias = usePropsAlias;
//# sourceMappingURL=use-props-alias.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-props-alias.js","names":[],"sources":["../../../../../../../packages/components/transfer/src/composables/use-props-alias.ts"],"sourcesContent":["import { computed } from 'vue'\n\nimport type { TransferPropsAlias } from '../transfer'\n\nexport const usePropsAlias = (props: { props?: TransferPropsAlias }) => {\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,UAA0C;CACtE,MAAM,YAA0C;EAC9C,OAAO;EACP,KAAK;EACL,UAAU;EACX;AAED,iCAAuB;EACrB,GAAG;EACH,GAAG,MAAM;EACV,EAAE"}
@@ -0,0 +1,31 @@
import "../../../utils/index.js";
import { TransferDataItem, TransferFormat, TransferKey, TransferPropsAlias } from "./transfer.js";
import { _default } from "./transfer-panel.vue.js";
import { ComponentInstance, ExtractPublicPropTypes, VNode } from "vue";
import { ComponentExposed } from "vue-component-type-helpers";
//#region ../../packages/components/transfer/src/transfer-panel.d.ts
interface TransferPanelState {
checked: TransferKey[];
allChecked: boolean;
query: string;
checkChangeByUser: boolean;
}
interface TransferPanelProps<T extends TransferDataItem = TransferDataItem> {
data?: T[];
optionRender?: (option: T) => VNode | VNode[];
placeholder?: string;
title?: string;
filterable?: boolean;
format?: TransferFormat;
filterMethod?: (query: string, item: T) => boolean;
defaultChecked?: TransferKey[];
props?: TransferPropsAlias;
}
declare const transferPanelEmits: {
"checked-change": (value: TransferKey[], movedKeys?: TransferKey[]) => boolean;
};
type TransferPanelEmits = typeof transferPanelEmits;
type TransferPanelInstance = ComponentInstance<typeof _default> & ComponentExposed<typeof _default>;
//#endregion
export { TransferPanelEmits, TransferPanelInstance, TransferPanelProps, TransferPanelState };
@@ -0,0 +1,27 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
const require_transfer = require('./transfer.js');
//#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 = require_runtime.buildProps({
data: require_transfer.transferProps.data,
optionRender: { type: require_runtime.definePropType(Function) },
placeholder: String,
title: String,
filterable: Boolean,
format: require_transfer.transferProps.format,
filterMethod: require_transfer.transferProps.filterMethod,
defaultChecked: require_transfer.transferProps.leftDefaultChecked,
props: require_transfer.transferProps.props
});
const transferPanelEmits = { [CHECKED_CHANGE_EVENT]: require_transfer.transferCheckedChangeFn };
//#endregion
exports.CHECKED_CHANGE_EVENT = CHECKED_CHANGE_EVENT;
exports.transferPanelEmits = transferPanelEmits;
exports.transferPanelProps = transferPanelProps;
//# sourceMappingURL=transfer-panel.js.map
@@ -0,0 +1 @@
{"version":3,"file":"transfer-panel.js","names":["buildProps","transferProps","definePropType","transferCheckedChangeFn"],"sources":["../../../../../../packages/components/transfer/src/transfer-panel.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { transferCheckedChangeFn, transferProps } from './transfer'\n\nimport type { ComponentInstance, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type {\n TransferDataItem,\n TransferFormat,\n TransferKey,\n TransferPropsAlias,\n} 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 T extends TransferDataItem = TransferDataItem,\n> {\n data?: T[]\n optionRender?: (option: T) => VNode | VNode[]\n placeholder?: string\n title?: string\n filterable?: boolean\n format?: TransferFormat\n filterMethod?: (query: string, item: T) => boolean\n defaultChecked?: TransferKey[]\n props?: TransferPropsAlias\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 = ComponentInstance<typeof TransferPanel> &\n ComponentExposed<typeof TransferPanel>\n"],"mappings":";;;;;AAoBA,MAAa,uBAAuB;;;;AAmBpC,MAAa,qBAAqBA,2BAAW;CAC3C,MAAMC,+BAAc;CACpB,cAAc,EACZ,MAAMC,+BACJ,SACD,EACF;CACD,aAAa;CACb,OAAO;CACP,YAAY;CACZ,QAAQD,+BAAc;CACtB,cAAcA,+BAAc;CAC5B,gBAAgBA,+BAAc;CAC9B,OAAOA,+BAAc;CACtB,CAAU;AASX,MAAa,qBAAqB,GAC/B,uBAAuBE,0CACzB"}
@@ -0,0 +1,31 @@
import { TransferDataItem, TransferKey } from "./transfer.js";
import { TransferPanelProps } from "./transfer-panel.js";
import * as vue from "vue";
import { VNode } from "vue";
//#region ../../packages/components/transfer/src/transfer-panel.vue.d.ts
declare const __VLS_export: <T extends TransferDataItem = TransferDataItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
props: vue.PublicProps & __VLS_PrettifyLocal<TransferPanelProps<T> & {
"onChecked-change"?: ((value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any) | undefined;
}> & (typeof globalThis extends {
__VLS_PROPS_FALLBACK: infer P;
} ? P : {});
expose: (exposed: vue.ShallowUnwrapRef<{
/** @description filter keyword */query: vue.Ref<string, string>;
}>) => void;
attrs: any;
slots: {
empty?: (props: {}) => any;
} & {
default?: (props: {}) => any;
};
emit: (event: "checked-change", value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void;
}>) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> & {
__ctx?: Awaited<typeof __VLS_setup>;
};
declare const _default: typeof __VLS_export;
type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
//#endregion
export { _default };
@@ -0,0 +1,108 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../input/index.js');
const require_index$3 = require('../../checkbox/index.js');
const require_transfer_panel = require('./transfer-panel.js');
const require_use_props_alias = require('./composables/use-props-alias.js');
const require_use_check = require('./composables/use-check.js');
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let vue = require("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__ */ (0, vue.defineComponent)({
name: "ElTransferPanel",
__name: "transfer-panel",
props: require_transfer_panel.transferPanelProps,
emits: require_transfer_panel.transferPanelEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const slots = (0, vue.useSlots)();
const OptionContent = ({ option }) => option;
const { t } = require_index.useLocale();
const ns = require_index$1.useNamespace("transfer");
const panelState = (0, vue.reactive)({
checked: [],
allChecked: false,
query: "",
checkChangeByUser: true
});
const propsAlias = require_use_props_alias.usePropsAlias(props);
const { filteredData, checkedSummary, isIndeterminate, handleAllCheckedChange } = require_use_check.useCheck(props, panelState, emit);
const hasNoMatch = (0, vue.computed)(() => !require_types.isEmpty(panelState.query) && require_types.isEmpty(filteredData.value));
const hasFooter = (0, vue.computed)(() => !require_types.isEmpty(slots.default()[0].children));
const { checked, allChecked, query } = (0, vue.toRefs)(panelState);
__expose({ query });
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b("panel")) }, [
(0, vue.createElementVNode)("p", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "header")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElCheckbox), {
modelValue: (0, vue.unref)(allChecked),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => (0, vue.isRef)(allChecked) ? allChecked.value = $event : null),
indeterminate: (0, vue.unref)(isIndeterminate),
"validate-event": false,
onChange: (0, vue.unref)(handleAllCheckedChange)
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "header-title")) }, (0, vue.toDisplayString)(__props.title), 3), (0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "header-count")) }, (0, vue.toDisplayString)((0, vue.unref)(checkedSummary)), 3)]),
_: 1
}, 8, [
"modelValue",
"indeterminate",
"onChange"
])], 2),
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).be("panel", "body"), (0, vue.unref)(ns).is("with-footer", hasFooter.value)]) }, [
__props.filterable ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$2.ElInput), {
key: 0,
modelValue: (0, vue.unref)(query),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => (0, vue.isRef)(query) ? query.value = $event : null),
class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "filter")),
size: "default",
placeholder: __props.placeholder,
"prefix-icon": (0, vue.unref)(_element_plus_icons_vue.Search),
clearable: "",
"validate-event": false
}, null, 8, [
"modelValue",
"class",
"placeholder",
"prefix-icon"
])) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$3.ElCheckboxGroup), {
modelValue: (0, vue.unref)(checked),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => (0, vue.isRef)(checked) ? checked.value = $event : null),
"validate-event": false,
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).is("filterable", __props.filterable), (0, vue.unref)(ns).be("panel", "list")])
}, {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(filteredData), (item) => {
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$3.ElCheckbox), {
key: item[(0, vue.unref)(propsAlias).key],
class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "item")),
value: item[(0, vue.unref)(propsAlias).key],
disabled: item[(0, vue.unref)(propsAlias).disabled],
"validate-event": false
}, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)(OptionContent, { option: __props.optionRender?.(item) }, null, 8, ["option"])]),
_: 2
}, 1032, [
"class",
"value",
"disabled"
]);
}), 128))]),
_: 1
}, 8, ["modelValue", "class"]), [[vue.vShow, !hasNoMatch.value && !(0, vue.unref)(require_types.isEmpty)(__props.data)]]),
(0, vue.withDirectives)((0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "empty")) }, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(hasNoMatch.value ? (0, vue.unref)(t)("el.transfer.noMatch") : (0, vue.unref)(t)("el.transfer.noData")), 1)])], 2), [[vue.vShow, hasNoMatch.value || (0, vue.unref)(require_types.isEmpty)(__props.data)]])
], 2),
hasFooter.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", {
key: 0,
class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("panel", "footer"))
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)) : (0, vue.createCommentVNode)("v-if", true)
], 2);
};
}
});
//#endregion
exports.default = transfer_panel_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=transfer-panel.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_transfer_panel_vue_vue_type_script_setup_true_lang = require('./transfer-panel.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/transfer/src/transfer-panel.vue
var transfer_panel_default = require_transfer_panel_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = transfer_panel_default;
//# sourceMappingURL=transfer-panel2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"transfer-panel2.js","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 generic=\"T extends TransferDataItem = TransferDataItem\">\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 { TransferDataItem } from './transfer'\nimport type { TransferPanelProps, TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n name: 'ElTransferPanel',\n})\n\nconst props = withDefaults(defineProps<TransferPanelProps<T>>(), {\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,134 @@
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 { ComponentInstance, ExtractPublicPropTypes, VNode, h } from "vue";
import { ComponentExposed } from "vue-component-type-helpers";
//#region ../../packages/components/transfer/src/transfer.d.ts
type TransferKey = string | number;
type TransferDirection = 'left' | 'right';
type TransferDataItem = Record<string, any>;
type renderContent<T extends TransferDataItem = TransferDataItem> = (h: typeof h, option: T) => 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<T extends TransferDataItem = TransferDataItem> {
/**
* @description data source
*/
data?: T[];
/**
* @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: T) => 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<T>;
/**
* @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<TransferDataItem>>;
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 = ComponentInstance<typeof _default> & ComponentExposed<typeof _default>;
//#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,84 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_typescript = require('../../../utils/typescript.js');
let lodash_unified = require("lodash-unified");
let _vue_shared = require("@vue/shared");
//#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 = require_runtime$1.buildProps({
data: {
type: require_runtime$1.definePropType(Array),
default: () => []
},
titles: {
type: require_runtime$1.definePropType(Array),
default: () => []
},
buttonTexts: {
type: require_runtime$1.definePropType(Array),
default: () => []
},
filterPlaceholder: String,
filterMethod: { type: require_runtime$1.definePropType(Function) },
leftDefaultChecked: {
type: require_runtime$1.definePropType(Array),
default: () => []
},
rightDefaultChecked: {
type: require_runtime$1.definePropType(Array),
default: () => []
},
renderContent: { type: require_runtime$1.definePropType(Function) },
modelValue: {
type: require_runtime$1.definePropType(Array),
default: () => []
},
format: {
type: require_runtime$1.definePropType(Object),
default: () => ({})
},
filterable: Boolean,
props: {
type: require_runtime$1.definePropType(Object),
default: () => require_typescript.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(_vue_shared.isArray) || (0, _vue_shared.isArray)(value) && (0, lodash_unified.isNil)(movedKeys);
const transferEmits = {
[require_event.CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(_vue_shared.isArray) && ["left", "right"].includes(direction),
[require_event.UPDATE_MODEL_EVENT]: (value) => (0, _vue_shared.isArray)(value),
[LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
[RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn
};
//#endregion
exports.LEFT_CHECK_CHANGE_EVENT = LEFT_CHECK_CHANGE_EVENT;
exports.RIGHT_CHECK_CHANGE_EVENT = RIGHT_CHECK_CHANGE_EVENT;
exports.transferCheckedChangeFn = transferCheckedChangeFn;
exports.transferEmits = transferEmits;
exports.transferProps = transferProps;
//# sourceMappingURL=transfer.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,40 @@
import { TransferDataItem, TransferDirection, TransferKey, TransferProps } from "./transfer.js";
import { TransferPanelInstance } from "./transfer-panel.js";
import * as vue from "vue";
import { VNode } from "vue";
//#region ../../packages/components/transfer/src/transfer.vue.d.ts
declare const __VLS_export: <T extends TransferDataItem = TransferDataItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
props: vue.PublicProps & __VLS_PrettifyLocal<TransferProps<T> & {
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;
}> & (typeof globalThis extends {
__VLS_PROPS_FALLBACK: infer P;
} ? P : {});
expose: (exposed: vue.ShallowUnwrapRef<{
/** @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>;
}>) => void;
attrs: any;
slots: {
default?: (props: {
option: T;
}) => VNode[];
'left-empty'?: () => VNode[];
'left-footer'?: () => VNode[];
'right-empty'?: () => VNode[];
'right-footer'?: () => VNode[];
};
emit: ((event: "change", value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => void) & ((event: "update:modelValue", value: TransferKey[]) => void) & ((event: "left-check-change", value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void) & ((event: "right-check-change", value: TransferKey[], movedKeys?: TransferKey[] | undefined) => void);
}>) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> & {
__ctx?: Awaited<typeof __VLS_setup>;
};
declare const _default: typeof __VLS_export;
type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
//#endregion
export { _default };
@@ -0,0 +1,169 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_error = require('../../../utils/error.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../icon/index.js');
const require_use_form_item = require('../../form/src/hooks/use-form-item.js');
const require_index$3 = require('../../button/index.js');
const require_transfer = require('./transfer.js');
const require_use_props_alias = require('./composables/use-props-alias.js');
const require_use_checked_change = require('./composables/use-checked-change.js');
const require_use_computed_data = require('./composables/use-computed-data.js');
const require_use_move = require('./composables/use-move.js');
const require_transfer_panel = require('./transfer-panel2.js');
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let vue = require("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__ */ (0, vue.defineComponent)({
name: "ElTransfer",
__name: "transfer",
props: require_transfer.transferProps,
emits: require_transfer.transferEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const slots = (0, vue.useSlots)();
const { t } = require_index.useLocale();
const ns = require_index$1.useNamespace("transfer");
const { formItem } = require_use_form_item.useFormItem();
const checkedState = (0, vue.reactive)({
leftChecked: [],
rightChecked: []
});
const propsAlias = require_use_props_alias.usePropsAlias(props);
const { sourceData, targetData } = require_use_computed_data.useComputedData(props);
const { onSourceCheckedChange, onTargetCheckedChange } = require_use_checked_change.useCheckedChange(checkedState, emit);
const { addToLeft, addToRight } = require_use_move.useMove(props, checkedState, emit);
const leftPanel = (0, vue.ref)();
const rightPanel = (0, vue.ref)();
const clearQuery = (which) => {
switch (which) {
case "left":
leftPanel.value.query = "";
break;
case "right":
rightPanel.value.query = "";
break;
}
};
const hasButtonTexts = (0, vue.computed)(() => props.buttonTexts.length === 2);
const leftPanelTitle = (0, vue.computed)(() => props.titles[0] || t("el.transfer.titles.0"));
const rightPanelTitle = (0, vue.computed)(() => props.titles[1] || t("el.transfer.titles.1"));
const panelFilterPlaceholder = (0, vue.computed)(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
(0, vue.watch)(() => props.modelValue, () => {
if (props.validateEvent) formItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
});
const optionRender = (0, vue.computed)(() => (option) => {
if (props.renderContent) return props.renderContent(vue.h, option);
const defaultSlotVNodes = (slots.default?.({ option }) || []).filter((node) => node.type !== vue.Comment);
if (defaultSlotVNodes.length) return defaultSlotVNodes;
return (0, vue.h)("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
});
__expose({
clearQuery,
leftPanel,
rightPanel
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()) }, [
(0, vue.createVNode)(require_transfer_panel.default, {
ref_key: "leftPanel",
ref: leftPanel,
data: (0, vue.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: (0, vue.unref)(onSourceCheckedChange)
}, {
empty: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "left-empty")]),
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "left-footer")]),
_: 3
}, 8, [
"data",
"option-render",
"placeholder",
"title",
"filterable",
"format",
"filter-method",
"default-checked",
"props",
"onCheckedChange"
]),
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("buttons")) }, [(0, vue.createVNode)((0, vue.unref)(require_index$3.ElButton), {
type: "primary",
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("button"), (0, vue.unref)(ns).is("with-texts", hasButtonTexts.value)]),
disabled: (0, vue.unref)(require_types.isEmpty)(checkedState.rightChecked),
onClick: (0, vue.unref)(addToLeft)
}, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowLeft))]),
_: 1
}), !(0, vue.unref)(require_types.isUndefined)(__props.buttonTexts[0]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, (0, vue.toDisplayString)(__props.buttonTexts[0]), 1)) : (0, vue.createCommentVNode)("v-if", true)]),
_: 1
}, 8, [
"class",
"disabled",
"onClick"
]), (0, vue.createVNode)((0, vue.unref)(require_index$3.ElButton), {
type: "primary",
class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("button"), (0, vue.unref)(ns).is("with-texts", hasButtonTexts.value)]),
disabled: (0, vue.unref)(require_types.isEmpty)(checkedState.leftChecked),
onClick: (0, vue.unref)(addToRight)
}, {
default: (0, vue.withCtx)(() => [!(0, vue.unref)(require_types.isUndefined)(__props.buttonTexts[1]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, (0, vue.toDisplayString)(__props.buttonTexts[1]), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(require_index$2.ElIcon), null, {
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowRight))]),
_: 1
})]),
_: 1
}, 8, [
"class",
"disabled",
"onClick"
])], 2),
(0, vue.createVNode)(require_transfer_panel.default, {
ref_key: "rightPanel",
ref: rightPanel,
data: (0, vue.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: (0, vue.unref)(onTargetCheckedChange)
}, {
empty: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "right-empty")]),
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "right-footer")]),
_: 3
}, 8, [
"data",
"option-render",
"placeholder",
"filterable",
"format",
"filter-method",
"title",
"default-checked",
"props",
"onCheckedChange"
])
], 2);
};
}
});
//#endregion
exports.default = transfer_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=transfer.vue_vue_type_script_setup_true_lang.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_transfer_vue_vue_type_script_setup_true_lang = require('./transfer.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/transfer/src/transfer.vue
var transfer_default = require_transfer_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = transfer_default;
//# sourceMappingURL=transfer2.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require('../../input/style/css.js');
require('../../button/style/css.js');
require('../../checkbox/style/css.js');
require('../../checkbox-group/style/css.js');
require("element-plus/theme-chalk/el-transfer.css");
@@ -0,0 +1,7 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require('../../input/style/index.js');
require('../../button/style/index.js');
require('../../checkbox/style/index.js');
require('../../checkbox-group/style/index.js');
require("element-plus/theme-chalk/src/transfer.scss");