hongluan-ui
Version:
Hongluan Component Library for Vue 3
201 lines (196 loc) • 8.81 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var index$3 = require('../../group/index.js');
var index$4 = require('../../button/index.js');
var index$5 = require('../../icon/index.js');
require('../../system-icon/index.js');
var transfer = require('./transfer.js');
require('./composables/index.js');
var transferPanel = require('./transfer-panel.js');
var index = require('../../../hooks/use-locale/index.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var index$2 = require('../../../hooks/use-form-item/index.js');
var usePropsAlias = require('./composables/use-props-alias.js');
var useComputedData = require('./composables/use-computed-data.js');
var useMove = require('./composables/use-move.js');
var useCheckedChange = require('./composables/use-checked-change.js');
var form = require('../../../tokens/form.js');
var error = require('../../../utils/error.js');
var types = require('../../../utils/types.js');
var arrowLeft = require('../../system-icon/src/arrow-left.js');
var arrowRight = require('../../system-icon/src/arrow-right.js');
const __default__ = vue.defineComponent({
name: "Transfer"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: transfer.transferProps,
emits: transfer.transferEmits,
setup(__props, { expose, emit }) {
const props = __props;
const slots = vue.useSlots();
const { t } = index.useLocale();
const { namespace } = index$1.useNamespace("transfer");
const { formItem } = index$2.useFormItem();
const checkedState = vue.reactive({
leftChecked: [],
rightChecked: []
});
const propsAlias = usePropsAlias.usePropsAlias(props);
const { sourceData, targetData } = useComputedData.useComputedData(props);
const { addToLeft, addToRight } = useMove.useMove(props, checkedState, emit);
const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange.useCheckedChange(checkedState, emit, props, addToLeft, addToRight);
const leftPanel = vue.ref();
const rightPanel = vue.ref();
const clearQuery = (which) => {
switch (which) {
case "left":
leftPanel.value.query = "";
break;
case "right":
rightPanel.value.query = "";
break;
}
};
const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
const leftPanelTitle = vue.computed(() => props.titles[0] || t("hl.transfer.titles.0"));
const rightPanelTitle = vue.computed(() => props.titles[1] || t("hl.transfer.titles.1"));
const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("hl.transfer.filterPlaceholder"));
vue.watch(() => props.modelValue, () => {
var _a;
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, form.FormItemEvents.change).catch((err) => error.debugWarn(err));
}
});
const optionRender = vue.computed(() => (option) => {
if (props.renderContent)
return props.renderContent(vue.h, option);
if (slots.default)
return slots.default({ option });
return vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
});
expose({
clearQuery,
leftPanel,
rightPanel,
addToLeft,
addToRight
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(namespace),
!_ctx.showButtons ? "no-buttons" : "",
_ctx.block ? "block" : ""
]),
style: vue.normalizeStyle([
_ctx.gap ? `--transfer-gap: ${_ctx.gap}` : "",
_ctx.listGap ? `--transfer-list-gap: ${_ctx.listGap}` : "",
_ctx.itemGap ? `--transfer-item-gap: ${_ctx.itemGap}` : ""
])
}, [
vue.createVNode(transferPanel["default"], {
ref_key: "leftPanel",
ref: leftPanel,
mark: "left",
data: vue.unref(sourceData),
"option-render": vue.unref(optionRender),
placeholder: vue.unref(panelFilterPlaceholder),
title: vue.unref(leftPanelTitle),
filterable: _ctx.filterable,
format: _ctx.format,
"filter-method": _ctx.filterMethod,
"filter-props": _ctx.filterProps,
"confirm-method": _ctx.confirmMethod,
"default-checked": _ctx.leftDefaultChecked,
"show-buttons": _ctx.showButtons,
props: props.props,
onCheckedChange: vue.unref(onSourceCheckedChange)
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "left-footer")
]),
_: 3
}, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "filter-props", "confirm-method", "default-checked", "show-buttons", "props", "onCheckedChange"]),
vue.renderSlot(_ctx.$slots, "buttons", {}, () => [
_ctx.showButtons ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.HlGroup), {
key: 0,
align: "items-center",
dir: "vertical",
gap: "var(--md)",
class: "transfer-buttons"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$4.HlButton), {
class: vue.normalizeClass(["transfer-button", vue.unref(hasButtonTexts) ? "is-with-texts" : ""]),
disabled: vue.unref(types.isEmpty)(vue.unref(checkedState).rightChecked),
equal: !vue.unref(hasButtonTexts),
"icon-position": "left",
onClick: vue.unref(addToLeft)
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$5.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrowLeft["default"]))
]),
_: 1
}),
!vue.unref(types.isUndefined)(_ctx.buttonTexts[0]) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(_ctx.buttonTexts[0]), 1)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["class", "disabled", "equal", "onClick"]),
vue.createVNode(vue.unref(index$4.HlButton), {
class: vue.normalizeClass(["transfer-button", vue.unref(hasButtonTexts) ? "is-with-texts" : ""]),
disabled: vue.unref(types.isEmpty)(vue.unref(checkedState).leftChecked),
equal: !vue.unref(hasButtonTexts),
"icon-position": "right",
onClick: vue.unref(addToRight)
}, {
default: vue.withCtx(() => [
!vue.unref(types.isUndefined)(_ctx.buttonTexts[1]) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(_ctx.buttonTexts[1]), 1)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(index$5.HlIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrowRight["default"]))
]),
_: 1
})
]),
_: 1
}, 8, ["class", "disabled", "equal", "onClick"])
]),
_: 1
})) : vue.createCommentVNode("v-if", true)
]),
vue.createVNode(transferPanel["default"], {
ref_key: "rightPanel",
ref: rightPanel,
mark: "right",
data: vue.unref(targetData),
"option-render": vue.unref(optionRender),
placeholder: vue.unref(panelFilterPlaceholder),
filterable: _ctx.filterable,
format: _ctx.format,
"filter-method": _ctx.filterMethod,
"filter-props": _ctx.filterProps,
"confirm-method": _ctx.confirmMethod,
title: vue.unref(rightPanelTitle),
"default-checked": _ctx.rightDefaultChecked,
"show-buttons": _ctx.showButtons,
props: props.props,
onCheckedChange: vue.unref(onTargetCheckedChange)
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "right-footer")
]),
_: 3
}, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "filter-props", "confirm-method", "title", "default-checked", "show-buttons", "props", "onCheckedChange"])
], 6);
};
}
});
exports["default"] = _sfc_main;
//# sourceMappingURL=transfer2.js.map