You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

0 lines
8.1 KiB

3 months ago
  1. {"version":3,"file":"transfer2.mjs","sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n <div :class=\"ns.b()\">\n <transfer-panel\n ref=\"leftPanel\"\n :data=\"sourceData\"\n :option-render=\"optionRender\"\n :placeholder=\"panelFilterPlaceholder\"\n :title=\"leftPanelTitle\"\n :filterable=\"filterable\"\n :format=\"format\"\n :filter-method=\"filterMethod\"\n :default-checked=\"leftDefaultChecked\"\n :props=\"props.props\"\n @checked-change=\"onSourceCheckedChange\"\n >\n <template #empty>\n <slot name=\"left-empty\" />\n </template>\n <slot name=\"left-footer\" />\n </transfer-panel>\n <div :class=\"ns.e('buttons')\">\n <el-button\n type=\"primary\"\n :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n :disabled=\"isEmpty(checkedState.rightChecked)\"\n @click=\"addToLeft\"\n >\n <el-icon><arrow-left /></el-icon>\n <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n </el-button>\n <el-button\n type=\"primary\"\n :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n :disabled=\"isEmpty(checkedState.leftChecked)\"\n @click=\"addToRight\"\n >\n <span v-if=\"!isUndefined(buttonTexts[1])\">{{ buttonTexts[1] }}</span>\n <el-icon><arrow-right /></el-icon>\n </el-button>\n </div>\n <transfer-panel\n ref=\"rightPanel\"\n :data=\"targetData\"\n :option-render=\"optionRender\"\n :placeholder=\"panelFilterPlaceholder\"\n :filterable=\"filterable\"\n :format=\"format\"\n :filter-method=\"filterMethod\"\n :title=\"rightPanelTitle\"\n :default-checked=\"rightDefaultChecked\"\n :props=\"props.props\"\n @checked-change=\"onTargetCheckedChange\"\n >\n <template #empty>\n <slot name=\"right-empty\" />\n </template>\n <slot name=\"right-footer\" />\n </transfer-panel>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Comment, computed, h, reactive, ref, useSlots, watch } from 'vue'\nimport { debugWarn, isEmpty, isUndefined } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useFormItem } from '@element-plus/components/form'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { transferEmits, transferProps } from './transfer'\nimport {\n useCheckedChange,\n useComputedData,\n useMove,\n usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type {\n TransferCheckedState,\n TransferDataItem,\n TransferDirection,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\ndefineOptions({\n name: 'ElTransfer',\n})\n\nconst props = defineProps(transferProps)\nconst emit = defineEmits(transferEmits)\nconst slots = useSlots()\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n leftChecked: [],\n rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n checkedState,\n emit\n)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n switch (which) {\n case 'left':\n leftPanel.value!.query = ''\n break\n case 'right':\n rightPanel.value!.query = ''\n break\n }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n () => props.titles[0] || t('el.transfer.titles.0')\n)\n\nc