73 lines
3.2 KiB
JavaScript
73 lines
3.2 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
const vue_1 = require("vue");
|
|
const vooks_1 = require("vooks");
|
|
const checkbox_1 = require("../../checkbox");
|
|
const _utils_1 = require("../../_utils");
|
|
const _internal_1 = require("../../_internal");
|
|
const interface_1 = require("./interface");
|
|
exports.default = (0, vue_1.defineComponent)({
|
|
name: 'NTransferListItem',
|
|
props: {
|
|
source: Boolean,
|
|
label: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
required: true
|
|
},
|
|
disabled: Boolean,
|
|
option: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const { targetValueSetRef, mergedClsPrefixRef, mergedThemeRef, handleItemCheck, renderSourceLabelRef, renderTargetLabelRef, showSelectedRef
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
} = (0, vue_1.inject)(interface_1.transferInjectionKey);
|
|
const checkedRef = (0, vooks_1.useMemo)(() => targetValueSetRef.value.has(props.value));
|
|
function handleClick() {
|
|
if (!props.disabled) {
|
|
handleItemCheck(!checkedRef.value, props.value);
|
|
}
|
|
}
|
|
return {
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
mergedTheme: mergedThemeRef,
|
|
checked: checkedRef,
|
|
showSelected: showSelectedRef,
|
|
renderSourceLabel: renderSourceLabelRef,
|
|
renderTargetLabel: renderTargetLabelRef,
|
|
handleClick
|
|
};
|
|
},
|
|
render() {
|
|
const { disabled, mergedTheme, mergedClsPrefix, label, checked, source, renderSourceLabel, renderTargetLabel } = this;
|
|
return ((0, vue_1.h)("div", { class: [
|
|
`${mergedClsPrefix}-transfer-list-item`,
|
|
disabled && `${mergedClsPrefix}-transfer-list-item--disabled`,
|
|
source
|
|
? `${mergedClsPrefix}-transfer-list-item--source`
|
|
: `${mergedClsPrefix}-transfer-list-item--target`
|
|
], onClick: source ? this.handleClick : undefined },
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-item__background` }),
|
|
source && this.showSelected && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-item__checkbox` },
|
|
(0, vue_1.h)(checkbox_1.NCheckbox, { theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, disabled: disabled, checked: checked }))),
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-item__label`, title: (0, _utils_1.getTitleAttribute)(label) }, source
|
|
? renderSourceLabel
|
|
? renderSourceLabel({
|
|
option: this.option
|
|
})
|
|
: label
|
|
: renderTargetLabel
|
|
? renderTargetLabel({
|
|
option: this.option
|
|
})
|
|
: label),
|
|
!source && !disabled && ((0, vue_1.h)(_internal_1.NBaseClose, { focusable: false, class: `${mergedClsPrefix}-transfer-list-item__close`, clsPrefix: mergedClsPrefix, onClick: this.handleClick }))));
|
|
}
|
|
});
|