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