UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.39 kB
{"version":3,"file":"transfer-panel2.mjs","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n <div :class=\"ns.b('panel')\">\n <p :class=\"ns.be('panel', 'header')\">\n <el-checkbox\n v-model=\"allChecked\"\n :indeterminate=\"isIndeterminate\"\n @change=\"handleAllCheckedChange\"\n >\n {{ title }}\n <span>{{ checkedSummary }}</span>\n </el-checkbox>\n </p>\n\n <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n <el-input\n v-if=\"filterable\"\n v-model=\"query\"\n :class=\"ns.be('panel', 'filter')\"\n size=\"default\"\n :placeholder=\"placeholder\"\n :prefix-icon=\"Search\"\n clearable\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n />\n <el-checkbox-group\n v-show=\"!hasNoMatch && !isEmpty(data)\"\n v-model=\"checked\"\n :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n >\n <el-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[propsAlias.key]\"\n :class=\"ns.be('panel', 'item')\"\n :label=\"item[propsAlias.key]\"\n :disabled=\"item[propsAlias.disabled]\"\n >\n <option-content :option=\"optionRender?.(item)\" />\n </el-checkbox>\n </el-checkbox-group>\n <p v-show=\"hasNoMatch || isEmpty(data)\" :class=\"ns.be('panel', 'empty')\">\n {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n </p>\n </div>\n <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n <slot />\n </p>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElInput } from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { transferPanelEmits, transferPanelProps } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n name: 'ElTransferPanel',\n})\n\nconst props = defineProps(transferPanelProps)\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option: VNode | VNode[] }) => option\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\n\nconst panelState = reactive<TransferPanelState>({\n checked: [],\n allChecked: false,\n query: '',\n inputHover: false,\n checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n () => !isEmpty(panelState.query) && isEmpty(filteredData.value)\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\n\nconst { checked, allChecked, query, inputHover } = toRefs(panelState)\n\ndefineExpose({\n /** @description filter keyword */\n query,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqEA,IAAA,MAAA,QAAA,QAAA,EAAA,CAAA;AAEA,IAAA,MAAA,aAAA,GAAA,CAAA,EAAA,MAAA,EAAA,KAAA,MAAA,CAAA;AAEA,IAAA,MAAA,EAAA,MAAA,SAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,aAAA,QAAA,CAAA;AAAA,MACA,SAAA,EAAA;AAAA,MACA,UAAA,EAAA,KAAA;AAAA,MACA,KAAA,EAAA,EAAA;AAAA,MACA,UAAA,EAAA,KAAA;AAAA,MACA,iBAAA,EAAA,IAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,UAAA,GAAA,cAAA,KAAA,CAAA,CAAA;AAEA,IAAA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,sBAAA;AAAA,KACA,GAAA,QAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,CAAA;AAEA,IAAA,MAAA,UAAA,GAAA,QACA,CAAA,MAAA,CAAA,OAAA,CAAA,UAAA,CAAA,KAAA,CAAA,IAAA,OAAA,CAAA,YAAA,CAAA,KAAA,CACA,CAAA,CAAA;AAEA,IAAA,MAAA,SAAA,GAAA,QAAA,CAAA,MAAA,CAAA,OAAA,CAAA,MAAA,OAAA,EAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA;AAEA,IAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,KAAA,EAAA,UAAA,EAAA,GAAA,OAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,CAAA;AAAA,MAEA,KAAA;AAAA,KACA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}