tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
99 lines (98 loc) • 3.15 kB
JavaScript
import { defineComponent, reactive, toRefs, openBlock, createElementBlock, createVNode, unref, createElementVNode, withCtx, createTextVNode } from "vue";
import "../../../theme-chalk/src/transfer.scss.mjs";
import _sfc_main$1 from "./transferItem.vue.mjs";
import _sfc_main$2 from "../../button/src/button.vue.mjs";
import { useComponentData } from "./composables/use-component-data.mjs";
const _hoisted_1 = { class: "tas-transfer" };
const _hoisted_2 = { class: "tas-transfer__buttons" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "transfer",
props: {
data: {
type: Array,
default: () => []
},
props: {
type: Object
},
modelValue: {
type: Array
}
},
emits: ["update:modelValue"],
setup(__props, { emit }) {
const props = __props;
let checkState = reactive({
leftState: [],
rightState: []
});
const { leftState, rightState } = toRefs(checkState);
const sourceCheckChange = (leftVal) => {
checkState.leftState = leftVal;
};
const targetCheckChange = (rightVal) => {
checkState.rightState = rightVal;
};
const leftClick = () => {
var _a;
let curVal = (_a = props.modelValue) == null ? void 0 : _a.slice(0);
checkState.rightState.forEach((item) => {
let index = curVal == null ? void 0 : curVal.indexOf(item);
if (index > -1) {
curVal == null ? void 0 : curVal.splice(index, 1);
}
});
emit("update:modelValue", curVal);
};
const rightClick = () => {
var _a;
let curVal = (_a = props.modelValue) == null ? void 0 : _a.slice(0);
curVal = curVal == null ? void 0 : curVal.concat(checkState.leftState);
emit("update:modelValue", curVal);
};
let { sourceData, targetData } = useComponentData(props);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_sfc_main$1, {
data: unref(sourceData),
props,
onCheckChange: sourceCheckChange
}, null, 8, ["data", "props"]),
createElementVNode("div", _hoisted_2, [
createVNode(_sfc_main$2, {
type: "primary",
icon: "tas-icon-chevronleft",
size: "small",
onClick: leftClick,
disabled: unref(rightState).length === 0
}, {
default: withCtx(() => [
createTextVNode(" To Left ")
]),
_: 1
}, 8, ["disabled"]),
createVNode(_sfc_main$2, {
type: "primary",
icon: "tas-icon-chevronright",
size: "small",
onClick: rightClick,
disabled: unref(leftState).length === 0
}, {
default: withCtx(() => [
createTextVNode(" To Right ")
]),
_: 1
}, 8, ["disabled"])
]),
createVNode(_sfc_main$1, {
data: unref(targetData),
props,
onCheckChange: targetCheckChange
}, null, 8, ["data", "props"])
]);
};
}
});
export {
_sfc_main as default
};